ES6新特性

1、let和const

 var、let、const的区别？
1. var声明变量存在变量提升，let和const不存在变量提升
2. let和const只能在块作用域里访问
3. 同一作用域下let和const不能声明同名变量，而var可以
4. const定义常量，而且不能修改，`但是在定义的对象时对象属性值可以改变`

2、symbol

• Symbol是ES6中引入的一种新的基本数据类型，用于表示一个独一无二的值，不能与其他数据类型进行运算。
• 它是JavaScript中的第七种数据类型，与undefined、null、Number（数值）、String（字符串）、Boolean（布尔值）、Object（对象）并列。

3、模板字符串

在ES6之前，处理模板字符串：通过" "和+来构建模板；
对ES6来说:用${}来界定；反引号``直接搞定；

  const url="12号"
  // es6之前
  let path="北京路"+url;
//es6
  let espath=`北京路${url}`

4、解构赋值

解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
字符串、以及ES6新增的Map和Set 都可以使用解构表达式

//数组解构
const arr = [1,2,3];
let [a,b,c] = arr;
let newArr = [...arr];  //...扩展运算符

console.log(a,b,c, newArr);    //1,2,3, [1,2,3]


//对象解构
let obj = { 
	name: "ren", 
	age: 12, 
	sex: "male" 
};

let { name, age, sex } = obj;
let { name: myName, age: myAge, sex: mySex } = obj; //自定义变量名

5、剪头函数

1. ES6箭头函数结构为 (X) => X*X
2. 箭头函数和普通函数最大的区别在于其内部this永远指向其父级对象的this

 var age = 123;
 let obj = {
     age:456,
     say:() => {
         console.log(this.age);  //this指向window
     }
 };
obj.say();   //123

6、Map和Set

Map()

Map对象用于保存键值对，任何值JavaScript支持的值都可以作为一个键（key）或者一个值（value）。

与对象区别

1. object的键只能是字符串或symbol值，而Map可以是任何值（Number或者其他数据类型）。
2. Map对象有一个size属性，存储了键值对的个数，而object对象没有类似属性

let myMap = new Map([['name','ren'],['age',12]]);
console.log(myMap);  //{'name'=>'ren','age'=>12}

myMap.set('sex','male');
console.log(myMap);  //{'name'=>'ren','age'=>12,'sex'=>'male'}
console.log(myMap.size);  //3

myMap.get('name');  //'ren'
myMap.has('age');  //true
myMap.delete('age');  //true
myMap.has('age');  //false
myMap.get('age');  //undefined

Set()

Set()是有序列表的结合，而且是没有重复的，因此Set()对象可以用于数组的去重。
Set也能用来保存NaN和undefined， 如果有重复的NaN， Set会认为就一个NaN(实际上NaN!=NaN)。
Set中包含的方法，add()、has、delete()、clear()

let set = new Set([1,2,3,4,4,4,4,4]);
console.log( set, Array.from(set) ); //输出：{1,2,3,4}, [ 1, 2, 3, 4 ]

set.add(5);//set = {1,2,3,4,5}
set.delete(1);  //true
set.has(1);  //false; set = {2,3,4,5}

7、模块化

commonjs与es6模块化有什么区别
1、CommonJS模块是运行时加载，而ES6模块是编译时输出接口；
2、CommonJS模块的require()是同步加载模块，而ES6模块的import命令是异步加载；
3、CommonJS是对模块的浅拷贝，ES6是对模块的引入。

// 导入
import aaa  from  ‘路径’；
// 导出
export { aaa }
export default aaa

8、Promise

1、Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大
2、promise有三个状态： pending （进行中） 、 fulfilled （已成功）、rejected （已失败）
3、Promise用来解决回调地狱的问题

• then方法

then方法存在于所有Promise对象上，并且接收两个参数。第一个参数是Promise状态为fulfilled（成功结束）的调用函数，第二个则是状态rejected（未成功结束）的调用函数。

 promise.then(res => {
          console.log(res)
},err => {
console.error(err)
})
//也可以进行链式操作
promise.then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

• catch方法

promise.catch(err => {
 console.log(err) }) 
// 等同于 
promise.then(null,err => {
 console.error(err) 
})

• all()方法

promiss处理多个并发请求，在同一个页面需要等两个或多个ajax的请求返回数据才会正常显示时使用！

let p1 = Promise.resolve(1), p2 = Promise.resolve(22), p3 = Promise.resolve(333);
let loading = true; 
// 比方说加loading就可以加一个了 写个伪代码 
Promise.all([p1,p2,p3]).then(res => { 
    console.log(res) // [1, 22, 333] 
    loading = false  //伪代码 
})

这里返回数据的顺序是根据传进去的promise对象的顺序，如果其中有一个reject了，后面的代码会立刻停止，并将错误信息返回到catch里

• race()方法

取出响应最快的那个请求，不管结果本身是成功状态还是失败

let p1 = Promise.resolve(1), p2 = Promise.resolve(22), p3 = Promise.resolve(333);
Promise.race([p1,p2,p3]).then(res => { 
    console.log(res) // 1 
})

9、数组的新方法

1. Array.from()是内置对象Array的方法，实例数组不能调用
2. includes() 参数：数值 -------- 返回值：true/false
3. map()、filter() 参数：函数-------- 返回值：数组
4. forEach() 参数：函数-------- 返回值：undefined
5. find() 参数：函数-------- 返回值：数值
6. some()、every() 参数：函数-------- 返回值：true/false