ES6 学习(9) ---对象

1、对象属性简洁表达

　　ES6 中，如果属性值是一个变量，如果对象的属性名和属性值相同，那么就可以使用简洁写法

let key = "key"
let value = "value"
let obj = {key, value}

　　属性的方法也可以简写

let obj = {
  method() { console.log("方法简写") }          
}

// 常用于 setter 和 getter 
const cart = {
  _wheels: 4,

  get wheels () {
    return this._wheels;
  },

  set wheels (value) {
    if (value < this._wheels) {
      throw new Error('数值太小了！');
    }
    this._wheels = value;
  }
}

　　需要注意的是，简写的方法不能用于构造函数

2、属性名表达式

　　ES6 中使用自变量定义对象属性名是，增加了可以使用表达式进行定义，只是需要将表达式用中括号括起来( [] )，但是不能与属性简洁表达一起使用

 1 let propKey = 'foo';
 2 
 3 let obj = {
 4   [propKey]: true,  // 表达式定义属性名
 5   ['a' + 'bc']: 123
 6 };
 7 // 对象的方法名同样可以使用表达式来定义
 8 let obj = {
 9   ['h' + 'ello']() {
10     return 'hi';
11   }
12 };
13 
14 obj.hello() // hi
15 
16 // 不能与简洁表达式一起使用
17 const foo = 'bar';
18 const baz = { [foo] };

　　注意：当定义属性名的表达式是一个对象的话，就会自动转换成字符串 [object object]

3、新增对象方法的name属性 // 返回方法的名

　　如果是setter 和 getter ，则name属性不在此方法上而是在对象的get 和 set 方法上

const obj = {
  get foo() {},
  set foo(x) {}
};

obj.foo.name
// TypeError: Cannot read property 'name' of undefined

const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');

descriptor.get.name // "get foo"
descriptor.set.name // "set foo"

　　如果是bind绑定的函数或者Function构造的函数，name属性同函数name属性相同

　　如果方法的名是用Symbol类型的，则返回这个Symbol类型的描述

const key1 = Symbol('description');
const key2 = Symbol();
let obj = {
  [key1]() {},
  [key2]() {},
};
obj[key1].name // "[description]"
obj[key2].name // ""

4、属性的可枚举性和遍历

　　对象的每个属性都有一个描述对象(Descriptor), 用来控制该属性的行为(可遍历、可修改、值、可配置)

　　通过Object.getOwnPropertyDescriptor()方法来获取这些行为

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的属性，只拷贝对象自身的可枚举的属性。

5、对象的扩展运算符( ... ) // 同数组，不同的是：数组解构按位，而对象解构时按住键名；

　对象的扩展运算符可以用来对象的浅拷贝 let obj = { ... {a:1, b:2} }

　可以进行对象的合并 let obj = { ...{a:1, b: 2}, ...{c: 3, d: 4} } 等同于 Object.assign( {}, {a:1, b: 2}, {c: 3, d: 4} ) ；需要注意的是如果要合并的对象有同名属性，那么后者就会覆盖前者

6、链判断运算符( ?. ) ( ES2020 新增 )

　　在工作中调用接口，会出现获取对象多层内部中的某属性，然而如果其中间某个属性不存在就会报错，因此ES2020 新增链判断运算符；如果中间某个属性不存在就会返回 undefined　　

1 // 之前写法
2 const firstName = (message
3   && message.body
4   && message.body.user
5   && message.body.user.firstName) || 'default';
6 
7  // 链判断运算符
8 const firstName = message?.body?.user?.firstName || 'default';

7、 Null 判断运算符( ?? ) (ES2020 新增)

　　一般对模型变量设置默认值是，我们会使用短路机制 str || "string", 那么str变量是 "", 0, null, undefined,false时就会赋值默认值，如果只有当变量是null 和 undefined时，才会使用默认值，那么就不能使用这种方法；

　　因此ES2020新增了Null判断运算符，只有当变量值是 null 或 undefined时，才会赋值默认值

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

const animationDuration = response.settings.animationDuration ?? 300;

const showSplashScreen = response.settings.showSplashScreen ?? true;

　　需要注意的是，如果与多个逻辑运算符一起使用的时候，需要使用（）表明优先级，否则就会报错

原文地址：https://www.cnblogs.com/newttt/p/12601636.html

ES6 学习(9) ---对象

相关推荐