基本擴(kuò)展
允許使用已有對(duì)象賦值定義對(duì)象字面量,并且只寫(xiě)變量名即可
var name = "Bob"; var getName = function(){console.log(this.name);}; var person = {name, getName}; //相當(dāng)于 //var person = { //name: "Bob", //getName: function(){console.log(this.name);} //} person.getName(); //"Bob"
可以像定義存取器那樣定義方法
var o = { _age: 10, _score: 60, age(num){ if(num > 0) { this._age = num; return this; } return this._age; }, get score(){ return this._score; } }; console.log(o.age()); //10 o.age(15); console.log(o.age()); //15 console.log(o.score); //60 o.score = 100; //TypeError
注意,以下代碼是等同的:
var obj = { class () {} //并不會(huì)因?yàn)?class 是關(guān)鍵字而解析錯(cuò)誤 }; //等價(jià)于 var obj = { "class": function() {} };
如果一個(gè)方法是 Generator 函數(shù),需要在前面加 *:
var obj = { time: 1, *gen(){ yield "hello " + time; time++; } }
屬性名表達(dá)式
js 本來(lái)可以這樣 obj["k"+"ey"] 訪(fǎng)問(wèn)一個(gè)對(duì)象屬性,現(xiàn)在也可以這樣定義屬性了:
var key1 = "name"; var key2 = "age"; var o = { [key1]: "Bob", [key2]: 18, ["first" + key1]: "Ellen" }; o.name; //"Bob" o.age; //18 o.firstname; //"Ellen"
注意:該方法不能和上一小節(jié)使用已有標(biāo)識(shí)符定義對(duì)象字面量的方法混合使用,否則會(huì)報(bào)錯(cuò);
//錯(cuò)誤用法 var foo = "bar"; var bar = "abc"; var baz = {[foo]}; //報(bào)錯(cuò)
方法的 name 屬性
函數(shù)有 name 屬性,方法也就有 name 屬性。一般方法 name 返回函數(shù)名(不包括對(duì)象名),對(duì)于存取器方法,沒(méi)有 name 屬性:
var o = { _age: 10, _score: 60, _name: "Bob", _firstname: "Ellen", set age(num){ if(num > 0) { this._age = num; return this; } }, get age(){ return this._age; }, get score(){ return this._score; }, name(n){ if(!n) return this._name + " " + this._firstname; this._name = n; return this; }, set firstname(n){ if(n) this._firstname = n; return this; } }; console.log(o.name.name); //"name" console.log(o.age.name); //undefined console.log(o.score.name); //undefined console.log(o.firstname); //undefined,所以 set 函數(shù)更不會(huì)有 name 屬性
如果對(duì)象的方法是個(gè) symbol,name 屬性為空字符串 "" :
var sym1 = new Symbol("description of sym1"); var sym2 = new Symbol(); var o = { [sym1](){}, [sym2](){}, }; o[sym1].name; //"" o[sym2].name; //""
靜態(tài)方法
Object.is(a,b): 比較a,b兩個(gè)值是否嚴(yán)格相等,相當(dāng)于 ===, 但有一點(diǎn)不一樣:
-0 === +0; //true NaN === NaN; //false Object.is(-0, +0); //false Object.is(NaN, NaN); //true
Object.assign(target, source1,source2,...): 將每個(gè) source 對(duì)象自身的可枚舉屬性復(fù)制到 target 對(duì)象上,不包括原型鏈上的屬性和不可枚舉屬性。只有有一個(gè)參數(shù)不是對(duì)象,就會(huì)拋出 TypeError 錯(cuò)誤。遇到同名屬性,排在后面的會(huì)覆蓋前面的:
var target = {a:1,b:2}; var source1 = {a:3,c:3}; var source2 = {a:2,d:0}; Object.assign(target, source1, source2); console.log(target); //{a: 2, b: 2, c: 3, d: 0}
對(duì)于屬性名是 symbol 的可枚舉屬性也會(huì)被復(fù)制:
Object.assign({a:"b"}, {[Symbol("c")]:"d"}); //{a: "b", Symbol(c): "d"}
對(duì)于同名屬性存在嵌套對(duì)象,外層會(huì)被直接替換:
Object.assign({a:{b:"c",d:"e"}}, {a:{b:"hello"}}); //{a:{b:"hello"}}
可以用 Object.assign處理數(shù)組,但會(huì)視其為對(duì)象:
Object.assign([1,2,3], [4,5]); //[4, 5, 3]
技巧:為對(duì)象添加屬性方法
Object.assign(String.prototype, { newProperty: "value", newFunction: function(){} })
技巧:克隆對(duì)象
Object.assign({},origin);
技巧:為對(duì)象添加屬性方法
Object.assign(target, ...source);
技巧:為對(duì)象添加屬性方法
const DEFAULT_OPTION = { //默認(rèn)值 a: 1, b: 2 }; function processContent(newOption){ return Object.assign({}, DEFAULT_OPTION, newOption); } //設(shè)置屬性應(yīng)該是基本類(lèi)型,否則會(huì)因?yàn)樯羁截惓鰡?wèn)題對(duì)象屬性的可枚舉性與遍歷
以下6個(gè)操作會(huì)忽略不可枚舉的屬性
for...in循環(huán)
Object.keys()
JSON.stringify()
Object.assign()
Reflect.enumerate()
擴(kuò)展運(yùn)算符 ...
以下4個(gè)方法不忽略不可枚舉屬性
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Reflect.ownKeys()
以上9個(gè)方法中,只有2個(gè)會(huì)操作包含繼承到的屬性
for...in循環(huán)
Reflect.enumerate()
以上9個(gè)方法中,只有1個(gè)方法可以獲得 Symbol 屬性
Object.getOwnPropertySymbols()
除此之外需要強(qiáng)調(diào)的是 ES6 中,所有 class 的原型方法都是不可枚舉的:
Object.getOwnPropertyDescriptor(class{foo(){}}.prototype, foo).enumerable; //false
ES6 起,有了7中遍歷屬性的方法:
for...in: 循環(huán)遍歷對(duì)象自身和繼承到的可枚舉屬性,不包括 Symbol 屬性
Object.keys(obj): 返回包含自身可枚舉屬性的屬性名數(shù)組,不包含 Symbol 屬性
Object.getOwnPropertyNames(obj): 同上,但包括不可枚舉屬性
Object.getOwnPropertySymbols(obj): 返回自身所有 Symbol 屬性名的數(shù)組,包括不可枚舉屬性
Reflect.ownKey(obj): 返回自身所有屬性名數(shù)組,包括不可枚舉屬性和 Symbol 屬性名
Reflect.enumerate(): 返回一個(gè) Iterator, 用來(lái)遍歷對(duì)象自身及繼承到的可枚舉屬性,不包括 Symbol 屬性;和 for...in 一樣
for...of: 只能遍歷具有 Iterator 接口的對(duì)象,具體作用范圍由 iterator 決定,遍歷沒(méi)有 iterator 的對(duì)象會(huì)報(bào)錯(cuò)
以上方法除了 for...of 以外,遍歷順序?yàn)椋?/p>
首先遍歷所有屬性名為數(shù)字的屬性,按數(shù)字大小排序;
其次遍歷所有屬性名為字符串的屬性,按屬性生成時(shí)間排序;
最后遍歷所有屬性名為 Symbol 的屬性,按屬性生成時(shí)間排序;
對(duì)象的__proto__屬性這是個(gè)很老很老的屬性,在大家想期待下,ES6終于把它寫(xiě)進(jìn)去了,嗯?...是寫(xiě)進(jìn)附錄了。這個(gè)屬性用來(lái)讀寫(xiě)當(dāng)前的對(duì)象的原型對(duì)象obj.constructor.prototype
從本質(zhì)上來(lái)講,__proto__ 是定義在Object.prototype 上的一個(gè)存取器函數(shù):
function isObject(a){ return Object(a) === a; } Object.defineProperty(Object.prototype, "__proto__", { get(){ let _thisObj = Object(this); return Object.getPrototypeOf(_thisObj); }, set(proto){ if(this == null) throw new TypeError(); if(!isObject(this) || !isObject(proto)) return undefined; let status = Object.setPrototypeOf(this, proto); if(! status) throw new TypeError(); } });
但是,還是不建議使用這個(gè)東西,畢竟看它這名字就是個(gè)內(nèi)部屬性,因?yàn)樗辛瞬患樱槐WC所以終端都能用,所以ES6推薦用下面這兩個(gè)屬性:
Object.setPrototypeOf(obj, newProto); //寫(xiě) Object.getPrototypeOf(obj); //讀
簡(jiǎn)單舉一個(gè)例子:
function Rectangle(){} var rec = new Rectangle(); Object.getPrototypeOf(rec) === Rectangle.prototype; //true Object.setPrototypeOf(rec, Object.prototype); Object.getPrototypeOf(rec) === Rectangle.prototype; //false
當(dāng)然如果你把一個(gè)對(duì)象的原型設(shè)置成了 null, 也是可以的,只是,它不具備任何你聽(tīng)說(shuō)過(guò)的方法了:
var o = Object.setPrototypeOf({}, null); //等價(jià)于 var o = {"__proto__": null}; Object.getPrototypeOf(o); //null o.toString(); //TypeError: o.toString is not a function對(duì)象的擴(kuò)展運(yùn)算符
這是 ES7 的一個(gè)提案, babel可以使用器部分功能使用。
rest參數(shù)
用法和數(shù)組中很類(lèi)似,這里不再過(guò)多贅述,直接看幾個(gè)例子吧:
var {x,y,...z} = {x: 1, y: 2, a: 3, d: 4}; //x=1, y=2, z={a: 3, d: 4}
值得強(qiáng)調(diào)的是, 對(duì)象的rest參數(shù)形式執(zhí)行的是淺拷貝,賦值得到的是原對(duì)象的引用:
let obj = {a: {b: 1}}; let {...x} = obj; obj.a.b = 2; console.log(x.a.b); //2
此外 rest 不會(huì)復(fù)制不可枚舉屬性和繼承自原型的屬性:
var p = {a: 0}; var o = {b: 2}; var o = Object.defineProperty(o, "foo", { value: 2, configurable: true, enumerable: false, writable: true }); Object.setPrototypeOf(o, p); var u = { ...p }; console.log(u); //{b:2}
擴(kuò)展運(yùn)算符
復(fù)制參數(shù)對(duì)象所有可遍歷屬性到當(dāng)前對(duì)象中:
var o1 = {a: 1, b: 2}; var n = { ...o1 }; //n={a: 1, b: 2}; //相當(dāng)于 var n = Object.assign({}, o1);
可以用擴(kuò)展運(yùn)算符合并多個(gè)對(duì)象, 排后的屬性會(huì)覆蓋之前的屬性:
var source0 = {a:1,b:2}; var source1 = {a:3,c:3}; var source2 = {a:2,d:0}; Object.assign(target, source1, source2); var target = {...source0, ...source1, ...source2}; console.log(target); //{a: 2, b: 2, c: 3, d: 0}
注意一點(diǎn):如果擴(kuò)展運(yùn)算符的參數(shù)對(duì)象有 get 方法,該方法會(huì)被執(zhí)行:
var a = {o:1,p:2,m:4}; var withoutError = { ...a, get x(){ throw new Error(); } }; //不報(bào)錯(cuò) var withError = { ...a, ...{get x(){ throw new Error(); }} }; //報(bào)錯(cuò)
如果擴(kuò)展對(duì)象是 null 或 undefined,會(huì)被忽略,不報(bào)錯(cuò)
var o = { ...null, ...undefined}; //不報(bào)錯(cuò) console.log(o); //{}
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/97449.html
摘要:二進(jìn)制和八進(jìn)制表示法提供了二進(jìn)制和八進(jìn)制數(shù)值的新的寫(xiě)法,分別用前綴或和或表示。用來(lái)檢查是否為有窮以及是否為這兩個(gè)新方法只對(duì)數(shù)值有效,非數(shù)值一律返回。引入了和這兩個(gè)常量,用來(lái)表示這個(gè)范圍的上下限。因?yàn)橛芯认拗?,超過(guò)的次方的值無(wú)法精確表示。 1 二進(jìn)制和八進(jìn)制表示法 ES6提供了二進(jìn)制和八進(jìn)制數(shù)值的新的寫(xiě)法,分別用前綴0b(或0B)和0o(或0O)表示。 console.log(0b10...
摘要:數(shù)值類(lèi)型擴(kuò)展類(lèi)型新增了如下特性支持二進(jìn)制和八進(jìn)制二進(jìn)制用或開(kāi)頭八進(jìn)制用或開(kāi)頭新加方法判斷一個(gè)數(shù)字是否有限方法判斷一個(gè)變量是否。值得注意的是如果將非數(shù)值傳入這兩個(gè)函數(shù)一律返回。對(duì)于無(wú)法轉(zhuǎn)換為數(shù)值的參數(shù)返回符合函數(shù)。 數(shù)值類(lèi)型擴(kuò)展 Number 類(lèi)型新增了如下特性: 支持二進(jìn)制和八進(jìn)制 二進(jìn)制用 0b 或 0B 開(kāi)頭, 八進(jìn)制用 0o 或 0O 開(kāi)頭: Number(0b1101); ...
摘要:屬性的簡(jiǎn)潔表示法允許直接寫(xiě)入變量和函數(shù)作為對(duì)象的屬性和方法。,中有返回一個(gè)數(shù)組,成員是參數(shù)對(duì)象自身的不含繼承的所有可遍歷屬性的鍵名。對(duì)象的擴(kuò)展運(yùn)算符目前,有一個(gè)提案,將解構(gòu)賦值擴(kuò)展運(yùn)算符引入對(duì)象。 1 屬性的簡(jiǎn)潔表示法 ES6允許直接寫(xiě)入變量和函數(shù)作為對(duì)象的屬性和方法。 寫(xiě)入屬性 var name = value; var obj = { name }; console.log...
摘要:原來(lái)的也被修改了數(shù)組實(shí)例的喝方法,用于找出第一個(gè)符合條件的數(shù)組成員。它的參數(shù)是一個(gè)回調(diào)函數(shù),所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù),直到找出第一個(gè)返回值為的成員,然后返回該成員。數(shù)組實(shí)例的方法使用給定值,填充一個(gè)數(shù)組。 1 Array.from() Array.from方法用于將兩類(lèi)對(duì)象轉(zhuǎn)為真正的數(shù)組:類(lèi)似數(shù)組的對(duì)象(array-like object)和可遍歷(iterable)的對(duì)象(包括...
摘要:返回空字符串,返回將一個(gè)具名函數(shù)賦值給一個(gè)變量,則和的屬性都返回這個(gè)具名函數(shù)原本的名字。不可以使用對(duì)象,該對(duì)象在函數(shù)體內(nèi)不存在。等到運(yùn)行結(jié)束,將結(jié)果返回到,的調(diào)用幀才會(huì)消失。 1 函數(shù)參數(shù)的默認(rèn)值 ES6允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值,即直接寫(xiě)在參數(shù)定義的后面: function log(x = message.,y = duration infomation.) { consol...
閱讀 849·2023-04-25 22:50
閱讀 1680·2021-10-08 10:05
閱讀 1106·2021-09-30 09:47
閱讀 2061·2021-09-28 09:35
閱讀 966·2021-09-26 09:55
閱讀 3542·2021-09-10 10:51
閱讀 3606·2021-09-02 15:15
閱讀 3404·2021-08-05 09:57