ES6

1 var 和 let const

　　var a = 2； var 变量提升。var是全局作用域

　　let a = 10； let 声明变量，没有变量提升。

　　let 是一个块级别作用域。

　　let不能重复声明。（可以被修改）

　　const 有以上特征，声明常量，无法修改。开发一般默认是const，除非有明显的变量，声明为let。

　　const 可以声明对象常量，对象不能被修改，对象的属性可以被修改。

　　 let使用场景：1for循环，2 不会污染全局变量。

const arr = []
for (var i = 0; i<10; i++) {
    arr[i] =function (){
        return i
    }
}
console.log(arr[5]())

let  RegExp =10;
console.log(RegExp)
console.log(window.RegExp)

　　

2 模块字符串

　　

    const o = document.querySelector('.box');
    let id =1,name='caomei';
    o.innerHTML="<ul><li><p+id= "+id+">"+name+"<p><li><ul>"

如今写法：
　　let htmlStr = ` <ul>
　　　　<li> <p id=${id}>${name}></p>
　　　　</li>
　　</ul>`
变量名用$+{变量名}进行代替;美元符号+{变量名}
　　o.innerHTML= htmlStr;

　　

3 函数默认值，剩余参数，

　　函数默认值书写：

function add(a,b) {
    a = a|| 10;
    b = b|| 20;
    return a+b;
}
console.log(add())

function add1(a,b =20) {
    return a+b;
}
function add2(a=20,b =20) {
    return a+b;
}

　　

函数默认参数 是个 函数：

//默认的表达式也是个参数。
function add3(a,b=getVal(5)){
    return a+b;
}
function getVal(val) {
    return val +5
}
console.log(add3(10));

　　

函数的剩余参数： 

function pick(obj) {
    let res = Object.create(null);
    for(let i = 1;i<arguments.length;i++) {
        res[arguments[i]] = obj[arguments[i]]
    }
}

let book ={
    title:'es6',
    author:'caomei',
    yaer:2019
}
let bookDate = pick(book,'author','year');
console.log(bookDate)


function pick2(obj,...keys) {
    let res = Object.create(null);
    for(let i = 1;i<arguments.length;i++) {
        res[keys[i]] = obj[keys[i]]

    }
    return res
}

　　

4 函数 扩展运算符，箭头函数。

剩余运算符： 把多个独立的参数 合并到一个数组里面。

扩展运算符：吧一个数组分割，并且各个项作为分离的参数传给函数。

处理数组中的最大值，使用apply：

const arr = [1,2,3,5]

console.log(Math.max.apply(null,arr))

console.log(Math.max(...arr));

箭头函数： =>定义。 function（）  {} 变成了   （）=》 {} 非常多非常多。

 let add =function(a,b){return a+b}

let add =(a,b)= >{ return a+b}; //function变成了=》

let add = val => val+5;

let add2 = (val1,val2)=>val1+val2;

返回对象的时候必须加（）

let getObj = id=>({id:id,name:'caomei'})

let obj = getObj(1);

let fn = (()=>{return ()=>{

　　console.log('hello');}

})();

es6的this指向。  没有this绑定！

es5之前 ，this是会被改变的。取决于调用函数的上下文对象。

