JavaScript：對Object物件的一些常用操作總結
JavaScript對Object物件的一些常用操作總結。
一、Object.assign()
1.可以用作物件的複製
var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }2.可以用作物件的合併
var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 } 注意目標物件自身也會改變。
3.目標物件o1自身也發生了改變，假如不想讓o1改變，可以把三個物件合併到一個空的物件中，操作如下：
var obj = Object.assign({},o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1 }注意：以下幾個地方
1.繼承屬性和不可列舉屬性是不能拷貝的
var obj = Object.create({foo: 1}, { // foo 是個繼承屬性 bar: { value: 2 // bar 是個不可列舉屬性。 }, baz: { value: 3, enumerable: true // baz 是個自身可列舉屬性 } }); var copy = Object.assign({}, obj); console.log(copy); // { baz: 3 }
2.原始型別會被包裝為 object
var v1 = "abc";
var v2 = true;
var v3 = 10;
var v4 = Symbol("foo")
var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
// 原始型別會被包裝，null 和 undefined 會被忽略
// 注意，只有字串的包裝物件才可能有自身可列舉屬性
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
二、Object.create()
Object.create()的不止是有一個引數，其實還有第二個引數！
Object.create(proto, [ propertiesObject ])第二個引數是可選的，主要用於指定我們建立的物件的一些屬性，（例如：是否可讀、是否可寫，是否可以列舉等等）可以通過下面案例來了解第二個引數！
var o;
o = Object.create(Object.prototype, {
// foo會成為所建立物件的資料屬性
foo: { writable:true, configurable:true, value: "hello" },
// bar會成為所建立物件的訪問器屬性
bar: {
configurable: false,
get: function() { return 10 },
set: function(value) { console.log("Setting `o.bar` to", value) }
}})
// 建立一個以另一個空物件為原型，且擁有一個屬性p的物件
o = Object.create({}, { p: { value: 42 } })
// 省略了的屬性特性預設為false,所以屬性p是不可寫,不可列舉,不可配置的
o.p = 24
o.p
//42
o.q = 12
for (var prop in o) {
console.log(prop)
}
//"q"
delete o.p
//false
//建立一個可寫的,可列舉的,可配置的屬性p
o2 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });三、Object.is()
用來判斷兩個值是否是同一個值。
下面是一些例子，面試中可能會提及
Object.is('haorooms', 'haorooms'); // true
Object.is(window, window); // true
Object.is('foo', 'bar'); // false
Object.is([], []); // false
var test = { a: 1 };
Object.is(test, test); // true
Object.is(null, null); // true
// 特例
Object.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
Object.keys(obj)
返回一個由一個給定物件的自身可列舉屬性組成的陣列，陣列中屬性名的排列順序和使用 for...in 迴圈遍歷該物件時返回的順序一致 （兩者的主要區別是 一個 for-in 迴圈還會列舉其原型鏈上的屬性）。
let arr = ["a", "b", "c"];
console.log(Object.keys(arr));
// ['0', '1', '2']
/* Object 物件 */
let obj = { foo: "bar", baz: 42 },
keys = Object.keys(obj);
console.log(keys);
// ["foo","baz"]
四、Object.keys（)
Object.keys返回一個數組，包括物件自身的（不含繼承的）所有可列舉屬性（不含 Symbol 屬性）的鍵名。
// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']
// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']
// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
getFoo: {
value: function () { return this.foo; }
}
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']方法返回一個給定物件自己的所有可列舉屬性值的陣列，值的順序與使用for...in迴圈的順序相同 ( 區別在於 for-in 迴圈列舉原型鏈中的屬性 )。 Object.values會過濾屬性名為 Symbol 值的屬性。
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']
五、Object.entries()
返回一個給定物件自身可列舉屬性的鍵值對陣列，其排列與使用 for...in 迴圈遍歷該物件時返回的順序一致（區別在於 for-in 迴圈也列舉原型鏈中的屬性）。
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
const simuArray = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(simuArray)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
六、常用其他操作
1.刪除物件中的某個值，前面案例中也謝了可以直接用delete
var obj = {b:123};
delete o.p // 或delete obj[b];
2.遍歷物件
2.1for-in遍歷
var obj = {a: 'ss', b: 'bb', c: 'cc'};
for (var i in obj){
console.log(i+':'+obj[i]);
}2.2forEach遍歷,先通過Object.keys()返回一個數組
Object.keys(obj).forEach((value, index)=>{
console.log(value, index,obj[value]);
});
//等同於
Object.keys(obj).forEach(function (value, index,c) {
console.log(value, index,obj[value]);
});2.3jQuery的$.each()方法：它接受兩個引數，分別指代屬性名和屬性值
$.each(obj,function(key,value){
console.log(key+": "+value)
其它一些不常用的物件操作屬性：
1.Object.freeze() 方法可以凍結一個物件，凍結指的是不能向這個物件新增新的屬性，不能修改其已有屬性的值，不能刪除已有屬性，以及不能修改該物件已有屬性的可列舉性、可配置性、可寫性。也就是說，這個物件永遠是不可變的。該方法返回被凍結的物件。
2.Object.isFrozen() 方法判斷一個物件是否被凍結（frozen）。
3.Object.isExtensible() 方法判斷一個物件是否是可擴充套件的（是否可以在它上面新增新的屬性）。
4.Object.isSealed() 方法判斷一個物件是否是密封的（sealed）。
5.Object.seal() 方法可以讓一個物件密封，並返回被密封后的物件。密封物件是指那些不能新增新的屬性，不能刪除已有屬性，以及不能修改已有屬性的可列舉性、可配置性、可寫性，但可能可以修改已有屬性的值的物件。
6.Object.getOwnPropertyNames(obj)返回一個數組，包含物件自身的所有屬性（不含 Symbol 屬性，但是包括不可列舉屬性）的鍵名。
7.Object.getOwnPropertySymbols(obj)返回一個數組，包含物件自身的所有 Symbol 屬性的鍵名。
8.Reflect.ownKeys(obj)返回一個數組，包含物件自身的所有鍵名，不管鍵名是 Symbol 或字串，也不管是否可列舉。
9.hasOwnProperty()判斷物件自身屬性中是否具有指定的屬性。