1. 技术文章
  2. ES6 对象的扩展

ES6 对象的扩展

由 有些话、适合烂在心里 提交于 2019-12-22 00:27:29

属性的简洁表示法

ES6 允许直接写入变量和函数作为对象的属性和方法。

var foo = 'bar'
var baz = {foo}

baz // {foo: 'bar'}

// 等同于
var baz = {foo: foo}

ES6 允许在对象中只写属性名，不写属性值。属性值等于属性名所代表的变量。

function f(x, y) {
    return {x, y}
}

// 等同于

function f(x, y) {
    return {x: x, y: y}
}

方法也可以简写

var o = {
    method() {
        return 'hello'
    }
}

// 等同于
var o = {
    method: function() {
        return 'hello'
    }
}

属性名表达式

JavaScript定义对象的属性有两种方式：

  • obj.foo = true
  • obj['a' + 'bc'] = 123

方法一直接使用标识符作为属性名

方法二使用表达式作为属性名

但是如果使用字面量方式定义对象（使用大括号），则在ES5 中只能使用方法一定义属性。

es6 允许字面量定义对象时用方法二（表达式作为对象的属性名）

属性名表达式与简洁表达式不能同时使用，否则会报错

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

属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object，object]，如果一个对象的两个属性都是对象的话，前者会被后者覆盖，因为都是[object，object]属性。

方法的name属性

函数的name属性返回函数名

如果对象的方法使用了getter和setter，则name属性不是在该方法上，而是在该方法属性的描述对象的get和set属性上。

有两种特殊情况：

  • bind方法创造的函数，name属性返回'bound'加上原函数的名字
  • Function构造函数创造的函数，name属性返回'anonymous'

如果对象的方法是一个，那么name属性返回的时这个Symbol值的描述。

Object.is()

ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===），前者会自动转换数据类型，后者的NaN不等于自身，-0等于+0。

Object.is()方法用于判断两个值是否严格相等。

Object.is(-0, +0) // false
Object.is(NaN, NaN) // true

Object.assign()

基本用法

Object.assign()方法用于将源对象的所有可枚举属性复制到目标对象

var target = {a: 1}
var sourcel1 = {b: 2}
var sourcel2 = {c: 3}

Object.assign(target, sourcel1, sourcel2)
target // {a: 1, b: 2, c: 3}

Object.assign方法的第一个参数是目标对象，后面的参数数源对象。

如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

var target = {a: 1, b: 1}
var source1 = {b: 2, c: 2}
var source2 = {c: 3}

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

只有一个参数，Object.assign会直接返回该参数，如果该参数不是对象，则会先转成对象，再返回。

由于undefined和null无法转换为对象，所以如果他们作为参数就会报错。

如果非对象参数出现在源对象的位置（即非首参数），那么处理规则将有所不同。首先，这些参数会转换成对象，如果无法转换成对象，则会跳过。（字符串会以数组形式复制到目标对象中，因为只有字符串的包装对象会产生可以枚举的属性）

Object.assign复制的属性是有限制的，只复制源对象自身属性（不复制继承属性），也不复制不可枚举的属性（enumerable: false）

注意点

Object.assign方法实行的复制是浅复制，而不是深复制。也就是说源对象某个属性的值是对象，那么目标对象复制得到的是这个对象的引用

var obg1 = {a: {b: 1}}
var obj2 = Object.assign({}, obj1)

obj1.a.b = 2
obj2.a.b  // 2

对于这种嵌套的对象，一旦遇到同名属性，Object.accign的处理方法是替换而不是添加

var target = {a: {b: 'c', d: 'e'}}
var source = {a: {b: 'hello'}}

Object.assign(target, source)
// {a: {b: 'hello'}}

Object.assign可以用来处理数组，但只会把数组视为对象来处理

Object.accign([1, 2, 3], [4, 5])
// [4, 5, 3]

常见用途

对象添加属性

对象添加方法

克隆对象

合并多个对象

属性指定默认值

const DEFAULTS = {
    logLevel: 0,
    outputFormat: 'html'
}

function processContent(options) {
    options = Object.assign(DEFAULTS, options)
    console.log(options)
}
// DEFAULTS 就是默认值

