内置对象的扩展-3

2022-10-26
作者流霞
~2.16K 字
次阅读
条评论

1. 属性的简洁表示法
2. 属性名表达式
3. 方法的 name 属性
4. 属性的可枚举性和遍历
1. 4.1. 可枚举性
5. 指数运算符
6. 链判断运算符
7. Null 判断运算符

摘要：对象的扩展和运算符的扩展

属性的简洁表示法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。

let name = '张三';
const func = (a,b)=>{
    return a + b
};
const obj = {
    name,func
}
// 等同于
const obj = {
    name:name,
    func:func
}

属性名表达式

JavaScript 定义对象的属性时，可以直接用标识符作为属性名；也可以用表达式作为属性名，这时要将表达式放在方括号之内。

let obj = {};

obj.name = '张三';
obj['a' + 'bc'] = 123;
// obj = {name:'张三',abc:123}

方法的 name 属性

函数的name属性，返回函数名。对象方法也是函数，因此也有name属性。

const person = {
  sayName() {
    console.log('hello!');
  }
};
person.sayName.name   // "sayName"

属性的可枚举性和遍历

可枚举性

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo');
{
    "value": 123,
    "writable": true, // 值可更改
    "enumerable": true, //可枚举
    "configurable": true // 属性描述符可更改
}

以下操作回忽略enumerable为false的属性

for...in循环：只遍历对象自身的和继承的可枚举的属性。
Object.keys()：返回对象自身的所有可枚举的属性的键名。
JSON.stringify()：只串行化对象自身的可枚举的属性。
Object.assign()：忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。

指数运算符

2 ** 2 // 4
2 ** 3 // 8

// 指数运算符为右结合，多个指数运算符连用时从右边开始计算
2 ** 3 ** 2 // 512，相当于 2 ** (3 ** 2)

// 与等于号结合
let a = 1.5;
a **= 2;

链判断运算符

当读取对象的某个属性时往往需要先判断属性的上层对象是否存在比如，读取message.body.user.firstName这个属性。
层层判断非常麻烦，使用链判断运算符可简化写法，判断时，如果左边的对象为null或undefined就停止运算返回undefined。

// 错误的写法
const  firstName = message.body.user.firstName || 'default';

// 正确的写法
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

// 链判断运算符
const firstName = message?.body?.user?.firstName || 'default';

Null 判断运算符

读取对象属性的时，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值。
但属性的值为空字符串或false或0，默认值也会生效。Null 判断运算符??只有运算符左侧的值为null或undefined时，才会返回右侧的值。

const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;

const headerText = response.settings.headerText ?? 'Hello, world!';
const animationDuration = response.settings.animationDuration ?? 300;

七月檐角的猫