【笔记】ES6的新特性

ES全称是ECAMScript，它是由ECAM国际标准化组织制定的一项脚本语言的标准化规范
从ES5之后的更新，从2015年6月开始每1年更新1次，，如2015年6月的版本为ES2015，这之后的版本统称为ES6

let关键字

• let声明的变量是块级变量，只有处于当前的块级有效，可以防止循环内的变量变成全局变量

let 变量名 = 值
if () {
    let 变量名 = 值
    console.log(变量名);
}
console.log(变量名);

• 如果在一个块级中声明了一个变量，声明的变量没有变量提升，必须先声明再使用

var 变量名 = 值
if () {
    // 变量名 = 值
    let 变量名 = 值
}

const关键字

• const关键字声明的常量是块级常量，只有处于当前的块级有效
• 声明常量时必须赋初始值
• 对于简单数据类型，常量值不能被再次修改；对于复杂数据类型，其内部的值可以被修改，但是不可以修改其内存地址

const 变量名 = 值
if () {
    const 变量名 = 值
    console.log(变量名);
}
console.log(变量名);

• 解构赋值（分解数据结构重新赋值）可以从数组或对象中提取值，然后一一赋值给变量

• 通过数组的元素个数进行解构匹配

let arr = [1, 2];
let a = 0;
let b = 0;
let [a, b] = arr;

• 如果解构的变量个数大于被结构的数组值个数，那么多出来的变量值为undefined

let arr = [1, 2];
let a = 0;
let b = 0;
let c = 0;
let [a, b, c] = arr;

• 通过与对象相同的属性名的变量进行解构匹配

let obj = {
    k1: 1,
    k2: 2
};
let k1 = 0;
let k2 = 0;
let {k1, k2} = obj;

• 通过与对象不同的属性名的变量进行解构匹配

k1、k2：只用于属性名匹配
k3、k4：变量的真实名称

let obj = {k1: 1, k2: 2};
let k3 = 0;
let k4 = 0;
let {k1: k3, k2: k4} = obj;

const 函数名 = (形参列表) => {
    ...
};

• 如果形参只有1个，可以省略小括号

const 函数名 = 形参 => {
    ...
};

• 如果函数体只有1个语句且为返回值，可以省略大括号

const 函数名 = (形参列表) => 返回值;

this关键字

• 箭头函数没有自己的this，箭头函数中调用的this指向的是箭头函数定义时的上下文的this

function 函数名() {
    console.log(this);
    return 形参 => {
        console.log(this);
    }
}

剩余参数（不定参）

• 将剩余参数组成一个数组作为形参传递给函数

function 函数名(...args) {
    let args[0] = 0;
}

剩余参数在解构赋值的应用

• 如果解构的变量个数小于被结构的数组值个数，那么多出来的值会被剩余参数作为数组接收

let arr = [1, 2, 3];
let a = 0;
let b = 0;
let [a, ...b] = arr;
b[0] = 3;

• 将一个数组转换成一组用逗号分隔的参数序列

let arr = [1, 2];
function 函数名(a, b) {}
函数名(...arr);

在合并数组的应用

let arr1 = [1, 2]
let arr2 = [1, 2]
let arr3 = [...arr1, ...arr2]

let arr1 = [1, 2]
let arr2 = [1, 2]
let arr3 = []
arr3.push(...arr1)
arr3.push(...arr2)

将伪数组转换成真正的数组

let divs = document.getElementByTagNames("div");
divs = [...divs]

Array的扩展方法

将伪数组转换成真正的数组

let arr = {
    k1: 1,
    k2: 2
};
arr = Array.from(arr);

先进行处理再拼接为数组

• 第二个参数是一个回调函数，数组中有几个元素，回调函数就会执行几次，回调函数的返回值作为新的元素拼接到数组

let arr = {
    k1: 1,
    k2: 2
};
arr = Array.from(arr, function(item) {
    return item * 2
});

得到元素值

• 查找数组中第一个符合条件的元素
• 第二个参数是一个回调函数。根据查找条件，如果回调函数的返回值为true，就会立即将得到的符合条件的值返回；如果最终邺没有符合条件的值，就返回undefined

let arr = {
    k1: 1,
    k2: 2
};
let item = arr.find(function(item, index) {
    return 1
})

• 查找数组中第一个符合条件的元素
• 第二个参数是一个回调函数。根据查找条件，如果回调函数的返回值为true，就会立即将得到的符合条件的值的索引返回；如果最终邺没有符合条件的值，就返回-1

let arr = {
    k1: 1,
    k2: 2
};
let item = arr.findIndex(function(item, index) {
    return 1;
})

查找是否包含元素

• 查找数组中是否存在指定的元素。如果存在就返回true；如果不存在就返回false

let arr = {
    k1: 1,
    k2: 2
};
let exist = arr.includes(1)

模板字符串

• 通过反引号定义模板字符串
• 在模板字符串中可以使用${变量名}将变量的值拼接到字符串中

let 变量名 = 1
let str = `${变量名}`

• 在模板字符串中可以使用${函数名()}将函数执行后的返回值拼接到字符串中

let 函数名 = function() {
    return 1;
}
let str = `${函数名()}`

• 模板字符串可以存储换行符

let str = `
1
`

字符串的扩展方法

判断是否以指定子串开头

• 返回布尔值

let str = ""
let isStart = str.startsWith("子串");

判断是否以指定子串结尾

• 返回布尔值

let str = ""
let isEnd = str.endsWith("子串");

重复拼接字符串

• 将原字符串重复多次拼接为一个新的字符串

<num>：拼接的次数

let old = "";
let newStr = oldStr.repeat(<num>);

• Set类似于数组，但是Set数据结中不会存储相同的值

创建Set变量

创建一个空的Set

let Set变量名 = new Set();

将数组转换为Set

• 将数组转换为Set，达到数组去重的效果

let 数组名 = [];
let Set变量名 = new Set(数组名);

通过剩余参数将Set转换为数组

let 数组名 = [...Set变量名];

向Set中添加指定值

Set变量名.add(值);

• add()方法返回Set变量本身，所以可以使用链式编程添加多个值

Set变量名.add(值).add(值);

从Set中删除指定值

• 根据指定的值从Set中删除与之相同的值

Set变量名.delete(值);

查找是否存在指定值

• 返回布尔值

let exist = Set变量名.has(值);

清空Set中的所有值

Set变量名.clear();

遍历Set

forEach遍历

Set变量名.e=forEach(function(item) {
    console.log(item);
});

哔哩哔哩——黑马前端