ES6 物件的擴充套件

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中，我們直接使用變數名稱來定義就可以了。是不...

ES6 物件的擴充套件

ES6 物件擴充套件

ES6物件擴充套件

ES6 物件擴充套件

相關推薦