ES6核心特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/moyingrenlike/article/details/117340424

声明变量、常量关键字

let关键字：
特性：1.具有块级作用域（就是花括号里的区域{}）
2.没有声明提升
3.有暂时性死区的特性：在调用一个变量时，如果该块级作用域中用let关键字声明了该变量，就不会再去上层作用域中查找该变量，无论调用是否在声明之前；

const关键字：
特性：1.具有块级作用域
2.没有声明提升
3.有暂时性死去的特性
4.声明的时候必须赋值（因为第5点）
5.不允许更改常量在栈中的值

解构

数组解构：
作用：解析数组，把数组中的元素同时赋值给多个变量

let [变量1,变量2,,变量4] = 数组; // 中间的空位会将数组中对应索引的数据跳过

特点：如果变量的个数多于数组数据的个数，多出来的变量得不到值，所以值就会是undefined；
变量的个数小于数组的个数，数组多出的元素不赋值，变量按顺序依次赋值；

对象解构：
基本于数组解构相同
语法：

let person = {
	uname: '李四',
	age: 30,
	sex: '男'
}
let {uname: demo, age,sex} = person;

赋值时会在对象中查找 : 前面的名称与属性匹配，如果 :后面有名称，则后面的名称为变量名，如果没有，则自身就是变量名；

箭头函数

语法：

函数名 = (形参) => {
	函数语句;
};
// 如果函数参数只有一个，可以省略小括号，如果函数内部只有一句return出来的代码，可以省略return和花括号 写为下面这种形式
函数名 = 形参 => 返回值;

箭头函数中的this指向
箭头函数中的this指向被定义时的函数作用域中的this；
箭头函数中的this不可以通过任何方式修改（即使bind、call、apply也不能修改）

箭头函数和普通函数的区别

剩余参数

函数中使用：函数定义的代码中，使用...名称来接受剩余的未被前面接收的参数；（剩余参数必须写在最后）
数组解构中使用：定义一个变量结构未被接受的元素，该变量会被赋值为一个数组；

let [s1,...s2] = [1,2,3,4,5];
// 输出 s1 == 1; s2 == [2,3,4,5];

对象解构中使用：定义一个变量结构未被接受的属性，改变量会被赋值为一个对象；

let {name:myName,...s2} = {
	name:"小明",
	age:20,
	sex:"男"
};

// 输出 myName == "小明";  s2 == {age:20,sex:"男"}

扩展运算符
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

let ary = [1, 2, 3];
...ary // 1, 2, 3
console.log(...ary); // 1 2 3
console.log(1, 2, 3)

扩展运算符可以用来合并数组

// 方法一
let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
let ary3 = [...ary1, ...ary2];
// 方法二
ary1.push(...ary2);

将伪数组或可遍历对象转换为真正的数组

let oDivs = document.getElementsByTagName('div');
oDivs = [...oDivs];

Set

与数组类似，但是没有重复的元素

创建set数据
new Set(数组); 得到一个set结构的数据；如果有重复的元素，会自动去除；

set的几种方法：
1.set数据.add(新数据) 将新数据插入到set数据中，返回值是set数据本身；因为返回值是自身，所以可链式编程；
2.set数据.delete(数据) 移除set中的数据，返回值是布尔值，表示是否删除成功；
3.set数据.has(数据) 判断set中是否含有指定数据，返回值是布尔值；
4.set数据.clear() 清空set，无返回值；

var s1 = new Set([1, 2, 4, 5, 1, 2, 3, 5]);
        console.log(s1); // {1, 2, 4, 5, 3}
        console.log(s1.size); // 5 相当于数组的length
        s1 = s1.add(6);
        console.log(s1); // {1, 2, 4, 5, 3, 6}
        var flag1 = s1.delete(3);
        console.log(flag1); // true
        var flag2 = s1.has(1);
        console.log(flag2); // true
        s1.clear();
        console.log(s1); // {}