es6 用法总结3（对象）

原创已于 2022-10-24 14:50:32 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

于 2022-10-24 11:45:57 首次发布

js 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了JavaScript中对象属性的简洁表示法、属性名表达式、属性的可枚举性和遍历，以及解构赋值的用法。通过示例展示了如何进行浅拷贝，并解释了Object.getOwnPropertyDescriptors方法的作用。对于开发人员理解JavaScript对象操作和解构赋值有重要参考价值。

属性的简洁表示法

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

属性名表达式

let propKey = 'foo';
let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

let lastWord = 'last word';
const a = {
  'first word': 'hello',
  [lastWord]: 'world'
};

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

属性的可枚举性和遍历

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

解构赋值

注意，解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

如果想完整克隆一个对象，还拷贝对象原型的属性，可以采用下面的写法

// 写法一
const clone1 = {
  __proto__: Object.getPrototypeOf(obj),
  ...obj
};

// 写法二
const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
);

// 写法三
const clone3 = Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
)

写法一的__proto__属性在非浏览器的环境不一定部署，因此推荐使用写法二和写法三

Object.getOwnPropertyDescriptors

const obj = {
  foo: 123,
  get bar() { return 'abc' }
};

Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

Object.getOwnPropertyDescriptors()方法返回一个对象，所有原对象的属性名都是该对象的属性名，对应的属性值就是该属性的描述对象