(1)屬性名表達(dá)式
JavaScript定義對(duì)象的屬性漱贱,有兩種方法妇垢。
//方法一
obj.foo = true
//方法二
obj['a' + 'bc'] = 123
(2)方法的name屬性:函數(shù)的name屬性,返回函數(shù)名宰衙。對(duì)象方法也是函數(shù)平道,因此也有name屬性。
const person = {
sayName() {
console.log('hello')
}
}
person.sayName.name // 'sayName'
上面代碼中供炼,方法的name屬性返回函數(shù)名(即方法名)一屋。
如果對(duì)象的方法使用了取值函數(shù)(getter)和存值函數(shù)(setter),則name屬性不是在該方法上面,而是該方法的屬性的描述對(duì)象的get和set屬性上面袋哼,返回值是方法名前加上get和set
const obj = {
get foo() {},
set foo() {}
}
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方法創(chuàng)造的函數(shù)冀墨,name屬性返回bound加上原函數(shù)的名字;Function構(gòu)造函數(shù)創(chuàng)造的函數(shù)涛贯,name屬性返回anonymous.
(new Function()).name // 'anonymous'
var doSomething = function() { }
doSomething.bind().name // 'bound doSomething'
屬性的遍歷
ES6 一共有5種方法可以遍歷對(duì)象的屬性
(1)for...in...
for...in...循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性(不含Symbol屬性)
(2)Object.keys(obj)
Object.keys返回一個(gè)數(shù)組诽嘉,包括對(duì)象自身的(不含繼承的)所以可枚舉屬性(不含Symbol屬性)的鍵名
(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一個(gè)數(shù)組,包含自身的所有屬性(不含Symbol屬性弟翘,但是包括不可枚舉屬性)的鍵名
(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一個(gè)數(shù)組虫腋,包含對(duì)象自身的所有Symbol屬性的鍵名
(5)Reflect.ownKeys(obj)
Reflect.ownKeys返回一個(gè)數(shù)組,包含對(duì)象自身的所有鍵名稀余,不管鍵名是 Symbol 或字符串悦冀,也不管是否可枚舉
遵守的屬性遍歷的次序規(guī)則:
首先遍歷所有數(shù)值鍵,按照數(shù)值升序排列睛琳。
其次遍歷所有字符串鍵盒蟆,按照加入時(shí)間升序排列。
最后遍歷所有 Symbol 鍵师骗,按照加入時(shí)間升序排列历等。
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]
(3)super關(guān)鍵字:指向當(dāng)前對(duì)象的原型對(duì)象
const proto = {
foo: 'hello'
};
const obj = {
foo: 'world',
find() {
return super.foo;
}
};
Object.setPrototypeOf(obj, proto);
obj.find() // "hello"
注意,super關(guān)鍵字表示原型對(duì)象時(shí)辟癌,只能用在對(duì)象的方法之中募闲,用在其他地方都會(huì)報(bào)錯(cuò)
(4)Object.is():比較兩個(gè)值是否嚴(yán)格相等,與嚴(yán)格比較運(yùn)算符(===)的行為基本一致
Object.is('foo','foo') // true
Object.is({},{}) // false
不同之處只有兩個(gè):一是+0不等于-0愿待,二是NaN等于自身
+0 === -0 //true
NaN === NaN // false
Object.is(+0,-0) // false
Object.is(NaN,NaN) // true
(5)Object.assign():用于對(duì)象的合并,將源對(duì)象(source)的所有可枚舉屬性靴患,復(fù)制到目標(biāo)對(duì)象(target)
const target = {a:1}
const source1 = {b:2}
const source2 = {c:3}
Object.assign(target,source1,source2);
target // {a:1,b:2,c:3}
Object.assign方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象仍侥,后面的參數(shù)都是源對(duì)象
注意,如果目標(biāo)對(duì)象與源對(duì)象有同名屬性鸳君,或多個(gè)源對(duì)象有同名屬性农渊,則后面的屬性會(huì)覆蓋前面的屬性
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}
如果只有一個(gè)參數(shù),Object.assign會(huì)直接返回該參數(shù)
const obj = {a:1}
Object.assign(obj) === obj
如果該參數(shù)不是對(duì)象或颊,則會(huì)先轉(zhuǎn)成對(duì)象砸紊,然后返回
typeof Object.assign(2) // object
由于undefined和null無(wú)法轉(zhuǎn)成對(duì)象传于,所有如果它們作為參數(shù),就會(huì)報(bào)錯(cuò)
Object.assign(undefined) //報(bào)錯(cuò)
Object.assign(null) // 報(bào)錯(cuò)
如果非對(duì)象參數(shù)出現(xiàn)在源對(duì)象的位置(即非首參數(shù))醉顽,那么處理規(guī)則有所不同沼溜。首先,這些參數(shù)都會(huì)轉(zhuǎn)成對(duì)象游添,如果無(wú)法轉(zhuǎn)成對(duì)象系草,就會(huì)跳過(guò)。這意味著唆涝,如果undefined和null不在首參數(shù)找都,就不會(huì)報(bào)錯(cuò)。
let obj = {a:1}
Object.assign(obj,undefined) === obj // true
Object.assign(obj,null) === obj // true
其他類(lèi)型的值廊酣,(即數(shù)值能耻、字符串和布爾值)不在首參數(shù),也不會(huì)報(bào)錯(cuò)亡驰。但是晓猛,除了字符串會(huì)以數(shù)組形式,拷貝入目標(biāo)對(duì)象隐解,其他值都不會(huì)產(chǎn)生效果
const v1 = 'abc'
const v2 = true
const v3 = 10
const obj = Object.assign({},v1,v2,v3)
obj // {"0":"a","1":"b","2":"c"}
屬性名為Symbol值的屬性鞍帝,也會(huì)被Object.assign拷貝
Object.assign({a:'b'},{[Symbol('c')]:'d'})
// {a:'b', Symbol(c): 'd'}
注意點(diǎn)
(1)淺拷貝
Object.assign方法實(shí)行的是淺拷貝,而不是深拷貝煞茫。也就是說(shuō)帕涌,如果源對(duì)象某個(gè)屬性的值是對(duì)象,那么目標(biāo)對(duì)象拷貝得到的是這個(gè)對(duì)象的引用
const obj1 = {a: {b: 1}}
const obj2 = Object.assign({},obj1)
obj1.a.b = 2
obj2.a.b // 2
(2)同名屬性的替換
對(duì)于這種嵌套的對(duì)象续徽,一旦遇到同名屬性蚓曼,Object.assign的處理方法是替換,而不是添加
const target = {a: {b: 'c', d: 'e'}}
const source = {a: { b: 'hello'}}
Object.assign(target, source)
// { a: { b: 'hello' } }
(3)數(shù)組的處理
Object.assign可以用來(lái)處理數(shù)組钦扭,但是會(huì)把數(shù)組視為對(duì)象
Object.assign([1,2,3], [4,5])
//[4,5,3]
(4)取值函數(shù)的處理
Object.assign只能進(jìn)行值的復(fù)制纫版,如果要復(fù)制的值是一個(gè)取值函數(shù),那么將求值后再?gòu)?fù)制
const source = {
get foo() = {return 1}
}
const target = {}
Object.assign(target,source) // {foo: 1}
(6)Object.getOwnPropertyDescriptors():返回???對(duì)象所有自身屬性(非繼承屬性)的描述對(duì)象
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 } }
(7)Object.setPrototypeOf():設(shè)置原型對(duì)象的方法
//格式
Object.setPrototypeOf(object, prototype)
//用法
const o = Object.setPrototypeOf({}, null)
(8)Object.getPrototypeOf():用于讀取一個(gè)對(duì)象的原型對(duì)象
Object.getPrototypeOf(obj)
(9)Object.fromEntries():Object.fromEntries()方法是Object.entries()的逆操作客情,用于將一個(gè)鍵值對(duì)數(shù)組轉(zhuǎn)為對(duì)象
Obejct.fromEntries([
['foo', 'bar'],
['baz', 42]
])
// { foo: 'bar', baz: 42}
原文鏈接:
https://es6.ruanyifeng.com/#docs/object
https://es6.ruanyifeng.com/#docs/object-methods