ES6语法基础

Posted 2021-03-01 article-record

let

ES6中新增的用于声明变量的关键字

• let 声明的变量只有在处于的块级作用域中有效（大括号中）

• 防止循环变量变成全局变量 比如for循环中的 i

• 不存在变量提升

• 暂时性死区特性

  • var num = 10;
    if (true) {
        console.log(num); // 此时并不会向上级作用域查找而是会报错，
        let num = 20; // 只要在块级作用域用let关键字声明了变量，这个变量就会和这个块级作用域做绑定
    }
    

const

作用：声明常量，常量的值（内存地址）不能变化的值

• 具有块级作用域
• const 声明常量必须需要赋一个初始值 const PI; 是不被允许的
• 常量声明后不可更改，实际是内存地址不可更改（引用数据类型可以修改，注意不是重新赋值）

var let const 的区别

1， 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升

2， 使用let声明的变量，其作用域为该语句所在的代码块中，不存在变量提升

3， 使用const声明的常量，在后面出现的代码中不能再修改常量的值

结构赋值

在ES6中，可以按照一定的模式，从数组或对象中提取值，将提取出来的值赋值给另外一个变量

数组结构赋值

let [a, b, c] = [1, 2, 3]; // 相当于 let a = 1； let b = 2; ...
let [a, b] = [1, 2, 3]; // 如果接受对象少的话，就只赋值前面的那几个
let [a, b, c] = [1, 2]; // 如果传递的值少的话，剩余的接受值为 undefined

对象结构赋值

// 变量名匹配属性值
let {score, name, age} = {name: ‘zs‘, age: 23, score: ‘js‘}; //变量名字和对象属性进行匹配，匹配到的属性值赋值给响应的变量
// 如果接收值缺少的话，还是根据名称匹配
// 如果接受收值多的话，没有匹配到的值为 undefined

// 属性值匹配属性值
let {score: myScore, age: myAge, name: myName} = {age: 23, score: ‘css‘, name: ‘zs‘}; // 根据属性匹配到对应的属性，属性值存储对应的属性值，属性值才是变量
// 如果接收值缺少的话，还是根据名称匹配
// 如果接受收值多的话，没有匹配到的值为 undefined

箭头函数

() => {}
// 通常会将箭头函数赋值给一个变量
const fn = () => {}
// 函数体只有一句代码，且代码的执行结果就是返回值，可以省略大括号
const sum = (n1, n2) => return n1 + n2;
// 如果形参只有 形参外部的小括号也可以省略
const fn = arg => return arg;

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

btn.onclick = function () {
    console.log(this) // btn这个元素
    setTimeout(function () {
        console.log(this) // window
    })
    setTimeout(() => console.log(this)) // 因为使用箭头函数，此时定时器内部的this也是指向 btn这个元素的 
}

剩余参数

// es6之前如果不确定传入多少个参数的时候，通常使用arguments来接收，但是在es6中可以使用剩余参数来接收
const sum = (...args) => {
    console.log(args); // args 是一个数组
    let total = 0;
    args.forEach(item => total += item)
    return total;
}
// 剩余参数和结构赋值结合使用
let [arg1, ...args] = [‘red‘, ‘pink‘, ‘blue‘];
console.log(arg1); // red
console.log(args); // [‘pink‘, ‘blue‘];

拓展运算符

// 拆分数组
let arr = [1, 2, 3];
let arr1 = [4, 5, 6];
console.log(...arr); // 相当于 1, 2, 3 但是打印的时候 会把逗号作为分隔符给去掉
// 合并数组
let newArr = [...arr, ...arr1];
arr.push(...arr1); // push的返回值是新数组的length push会修改原数组
// 伪数组转换为数组
let btns = document.querySelectorAll(‘button‘); // 此时的btns是一个伪数组
arrBtn = [...btns]; // 此时就转换为了真正的数组

数组拓展方法

// from() 伪数组转换为数组，第二个参数为数组的每一项，返回处理后的数组; 整体返回一个新的数组
let arr = [1, 2, 3];
let newArr = Array.from(arr, item => {
    return arr * 2
}); // [2, 4, 6]

// find() 用于找出第一个符合条件的数组成员，如果没有找到返回undefined；整体返回的复合条件的项
let arr = [{id: 1, name: ‘zs‘}, {id: 2, name: ‘ls‘}, {id: 3, name:‘we‘}]
let newArr = arr.find((item, index) => {
  return item.id == 2; // {id: 2, name: ‘ls‘}
})
// findIndex() 用于找出第一个复合条件的索引，只查找第一个，如果没有返回-1
let newArr = arr.findIndex((item, index) => {
    return item.id > 2; // 返回索引值 2
})
// includes() 表示某个数组是否包含给定的值，返回布尔值
let res = [1, 2, 3].includes(1); // true
let res = [1, 2, 3].includes(4); // false

模板字符串

let name = ‘zs‘;
let str = `hello my name is ${name}`;
let result = `
	<div>
		模板字符串支持换行${name}	
	</div>
`;
let fn = `${sayHi()}`; // 模板字符串支持调用函数，执行的是函数的返回值

字符串拓展方法

let str = ‘hello world‘;
var newStr = str.startsWith(‘hello‘); // startsWidth() 判断是否以某个字符串开头 返回 布尔值
var newStr = str.endsWith(‘world!‘); // endsWith() 判断是否以某个字符串结尾 返回布尔值

// repeat() 表示将原字符串重复n次，返回一个新的字符串
let str = ‘zs‘.repeat(2); // ‘zszs‘;

set 数据结构

ES6 新增的数据结构，类似于数组，但是其中的成员是唯一的，没有重复的值

set本身是一个构造函数，用来生成set数据结构

const s = new Set(); // 空set 
console.log(s.size); // 返回set的长度
const s = new Set([1, 2, 3, 3]); // 如果传递进去有重复的值，会过滤掉

// 利用set做数组去重
let arr = [];
let set = new Set([1, 2, 3, 4, 4]);
arr.push(...set); // 此时数组中就没有重复的值了

set实例方法

const set = new Set();
let s1 = set.add(‘red‘); // 添加某个值，返回数据结构本身
let s2 = set.delete(‘red‘); // 删除某个值，返回一个布尔值，表示是否删除成功
let s3 = set.has(‘red‘); // 返回一个布尔值，表示这个值是否为set成员
set.clear(); // 没有返回值，清空set

// 遍历set 使用forEach 方法 注意这里的forEach只接收item 不接收索引
const s = new Set([‘red‘, ‘pink‘, ‘blue‘]);
s.forEach((item) => {
    console.log(item + ‘-‘)
})