美文网首页
ES6新增的方法有哪些

ES6新增的方法有哪些

作者: 认真敲代码的一条咸鱼 | 来源:发表于2020-01-15 20:41 被阅读0次


    (1)let

    区别1:

    let定义的变量只能在代码块{}里面使用,形成一个{}块级作用域

    var作用于函数作用域

    区别2:

    let不允许重复声明,它是一个封闭空间,解决了i问题

    var a=5

    var a=12 //-->a=5

    let a=5

    let a=12 //-->error

    区别3:

    const

    const用来定义常量,一旦定义了,后面就不能修改了

    (2)箭头函数=>

    *function()中this是指向调用这个函数的对象

    箭头函数中,this指向了window

    arguments,不能使用

    由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略

    (3)解构赋值

    左右两边结构一样

    右边必须是合法结构(错误例子:{12,5,8})

    声明和赋值写在一句话中(错误例子:let [a,b]; [a,b]=[12,5];)

    //数组

    let [a,b,c]=[12,5,101] // a=12,b=5,c=101

    //JSON

    let {a,b,c}={b:5,a:12,c:101} // json跟顺序无关,a=12,b=5,c=101

    //混合型,左右结构、顺序一致

    let [{a,b},[n1,n2,n3],num,str] = [{a:12,b:5},[12,5,8],8,'EcmaScript']

    //a=3,b=8,c is not defined    对数组的解构

    var [a,b]=[3,5,8];

    //x=V,y=u,z=e    对字符串的结构

    var [x,y,z]=Vue;

    //m=10,n=20    对象的解构,对key进行拆分

    var {n,m}={m:10,n:20};

    (4)复制数组

    var arr1=[1,2,3,4]

    for(var i=0;i<arr1.length;i++){

        arr2[i]=arr1[i]

    }

    arr2=Array.from(arr1)

    (5)JSON

    //简写,当key,value一样时,可以只写一个

    {m:m,n:n}--->{m,n}

    //其中也可以有key、value不相同的

    let a=12;

    let b=5;

    let json={a,b,c:8};  //{a:a,b:b,c:8}

    console.log(json);  //{a:12,b:5,c:8}

    //JSON里的方法简写,`:function`可以省略

    let json={

      a:12,

      show(){  //show:function(){

        alert(this.a)

      }

    }

    (6)字符串模板 ``(反单引号)

    用于字符串连接,可以换行

    `string text ${expression} string text`

    (7)rest参数...(3个点)

    var [x,...y]=[4,8,10,30] //x=4,y=[8,10,30] y成了动态参数

      let xy=[...'es6'];  //['e','s','6']  拆解

      //数组拆分

      console.log(...[4,8])  //4,8

      //数组拆分的进阶

      let arr1 =[1,3];let arr2=[4,8];

      [...arr1,...arr2]  //[1,3,4,8]

    (8)默认参数

    function show(a,b=5,c=12){

      console.log(a,b,c);

    }

    show(99,19)    //99,19,12

    show(99)    //99,5,12

    (9)for of循环

    //for in

    var arr=['apple','banana','orange','pear']

    for(var i in arr){

        console.log(i); // for in 出来的是 索引0 1 2 3

    }

    //for of

    var arr=['apple','banana','orange','pear']

    for(var i of arr){

        console.log.(i); // for of 出来的是 实际apple,banana等

    }

    for of可以循环数组,但是不能循环json,因为它是为了与map配合使用

    (10)Map(数据结构)

    与for of配合使用,是一个key、value

    var map = new Map();

    map.set(name,value); // 可以设置name,value

    map.get(name); // 可以单独获取name

    map.delete(name); // 可以单独删除name

    //与for of 的配合

    for(var name of map){

        console.log(name);  // a,apple  b,banana

    }

    for(var [key,value] of map){

        console.log(key,value); // key,value

    }

    for(var key of map.keys) // 可以只循环map中的key值

    (11)map(数组)

    映射–原数组映射成新数组,一个对应一个

    //例一

      let arr=[12,5,8];

        let result=arr.map(item=>item*2);

        alert(result);

    //例二

        let score=[19, 85, 99, 25, 90];

        let result=score.map(item=>item>=60?'及格':'不及格');

        alert(score);

        alert(result);

    (12)reduce(数组)

    汇总–求和–多个变成一个

    //求和

    let arr=[12,69,180,8763];

        let result=arr.reduce(function (tmp, item, index){

          //alert(tmp+','+item+','+index);

          return tmp+item;

        });

        alert(result);

    //求平均数

    let arr=[12,69,180,8763];

        let result=arr.reduce(function (tmp, item, index){

          if(index!=arr.length-1){ //不是最后一次

            return tmp+item;

          }else{                    //最后一次

            return (tmp+item)/arr.length;

          }

        });

        alert(result);

    (13)filter(数组)

    过滤器

    let arr=[12,5,8,99,27,36,75,11];

        //选择能够被3整除的数

        let result=arr.filter(item=>item%3==0);

        alert(result);

    (14)forEach(数组)

    循环–迭代

    let arr=[12,5,8,9];

        arr.forEach((item,index)=>{

          alert(index+': '+item);

        });

    (15)面向对象class

    使用了class关键字,现在构造函数和类分开了

    class里面直接加方法

    //old

        function User(name, pass){

          this.name=name;

          this.pass=pass;

        }

        User.prototype.showName=function (){

          alert(this.name);

        };

        User.prototype.showPass=function (){

          alert(this.pass);

        };

    //ES6

        class User{

          constructor(name, pass){

            this.name=name;

            this.pass=pass;

          }

          showName(){

            alert(this.name);

          }

          showPass(){

            alert(this.pass);

          }

        }

    (16)继承extends

    old: 子类.prototype = new 父类

    ES6: class 子类 extends 父类{}

    supper关键字:超类、父类

    //old

    function VipUser(name, pass, level){

          User.call(this, name, pass);

          this.level=level;

        }

        VipUser.prototype=new User();

        VipUser.prototype.constructor=VipUser;

        VipUser.prototype.showLevel=function (){

          alert(this.level);

        };

    //ES6   

    class VipUser extends User{

          constructor(name, pass, level){

            super(name, pass);

            this.level=level;

          }

          showLevel(){

            alert(this.level);

          }

        }

    (17)模块化

    exprot default // 导出

    import modA from './a.js' // 引入模块

    原文链接:https://blog.csdn.net/wsymcxy/article/details/82913756  这个大佬写的太全了。

    相关文章

      网友评论

          本文标题:ES6新增的方法有哪些

          本文链接:https://www.haomeiwen.com/subject/bofnactx.html