ES6 物件的擴充套件

2022-07-29 00:03:24 字數 4527 閱讀 7624

1. 物件成員 的簡潔寫法

const foo = 'bar';

const result = ;

// 上式 等同於:

const foo = 'bar';

const result = ;

const o = 

};// 上式 等同於

const o =

};

2. 自定義建立物件時,屬性名 可以是 動態表示式
// 如下:es6支援;es5不支援

let lastword = 'last word';

const a = ;

// 如下:es5 、es6 都支援

let obj = {};

const aa = 'name';

obj[aa] = 'zhang';

// 報錯

const foo = 'bar';

const bar = 'abc';

const baz = ;

// 正確

const foo = 'bar';

const baz = ;

1. 作用:取出物件中自身 可列舉的、非繼承的屬性
let z = ;

let result = ;

console.log(result); //

2. 擴充套件運算子 結合 解構賦值
let  = ;

console.log(x); // 1

console.log(y); // 2

console.log(z); //

let  = obj; // 句法錯誤

let = obj; // 句法錯誤

let o2 = ;

o2.__proto__ = o1;

let = o2;

o3 //

3. 等同於 object.assign( ) :物件屬性拷貝合併(淺拷貝)
let result = ;

// 等同於

let result = object.assign({}, a, b);

const a = 

};const aclone = ;

a.name = 'xin';

a.info.age = 20;

console.log(aclone); // aclone.name 值為 'zhang';aclone.info.age 值為20

1. 語法object.assign(target, source1, source2)

2. 作用:物件屬性的合併

3. 物件的屬性如果是物件,則為屬性物件的淺拷貝:只是拷貝了 屬性物件的指標

const a = ;

const b =

};const result = object.assign(a, b);

console.log(result.info === b.info); // true

const a = 

};const aclone = object.assign({}, a);

console.log(a === aclone); // 輸出false;但改變了 a.info 中的屬性;aclone.info 中的屬性也會變化

4. 如果引數不是物件,會被預設轉成物件(了解)

引數source1:(源物件)

1. es5 引入 object.keys( )

var obj = ;

console.log(object.keys(obj)); // ["foo", "baz"]

2. es6 補充 object.values( )

var obj = ;

console.log(object.values(obj)); // ["bar", 42]

3. es6 補充 object.entries( )

const obj = ;

console.log(object.entries(obj)); // [ ["foo", "bar"], ["baz", 42] ]

const obj = ;

const map = new map(object.entries(obj));

map // map

4. 遍歷 物件屬性 的方法彙總

(2)遍歷物件屬性的順序:以上五種方法都遵循,如下

1. 回顧:獲取物件屬性 的描述物件object.getownpropertydescriptor(obj, property)

const obj = ;

const result = object.getownpropertydescriptor(obj, 'foo');

console.log(result);

//

2. 回顧:給物件新增屬性 和 屬性的描述資訊object.defineproperty(obj, property, descriptor)

var obj = {};

object.defineproperty(obj, "a", );

// 如上**,等同於:

var o = {};

o.a = 1;

3. 回顧:判斷物件的屬性 是否是繼承的 / 自身提供的myobject.hasownproperty(property)

4. 回顧:物件屬性的 可列舉性object.getownpropertydescriptor(obj, property).enumerable

console.log(object.getownpropertydescriptor(, 'length').enumerable);

// false

5. 回顧:判斷屬性是否是 物件自身的 並且 可列舉maobject.propertyisenumerable(property)

6. es6:獲取物件所有自身(不含繼承)屬性 的描述物件object.getownpropertydescriptors

const obj = 

};const result = object.getownpropertydescriptors(obj)

console.log(result);

// ,

// bar:

// }

1.__proto__獲取物件的原型物件:只有瀏覽器廣泛支援(不推薦使用)

2. es6設定原型物件object.setprototypeof(object, prototype)

let proto = {};

let obj = ;

object.setprototypeof(obj, proto);

proto.y = 20;

proto.z = 40;

obj.x // 10

obj.y // 20

obj.z // 40

object.setprototypeof(1, {}) === 1              // true

object.setprototypeof('foo', {}) === 'foo' // true

object.setprototypeof(true, {}) === true // true

object.setprototypeof(undefined, {});   // 報錯

object.setprototypeof(null, {}); // 報錯

3. es6獲取原型物件object.getprototypeof(object)

// 正確用法

const obj =

};// 以下三種情況,都不允許,會報錯

const obj =

const obj =

const obj =

}

對比:

ES6 物件擴充套件

es6 允許直接寫入變數和函式,作為物件的屬性和方法 var key1 1 var bj var bz 方法的簡寫 var ob fn2 表示式還可以用於定義方法名。var lastword last word var a a first word hello a lastword world a ...

ES6物件擴充套件

es6允許直接寫入變數和函式,作為屬性名和方法 var a b var c c 如果屬性值與屬性名一樣,我們值寫屬性名就可以 方法簡寫 add add function 定義物件屬性有兩種方法 obj.name lijixuan 2obj name lijixuan 我們原本只能用識別符號定義屬性,...

ES6 物件擴充套件

物件擴充套件主要從四個方面開展 1.簡潔表示法 2.屬性表示式 3.擴充套件運算子 4.object新增方法 let es6 console.log es5,es6 object object 在es5中,我們去定義物件,多使用鍵值對的方式來定義,在es6中,我們直接使用變數名稱來定義就可以了。是不...