對(duì)象的擴(kuò)展
對(duì)象本身的數(shù)據(jù)結(jié)構(gòu)的改變:
1:屬性的簡(jiǎn)潔表示:允許在大括號(hào)里面,直接寫入變量和函數(shù)韧拒,作為對(duì)象的屬性和方法淹接。這樣的書寫更加簡(jiǎn)單
const foo = 'df'
const baz = {foo} //等同于{foo:foo}
baz // {foo: "df"}
2:方法也可以簡(jiǎn)寫
const o = {
method(){return 'hello!'} //等同于 method:function(){return 'hello!'}
}
o.method() // 'hello!'
3:屬性名表達(dá)式
es5只有標(biāo)識(shí)符定義屬性,es6允許表達(dá)式做對(duì)象的屬性名叛溢,即把表達(dá)式放在方括號(hào)內(nèi)塑悼。
let propKey = 'foo'
let obj= {
[propKey]:true
}
obj // {foo: true}
4:方法名也可以是表達(dá)式
let obj = {
['h' + 'eo']() {
return 'hi';
}};
obj.heo() // hi
如果屬性名是對(duì)象,會(huì)被轉(zhuǎn)為字符串[object Object]
對(duì)象的屬性可以是字符串和symbol類型
5:對(duì)象方法的name屬性
因?yàn)閷?duì)象的方法名可以是字符串楷掉,symbol厢蒜,方法也可以是get,set方法,所以name的值也有不同
普通的字符串烹植,則返回對(duì)應(yīng)的字符串
get,set方法的name需要在屬性描述符的set,get屬性上獲取
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"
symbol值的會(huì)返回symbol的描述
6:屬性的可枚舉和遍歷
每個(gè)屬性都可以通過Object.getOwnPropertyDescriptor獲取到任意一個(gè)屬性的可配置的屬性:比如值斑鸦,是否可枚舉,是否可配置草雕,是否可修改等
class的原型的方法都是不可枚舉的巷屿,在循環(huán)時(shí)盡量不要使用for...in ,而使用Object.keys();
7:遍歷屬性的方法:
7.1:for...in // 循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性墩虹,不含symbol
7.2:Object.keys() // 返回一個(gè)數(shù)組嘱巾,包括對(duì)象自身的不含繼承的所有可枚舉屬性的鍵名,不含symbol
7.3:Object.getOwnPropertyNames //返回一個(gè)數(shù)組诫钓,包含對(duì)象自身的所有屬性不包含symbol,但是包含不可枚舉屬性的鍵名
7.4:Object.getOwnPropertySymbols // 返回一個(gè)數(shù)組旬昭,包含對(duì)象自身的所有symbol屬性的鍵名
7.5:Reflect.ownKeys //返回一個(gè)數(shù)組,包含對(duì)象自身的不含繼承的所有鍵名尖坤,不管鍵名是symbol或字符串稳懒,也不管是否可枚舉。
遍歷順序:
- 首先遍歷所有數(shù)值鍵慢味,按照數(shù)值升序排列场梆。
- 其次遍歷所有字符串鍵,按照加入時(shí)間升序排列纯路。
- 最后遍歷所有 Symbol 鍵或油,按照加入時(shí)間升序排列。
8:super關(guān)鍵字
指向當(dāng)前對(duì)象的原型對(duì)象驰唬,并且只能用在對(duì)象的方法中顶岸。目前只有對(duì)象方法的簡(jiǎn)寫法可以讓js引擎確認(rèn)腔彰,定義的是對(duì)象的方法:
let obj ={
foo:2
}
let obj1 ={
method(){ //對(duì)象方法的簡(jiǎn)寫中可以使用super
return super.foo
}
}
obj1.method()//2
setPrototypeOf & getPrototypeOf
Object.setPrototypeOf(obj,prototype) //將prototype設(shè)置為obj的原型
Object.getPrototypeOf(obj) // 返回obj的原型對(duì)象
8:對(duì)象的解構(gòu)賦值:
對(duì)象的解構(gòu)賦值用于從一個(gè)對(duì)象取值,相當(dāng)于將目標(biāo)對(duì)象自身的所有可遍歷的(enumerable)辖佣、但尚未被讀取的屬性霹抛,分配到指定的對(duì)象上面。所有的鍵和它們的值卷谈,都會(huì)拷貝到新對(duì)象上面
解構(gòu)賦值要求等號(hào)右邊是一個(gè)對(duì)象杯拐,undefined和null會(huì)報(bào)錯(cuò)
解構(gòu)賦值必須是最后一個(gè)參數(shù)
解構(gòu)賦值是淺拷貝
解構(gòu)賦值不能復(fù)制繼承自原型對(duì)象的屬性
用處:擴(kuò)展某個(gè)函數(shù)的參數(shù),引入其他操作
9:擴(kuò)展運(yùn)算符
用于取出參數(shù)對(duì)象的所有可遍歷屬性世蔗,拷貝到當(dāng)前對(duì)象之中
擴(kuò)展運(yùn)算符后面不是對(duì)象端逼,則會(huì)自動(dòng)轉(zhuǎn)為對(duì)象
擴(kuò)展運(yùn)算符后是數(shù)字,布爾污淋,undefined顶滩,null,都會(huì)返回空對(duì)象
對(duì)象的擴(kuò)展運(yùn)算符等同于使用Object.assign()方法
let aClone = {...obj} //
let aClone1 = Object.assign({},obj)//同上只拷貝對(duì)象實(shí)例屬性寸爆,像完整克隆一個(gè)對(duì)象礁鲁,還拷貝對(duì)象原型的屬性,可以采用下面的寫法
const aClone2 = Object.assign(Object.create(Object.getPrototyOf(obj)),obj) // 將原型和對(duì)象合并
如果用戶自定義的屬性赁豆,放在擴(kuò)展運(yùn)算符后面救氯,則擴(kuò)展運(yùn)算符內(nèi)部的同名屬性會(huì)被覆蓋掉。 這用來修改現(xiàn)有對(duì)象部分的屬性就很方便了歌憨,新的值會(huì)覆蓋前面的屬性
與數(shù)組的擴(kuò)展運(yùn)算符一樣着憨,對(duì)象的擴(kuò)展運(yùn)算符后面可以跟表達(dá)式
用處:合并對(duì)象
10:鏈判斷運(yùn)算符
const firstName = message.body.user.firstName;
es5:
const firstName = (message
&& message.body
&& message.body.user
&& message.body.user.firstName) || 'default';
es6:
const firstName = message?.body?.user?.firstName || 'default';
判斷方法是否存在并執(zhí)行
iterator.return?.()
obj1.method?.() // 2
obj1.aaa?.() // undefined
鏈判斷語(yǔ)法:
* obj?.prop // 對(duì)象屬性
* obj?.[expr] // 同上
* func?.(...args) // 函數(shù)或?qū)ο蠓椒ǖ恼{(diào)用
判斷數(shù)組是否有值
let hex = "#C0FFEE".match(/#([A-Z]+)/i)?.[1];
鏈判斷特點(diǎn):
短路機(jī)制
delete運(yùn)算符,失敗則不刪除
如果屬性鏈有圓括號(hào)务嫡,鏈判斷運(yùn)算符對(duì)圓括號(hào)外部沒有影響甲抖,只對(duì)圓括號(hào)內(nèi)部有影響
鏈判斷運(yùn)算符的左側(cè)不能是 super
鏈判斷不能用來賦值
右側(cè)不得為十進(jìn)制數(shù)值
12:Null判斷運(yùn)算符 ??
左側(cè)只有等于null或undefined的時(shí)候,才會(huì)返回右側(cè)的值,如果為‘’ 或false的時(shí)候心铃,還返回‘’或false
用處:
就是跟鏈判斷運(yùn)算符?.配合使用准谚,為null或undefined的值設(shè)置默認(rèn)值。
如果多個(gè)邏輯運(yùn)算符一起使用去扣,必須用括號(hào)表明優(yōu)先級(jí)柱衔,否則會(huì)報(bào)錯(cuò)。
lhs && middle ?? rhs //報(bào)錯(cuò)
(lhs && middle) ?? rhs // 不報(bào)錯(cuò)愉棱,必須使用括號(hào)表明優(yōu)先級(jí)