美文网首页
ES6语法糖

ES6语法糖

作者: Jocelyn_Long | 来源:发表于2018-04-23 10:45 被阅读692次

    参考

    对象字面量

    字面量提供一种简写,我的理解是简写定义一个属性与属性值都为字面量的对象。
    而且支持计算属性 直接用中括号将变量包含起来就可以直接使用。
    var person = { [meteInfo] : {gender: 'male',age: '10'}};

    ES6 的对象字面量方法简写允许我们省略对象方法的function关键字及之后的冒号。
    tips:简写与计算属性不能同时使用。

    箭头函数

    不能命名,但可以赋值给一个变量。不能当做构造函数。
    没有props属性。不改变this的指向。

    (参数1, 参数2, …, 参数N) => { 函数声明 }
    (参数1, 参数2, …, 参数N) => 表达式(单一)
    //相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }
    // 当只有一个参数时,圆括号是可选的:
    单一参数) => {函数声明}
    单一参数 => {函数声明}
    // 没有参数的函数应该写成一对圆括号。
    () => {函数声明}
    

    tips:
    参数或返回值为对象都必须用小括号包起来,不然会出现解析异常。
    有逻辑运算符时,也需要使用小括号提升运算等级。

    解构赋值
    • 解构的语法是用花括号{}
    • 对象解构,使用var {name} = character; 可以直接获取character中的类。
    • {}中还可以使用逗号表达式,引用多个属性。还可以在变量后采用 : [别名]的方式取别名
    • 解构的值还可以是对象,所以可以多层解构。
    • 解构还可以使用默认值。 var {gender = 'male'} = character; 如果对象中不存在则使用默认值;
    • 解构可以使用计算属性,但是必须命别名,不然浏览器识别不了。
    • 数组解构类似对象解构,还可以在位置留白,也可以只取部分数据。
    • 函数参数同样可以解构(一般会配置默认值)。配合剩余参数可以很灵活的实现某些动态传参。
    剩余参数rest与扩展符

    在最后的参数前面加... 既为剩余参数。

    function join(separator, ...list) {
    return list.join(separator)
    }
    join('; ', 'first', 'second', 'third')
    // <- 'first; second; third'
    

    扩展运算符可以将任意枚举对象转成数组。
    在对象前面加... 即使用扩展运算符将对象转为了数组。

    模板字符串

    模板字符串采用反引号,在模板字符串中可以使用${}包含表达式。
    var text = `This is my first template literal`
    多行字符串直接包含在反引号中即可。不会对/n 进行解析。需要解析可以采用String.raw

    var text = String.raw`"\n" is taken literally.
    It'll be escaped instead of interpreted.`
    console.log(text)
    // "\n" is taken literally.
    // It'll be escaped instead of interpreted.
    
    let 和const声明变量
    • let与const不存在变量提升。作用域为{}块作用域。存在TDZ(Temporal Dead Zone),在声明语句之前调用会报错。
    • let与const的区别在于。const在声明时必须赋初始值,且不可以更改,(可以更改值,不能更改引用)。let则无此限制。
    • 由于const的方式影响最小,建议定义的一些共用变量采用const。其他则用let替代var。

    此处还有顶层对象和窗口对象,具体概念还是自己去看ES6入门吧.

    相关文章

      网友评论

          本文标题:ES6语法糖

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