ES6新特征

ECMAscript的出现：

es5即js性能不足、方法不灵活、模块化实现并不完善、

很多框架都会用到es6，其实就是对es5的一个补充。

目录

1.let和const

2.模板字符串

3.函数默认值、剩余参数、扩展参数和箭头函数

3.1扩展运算符 取代apply用法

3.2箭头函数的this指向：

4.解构赋值

5.set和map

5.1set

5.2.map

6.数组

7.迭代器 是一种新的遍历机制

8.Genetator生成器 通过yield关键字，将函数挂起，为了改变执行器提供的异步编程的方案

9.promise对象，异步编程方案

10.async异步操作

11.class类

12类的继承 extends 和java类似，不再赘述。

---

1.let和const

声明变量

之前的var由于作用域和变量提升的原因，（作用域和提升 前面链接补充一下作用域和变量提升、很清晰这里不多加赘述。）在es6推出的时候就推出了let和const

let：没有变量提升、是一个块作用域、不能重复声明。

const：没有变量提升、是一个块作用域、不能重复声明、声明常量时一旦被声明无法修改。可修改对象常量里的属性值。

作用：let和const声明的变量不会提升且不会污染全局变量。

2.模板字符串

反引号；插入变量${变量名}。

3.函数默认值、剩余参数、扩展参数和箭头函数

剩余参数：可由三个点和一个参数名组成。解决arguments问题。

例：

others=['name', 'sexual']

 let order={
            name:"jack",
            sexual:"male",
        }
        let bookOrder=pick(order,"name","sexual");
        function pick(order,...others) {
            console.log(others);
        }

result={name: 'jack', sexual: 'male'} 

   let order={
            name:"jack",
            sexual:"male",
        }
        let bookOrder=pick(order,"name","sexual");
        function pick(data,...others) {
            let result=Object.create(null);
            for (let i = 0; i < others.length; i++) {
                result[others[i]]=data[others[i]];               
            }
            console.log(result);
            return result;
        }

3.1扩展运算符 取代apply用法

剩余：多个合并到一个数组里

扩展：各个项分离的参数传到函数里。

例：

const arr=[2,10,90,20];
console.log(Math.max.apply(null,arr));//取得最大值
es6:
console.log(Math.max(...arr));

箭头函数：=》定义function（）{}；等价于（）=》{}；

例：

let add=function(a,b){
  return a+b;
}
console.log(add(10,20))//30
es6:
let add=(a,b)=>{
   return a+b
}
一个变量时：
let add=val=>val
console.log(add(10))//10
两个时：
let add=（val1+va2）=>val1+val2
console.log(add(10+20))//30

3.2箭头函数的this指向：

箭头函数没有this指向，内部this值只能通过查找作用域链来确定，一旦使用箭头函数，当前就不存在作用域链，就找它的上级。

attention：1.使用箭头函数，内部就没用arguments了。因为没作用域链。2.不能用new来实例化对象。因为箭头函数不是对象，可以认为是一个语法糖。

4.解构赋值

针对数组和对象进行操作。

对象：

例：

let a={a:{"hello"},b:text,c:1}
let{a}=obj//a={“hello”}

可以在里面套用剩余运算符。

数组：

例：const arr=[2,10,90,20]; let[a,b,c]=arr;console.log(a);

es6直接写入变量和函数作为对象的属性和方法

例：

 const name="jack";
   age=20;
   const person={
       name,
       age,
       sayName() {
           console.log(this.name);
       }
   }
   person.sayName();

对象的方法:

is：比较两个值是否严格相等

例：console.log(Object.is(NaN,NaN))//true  解决NaN的特殊性时建议使用。

assign（）//对象的合并，返回合并之后的新对象，浅拷贝。

例： let x=Object.assign({},{a:1},{b:2}); console.log(x);//x={a: 1, b: 2}

Symbol：原始数据类型，表示独一无二的值即内存地址不同。

作用：定义对象的私有变量。

例：

  const name1=Symbol('name');

    const name2=Symbol('name');

    console.log(Object.is(name1,name2));//false

Symbol声明的变量，取值时要用中括号，且无法进行遍历。可通过Object.keys[变量]来获得对象。但的得到的是个空对象，所以用得较少。但可以通过Object.getOwnPropertySymbols(变量)来获取也可以通过反射 Reflect.ounKeys(变量)获取。

5.set和map

5.1set

集合：无重复值的有序列表

添加：set.add();去重

删除： set.delete();

校验：set.has();

长度：set.size

将set转换成数组：

    let set2=new Set([1,2,3,2,3]);

    let arr=[...set2];

    console.log(arr);

attention：

1.set对象的引用无法被释放。

obj=null（js中释放对象的操作）

解决：

用WeakSet（）；但是WeakSet局限性高！不可传非对象类型的参数、不可迭代、没有很多方法、没有size属性。所以这个不建议使用，了解就行。

