亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

ECMAScript6(8):對(duì)象的擴(kuò)展

pingan8787 / 516人閱讀

基本擴(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

相關(guān)文章

  • ECMAScript6 新特性——“數(shù)值擴(kuò)展

    摘要:二進(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...

    Dean 評(píng)論0 收藏0
  • ECMAScript6(3):數(shù)值類(lèi)型擴(kuò)展

    摘要:數(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); ...

    Martin91 評(píng)論0 收藏0
  • ECMAScript6 新特性——“對(duì)象擴(kuò)展

    摘要:屬性的簡(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...

    Clect 評(píng)論0 收藏0
  • ECMAScript6 新特性——“數(shù)組擴(kuò)展

    摘要:原來(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ì)象(包括...

    Eminjannn 評(píng)論0 收藏0
  • ECMAScript6 新特性——“函數(shù)擴(kuò)展

    摘要:返回空字符串,返回將一個(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...

    Jiavan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<