属性的可枚举性

对象的每个属性都具有一个描述对象（Descriptor）,用于控制该属性的行为。

Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象

let obj = {foo: '123'}
Object.getOwnPropertyDescriptor(obj, 'foo')

//{
//    value: "123"
//    writable: true
//    enumerable: true
//    configurable: true
//}

描述对象的enumerable属性称为“可枚举性”如果该属性为fasle，就表示某些操作会忽略当前属性。

ES5 有三个操作会忽略enumerable为false的属性

  • for...in循环：只遍历对象自身的和可继承的可枚举属性
  • Object.keys()：返回对象自身的所有可枚举属性的键名
  • JSON.stringify()：只串行化对象自身的可枚举属性

ES6 新增了一个操作Object.assign()，会忽略enumerable为false的属性，只复制对象自身的可枚举属性。

ES6 规定所有class原型的方法都是不可枚举的。

尽量少用for...in循环，而使用Object.keys()代替

属性的遍历

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

for...in

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

Object.keys(obj)

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

Object.getOwnPropertyNames(obj)

返回一个数组，包含对象自身的所有Symbol属性

Reflect.ownKeys(obj)

返回一个数组，包含对象自身的所有属性，不管属性名是Symbol还是字符串，也不管是否可枚举

以上五种方法，遍历对象的属性时遵守同样的属性遍历次序规则：

  • 首先遍历所有属性名为数值的属性，按照数字排序
  • 其次遍历所有属性名为字符串的属性，按照生成时间排序
  • 最后遍历所有属性名为Symbol值的属性，按照生成时间排序
Reflect.ownKeys({[Symbol()]: 0, b: 0,10: 0, 2: 0, a: 0})
// ["2", "10", "b", "a", Symbol()]

__proto__属性

用来读取或设置当前对象的prototype对象，指向对象的原型。不建议使用，因为这是内部属性

Object.setPrototypeOf()

设置原型链对象的方法

// 格式
Object.setPrototypeOf(object, prototype)

// 用法
Object.setPrototypeOf({}, null)

例子：

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

proto.y = 20
proto.z = 40

obj.y // 20
obj.z // 40

如果第一个参数不是对象，则会自动转为对象。但由于返回的还是第一个参数，所以这个操作不会产生任何效果。

由于undefined和null无法转换为对象，所以如果第一个参数时undefined或null就会报错。

Object.getPrototypeOf()

Object.getPrototypeOf方法用于读取一个对象的prototype对象。

// 格式
Object.getPrototypeOf(obj)

如果参数不是对象，则会被自动转换为对象。

如果参数是undefined或null则会报错。

Object.keys()

Object.keys方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

var obj = {foo: 'bar', baz: '42'}
Object.keys(obj)
// ['foo', 'baz']

可搭配for...in使用

Object.values()

Object.values方法返回一个数组，成员是参与对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

var obj = {foo: 'bar', baz: '42'}
Object.values(obj)
// ['bar', 42]

返回数组的成员顺序，与本章的“属性的遍历”保持一致

Object.values方法只返回自身的可遍历属性，原型的属性除非显式设置enumerable为true

Object.values方法会过滤属性名为Symbol值的属性

Object.values({[Symbol()]: 123, foo: 'abc'})
// ["abc"]

如果参数是一个字符串，则会返回各个字符组成的数组

Object.values('foo')
// ["f", "o", "o"]

字符串会先转化为类数组对象，字符串的每个值就是该对象的属性

如果参数不是对象，Object.values会将其先转化为对象，由于数值和布尔值的包装对象都不会为实例添加非继承属性，所有Object.values会返回空数组。

Object.entries()

Object.entries方法返回一个数组，成员是参与对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

var obj = {foo: 'bar', baz: 42}
Object.entries(obj)

// [["foo", "bar"], ["baz", 42]]

除了返回值不同，该方法与Object.values基本一致

如果原对象的属性名是一个Symbol值，该属性会被忽略。

Object.entries的基本用途是遍历对象的属性

Object.entries还可以将对象转换为真正的map结构

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

对象的扩展运算符

未完待续...

 

 

 

 

标签
foo
var
return
var函数
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!