ECMAScript6(ES6)
1 变量的声明
1.1 let：代码块内的变量声明
1）变量声明不会提升；
2）块级作用域；
3）let不允许相同作用域内多次声明同一变量。
1.2 const：常量声明
1）声明后无法修改值；
2）块级作用域；
3）const不允许相同作用域内多次声明同一变量。
2 解构赋值
ES6允许我们对数组和对象中提取值，对变量进行赋值，这被叫做“解构”。
解构赋值时，可用var,let,const来声明变量或常量。
解构只能用于数组和对象，如果解构不成功，变量会返回undefined，但如果对undefined和null解构则会报错。
2.1解构赋值简介
2.1.1 数组的解构赋值
1）var [a,b,c] = [1,2,3] //a=1,b=2,c=3
2）var [a,[[b],c]] = [10,[[20],30]] //a=10,b=20,c=30
3）var [a,...b] = [1,2,3,4] //a=1,b=[2,3,4];...表示剩余参数
2.1.2 对象的解构赋值
1）var {a,b}={a:’html’,b:’css’}；
2）变量必须与对象属性名相同，否则为undefined；
3）如果变量名与属性名不相同，则必须写成以下格式才能取到值。
var {a:test} ={a:'html',b:'css'} //test=>html
2.1.3解构失败
var [a]=[],[b]=1,[c]='jiegou',[d]=false //a,b,c,d都得到undefined。
2.1.4指定默认值
var [a=true]=[]
var {a=10} = {}
2.2 解构赋值的用途
2.2.1交换变量值
var [x,y] = [y,x];
2.2.2函数返回多个值
function example(){
return [1,2,3]
}
//接收
var [x,y,z] = example();
2.2.3定义函数形参（重点）
函数的参数定义方式, 不用再考虑参数的顺序。
function test({x,y,z}){}
//传参
test({x:10,y:20,z:30})
//参数可以设置默认值
fuction test({x=10,y=20,z}){}//x的默认值为10，y的默认值为20，z没有默认值
3字符串扩展
3.1字符串方法
3.1.1 includes
判断是否包含某个字符，返回布尔值。
'html5'.includes('html');//true
3.1.2 startsWith/endsWith
是否以某一字符开头/结尾。
let str='google';
str.startsWith('g'); //true
str.endsWith('le'); //true
3.1.3 repeat(n)
得到字符串重复n次后的结果，n可以为小数，但不能为负数。
'laoxie'.repeat(2);//laoxielaoxie
3.2字符串模板，使用反引导`表示（重点）
你可以通过一种更加美观、更加方便的方式向字符串中插入变量
格式：${变量|函数}，
模板字符串中所有的空格、新行、缩进，都会原样输出在生成的字符串中。
document.addEventListener('DOMContentLoaded',function(){
var datalist = document.querySelector('.datalist');
var data = [
{
guid:1,
name:'李白',
age:18,
poem:'床前明月光'
},
{
guid:2,
name:'杜甫',
age:19,
poem:'杜甫很忙'
},
{
guid:3,
name:'lemon',
age:19,
poem:'言多必失'
}
];
var ul = document.createElement('ul');
ul.innerHTML = data.map(function(item){
/*return '
- '
+'
'+item.name+'
'+'
'+item.age+'
'+'
'+item.poem+'
'+'
- ';*/ //之前的写入方法
// ES6的字符串模板
return `
-
${item.name}
${item.age}
${item.poem}
- `; //可以随便换行，结构清晰
}).join('');
datalist.appendChild(ul);
})
4数组扩展
4.1 for..of遍历
var arr = [10,12,18,30]
for (var value of arr) {
console.log(value);
//break continue可随意跳出
}
·这是最简洁、最直接的遍历数组元素的语法。
·这个方法避开了for-in循环的所有缺陷；
for…of跟for-in的区别很明显，就是直接取值，而不再取下标了。
·与forEach()不同的是，它可以正确响应break、continue和return语句。
·for...of循环不支持普通对象。
·for...of循环也可以遍历其它的集合：
DOM节点
字符串
Set/Map集合
5对象扩展
5.1 Object.assign(obj1,obj2,...objN)合并对象
Object.assign({a:1},{b:2},{b:4,c:3}); //{a:1,b:4,c:3}
·只支持浅拷贝（对于引用类型，只拷贝引用）。
·忽略不可枚举属性。
5.2对象的复制
var person = {
name:'lemon',
age:28,
gender:'女'
hobbdy:['a','b','c']
}
// 复制一个person
// person.cloneNode(true);
// 传统的方式：
var obj = {};
for(var attr in person){
obj[attr] = person[attr];
}
// ES6:对象的复制
var obj2 = Object.assign({},person,{name:'laoxie',hobbdy:'很多'});
console.log(obj2);
// 复制对象的方式3
// 深拷贝：
var obj3 = JSON.parse(JSON.stringify(person));//最好的复制方法，即使对象的属性或属性值中有其他引用数据类型也可以复制。
5.3 简写
ES6允许在对象之中直接写变量，如:
//@属性简写
var myName = 'laoxie';
var obj = {myName};//属性名为变量名, 属性值为变量的值
//等效于
var obj = {myName:'laoxie'}
//使用变量值作为属性名
var obj = {
[myName]:18
}
//等效于
var obj = {laoxie:18}
//@方法简写
var obj = {
coding(){
}
}
//等效于
var obj = {
coding:function(){
}
}
6箭头函数（重点）
格式：标识符=>表达式；省略了function、return关键字和大括号。
6.1参数与返回值
6.1.1零个参数用()表示
//传统写法
var sum = function(){
return 10 + 10;
}
//es6箭头函数
var sum = () => 10+10;
6.1.2函数只有一个参数（可省略括号）
//传统函数写法
var test = function(x){
return x+2;
}
//使用箭头函数
var test = x=>x+2;
6.1.3多个参数
// ES5
var total = values.reduce(function (a, b) {
return a + b;
}, 0);
// ES6
var total = values.reduce((a, b) => a + b, 0);
6.1.4函数中包含多行代码时用代码块括起来
// ES5
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
playTrumpet();
fireConfettiCannon();
});
·使用了块语句的箭头函数不会自动返回值，你需要使用return语句将所需值返回。
·当使用箭头函数返回一个普通对象时，需要将对象包裹在小括号里。
//传统写法
var createPerson = function(){
return {name:'laoxie',age:18}
}
// ES6
var createPerson = ()=>{name:'laoxie',age:18}; // 这样写会报Bug！
var createPerson = ()=>({name:'laoxie',age:18});
ES6中的规则是，紧随箭头的{被解析为块的开始，而不是对象的开始。
6.1.5默认参数
var func1 = (x = 1, y = 2) => x + y;
func1(); // 得到 3
6.1.6剩余参数
var func2 = (x, ...args) => { console.log(args) };
func2(1,2,3); // 输出 [2, 3]
6.2箭头函数中的this值
箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域。
// 点击按钮1s后打印按钮的文字
var output = document.querySelector('#output');
var btns = document.querySelectorAll('.btn');
for(var i=0;i
btns[i].onclick = function(){
setTimeout(()=>{
output.innerHTML = this.innerHTML;
},1000); //如果用正常的函数表达，那么setTimeout函数中this代表的是调用setTimeout的某个元素，而不是btns[i]，这里this代表的是window
};
}
7 Symbol数据类型
ES6引入了一种新的原始数据类型Symbol，表示独一无二的值，一旦创建后就不可更改。
// 没有参数的情况
var s1 = Symbol();
var s2 = Symbol();
s1 == s2 // false
Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了标识和区分，对调式非常有用。
// 有参数的情况
var s1 = Symbol("foo");
var s2 = Symbol("foo");
s1 === s2 // false
Symbol值不能与其他类型的值进行运算
7.1 Symbol的用途
给对象创建私有属性。
var mySymbol = Symbol();
// 第一种写法
var a = {};
a[mySymbol] = 'Nani';
// 第二种写法（注意加方括号，否则回被当作普通属性）
var a = {
[mySymbol]: 'Nani'
};
// 以上写法都得到同样结果
a[mySymbol] // "Nani"
7.2 Symbol常用方法
7.2.1 Symbol.for()
有时我们希望重新使用同一个Symbol值，Symbol.for方法可以做到这一点，首先在全局中搜索已登记的Symbol值，如果有，就返回这个Symbol值，否则就新建并返回一个以该字符串为名称的Symbol值。
直接用Symbol()方法创建的Symbol值不会被登记，如：
let one = Symbol("laoxie");
let two = Symbol.for("laoxie");
//由于创建了两个Symbol值，所以他们不相等
console.log(one===two);//false
7.2.2 Symbol.keyFor()
获取被登记的Symbol值，直接使用Symbol()创建的Symbol值的键不会被登记，所以也就获取不到。
8 Map集合
Map集合,即映射。普通对象的属性名无法为变量，而Map的属性名可以是变量。
var box = document.querySelector('.box');
var attr = {my:true};
// 把dom节点做为myData的属性
myData.set(box,'页面元素');
myData.set(attr,'对象作为属性');
8.1设置
let map = new Map();
map.set("S0", "张三");
map.set("S1", "李四");
map.set("S2", "王五");
8.2获取
map.get("s2"); //王五
8.3遍历循环，配合解构赋值
for(let [key,value] of map){
console.log(key,value);
}
8.4 Map集合的方法
·keys() 获取所有键。
·values() 获取所有值。
·entries() 获取所有键值对，返回类数组。
9 Set集合
Set集合，类似于数组，但是成员的值都是唯一的，没有重复的值。
let imgs = new Set();
imgs.add(1）;
imgs.add(1);
imgs.add(5);
imgs.add("5");
imgs.add(new String("abc")）;
imgs.add(new String("abc")）;
//打印的结果： 1 5 '5' 'abc' 'abc'
Set集合是默认去重复的，但前提是两个添加的元素严格相等，所以5和”5”不相等，两个new出来的字符串不相等。
9.1案例：去重数组
SET集合没有提供下标方式的访问，因此只能使用for…of来遍历。由于Set集合本质上还是一个map，因此会有以下几种遍历方法。
var imgs = new Set(['a','b','c']); //根据KEY遍历
for(let item of imgs.keys()){
console.log(item);
}
//a
//b
//c
//根据VALUE遍历
for(let item of imgs.values()){
console.log(item);
}
//a
//b
//c
//根据KEY-VALUE遍历
for(let item of imgs.entries()){
console.log(item);
}
//['a','a']
//['b','b']
//['c','c']
//普通for...of循环
for(let item of imgs){
console.log(item);
}
//a
//b
//c