ES6新增 更新中

es6

1.let与const在之前有介绍

https://blog.csdn.net/LJXLQXX/article/details/122866579?spm=1001.2014.3001.5501https://blog.csdn.net/LJXLQXX/article/details/122866579?spm=1001.2014.3001.5501

2.扩展运算符

    const arr1 = [100,200,300];
    const arr2 = [400,500,600];
    const arr3 = [700,800,900];
    // 需求需要合并三个数组
    // es6之前
    // const arr = arr1.concat(arr2).concat(arr3);
    // es6
    const arr = [...arr1,...arr2,...arr3]

3.默认参数

    // es6前
    function fn(name,age){
      var name = name || '小白';
      var age = age || 18;
      console.log(name,age);
    }
    // es6
    function fn(name='小白',age=18){
      console.log(name,age);
    }
    fn('小赖');//小赖 18

4.不定参

    function fn(name,...arr){
      console.log(name);
      console.log(arr);
      // 注意与es5的arguments效果相同，形式却不同，这里的arr是真实数组,而arguments是类数组这里的arr是可以直接使用数组的原型方法的
    }

5.Object.keys

    const obj = {
      name: '小白',
      age: 18,
      gender: '男'
    }
    const keys = Object.keys(obj);
    // keys = ['name','age','gender']

6.模板字符串

    // es5
    var name = "小白";
    var age = 18;
    console.log(name+'永远'+age+'岁');
    // es6
    let name = '小白';
    var age = 18;
    console.log(`${name}永远${18}岁`);
    // ${}里面是可以放表达式的如=,++,--,*,以及三目运算

7.箭头函数

    const fn = () =>{};
    const fn=name=>{};//函数为fn参数为name的函数，只有一个参数时
    const fn=num=>num*2;//如果只有一个参数并且逻辑这是运算可简写为
    const fn = name=>({name:name});//返回一个对象
    //箭头函数不能作为构造函数，因为构造函数的this始终指向父级作用域，构造函数的this需要指向new
    //箭头函数没有arguments，不定参需要通过...
    // 箭头函数也没有原型对象

8.新增原型方法forEach(),map(),filter(),some(),every(),reduce()

forEach()循环遍历数组

    const arr = [111,222,333,444,555,666];
    //forEach
    arr.forEach((item,index,arr)=>{
      console.log(item,index,arr);
      //item为value,index为key,arr为数组arr
    })

map()用于处理一个返回处理过后的新数组

    const arr = [111,222,333,444,555,666];
    let arr2 = arr.map((item,index,arr)=>{
      return item*2;
    })
    console.log(arr2);
    //[222,444,666,888,1110,1332]

filter()过滤数组

    const arr = [111,222,333,444,555,666];
    let filter = arr.filter((item,index,arr)=>item>333);
    console.log(filter);//[444,555,666]

some()只要数组中有一个存在就返回true

    const arr = [111,222,333,444,555,666];
    let some = arr.some((item,index,arr)=>item>333)
    console.log(some);//true

every()全部满足即为真

    const arr = [111,222,333,444,555,666];
    let every = arr.every((item,index,arr)=>item>111);
    console.log(every);//false

reduce()

    const arr = [111,222,333,444,555,666];
    let reduce = arr.reduce((pre,next)=>{
      // console.log(pre,next);
      //pre为上一次return的值,next为当前次的值
      return pre+next;
    },0)//0为初始值
    // console.log(reduce);//2331
    // 统计次数
    let reduce2 = arr.reduce((pre,next)=>{
      //每一次返回的都是一个对象
      //判断当前的对象是否存在
      if(pre[next]){
        // 存在让value++
        pre[next]++;
      }else{
        //不存在让其value=1
        pre[next]=1;
      }
      return pre;
      },{});
      console.log(reduce2);
      //得到的为所有元素出现的次数的一个对象

9.对象同名简写

    let name = '小白';
    let age = 18;
    //es5
    const obj = {
      name:name,
      age:age
    }
    //es6
    const obj2 = {
      name,
      age
    }

10.class

    //es5
    function Obj(name){
      this.name=name
    }
    Obj.prototype.sayName = function(){
      console.log(this.name);
    }
    let myname = new Obj('小白');
    myname.sayName()
    //es6
    class Obj{
      constructor(name){
        this.name = name
      }
      sayName(){
        console.log(this.name);
      }
    }
    let youname = new Obj('小香');
    Obj.sayName();

class的本质依然为function,可理解为function的语法糖

使用static定义的方法与属性，实例无法使用，只能class自己使用

extend为继承

    class Name{
      constructor(name){
        this.name = name
      }
    }
    class Age extends Name{
      constructor(name,age){
        super(name)
        this.age = age
      }
      static sex = '男'
    }
    let my = new Age('小白',18);
    console.log(my.name); //小白
    console.log(my.age); //18
    console.log(my.sex); //undefined
    console.log(Age.sex); //男

11.Promise

12.解构赋值

    // es6之前想要提取变量的属性或方法
    var obj = {
      name : '小白',
      age : 18,
      sex : "女"
    }
    var name = obj.name;
    var age = obj.age;
    var sex = obj.sex;
    console.log(name,age,sex);//小白 18 女
    // es6新增结构赋值
    const obj = {
      name : '小白',
      age : 18,
      sex : "女",
      fun :function(){
        console.log('我是解构赋值');
      },
      sonobj:{
        name : '小强'
      }
    }
    const {name,age,sex,fun} = obj;
    console.log(name,age,sex); //小白 18 女 
    fun() //我是解构赋值
    // 也可以重命名
    const {name:myname} = obj;
    console.log(myname); //小白
    const {sonobj:{ name }} = obj
    console.log(name); //小强

解构赋值同样也可以是数组

    const arr = [1,2,3,4,5];
    const [a,b,c,d,e] = arr;
    console.log(a,b,c,d,e);//1 2 3 4 5
    //也可赋默认值
    const [a,b,c,d,e,f=6] = arr;
    console.log(f); // 6