对象的扩展

2017-10-25 本文已影响0人秋枫残红

属性的简洁表示法

ES6允许在对象中直接写入函数和变量

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo};
const o = {
  method() {
    return "Hello!";
  }
};

// 等同于

const o = {
  method: function() {
    return "Hello!";
  }
};

属性名表达式

即使用变量作为属性名

let lastWord = 'last word';

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

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

也可以表示函数名

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};

obj.hello() // hi

但不可以与简洁表示法同时使用

// 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };

// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};

如果属性名为对象，则自动转化为字符串[object Object]

const keyA = {a: 1};
const keyB = {b: 2};

const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};

myObject // Object {[object Object]: "valueB"}

name属性

用于返回对象名

Object.is()

比较俩值是否相等
不同之处在于该方法认为，NAN等于自身，-0与+0相等

Object.assign()

枚举所有源对象，并添加到一个新对象，主要用于合并对象
如果有相同的属性名，后面的值会覆盖前面的

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

null与undefined放在第一个位置报错
字符串放在第一个位置会转化为数组对象进行拷贝，其他无效
该方法都是浅复制，只复制本身属性，不复制继承，不复制不可枚举的
对于取值函数会直接取到该值，函数名作为键进行复制

const source = {
  get foo() { return 1 }
};
const target = {};

Object.assign(target, source)
// { foo: 1 }

可用于克隆对象，对对象的初始化，为对象添加属性、方法，合并多个对象

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: bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

该方法用于解决Object.assign无法识别默认操作属性setter和getter

const source = {
  set foo(value) {
    console.log(value);
  }
};

const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
Object.getOwnPropertyDescriptor(target2, 'foo')
// { get: undefined,
//   set: [Function: foo],
//   enumerable: true,
//   configurable: true }

proto属性

作为指针，指向该对象的原型对象

Object.setPrototypeOf()

设置一个对象的原型对象，返回值为参数本身

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40

Object.getPrototypeOf()

读取一个对象的原型对象
Object.getPrototypeOf(obj);

super关键字

我们都知道this对象指向当前对象本身，ES6又新增了一个参数super，用于指向当前对象的原型对象，该属性只可以用在对象的方法里，目前只有对象方法的简写法可以被识别为对象的方法，即

// 报错
const obj = {
  foo: super.foo
}

// 报错
const obj = {
  foo: () => super.foo
}

// 报错
const obj = {
  foo: function () {
    return super.foo
  }
}

const proto = {
  x: 'hello',
  foo() {
    console.log(this.x);
  },
};

const obj = {
  x: 'world',
  foo() {
    super.foo();
  }
}

Object.setPrototypeOf(obj, proto);

obj.foo() // "world"

Object.keys()

遍历键（非继承，可遍历）

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

Object.values()

遍历值（，）
不遍历Symbol

Object.entries（）

遍历键值对（，）
不遍历Symbol
除遍历对象外，还可以配合转化为Map结构

const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }

对象的扩展运算符（ES2017）

（1）解构赋值

对象的解构赋值是将可遍历的、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。
由于解构赋值要求等号右边是一个对象，所以如果等号右边是undefined或null，就会报错，因为它们无法转为对象。
解构赋值必须是最后一个参数
解构赋值是浅复制

（2）扩展运算符

扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

比Object.assign简单，而且也是浅复制

对象的各种遍历

ES6 一共有5种方法可以遍历对象的属性。

（1）for...in

for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。

（2）Object.keys(obj)

Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

以上的5种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。

首先遍历所有数值键，按照数值升序排列。
其次遍历所有字符串键，按照加入时间升序排列。
最后遍历所有 Symbol 键，按照加入时间升序排列。

对象的扩展

属性的简洁表示法

属性名表达式

name属性

Object.is()

Object.assign()

Object.getOwnPropertyDescriptors()

proto属性

Object.setPrototypeOf()

Object.getPrototypeOf()

super关键字

Object.keys()

Object.values()

Object.entries（）

对象的扩展运算符（ES2017）

（1）解构赋值

（2）扩展运算符

对象的各种遍历

（1）for...in

（2）Object.keys(obj)

（3）Object.getOwnPropertyNames(obj)

（4）Object.getOwnPropertySymbols(obj)

（5）Reflect.ownKeys(obj)

以上的5种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。

猜你喜欢

热点阅读