1.ES6 简介
ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。
年份 版本
2015年6月 ES2015
2016年6月 ES2016
2017年6月 ES2017
2018年6月 ES2018
ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。
1.1 为什么ES6
每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。
- 变量提升特性增加了程序运行时的不可预测性
- 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码
2. ES6的新增语法
2.1 let
let ES6新增用于声明变量的关键字
- let声明的变量只在所处于的块级有效
演示
注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。
-
不存在变量提升
-
暂时性死区
演示
2.2 const
const 作用：声明常量，常量就是值（内存地址）不能变化的量
-
具有块级作用域
-
使用const关键字声明变量必须赋值
-
声明常量，常量就是值（内存地址）不能变化的量
演示
2.3 let const var的区别
-
使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
-
使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
-
使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值。
var let const 函数级作用域 块级作用域 块级作用域 变量提升 不存在变量提升 不存在变量提升 值可更改 值可更改 值不可更改
2.4 解构赋值
ES6中允许从数组中提取值按照对应位置，对变量赋值，对象也可以实现解构
数组解构
对象解构
2.5 箭头函数
ES6 中新增的定义函数的方式,简化函数定义语法
()=>{}
-
函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
-
如果形参只有一个，可以省略小括号
-
箭头函数不绑定this关键字，箭头函数中的this,指向的是函数定义位置的上下文this
演示
2.6 剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组
function sum (first, ...args) {
console.log(first); // 10
console.log(args); // [20, 30]
}
sum(10, 20, 30)
2.7 array的扩展方法
扩展运算法（展开语法）
- 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
演示
- 扩展运算符可以应用于合并数组。
演示
- 将类数组或可遍历对象转换为真正的数组
演示
var oDivs = document.getElementsByTagName('div')
console.log(oDivs);
var ary = [...oDivs] // 转换之后才能调用数组的方法，如push
ary.push('a')
console.log(ary);
- 构造函数方法 Array.from()
演示
let array = {
'0': 1,
'1': 2,
length: 2
}
let arr1 = Array.from(array)
console.log(arr1);
// 还可以接受第二个参数，作用类似于数组的map方法，用法对每个元素进行处理，然后放入返回的数组
let newAry = Array.from(array, item => item * 2)
console.log(newAry);
- find()
用于找出第一个符合条件的数组成员，如果没有找到返回undefined
let aryfind = [{
id: 1,
name: 'sj'
}, {
id: 2,
name: 'xj'
}]
let target = aryfind.find((item, index) => item.id == 2)
console.log(target);
- findIndex()
演示
// 用于找出第一个符合条件的数组成员的位置，没有返回-1
let aryfindIndex = [1, 2, 3, 10]
let index = aryfindIndex.findIndex(item => item > 9)
console.log(index);
- includes()
表示某个数组是否包含给定的值，返回布尔值
let aryfindIndex = [1, 2, 3, 10]
console.log(aryfindIndex.includes(2)); // true
2.8 string 的 扩展方法
- 模板字符串
ES6 新增的创建字符串的方式，使用反引号定义，可以解析变量
可以换行
let html = `
${result.name}
${result.age}
${result.sex}
`;
console.log(html);
- startsWith() 和 endsWith()
startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
- repeat()
repeat方法表示将原字符串重复n次，返回一个新字符串
2.9 Set数据结构
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set本身是一个构造函数，用来生成 Set 数据结构
实例方法
const s = new Set()
add(value)：添加某个值，返回 Set 结构本身
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
has(value)：返回一个布尔值，表示该值是否为 Set 的成员
clear()：清除所有成员，没有返回值
遍历
Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
s.forEach(value => console.log(value))
演示