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