let p ={

　　id ：123，

　　init: function(){ document.addEventListener('click',function(event) {

　　this.doSomeThigs(event.type)}}//这个this值得是document对象。

}

bind 把this指向进行改变。 {}.bind(this)。不好理解

document.addEventListener('click',（event）=>{this.doSomeThings(event.type)},fasle)

给方法指向的时候，不要使用箭头函数，使用原来的，会是箭头函数this指向window。

一但使用箭头函数，当前就没有作用域连。箭头函数没有this指向，箭头函数内部this只能查找作用域连的方法。

注意事项1：箭头函数 不能使用new关键字来实例化对象。

2： function 函数是一个对象，箭头函数不是一个对象，内部没有arguments，其实就是一个语法糖。 

5 解构赋值。

是对赋值运算符的一种扩展。

它对数组和对象进行的操作。

有点： 代码上简洁。

let ndoe ={ type:'iden',name:'foo'}

let type1 = node.type

let name1= node.name  

对象的结构赋值。完全解构

let {type1,name1} = node ; 名称必须和node里面一样！

console.log(type,name)

let obj = {a:{},b:[],c:"hellowolrd"}

let {a } = obj;

不完全解构，可以忽略。

let {a,...res} = obj;

//默认值：

let  {a,b=20} = {a:20}

//对数组的完全解构：

let  arr= [1,2,3]

let  [a,b,c] =arr;

对数组的不完全解构。

[1,[2],3]

6 扩展对象。

const name ='小米'，age =20;

const  person = { //des直接写入变量和函数，最为对象的属性和方法。

　　name, //相当于name:name

age,

sayName(){}

}

functio fn(x,y){return {x,y}}//

console.log(fn(10,20));

letcart ={ whel:4,set(newVal{},get(){return this.whell}}

const obj = {};

obj.isShow = true;

const name = 'a';

obj[name+'bc'] = 123;

obj ['f'+'bc'= function(){consoel.log(this};

//对象的方法 is() === 比较两个值是否严格相等。

console.log(NaN === NaN)//解决NaN的特殊性。

// assign();  对象的合并。！！！！使用的比较多。

Object.assign(target,obj1,obj2...)

Object.assign({},{a:1},{b:2})//返回合并之后的新对象，浅拷贝。

7symbol

数据类型Symbol，表示的是独一无二的值。用的比较少！

const name = Symbol('name')

const name2 = Symbol('name')地址不一样。

最大的用途定义对象的私有变量！

let  s1 =Symbol('s1);

obj[s1] = 'xiaocaomei'

(obj[s1])

let obj2= {[s1]:'xiaocao'}//如果吧[]去掉就是错的、

obj.s1错误！！！

8 set 集合。表示无重复值的有序列表。

　　let set = new Set();

　　set.add(2)

　　set.deletet(2)

　　set.has('4) //检查

　　set.size

　　set.forEach( (val,key)=>{

　　console.log(val);console.log(key);// key和val一样的。

　　}

　　将set转化为数组！使用扩展运算符。

　　let arr = [...s2]

　　//set中对象引用无法被释放。

　　obj= null;//释放一个对象。

　　

9map

　　键值对有序列表，键和值都是任意类型、

　　map.set('name','caomei')

　　map.get('name');//获取

　　map.has('name') //true校验

　　 map.delete('name');

　　map.clear();

　　let m =new Map();

　　let m = new Map(['a',1], ['c',2])

10 数组扩展

数组方法from() of();

from()将伪数组转化为真数组:

[].slice.call(argments):es5转化。

Array.from(arguments):

应用  lis =querySelectorAll('li');

Array.from(lis)

([...lis]) 扩展运算符，将伪数组转化为真正的数组！

from()可以接受第二个参数，对每个元素进行处理。

let liContents = Array.from(lis,ele=>ele.textContent);

of将一组的数据转化为转化为数组。

Array.of(3,11,20,{id:1},[20])

copywithin;复制，【】数组内部指定位置的元素复制到其他的位置。

[1,2,3,8,9,10].copyWithin(0,3);  3之后的替换到3之前的【8,9,10,8,9,10】

find() findIndex()：（）里面的写的是条件

find（）：找出第一个符合条件的数组成员

findIndex（）：找出第一个符合条件的数组成员下表

// entries（），keys（），value（）返回一个遍历器，使用for ...of进行遍历

// keys() 对键名进行遍历，value对值遍历，entries键值对

for(let index of ['a','b',].keys()){

console.log(index}

for (let let of ['a','b',].values()){

console.log(index}

for (let [index,ele] of ['a','b'].entries()){

console.log(index,ele)

}

let letter = ['a','b','c']

it = letter.entries();

it.next().value();

includes()返回一个布尔值，表示数组是否包含给定的值。

[1,2,3].includes(2) 返回true

[1,2,3].include('4') 不包含返回false

[1,2,3].indexof('2') 包含返回下标，不包含返回下标。

数组方法：

A.isArray(A)是否是一个，返回布尔值

A.forEach(函数)让数组的每一个元素遍历 一次myFcuntion函数。数组改变。

A.map(函数)：让数组每个元素执行函数，并且返回新数组。原数组不变。

A.filter（函数）:让数组每个元素执行相同的函数，合成一个新数组

A.reducer(函数)：对数组每一个元素，执行函数，返回综合。

A.erery(函数）：对数组每一个元素是否复合条件，中间一个不符合返回false。

A.some():所有元素进行判断范湖一个布尔，存在元素都满足，返回true。都不满足返回fasle

A.pop(),删除最后一个。返回新的数组

A.push()添加新的。

A.shift()删除第一个。返回新的数组

A.unshitf(x)添加第一个。返回新的数组的长度。

多个数组拼接：A.concat()

A.toString():转为字符串。

A.join(',').A.('##'):转为字符串，设置元素间隔

A.splice(开始位置，删除个数，元素)：万能的方法，可以实现增删改。

11 Interator

12 Promise

13 Async

14 类：

es5 制造类：function Peson()

es6制造类： class Person {

constructor(name,age){ this.name= name,this.age= age }

sayName() {return  this.name}}//方法之间没有逗号。

　　//实例化的时候立刻调用constructor。　　

Object.assign(person.prototype,{})

通过object.assign()方法，一次性向类中添加多个方法

let p1 = new Person();

多个类进行继承。

 class Dog extends Animal{}

15 es6模块化。

CommonJS就是一个对象 服务器

AMD浏览器。

ES6 的module，是浏览器和服务器一起的。依赖关系。