一、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); // undefined2、对象解构
（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); // 15、实例方法：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); // false3、实例方法：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); })标签：ES6,const,log,ary,let,console From： https://www.cnblogs.com/hunanxyz/p/16859345.html