• JavaScript——ES6新特性


    默认参数

    var a = function(m,n){
        var m = m || 50;
        var n = n || 'es';
        //...
    }
    

    变为直接放在函数签名中,因为如果参数为0,在JavaScript中为false

    var a = function(m=50,n='es'){
        //do something
    }
    

    规范:设定了默认值的入参,应该放在没有设置默认值的参数之后

    模板字符串

    var myname = 'wlfsmile';
    var yourname = 'youname';
    
    var name = 'your name is'+ yourname +'and my name is'+ myname;
    

    变为

    var name = `your name is ${yourname} and my name is ${myname}`;
    

    解构赋值

    • ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值
      数组
        var [a,b,c]=[11,22,33]
        console.log(a,b,c)//11 22 33
    
        var [a, ,b] = [1, 2, 3, 4, 5];
        console.log(a); // => 1
        console.log(b); // => 3
    

    对象

    var{name,age}={name:"张三",age:"20"}
        console.log(name,age)//张三 20
    

    解构json

    var jike = {"name":"tom","age":"23","sex":"男"};
        var {name,age,sex}=jike;
        console.log(name,age,sex)//tom 23 男
    
        function cal(a,b){
            var ret1 = a+b;
            var ret2 = a-b;
            var ret3 = a*b;
            var ret4 = a/b;
            return [ret1,ret2,ret3,ret4]
        }
        var [r1,r2,r3,r4] = cal(10,5);
        console.log(r1,r2,r3,r4)//15 5 50 2
    
    

    let 和 const

    let
    • 无变量提升
    • 有块级作用域
    • 禁止重复声明
    const
    • 无变量提升
    • 有块级作用域
    • 禁止重复声明
    • 禁止重复赋值
    • 必须要附初始值

    箭头函数

    特性
    • 共享父级this对象
    • 共享父级arguments
    • 不能当做构造函数(因为箭头函数没有自己的this对象)
    语法
    • 当箭头函数入参只有一个时可以省略入参括号
    • 当入参多余一个或没有入参时必须写括号
    • 当函数体只有一个 return 语句时可以省略函数体的花括号与 return 关键字
    this
    //before
    var obj = {
        arr: [1, 2, 3, 4, 5, 6],
        getMaxPow2: function() {
            var that = this,
                getMax = function() {
                    return Math.max.apply({}, that.arr);
                };
            
            return Math.pow(getMax(), 2);
        }
    }
    
    //after
    var obj = {
        arr: [1, 2, 3, 4, 5, 6],
        getMaxPow2: function() {
            var getMax = () => {
                return Math.max.apply({}, this.arr);
            }
    
            return Math.pow(getMax(), 2);
        }
    }
    
    • 在箭头函数中,函数体内部没有自己的 this,默认在其内部调用 this 的时候,会自动查找其父级上下文的 this 对象(如果父级同样是箭头函数,则会按照作用域链继续向上查找)

    注意

    • 有的情况函数需要自己的this,例如DOM事件绑定时候回调函数,需要使用this操作DOM,这时候只能使用传统的匿名函数
    • 在严格模式下,如果箭头函数的上层函数均为箭头函数,那么this对象将不可用
    arguments
    • 当函数体中有另外一个函数,并且该函数为箭头函数时,该箭头函数的函数体中可以直接访问父级函数的 arguments 对象。
    function getSum() {
        var example = () => {
            return Array
                .prototype
                .reduce
                .call(arguments, (pre, cur) => pre + cur);
        }
    
        return example();
    }
    getSum(1, 2, 3); // => 6
    
    • 由于箭头函数本身没有 arguments 对象,所以如果他的上层函数都是箭头函数的话,那么 arguments 对象将不可用。

    类与继承

    • 本质为对原型链的二次包装
    • 类没有提升
    • 不能使用字面量定义属性
    • 动态继承类的构造方法中super优先于this
    /* 类不会被提升 */
    let puppy = new Animal('puppy'); // => ReferenceError
    
    class Animal {
        constructor(name) {
            this.name = name;
        }
    
        sleep() {
            console.log(`The ${this.name} is sleeping...`);
        }
    
        static type() {
            console.log('This is an Animal class.');
        }
    }
    
    let puppy = new Animal('puppy');
    
    puppy.sleep();    // => The puppy is sleeping...
    
    /* 实例化后无法访问静态方法 */
    puppy.type();     // => TypeError
    
    Animal.type();    // => This is an Animal class.
    
    /* 实例化前无法访问动态方法 */
    Animal.sleep();   // => TypeError
    
    /* 类不能重复定义 */
    class Animal() {} // => SyntaxError
    

    注意

    • 类的定义中有一个特殊的constructor(),该方法名固定,表示该类的构造函数(方法),在类的实例化过程中会被调用
    • 类中无法像对象一样使用 prop: value 或者 prop = value 的形式定义一个类的属性,我们只能在类的构造方法或其他方法中使用 this.prop = value 的形式为类添加属性。
    类的继承
    class Programmer extends Animal {
        constructor(name) {
            /* 在 super 方法之前 this 不可用 */
            console.log(this); // => ReferenceError
            super(name);
            console.log(this); // Right!
        }
        
        program() {
            console.log("I'm coding...");
        }
    
        sleep() {
            console.log('Save all files.');
            console.log('Get into bed.');
            super.sleep();
        }
    }
    
    let coder = new Programmer('coder');
    coder.program(); // => I'm coding...
    coder.sleep();   // => Save all files. => Get into bed. => The coder is sleeping.
    
    • 如果子类有构造方法,那么在子类构造方法中使用 this 对象之前必须使用 super() 方法运行父类的构造方法以对父类进行初始化。
    • 在子类方法中我们也可以使用 super 对象来调用父类上的方法。如示例代码中子类的 sleep() 方法:在这里我们重写了父类中的 sleep() 方法,添加了两条语句,并在方法末尾使用 super 对象调用了父类上的 sleep() 方法。

    Promise

    模块化(import和export)

    • export暴露,import引入
    • 封闭的代码(每个模块都有自己完全独立的代码块,跟作用域类似,但是更加封闭)
    • 无限制导出导出
    • 默认严格模式下运行

    参考ES6 常用新特性讲解

  • 相关阅读:
    C# 获取本地电脑所有的盘符
    C#winform程序安装在默认路径提示权限不足的问题
    BadImageFormatException异常处理
    未能找到元数据文件解决办法
    [转]DllImport属性详解
    九度oj1163题
    一致性哈希
    salt-stack部署
    查询系统支持的最大线程和进程数量
    Linux 单机测试 RS232 串口
  • 原文地址:https://www.cnblogs.com/wlfsmile/p/8001365.html
Copyright © 2020-2023  润新知