一.学习ES6(ECMAScript 2015) 前要搞明白两个问题， 什么是ES6， 为什么要学习ES6
1. 什么是ES 6： ES6是JavaScript语言的新一代标准， 加入了很多新的功能和语法。 现在React、 Vue项目一般都是用ES6语法来写， 这也是官方推荐
2.为什么要学习ES6， ES6已经在 2015 年 6 月正式发布了。 它的目标， 是使得 JavaScript 语言可以用来编写复杂的大型应用程序， 成为企业级开发语言
二.ES6新增的内容如下:
1. 声明变量和常量的关键字：let和const
相同点及优点：都具有块级作作用域，不允许重复声明，不存在变量提升
不同点：const初始化时必须赋值,值是不可以修改的(对象除外，对象的属性可以修改)，而let不必
2. .数据解构和赋值
ES 6允许按照一定模式从数组和对象中提取值， 对变量进行赋值，即称为解构。例如：
let [a, b, c] = [1, 2, 3]
console.log(a, b, c) //1 2 3
let name = 'lee'
let age = 3
let person = {name, age}
person // Object {name: 'lee', age: 3}
// 反过来也是一样的
let person // Object {name: 'lee', age: 3}
let {name, age} = person
name // 'lee'
age // 3
// 函数参数解构赋值
function sum([x, y]) {
return x + y;
}
sum([1, 2]); // 3
// 对象参数解构赋值
function sum({x, y}) {
return x + y;
}
sum({1, 2}) // 3
// 嵌套解构赋值
// 数组嵌套
let [a, [b], c] = [1, [2], 3];
a // 1
b // 2
c // 3
// 对象嵌套
let {person: {name, age}, foo} = {person: {name: 'lee', age: 3}, foo: 'foo'}
name // 'lee'
age // 3
3. 模板字符串用反引号 ` ` 标识字符串。除了可以当做普通字符串使用外，还可以在字符串中插入变量
// 普通字符串
`Hello React!`;
// 字符串嵌入变量
let text = 'Vue'
let name = `Hello,${text}`;
console.log(name);//Hello,Vue
4. 对象的简写，方式具体方法如下:
const name = "Jack";
const age = 25;
const sex = "女";
const studentES6 = {
name, // 同名的属性可以省略不写
age,
sex,
getName() {
// 可以省略方法中的 : function
return this.name;
},
};
console.log(studentES6.age); //25
console.log(studentES6.getName()); //Jack
5. 箭头函数
基本形式：
1) let func = num => num; //只有一个形参可以‘=’后面写形参名
2) let func = () => num;//如果有多个形参，在‘=’后面写‘（）’把形参写在（）里面
3) let sum = (num1, num2) => num1 + num2;//如果只有1条执行语句，直接在‘=>’后面写执行语句即可，默认会返回执行结果
4) 如果有多条语句必须写{},将代码写在{}里面，重新指定返回值
注意事项：
1) 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，建议在箭头函数外部再嵌套一层函数以便于控制里面的this
2) 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
3) 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
不可以使用yield命令，因此箭头函数不能用作 Generator 函数（后面有具体介绍）。
6. 扩展运算符
扩展运算符是三个点（...），它将一个数组专为用逗号分隔的参数序列， 类似于rest参数的逆运算。例如：
function sum(a, b, c) {
num = a + b + c;
console.log(num); //6
}
let numbers = [1, 2, 3]
sum(...numbers)
扩展运算符通常还可以用于合并数组以及解构赋值使用。例如：
let a = [1, 2]
let b = [3, 4]
[...a, ...b] // [1, 2, 3, 4]
let [x, ...rest] = ['a', 'b', 'c']
rest // ['b', 'c']
注意：解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、
那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。
7. ES 6引入reset参数
（形式为...变量名）用于获取函数的多余参数， 可以代替arguments对象的使用。rest参数是一个数组，
数组中的元素是多余的参数。注意：rest参数不能再有其他参数。 例如：
function languages(lang, ...types) {
console.log(types); // ['java', 'python']；
}
languages('js', 'java', 'python');
8. 形参默认值
ES6中提供了一个新的函数默认值的方式，外界传入的参数会依次赋值给函数中的参数
function sum (a = 10, b = 5) {
return a + b;
}
console.log(sum(1, 2)); // 3
console.log(sum(5)); // 10
console.log(sum()); // 15
console.log(sum(0, 10)); // 10
// 当需要第一个参数使用默认值，而指定第二个参数时，需要显式指定第一个参数值为undefined
// 需要注意，当显式指定参数为null时，是不会使用默认值的
9.ES6 关于字符串的扩展方法
１. //includes(),判断是否包含指定的字符串 返回布尔值true或者说false
let str1 = 'aabbcc';
let str2 = str1.includes('bb')
console.log(str2); //true
２. //判断是否以指定字符串开头 返回布尔值true或者说false
let str3 = 'abcd';
console.log(str3.startsWith("a"));//true
３. //判断是否以指定字符串结尾 返回布尔值true或者说false
let str4 = 'eeddff';
console.log(str4.endsWith('f'));//true;
４. //repeat(count) : 重复指定次数 会返回一个字符串
let str5 = 'ab';
console.log(str5.repeat(5));//ababababab
10. ES6数值扩展方法
1.isFinite //判断是否为无限大的数
console.log(Number.isFinite(123)); //true
console.log(Number.isFinite(Infinity)); //false
2. Number.isNAN //判断是是否为NAN
console.log(Number.isNaN(NaN));//true
console.log(Number.isNaN(123)); //false;
3. Number.isInteger(i) : 判断是否是整数
console.log(Number.isInteger(123)); //true
console.log(Number.isInteger(123.0)); //true
console.log(Number.isInteger(12.6)); //false
4.Number.parseInt(str) : 将字符串转换为对应的数值
console.log(Number.parseInt('123abc')); //123
console.log(Number.parseInt('a123')); //NAN
5.Math.trunc(i) : 直接去除小数部分
console.log(Math.trunc(123.111)); //123
11. 数组扩展方法
1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
let obj4 = {
0: '888',
length: 1
};
console.log(Array.from(obj4));//[888]
2. Array.of(v1, v2, v3) : 将一系列值转换成数组
console.log(Array.of(123, true, false, 'string', 'number'));// [123, true, false, "string", "number"]
3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
let arr = [2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.find(function (item, key, value) {
return item > 1
}));
//打印结果为1
4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
let arr = [2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.findIndex(function (item, key, value) {
return item > 1
}));
12. ES6对象的扩展方法
１. Object.is判断两个值是否完全相等 (底层原理是转换成字字符串进行对比)
console.log(0 == -0) //ES5 true;
console.log(NaN == NaN) // ES5 false;
console.log(Object.is(0 == -0)); //ES6 false;
console.log(Object.is(NaN == NaN)); // ES6 false;
２. Object.assign(target, source1, source2..)
* 将源对象的属性复制到目标对象上
let obj = {};
let obj1 = {
a: 'a',
b: 'b',
};
let obj2 = {
c: "c",
d: 'd',
};
Object.assign(obj, obj1, obj2);
console.log(obj);
３. 直接操作 __proto__ 属性
let obj3 = {};
let obj4 = {
money: 5000000,
};
obj3.__proto__ = obj4;
console.log(obj4); //{}
console.log(obj4.money); //5000000
13. ES6 Set
set是ES6中新增的类型，和数组类似，唯一不同在于该类型不会有重复的数据，一般常用来对数据进行去重操作
1、创建set集合并添加元素
let set = new Set();
console.log(typeof set) //object
set.add('a'); //add()方法添加元素
set.add('b');
set.add('c');
console.log(set); //{a,b,c}
２. Set的size属性可以获取set的长度
３. 3、Set不能添加重复元素
set.add('a'); //重复,所以添加失败,这个地方并不保存
console.log(set.size); // 3
console.log(set); //{a,b,c}
// 数字5和字符5是不相等的，则可以添加进去
set.add(5)
set.add('5')
console.log(set.size) //5
console.log(set); {a,b,c,5,'5'}
４. 数组和Set可以相互转换，而Set不能添加重复元素，可以利用这一点实现数组去重。数组转化为set，只需要在创建set时将数组作为参数传递即可；把set转化为数组可以使用扩展运算符 …
//数组转换为Set数据类型并去重
let arrSet = [1,4,2,3,2,4,5];
let set = new Set(arrSet);
console.log(set); //{1,4,2,3,5}
//Set数据类型转换为数组
let arr = [...set];
console.log(arr); //[1,4,2,3,5]
另外一种数组去重 通过使用Array.from()方法 + new Set()
let arr1 = [1,1,2,2,3,3,4,4,5,5,6,6];
let result1 = Array.from(new Set(arr1));
console.log(result1);//[1,2,3,4,5,6];
５. Set的has()可以判断一个值是否在set中 返回一个布尔值
let arrSet = new Set([2,3,4])
console.log(arrSet.has(5)) //false
console.log(arrSet.has(2)) //true
６. 移除Set元素，delete(需要删除的值)；clear() 清空所有的值
let set = new Set([1,3,6]);
set.delete(3);
console.log(set); //{1，6}
set.clear();
console.log(set); //{}
７. Set的遍历
Set可以使用forEach遍历，forEach遍历时回调函数有三个参数
function(value,key,ownerSet) {
函数体
}
参数1: 遍历到的元素的值
参数2: 对set集合来说,参数二的值与参数一相同
参数3: Set集合自身
let iSet = new Set([1,2,4,6,8])
iSet.forEach(function(value){
console.log(value); //1 2 4 6 8
})
for...of也可以遍历set
let iSet = new Set([1,2,4,6,8])
for (val of iSet) {
console.log(val); //1 2 4 6 8
}
８. set是通过Object.is()来判断两个元素是否相等的 **但是判断+0和-0的时候是用 === 号判断的
set.add(+0)
set.add(-0) // ===判断相等,添加不进去
console.log(set.size)//1
set.add(NaN)
set.add(NaN) //Object.is()判断相等,添加不进去
console.log(set.size)//2
set.add([])
set.add([]) //两个空数组不相等(存放在堆中的数据虽然字面量相等但是并不指向同一片内存空间),所有可以添加
console.log(set.size)//4
set.add({})
set.add({}) // 空对象也不重复,也可以添加
console.log(set.size)
14. ES6新增的数据结构:Map
Map 是 ES6 中新增的数据结构，Map 类似于对象，但普通对象的 key 必须是字符串或者数字，而 Map 的 key 可以是任何数据类型…
Map 的用法和普通对象基本一致，先看一下它能用非字符串或者数字作为 key 的特性。
const map = new Map();
const obj = {p: 'Hello World'};
map.set(obj, 'OK')
map.get(obj) // "OK"
map.has(obj) // true
map.delete(obj) // true
map.has(obj) // false
需要使用new Map()初始化一个实例，下面代码中set get has delete顾名即可思义（下文也会演示）。其中，map.set(obj, 'OK')就是用对象作为的 key （不光可以是对象，任何数据类型都可以），并且后面通过map.get(obj)正确获取了。
Map 实例的属性和方法如下：
size：获取成员的数量
set：设置成员 key 和 value
get：获取成员属性值
has：判断成员是否存在
delete：删除成员
clear：清空所有
const map = new Map();
map.set('aaa', 100);
map.set('bbb', 200);
map.size // 2
map.get('aaa') // 100
map.has('aaa') // true
map.delete('aaa')
map.has('bbb') // true
map.clear()
可以遍历map实例的方法如下：
Map 实例的遍历方法有：
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。
const map = new Map();
map.set('aaa', 100);
map.set('bbb', 200);