5.2.map

键值对有序列表，键值可以为任意类型

添加：map.set(key,value)；

获取：map.get(key);

校验：map.has(key);

删除：map.delete(key);

清空：map.clear();

6.数组

数组的方法：1.from() 2.of()

6.1、from():伪数组转成真正的数组，还可以接受第二个参数

es5：[].slice.call(arguments); 返回一个新的数组

es6：Arr.from(arguments); 返回一个新数组

还可使用扩展运算符来快速转换。

第二个数组：

Array.from(变量名，ele=>ele.textContent);输出的是对应下标的值。

6.2、of（）将一组值转成数组,可将任意数据类型转成数组。

Array.of(3,[12,2],{id:1});

6.3、copyWithin() 数组内部将指定元素复制到其他位置，返回当前数组

例：[1,3,4].copyWithin(0,2)//2位置往后的所有值替换0位置往后的两个数字 

6.4 find()找出第一个符合条件的数组成员 findIndex()找出第一个符合条件的数组成员的索引。

6.5 、entries（） keys() values()返回一个遍历器，可以用for...of循环进行遍历

    let a=["a","b"];

    for (const iterator of a.keys()) {

        console.log("键名遍历"+iterator);

    }

    for (const iterator1 of a.values()) {

        console.log("值遍历"+iterator1);

    }

    for (const iterator2 of a.entries()) {

        console.log("键值对遍历"+iterator2);

    }

entries有一个方法，next().value 调用一次遍历一个 从第一个开始。

6.6、 includes（）返回布尔值，表示某个数组是否包含给定的值。

解决了indexof不包含时返回-1的问题。

7.迭代器 是一种新的遍历机制

例：

    const items=["1","x","b"];

    /* 创建新的迭代器 */

    const item=items[Symbol.iterator]();

    console.log(item.next()); //{value: '1', done: false}

说明：迭代器是一个接口，能快捷访问数据，通过Symbol.iterator创建，通过next（）获取迭代结果。

8.Genetator生成器 通过yield关键字，将函数挂起，为了改变执行器提供的异步编程的方案

和普通函数的区别：1.在function后面，函数名前面有个*2.只能在函数内部用yield表达式。

例：    function* name() {
        yield 2;
    }
    let a=name();
    console.log(a.next());//{value: 2, done: false}

总结：Genetator分段执行，yield暂停语句，next回复执行

生成器的应用：为不具备迭代器接口的对象提供的遍历操作，例如对象里。

多用于解决异步代码.例：

/* 1.加载loading 2.数据加载完成 3.关闭loading */
function loading() {
    console.log(1);
}
function data() {
    setTimeout(() => {
        console.log(2);
        itLoad.next();
    }, 1000);
}
function name() {
    console.log(3);
}
function* order() {
loading();
yield data();
name();
}
let itLoad=order();
itLoad.next();

生成器作用：可以部署ajax操作，让异步代码同步化。

9.promise对象，异步编程方案

相当于一个容器，保存的是未来结束的事件

各种异步操作都可以用同样的方法进行处理。

特点：

1.对象状态不受外界影响，三个状态，pending进行中、resolved成功、rejected失败。

2.一旦状态改变（pending-resolved；pending-rejected）、就不会再逆转。任何时候都可以得到当前的状态。

  let promise=  new Promise(function(resolved,rejected) {}

值得注意的是这里的return的使用

/* 应用在方法里 */
        function name(params) {
            console.log(params);
            /*    在这里return一定要加上，
      放在方法里的意思是当我需要加载这个方法的时候才new一个Promise对象，
      而直接new的是不用加return的 意思是再new的时候就直接调用了。 */
            return new Promise((resolved,rejected)=>{
              setTimeout(() => {
                  resolved("调用成功！");
              }, 1000);
            })
        }
        name("jack").then((val)=>{
            console.log(val);
        })

10.async异步操作

  /* async返回一个promise对象,是generator的一个语法糖，await需在async里进行 */

如果有多个await，那then函数会等待所有的await执行完之后再执行。

有多个的时候，走完第一个如果失败了就不会继续往下执行，所以这里可以用上try catch

例：

  /* async返回一个promise对象,是generator的一个语法糖 */
        async function a() {
            /* await需在async里进行 */
           let s= await "hello async";
           let data=await s.split("");
           return data;
        }
        a().then((res)=>{
            console.log(res);
        }).catch((error)=>{
            console.log("错误信息");
        })

11.class类

例：

    class Person{
          /* constructor是内置的方法，实例化。 new Person 的时候立即调用 */
          constructor(name,age){
          this.name=name;
          this.age=age
          }
          SayName(){
              return this.name;
          }
      }
      let p1=new Person("jack",26);
      console.log(p1);
      console.log(p1.SayName());

12类的继承 extends 和java类似，不再赘述。