【ES6】对象的扩展
1.属性的简洁表示法
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} // 等同于 const baz = {foo: foo};
2.属性名表达式
JavaScript 定义对象的属性,有两种方法。 // 方法一 obj.foo = true; // 方法二 obj['a' + 'bc'] = 123;
3.方法的 name 属性
const person = { sayName() { console.log('hello!'); }, }; person.sayName.name // "sayName"
4.super 关键字
我们知道,this关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象。 const proto = { foo: 'hello' }; const obj = { foo: 'world', find() { return super.foo; } }; Object.setPrototypeOf(obj, proto); obj.find() // "hello"
5.对象的扩展运算符
解构赋值
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 }
扩展运算符
对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。 let z = { a: 3, b: 4 }; let n = { ...z }; n // { a: 3, b: 4 }
扩展运算符可以用于合并两个对象。 let ab = { ...a, ...b }; // 等同于 let ab = Object.assign({}, a, b);
6.链判断运算符
ES2020 引入了“链判断运算符”(optional chaining operator)?.
const firstName = message?.body?.user?.firstName || 'default';
const fooValue = myForm.querySelector('input[name=foo]')?.value
使用这个运算符,有几个注意点。 (1)短路机制 ?.运算符相当于一种短路机制,只要不满足条件,就不再往下执行。 a?.[++x] // 等同于 a == null ? undefined : a[++x] 上面代码中,如果a是undefined或null,那么x不会进行递增运算。也就是说,链判断运算符一旦为真,右侧的表达式就不再求值。 (2)delete 运算符 delete a?.b // 等同于 a == null ? undefined : delete a.b 上面代码中,如果a是undefined或null,会直接返回undefined,而不会进行delete运算。 (3)括号的影响 如果属性链有圆括号,链判断运算符对圆括号外部没有影响,只对圆括号内部有影响。 (a?.b).c // 等价于 (a == null ? undefined : a.b).c 上面代码中,?.对圆括号外部没有影响,不管a对象是否存在,圆括号后面的.c总是会执行。 一般来说,使用?.运算符的场合,不应该使用圆括号。 (4)报错场合 以下写法是禁止的,会报错。 // 构造函数 new a?.() new a?.b() // 链判断运算符的右侧有模板字符串 a?.`{b}` a?.b`{c}` // 链判断运算符的左侧是 super super?.() super?.foo // 链运算符用于赋值运算符左侧 a?.b = c (5)右侧不得为十进制数值 为了保证兼容以前的代码,允许foo?.3:0被解析成foo ? .3 : 0,因此规定如果?.后面紧跟一个十进制数字,那么?.不再被看成是一个完整的运算符,而会按照三元运算符进行处理,也就是说,那个小数点会归属于后面的十进制数字,形成一个小数。
7.Null 判断运算符
ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||,但是只有运算符左侧的值为null或undefined时,才会返回右侧的值。 const headerText = response.settings.headerText ?? 'Hello, world!'; const animationDuration = response.settings.animationDuration ?? 300; const showSplashScreen = response.settings.showSplashScreen ?? true;