theme: channing-cyan
1.ES6简介
1.1 什么是ES6?
ES的全称是ECMAScript，它是由ECMA国际标准化组织，制定的一项脚本语言的标准化规范。
ES6实际上是一个泛指，泛指ES2015及后续的版本
1.2 为什么使用ES6?
每一次标准的诞生都意味着语言的完善，功能的加强。JS语言本身也有一些令人不满意的地方。
- 变量提升特性增加了程序运行时的不可预测性
- 语法过于松懈，实现相同的功能，不同的人可能会写出不同的代码]
2. ES6的新增语法
2.1 let关键字
ES6中新增的用于声明变量的关键字。
let声明的变量只在所处于的块级有效
if(true){ let a =10; } console.log(a) // a is ont defined 复制代码
使用let关键字声明的变量具有块级作用域，var不具有块级作用域
使用let可以防止循环变量变成全局变量
不存在变量提升
console.log(a);// a is not defined let a = 20p; 复制代码
暂时性死区特性
全局作用域内的变量和块级作用域的变量毫无关系
let声明的变量会和块级作用域进行绑定，生成暂时性死区
var tmp = 123; if(true){ tmp = 'abc'; let tmp; } 复制代码
2.2 let的经典面试题
var arr=[]; for(var i = 0; i<2;i++){ arr[i] = function(){ console.log(i); } } arr[0](); arr[1](); //output: 2 2 复制代码
此题的关键点在于变量i是全局的，函数执行时输出的都是全局作用于下的值。
let arr=[]; for(let i = 0; i<2;i++){ arr[i] = function(){ console.log(i); } } arr[0](); arr[1](); // output: 0 1 复制代码
2.3 const关键字
作用：声明常量，常量就是值（内存地址）不能变化的量。
- 具有块级作用域
- 声明常量时必须赋值
- 常量赋值后，对于简单数据类型，值不能被修改。对于复杂数据类型，内存地址不能被修改
const PI;// Missing initializer in const declaration 复制代码
const PI = 3.14; PI = 100;// Assignment to constant variable const ary = [100,200]; ary[0]='a'; ary[1]='b'; console.log(ary); // ['a','b']; ary = ['a','b']; // Assignment to constant variable 复制代码
2.4 let、const、var的区别
| var | let | const |
| 函数级作用域 | 块级作用域 | 块级作用域 |
| 变量提升 | 不存在变量提升 | 不存在变量提升 |
| 值可更改 | 值可更改 | 值不可更改 |
常量尽量使用const声明，因为JavaScript引擎不用时时刻刻监控它，效率比较高
2.5 解构赋值
ES6允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。
数组解构
let ary=[1,2,3]; let [a,b,c,d] = ary;// 等式左边表示解构，a,b,c为变量 console.log(a); console.log(d); // output: 1 undefined 复制代码
对象解构
第一种方式：
let person = { name: 'chengzi', age: 18 }; let { name, age } = person; console.log(name);// 'chengzi' console.log(age);// 18 复制代码
第二种方式：
let person = { name: 'chengzi', age: 18 }; let { name: myName, age: myAge } = person; // myName myAge 属于别名(真正的变量) console.log(myName);// chengzi console.log(myAge);// 20 复制代码
2.6 箭头函数
ES6中新增的定义函数的方式。箭头函数是用来简化函数定义语法的
()=>{} const fn = ()=>{} 复制代码
函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号。
function sum(num1,num2) { return num1+num2; } const sum =(num1,num2)=>num1+num2; 复制代码
如果形参只有一个，可以省略小括号
function fn(v){ return v; } const fn = v => v 复制代码
2.7 箭头函数中的this
箭头函数不绑定this 关键字，箭头函数中的this，指向的是函数定义位置的上下文this。
function fn() { console.log(this); return () => { console.log(this); } } const obj = { name: 'chengzi' }; const resFn = fn.call(obj) resFn() 复制代码
2.8 箭头函数面试题
var age = 20; var obj = { age: 18, say: () => { alert(this.age) } } obj.say() // output: 20 // 箭头函数里的this指向的是window 复制代码
2.9 剩余参数
剩余参数语法我们将一个不定数量的参数表示为一个数组(...args)
const sum = (...args) => { let total = 0; args.forEach(item => total += item); return total }; console.log(sum(1, 2)); console.log(sum(1, 2, 3, 4)); 复制代码
剩余参数和解构配合使用
let fruits = ['橙子', '柚子', '菠萝']; let [s1, ...s2] = fruits; console.log(s1); console.log(s2); // output: 橙子 Array(2) 复制代码
3. ES6的内置对象扩展
3.1 Array的扩展方法
扩展运算符（展开语法）
扩展运算符可以将数组或者对象转为用逗号分割的参数序列。
let ary = [1, 2, 3, 4]; ...ary // 1,2,3，4 console.log(...ary);// 打印的时候会去掉逗号，这是因为逗号被当作log方法的分割符了 // output: 1 2 3 4 复制代码
扩展运算符的应用——合并数组
// 方法一： let ary1 = [1, 2, 3]; let ary2 = ['橙子', '柚子', '菠萝'] let ary3 = [...ary1, ...ary2] console.log(ary3); console.log(...ary3); // output: [1, 2, 3, "橙子", "柚子", "菠萝"] 1 2 3 "橙子" "柚子" "菠萝" // 方法二： let ary1 = [1, 2, 3]; let ary2 = ['橙子', '柚子', '菠萝'] ary1.push(..ary2); console.log(ary1); // output: [1, 2, 3, "橙子", "柚子", "菠萝"] 复制代码
扩展运算符的应用——将类数组或可遍历对象转换为真正的数组
<body> <div>1</div> <div>2</div> <div>3</div> <div>1</div> <div>5</div> <script> var oDivs = document.querySelectorAll('div'); let divs = [...oDivs]; console.log(divs); </script> </body> 复制代码
将伪数组转换成真正的数组，就可以调用数组下面的那些方法了
构造函数方法：Array.from()
var arrayLike = { "0": "橙子", "1": "柚子", "2": "菠萝", "length": 3 } console.log(arrayLike); var ary = Array.from(arrayLike, item => item + '哈哈哈'); console.log(ary); </script> 复制代码
查找元素方法——find()
用于找出第一个符合条件的数组成员，如果没有找到返回undefined
var ary = [{ id: 1, name: '橙子' }, { id: 2, name: '柚子' }]; var target = ary.find(item => item.id == 2); console.log(target); 复制代码
查找元素索引方法——findIndex()
let ary = [1, 5, 10, 15]; let index = ary.findIndex(item => item > 9); console.log(index);// 2 复制代码
是否包含元素方法——includs()
indexOf()比较晦涩，所以ES6推出了includes()
表示某个数组是否包含给定的值，返回布尔值。
var result = [1, 2, 3].includes(2); console.log(result);// true 复制代码
3.2 String的扩展方法
模板字符串
ES6新增的创建字符串的方式，使用反引号定义。模板字符串可以解析变量，模板字符串可以换行，模板字符串可以调用函数
let name =`chengzi` let sayHello = `hello,my name is ${name}`; console.log(name); console.log(sayHello); 复制代码
const sayHello = function(){ return '我是谁呀？' } let question =`${sayHello()} 橙子`; console.log(question); 复制代码
实例方法：startsWith()和endsWith()
let str = 'Hello world!'; var result1 = str.startsWith('Hello'); var result2 = str.endsWith('!'); console.log(result1);// true console.log(result2);// true 复制代码
实例方法：repeat()
repeat方法表示将原字符串重复n次，返回一个新字符串。
var re = 'x'.repeat(4); console.log(re);// xxxx 复制代码
4. Set数据结构
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
应用场景：搜索历史关键字
Set本身是一个构造函数，用来生成Set数据结构。
const s = new Set(); 复制代码
Set函数可以接受一个数组作为参数，用来初始化。
const set = new Set([1,2,3,4,4]) 复制代码
Set数据结构可做数组去重
const s1 = new Set([1,1,2,3]);// s1是set的数据结构 let s2 = [...s1]; console.log(s2); 复制代码
5. Set的实例方法
- add(value):添加某个值，返回Set结构本身
- delete(value):删除某个值，返回一个布尔值，表示删除是否成功
- has(value):返回一个布尔值，表示该值是否为Set的成员
- clear():清除所有成员，没有返回值
const s4 = new Set(); s4.add('a').add('b').add('c').add('d'); var delrep = s4.delete('d'); console.log(delrep); var hasrep = s4.has('c') console.log(hasrep); 复制代码
遍历
Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值
s.forEach(value=>console.log(value)) 复制代码
const s5 = new Set(['a', 'b', 'c']); s5.forEach(value => { console.log(value); }) 复制代码
