【笔记】ES6的新特性

发表于 更新于 分类于 阅读次数：

前言

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

let关键字

  • let声明的变量是块级变量，只有处于当前的块级有效，可以防止循环内的变量变成全局变量
1
2
3
4
5
6
let 变量名 = 值
if () {
    let 变量名 = 值
    console.log(变量名);
}
console.log(变量名);
  • 如果在一个块级中声明了一个变量，声明的变量没有变量提升，必须先声明再使用
1
2
3
4
5
var 变量名 = 值
if () {
    // 变量名 = 值
    let 变量名 = 值
}

const关键字

  • const关键字声明的常量是块级常量，只有处于当前的块级有效
  • 声明常量时必须赋初始值
  • 对于简单数据类型，常量值不能被再次修改；对于复杂数据类型，其内部的值可以被修改，但是不可以修改其内存地址
1
2
3
4
5
6
const 变量名 = 值
if () {
    const 变量名 = 值
    console.log(变量名);
}
console.log(变量名);

解构赋值

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

数组解构

  • 通过数组的元素个数进行解构匹配
1
2
3
4
let arr = [1, 2];
let a = 0;
let b = 0;
let [a, b] = arr;
  • 如果解构的变量个数大于被结构的数组值个数，那么多出来的变量值为undefined
1
2
3
4
5
let arr = [1, 2];
let a = 0;
let b = 0;
let c = 0;
let [a, b, c] = arr;

对象结构

  • 通过与对象相同的属性名的变量进行解构匹配
1
2
3
4
5
6
7
let obj = {
    k1: 1,
    k2: 2
};
let k1 = 0;
let k2 = 0;
let {k1, k2} = obj;
  • 通过与对象不同的属性名的变量进行解构匹配

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

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

箭头函数

1
2
3
const 函数名 = (形参列表) => {
    ...
};
  • 如果形参只有1个，可以省略小括号
1
2
3
const 函数名 = 形参 => {
    ...
};
  • 如果函数体只有1个语句且为返回值，可以省略大括号
1
const 函数名 = (形参列表) => 返回值;

this关键字

  • 箭头函数没有自己的this，箭头函数中调用的this指向的是箭头函数定义时的上下文的this
1
2
3
4
5
6
function 函数名() {
    console.log(this);
    return 形参 => {
        console.log(this);
    }
}

剩余参数（不定参）

  • 将剩余参数组成一个数组作为形参传递给函数
1
2
3
function 函数名(...args) {
    let args[0] = 0;
}

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

  • 如果解构的变量个数小于被结构的数组值个数，那么多出来的值会被剩余参数作为数组接收
1
2
3
4
5
let arr = [1, 2, 3];
let a = 0;
let b = 0;
let [a, ...b] = arr;
b[0] = 3;

扩展数组

  • 将一个数组转换成一组用逗号分隔的参数序列
1
2
3
let arr = [1, 2];
function 函数名(a, b) {}
函数名(...arr);

在合并数组的应用

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

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

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

Array的扩展方法

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

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

先进行处理再拼接为数组

  • 第二个参数是一个回调函数，数组中有几个元素，回调函数就会执行几次，回调函数的返回值作为新的元素拼接到数组
1
2
3
4
5
6
7
let arr = {
    k1: 1,
    k2: 2
};
arr = Array.from(arr, function(item) {
    return item * 2
});

查找元素

得到元素值

  • 查找数组中第一个符合条件的元素
  • 第二个参数是一个回调函数。根据查找条件，如果回调函数的返回值为true，就会立即将得到的符合条件的值返回；如果最终邺没有符合条件的值，就返回undefined
1
2
3
4
5
6
7
let arr = {
    k1: 1,
    k2: 2
};
let item = arr.find(function(item, index) {
    return 1
})

得到索引

  • 查找数组中第一个符合条件的元素
  • 第二个参数是一个回调函数。根据查找条件，如果回调函数的返回值为true，就会立即将得到的符合条件的值的索引返回；如果最终邺没有符合条件的值，就返回-1
1
2
3
4
5
6
7
let arr = {
    k1: 1,
    k2: 2
};
let item = arr.findIndex(function(item, index) {
    return 1;
})

查找是否包含元素

  • 查找数组中是否存在指定的元素。如果存在就返回true；如果不存在就返回false
1
2
3
4
5
let arr = {
    k1: 1,
    k2: 2
};
let exist = arr.includes(1)

模板字符串

  • 通过反引号定义模板字符串
  • 在模板字符串中可以使用${变量名}将变量的值拼接到字符串中
1
2
let 变量名 = 1
let str = `${变量名}`
  • 在模板字符串中可以使用${函数名()}将函数执行后的返回值拼接到字符串中
1
2
3
4
let 函数名 = function() {
    return 1;
}
let str = `${函数名()}`
  • 模板字符串可以存储换行符
1
2
3
let str = `
1
`

字符串的扩展方法

判断是否以指定子串开头

  • 返回布尔值
1
2
let str = ""
let isStart = str.startsWith("子串");

判断是否以指定子串结尾

  • 返回布尔值
1
2
let str = ""
let isEnd = str.endsWith("子串");

重复拼接字符串

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

<num>：拼接的次数

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

Set

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

创建Set变量

创建一个空的Set

1
let Set变量名 = new Set();

将数组转换为Set

  • 将数组转换为Set，达到数组去重的效果
1
2
let 数组名 = [];
let Set变量名 = new Set(数组名);
通过剩余参数将Set转换为数组
1
let 数组名 = [...Set变量名];

向Set中添加指定值

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

从Set中删除指定值

  • 根据指定的值从Set中删除与之相同的值
1
Set变量名.delete(值);

查找是否存在指定值

  • 返回布尔值
1
let exist = Set变量名.has(值);

清空Set中的所有值

1
Set变量名.clear();

遍历Set

forEach遍历

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

完成

参考文献

哔哩哔哩——黑马前端