美文网首页
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中的类定义语法和ES7的async/await

    学习ES6的类定义语法 基本知识点: ES6中定义类的方式, 就是ES5中定义类的语法糖,但虽然是语法糖,但是整体...

  • js继承 es6和es5

    es6 class是个语法糖,本质上是原型链 es6之前

  • ES6之面向对象

    关键词:面向对象 es6新增了类这个语法糖

  • ES6时代的JavaScript面向对象编程

    ES6时代的JavaScript面向对象编程 ES6带来的类语法糖 类的定义 ES6支持了class,extend...

  • ES6语法糖

    对象字面量是指以{}形式直接表示的对象,比如下面这样: ES6 为对象字面量的语法带来了一些改进:包括属性/方法的...

  • ES6语法糖

    参考 重新认识ES6中的语法糖 ES6入门-let 和 const 命令部分 对象字面量 字面量提供一种简写,我的...

  • es6语法糖

  • JS中的类

    如何定义一个类 ES5中定义一个类: ES6以后的语法(可以看做是ES5的语法糖): ES6的类,完全可以看作构造...

  • javascript中的class

    ES5 定义构造函数 通过构造函数加属性,通过原型加方法: ES6 Class语法 class 实际上是语法糖,编...

  • js 中的类

    ES5 中定义一个类 ES6以后的语法(可以看做是ES5的语法糖) ES6 的类,完全可以看作构造函数的另一种写法...

网友评论

      本文标题:ES6语法糖

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