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