05 ES6
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声明的变量只在所处于的块级有效
演示
<body>
<script>
// let a = 10
// console.log(a);
// 在一个大括号中，使用let关键字声明才具有块级作用域
// var 关键字不具备这个特点
// 防止循环变量变成全局变量
if (true) {
let b = 20;
console.log(b);
}
// console.log(b); 无效
// 防止循环变量变成全局变量
for (let i = 0; i < 2; i++) {
}
console.log(i); //也访问不到
</script>
</body>
注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。
-
不存在变量提升
-
暂时性死区
演示
<body>
<script>
// let a = 10
// console.log(a);
// 在一个大括号中，使用let关键字声明才具有块级作用域
// var 关键字不具备这个特点
// 防止循环变量变成全局变量
// if (true) {
// let b = 20;
// console.log(b);
// }
// console.log(b); 无效
// 防止循环变量变成全局变量
// for (let i = 0; i < 2; i++) {
// }
// console.log(i); //也访问不到
// 没有变量提升
// console.log(a);
// let a = 100
// 使用let关键字声明的变量具有暂时性死区
var num = 10
if (true) {
console.log(num); // 读取不到全局变量
let num = 20
}
</script>
</body>
2.2 const
const 作用：声明常量，常量就是值（内存地址）不能变化的量
-
具有块级作用域
-
使用const关键字声明变量必须赋值
-
声明常量，常量就是值（内存地址）不能变化的量
演示
<body>
<script>
// const 声明的变量 具有块级作用域
// if (true) {
// const a = 10
// if (true) {
// const a = 20
// console.log(a);
// }
// console.log(a);
// }
// console.log(a);
// 使用const关键字声明变量必须赋值
// const PI
// 声明常量，常量就是值（内存地址）不能变化的量
const PI = 3.14
// PI = 100 // 值无法修改
const ary = [100, 101]
ary[0] = 123 // 复杂数据内部可以修改
ary = [1, 2] //重新赋值不行
console.log(ary);
</script>
</body>
2.3 let const var的区别
-
使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
-
使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
-
使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值。
var let const 函数级作用域 块级作用域 块级作用域 变量提升 不存在变量提升 不存在变量提升 值可更改 值可更改 值不可更改
2.4 解构赋值
ES6中允许从数组中提取值按照对应位置，对变量赋值，对象也可以实现解构
数组解构
<body>
<script>
// 数组解构 一一对应取值
let ary = [1, 2, 3]
let [a, b, c, d] = ary
let [a1, b1] = ary
console.log(a, b, c);
console.log(d); // 没有数据 undefined
console.log(a1, b1);
</script>
</body>
对象解构
<body>
<script>
// 对象解构允许我们使用变量名字匹配对象属性，匹配成功则赋值
let person = {
name: '水井',
age: 18
}
let {
name,
age
} = person
console.log(name, age);
// 第二种写法
let {
name: myname,// myname myage 属于别名
age: myage
} = person
console.log(myname, myage);
</script>
</body>
2.5 箭头函数
ES6 中新增的定义函数的方式,简化函数定义语法
()=>{}
-
函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
-
如果形参只有一个，可以省略小括号
-
箭头函数不绑定this关键字，箭头函数中的this,指向的是函数定义位置的上下文this
演示
<body>
<script>
// 箭头函数
const fn = () => {
console.log(123);
}
fn()
// 只有一句执行代码 可以省略{} 且直接是作为返回值
const fn1 = (n1, n2) => n1 + n2
const res = fn1(1, 2)
console.log(res);
// 形参只有一个，可以省略小括号
const fn2 = n1 => n1 + 2
const res1 = fn2(1)
console.log(res1);
// 箭头函数不绑定this关键字，箭头函数中的this,指向的是函数定义位置的上下文this
function fn3() {
console.log(this);
return () => {
console.log(this);
}
}
const obj = {
name: "水井"
}
const resFn = fn3.call(obj)
resFn()
</script>
</body>
2.6 剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组
function sum (first, ...args) {
console.log(first); // 10
console.log(args); // [20, 30]
}
sum(10, 20, 30)
2.7 array的扩展方法
扩展运算法（展开语法）
- 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
演示
<body>
<script>
// 将数组拆分成以逗号分隔的参数序列
let s2 = [1, 2, 3]
// array的扩展方法
console.log(...s2); // 1 2 3
</script>
</body>
- 扩展运算符可以应用于合并数组。
演示
<body>
<script>
// 合并数组
// 第一种方法
let s1 = [4, 5, 6]
let s3 = [...s2, ...s1]
console.log(s3); // s3
// 第二种方法
console.log(s2.push(...s1));
</script>
</body>
- 将类数组或可遍历对象转换为真正的数组
演示
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 新增的创建字符串的方式，使用反引号定义，可以解析变量
<script>
let name = `水井`
let sayHello = `你好，${name}`
console.log(sayHello);
</script>
可以换行
let html = ` <div>
<span>${result.name}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
</div> `;
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))
演示
<script>
// 会自动过滤重复的值
const s = new Set([1, 2, 2, 3])
console.log(s.size);
let ary = [...s]
console.log(ary);
// 向set结构里添加值，使用add方法
s.add(1).add(4)
console.log('增加', s, s.size);
// 删除
s.delete(2)
console.log('删除', s, s.size);
// 判断某个值是否存在
const r = s.has(1)
console.log(r);
// clear 清空set数据结构
s.clear()
console.log('清空', s.size);
const s1 = new Set([1, 2, 2, 3])
s1.forEach(item => {
console.log(item);
})
</script>
