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 '<li data-guid="'+item.guid+'">'

+'<h4>'+item.name+'</h4>'

+'<p>'+item.age+'</p>'

+'<p>'+item.poem+'</p>'

+'</li>';*/ //之前的写入方法

// ES6的字符串模板

return `<li data-guid="${item.guid}">

<h4>${item.name}</h4>

<p>${item.age}</p>

<p>${item.poem}</p>

</li>`; //可以随便换行，结构清晰

}).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.length;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

10 Generators生成器

普通函数的执行，会执行函数内部所有的代码，直到遇见return;

函数中的代码不会立即执行，而是返回一个生成器对象（暂停）。

function* gen(step){

yield 10;

    yield 20;

    // return 100;

    yield 30;

}

var g = gen();//函数中的代码不会立即执行，而是返回一个生成器对象（暂停）。

console.log(g.next()); //10