ES6

一、ES6简介

（一）什么是ES6？

ES的全称是 ECMAScript，它是由ECMA国际标准化组织，制定的一项脚本语言的标准化规范。

年份	版本
2015年6月	ES2015
2016年6月	ES2016
2017年6月	ES2017
2018年6月	ES2018
...	...

 

 

 

 

 

 

ES6实际上是一个泛指，泛指ES2015及后续的版本。

（二）为什么使用 ES6？

每一次标准的诞生都意味着语言的完善，功能的强大。JavaScript语言本身也有一些令人不满的地方。

（1）变量提升特性增加了程序运行时的不可预测性；

（2）语法过于松散，实现同样的功能，不同的人可能会写出不同的代码。

二、ES6 的新增语法

（一）let

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

（1）let声明的变量只在所处于的块级有效

if(true) {

　　let a = 10;

}

console.log(a);　　// a is not defined

（2）注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特征。

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

（1）不存在变量提升

console.log(a);　// a is not defined

let a = 20;

 （2）暂时性死区

var num = 10;

if (true) {

　　console.log(num);  // num is not defined

　　let num = 20;

}

（二）const

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

1、具有块级作用域

if(true) {

　　const a = 10;

}

console.log(a);　// a is not defined

2、声明常量时必须赋值

const PI;  // Missing initializer in const declaration

3、常量声明后值不可更改

（1）

const PI = 3.14;

PI = 100;   // Assignment to constant variable.

（2）

const arr = [100, 200];

arr[0] = 123;   // [123,200]

arr = [1, 2];

console.log(arr);    // Assignment to constant variable.

（三）let、const、var 的区别

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

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

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

4、

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

 

 

 

 

5、在编写程序的过程中，如果存储的数据不需要变化，就使用const关键字。比如函数的定义、PI值、或者数学公式中一些恒定不变的值，因为使用const关键字声明的常量值不能变化，JavaScript引擎不需要实时监控值的变化，所以const关键字要比let关键字效率高。

 （四）解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。

1、数组解构

（1）

let ary = [1, 2, 3];

let [a, b, c] = ary;

console.log(a); // 1

console.log(b); // 2

console.log(c); // 3

（2）如果解构不成功，变量的值为undefined

let ary = [1, 2, 3];

let [a, b, c, d, e] = ary;

console.log(d); // undefined

console.log(e); // undefined

2、对象解构

（1）

let person = {name: '张三', age: 30};

let {name, age} = person;

console.log(name);  // 张三

console.log(age);　// 30

（2）

let {name: myname} = person;  // myname 属于别名 是真正的变量

console.log(myname);  // 张三

（五）箭头函数

ES6中新增的定义函数的方式。

() => {}

const fn = () => {}

1、函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号。

function sum(num1, num2) {

　　return num1 + num2;

}

const sum = (num1, num2) => num1 + num2;

2、如果形参只有一个，可以省略小括号

function fn(v) {

　　alert(v);

}

const fn = v => {
　　alert(v);

}

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

        function fn() {

            console.log(this);

            return () => {

                console.log(this);

            }

        }

        const obj = {

            name: '张三'

        };

        const resFn = fn.call(obj);

        resFn();

（六）剩余参数

1、剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

function sum(first, ...args) {

　　console.log(first);  // 10

　　console.log(args);  // [20,30]

}

sum(10,20,30);

2、剩余参数和解构配合使用

        let ary1 = ['张三', '李四', '王五'];

        let [s1, ...s2] = ary1;

        console.log(s1); // 张三

        console.log(s2); // ['李四', '王五']

三、ES6 的内置对象拓展

（一）Array的拓展方法

1、拓展运算符（展开语法）

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

let ary = [1, 2, 3];

...ary　　// 1, 2, 3

console.log(...ary);  // 1 2 3

console.log(1, 2, 3);  // 1 2 3

（2）拓展运算符可以应用于合并数组。

// 方法一

        let ary1 = [1, 2, 3];

        let ary2 = [4, 5, 6];

        let ary3 = [...ary1, ...ary2];

// 方法二

        ary1.push(...ary2);

（3）将类数组或可遍历对象转换为真正的数组

var oDivs = document.getElementsByTagName('div');

var ary = [...oDivs];

2、构造函数方法：Array.from()

（1）将类数组或可遍历对象转换为真正的数组

        var arrayLike = {

            "0": "张三",

            "1": "李四",

            "2": "王五",

            "length": 3

        }

        var ary = Array.from(arrayLike);   //  ['张三', '李四', '王五']

（2）方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

        var arrayLike = {

                "0": "1",

                "1": "2",

                "length": 2

            }

        var ary = Array.from(arrayLike, item => item * 2);

3、实例方法：find()

（1）用于找出第一个符合条件的数组成员，如果没有找到返回undefined

        var ary = [{

            id: 1,

            name: '张三'

        }, {

            id: 2,

            name: '李四'

        }];

        var target = ary.find(item => item.id == 2);

4、实例方法：findIndex()

（1）用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

        let ary = [10, 20, 50];

        let index = ary.findIndex(item => item > 15);

        console.log(index);   // 1

5、实例方法：includes()

表示某个数组是否包含给定的值，返回布尔值

[1, 2, 3].includes(2);   // true

[1, 2, 3].includes(4);   // false

（二）String 的拓展方法

1、模板字符串

（1）ES6新增的创建字符串的方式，使用反引号定义

let name = `张三`;

（2）模板字符串可以解析变量

        let name = '张三';

　　 let sayHello = `hello,我的名字叫做` + name;

        let sayHello = `hello,我的名字叫做${name}`;

        console.log(sayHello); // hello,我的名字叫做张三

（3）模板字符串中可以换行

        let result = {

            name: '张三',

            age: 20

        };

        let html = `

        <div>

            <span>${result.name}</span>

            <span>${result.age}</span>

        </div>

        `;

        console.log(html);

（4）在模板字符串中可以调用函数

        const fn = () => {

            return '我是fn函数';

        }

        let html = `我是模板字符串${fn()}`;

        console.log(html); // 我是模板字符串我是fn函数

2、实例方法：startsWith() 和 endsWith()

（1）startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值

（2）endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

        let str = 'Hello ECMAScript 2022';

        let r1 = str.startsWith('Hello');

        console.log(r1);   // true

        let r2 = str.endsWith('2012');

        console.log(r2);   // false

3、实例方法：repeat()

repeat()方法表示将原字符串重复n次，返回一个新字符串。

'x'.repeat(3);   // xxx

'hello'.repeat(2);   // hellohello

（三）Set 数据结构

1、ES6 提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

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

const s = new Set();

3、Set 函数可以接受一个数组作为参数，用来初始化

const set = new Set([1, 2, 3, 4]);

4、Set方法 数组去重

        const s3 = new Set([1, 2, 2, 1]);

        const ary = [...s3];

        console.log(ary);

5、实例方法

（1）add(value)：添加某个值，返回Set结构本身

（2）delete(value)：删除某个值，返回一个布尔值，表示删除是否成功

（3）has(value)：返回一个布尔值，表示该值是否为Set的成员

（4）clear()：清除所有成员，没有返回值

const s = new Set();

s.add(1).add(2).add(3);  // 向set 结构中添加值

s.delete(2);　　// 删除 set 结构中的2值

s.has(1);　　// 表示 set 结构中是否有1这个值 返回布尔值

s.clear();　　// 清除 set 结构中的所有值

6、遍历

Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

        const s5 = new Set([1, 2, 3]);

        s5.forEach(value => {

            console.log(value);

        })