文章目录
对象的扩展
属性的简洁表示法
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
function f(x, y) {
return {x, y};
}
f(1, 2) // Object {x: 1, y: 2}
除了属性,方法也可以简写。
const o = {
method() {
return "Hello!";
}
};
简洁写法在打印对象时也很有用。
let user = {
name: 'test'
};
let foo = {
bar: 'baz'
};
console.log({user, foo})
// {user: {name: "test"}, foo: {bar: "baz"}}
注意,简写的对象方法不能用作构造函数,会报错。
const obj = {
f() {
this.foo = 'bar';
}
};
new obj.f() // 报错
上面代码中,f
是一个简写的对象方法,所以obj.f
不能当作构造函数使用。
属性名表达式
ES6之前使用字面量方式定义对象(大括号),只能用如下方法。
var obj = {
foo: true,
abc: 123
};
但是定义对象的属性有两种方法。
// 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;
ES6允许字面量定义对象时使用方法二作为对象的属性名。
let propKey = 'foo';
let obj = {
[propKey]: true,
['a' + 'bc']: 123
};
表达式还可以用于定义方法名。
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"}
上面代码中,[keyA]
和[keyB]
得到的都是[object Object]
,所以[keyB]
会把[keyA]
覆盖掉,而myObject
最后只有一个[object Object]
属性。
方法的name属性
函数的name
属性,返回函数名。对象方法也是函数,因此也有name
的属性。
如果对象的方法使用了取值函数(getter
)和存值函数(setter
),则name
属性不是在该方法上面,而是该方法的属性的描述对象的get
和set
属性上面,返回值是方法名前加上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
方法创造的函数,name
属性返回bound
加上原函数的名字;Function
构造函数创造的函数,name
属性返回anonymous
。
(new Function()).name // "anonymous"
var doSomething = function() {
// ...
};
doSomething.bind().name // "bound doSomething"
如果对象的方法是一个 Symbol 值,那么name
属性返回的是这个 Symbol 值的描述。
const key1 = Symbol('description');
const key2 = Symbol();
let obj = {
[key1]() {},
[key2]() {},
};
obj[key1].name // "[description]"
obj[key2].name // ""
上面代码中,key1
对应的 Symbol 值有描述,key2
没有。
属性的可枚举性和遍历
可枚举性
Object.getOwnPropertyDescriptor
可以获取该属性的描述对象。
let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
// {
// value: 123,
// writable: true,
// enumerable: true,
// configurable: true
// }
enumerable
为可枚举性,如果该属性为false
,就表示某些操作会忽略当前属性。
目前,有四个操作会忽略enumerable
为false
属性。
for...in
循环:只遍历对象自身的和继承的可枚举的属性。Object.keys()
:返回对象自身的所有可枚举的属性的键名。JSON.stringify()
:只串行化对象自身的可枚举的属性。Object.assign()
: 忽略enumerable为false的属性,只拷贝对象自身的可枚举的属性。
前三个是ES5就有的,最后一个Object.assign()
是ES6新增的。只有for...in
会返回继承的属性,其他三个都会忽略继承属性。
实际上,引入“可枚举”(enumerable
)这个属性的最初目的,就是让某些属性可以规避掉for...in
操作,不然所以内部属性和方法都会被遍历到。比如,对象原型的toString()
方法,以及数组里的length
属性,就通过“可枚举性”,从而避免被for...in
遍历到。
Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false
Object.getOwnPropertyDescriptor([], 'length').enumerable
// false
上面代码中,因为这俩属性都是false
,因此for...in
不会遍历到这两个继承自原型的属性。
另外,ES6规定,所有Class的原型的方法都是不可枚举的。
Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
// false
总的来说,操作中引入继承的属性会让问题复杂化,大多数时候,我们只关心对象自身的属性。所以,尽量不要用for...in
循环,而用Object.keys()
代替。
属性的遍历
- for…in
循环遍历对象自身和继承的可枚举属性,不含Symbol属性。 - Object.keys(Obj)
返回数组,包括对象自身的不含继承的所有可枚举属性,不含Symbol属性的键名。 - Object.getOwnPropertyNames(obj)
返回一个数组,包含对象自身的所有属性,不含Symbol属性,但是包括不可枚举属性的键名。 - Object.getOwnPropertySymbols(obj)
返回一个数组,包含对象自身的所有Symbol属性的键名。 - Reflect.ownKeys(obj)
返回一个数组,包含对象自身的,不含继承的所有键名。不管是否Symbol,也不管是否可枚举。
以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。
- 遍历所有数值键,按数值升序排列。
- 遍历所有字符串键,按加入时间升序排序。
- 遍历所有Symbol键,按照加入时间升序排列。
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]
个人PS:
在实际应用中,如果后台返回数据为对象(非数组),如{2021: {id: 1}, 2019: {id: 2}, 2020: {id: 3}}
,而此时我们需遍历显示该对象。我们期望的是按照返回顺序显示,但实际情况大相径庭。此时如果想要按照某种顺序显示,只能前端进行数据排列再展示。
super关键字
我们知道,this
关键字总是指向函数所在的当前对象,ES6新增类似关键字super
,指向当前对象的原型对象。
const proto = {
foo: 'hello'
};
const obj = {
foo: 'world',
find() {
return super.foo;
}
};
Object.setPrototypeOf(obj, proto);
obj.find() // "hello"
注意,super
关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。
// 报错,在属性里
const obj = {
foo: super.foo
}
// 报错,在函数里
const obj = {
foo: () => super.foo
}
// 报错,在函数里
const obj = {
foo: function () {
return super.foo
}
}
JavaScript 引擎内部,super.foo
等同于Object.getPrototypeOf(this).foo
(属性)或Object.getPrototypeOf(this).foo.call(this)
(方法)。
对象的扩展运算符
解构赋值
注意事项:
1、解构赋值要求等号右边是一个对象,所以如果等号右边是undefined
或null
,会报错,因为它们无法转为对象。
2、解构赋值必须是最后一个参数,否则会报错。
3、解构赋值是浅拷贝,即如果一个key的value是复合类型的值(数组对象函数),那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。
4、扩展运算符的解构赋值只会复制自身的属性,而不会复制原型对象的属性。
let { ...z } = null; // 运行时错误
let { ...z } = undefined; // 运行时错误
let { x, ...y, ...z } = someObject; // 句法错误
let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2
const o = Object.create({ x: 1, y: 2 });
o.z = 3;
let { x, ...newObj } = o;
let { y, z } = newObj;
x // 1
y // undefined
z // 3
扩展运算符
对象的扩展运算符(...
)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。
let foo = { ...['a', 'b', 'c'] };
foo
// {0: "a", 1: "b", 2: "c"}
{...{}, a: 1}
// { a: 1 }
// 等同于 {...Object(1)}
{...1} // {}
{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
扩展运算符可以合并两个对象。
let ab = { ...a, ...b };
下面代码中,a
的x
和y
属性,拷贝到新对象后,会被覆盖。
let aWithOverrides = { ...a, x: 1, y: 2 };
如果把自定义属性放在扩展运算符前面,就变成了设置新对象的默认属性值。
let aWithDefaults = { x: 1, y: 2, ...a };
与数组的扩展运算符一样,对象的扩展运算符后面可以跟表达式。
const obj = {
...(x > 1 ? {a: 1} : {}),
b: 2,
};
扩展运算符的参数对象之中,如果有取值函数get,这个函数是会直接执行的。
let a = {
get x() {
throw new Error('not throw yet');
}
}
let aWithXGetter = { ...a }; // get自动执行,导致报错
AggregateError错误对象
ES12为了配合新增的Promise.any()
,引入了一个新的错误对象AggregateError
。
AggregateError 在一个错误对象里面,封装了多个错误。如果某个单一操作,同时引发了多个错误,,需要同时抛出这些错误,那么就可以抛出一个 AggregateError 错误对象,把各种错误都放在这个对象里面。
AggregateError 本身是一个构造函数,用来生成 AggregateError 实例对象。
AggregateError(errors[, message])
- errors:数组,每个成员都是一个错误对象。该参数必选。
- message:字符串,表示抛出时的提示信息。该参数可选。
AggregateError的实例对象有三个属性。
name:错误名称,默认为“AggregateError”。
message:错误的提示信息。
errors:数组,每个成员都是一个错误对象。
对象的新增方法
Object.is()
JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。==
自动转换数据类型,===
的NaN
不等于自身,+0
等于-0
。
ES6提出“Same-value equality”(同值相等)算法,用来解决问题。Object.is
就是部署这个算法的新方法。他与===
的行为基本一致。
Object.is('foo', 'foo')
// true
Object.is({}, {})
// false
不同之处只有两个
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
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}
Object.assign(undefined) // 报错
Object.assign(null) // 报错
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true
它的拷贝属性是有限制的,只拷贝源对象的自身属性,不拷贝继承属性,也不拷贝不可枚举的属性(enumerable:false
)。
注意,Object.assign()
实行浅拷贝,而非深拷贝。
对于嵌套的对象,一旦遇到同名属性,它的处理方法时替换,而不是添加。
Object.assign()
可以用来处理数组,但是会把数组视为对象。
Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]
Object.assign()只能进行值的复制,如果要复制的值是一个取值函数,那么将求值后再复制。
const source = {
get foo() { return 1 }
};
const target = {};
Object.assign(target, source)
// { foo: 1 }
它的常见用途有:为对象添加属性,为对象添加方法,克隆对象,合并对象,为属性指定默认值。
Object.getOwnPropertyDescriptors()
ES8引入这个方法返回指定对象所有自身属性(非继承属性)
__proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()
__proto__
属性 用于读取或设置当前对象的原型对象(prototype)
Object.setPrototypeOf()
的作用与__proto__
相同,用来设置一个对象的原型对象。
Object.getPrototypeOf()
用于读取一个对象的原型对象。
Object.keys(),Object.values(),Object.entries()
ES5 引入了Object.keys
方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
ES8引入了跟Object.keys
配套的Object.values
和Object.entries
,作为遍历一个对象的补充手段,供for...of
循环使用。
Object.values
方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
Object.entries()
方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
Object.fromEntries()
Object.fromEntries()
方法是Object.entries()的逆操作,用于将一个键值对数组转为对象。