Object的常用方法

Object的常用方法

  • Object.assign(target, ...source)
    參數(shù):target表示目標(biāo)對象,source表示源對象群組
    返回值:目標(biāo)對象。

用法

//復(fù)制一個對象
let obj = {
    name: 'name',
    age: 22,
    job: 'engineer',
};
let obj01 = {
    name: 'name01'
};
console.log(Object.assign(obj, obj01));//obj01的name屬性會覆蓋掉obj的name屬性,目標(biāo)對象是會改變的
//假如源對象的屬性值是一個指向?qū)ο蟮囊?,它也只拷貝那個引用值。
//修改其中一個對象的屬性值,會使得所有的引用都改變
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign(obj1);
console.log(obj1);//{a:0, b:{c:3}}
console.log(obj2);//{a:0, b:{c:3}}
obj2.b.c = 3;
console.log(obj2);//{a:0, b:{c:3}}
console.log(obj1);//{a:0, b:{c:3}}
//合并對象
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 }, 注意目標(biāo)對象自身也會改變。
//合并具有相同屬性的對象
var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };

var obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
//繼承屬性和不可枚舉屬性是不能被拷貝的
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 }
//原始類型會被包裝成對象,數(shù)字也會被忽略
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" }
//首先,只讀屬性不能被覆蓋,其次遇到異常之后assign方法就會退出不會繼續(xù)進(jìn)行
var target = Object.defineProperty({}, "foo", {
    value: 1,
    writable: false
}); // target 的 foo 屬性是個只讀屬性。

Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only
// 注意這個異常是在拷貝第二個源對象的第二個屬性時發(fā)生的。

console.log(target.bar);  // 2,說明第一個源對象拷貝成功了。
console.log(target.foo2); // 3,說明第二個源對象的第一個屬性也拷貝成功了。
console.log(target.foo);  // 1,只讀屬性不能被覆蓋,所以第二個源對象的第二個屬性拷貝失敗了。
console.log(target.foo3); // undefined,異常之后 assign 方法就退出了,第三個屬性是不會被拷貝到的。
console.log(target.baz);  // undefined,第三個源對象更是不會被拷貝到的。
  • Object.create(proto, [propertiesObject])
    參數(shù)
    proto表示新創(chuàng)建對象的原型對象
    propertiesObject可選。如果沒有指定為 undefined,則是要添加到新創(chuàng)建對象的可枚舉屬性(即其自身定義的屬性,而不是其原型鏈上的枚舉屬性)對象的屬性描述符以及相應(yīng)的屬性名稱。這些屬性對應(yīng)Object.defineProperties()的第二個參數(shù)。

返回值:一個新對象,帶著指定的原型對象和屬性。
錯誤: 如果propertiesObject參數(shù)不是 null 或一個對象,則拋出一個 TypeError 異常。

用法

// Shape - 父類(superclass)
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 父類的方法
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 子類(subclass)
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// 子類續(xù)承父類
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?',
  rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
  rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

解析:
首先可以畫出原型鏈,只要Rectangle和Shape在rect.proto所在的原型鏈上,那么就可以得出true的結(jié)論,原型鏈如下
<待會畫個圖放上去>

//加入第二個參數(shù),參數(shù)必須寫明是否可配置可寫可枚舉,否則都是默認(rèn)為false
var o;

// 創(chuàng)建一個原型為null的空對象
o = Object.create(null);


o = {};
// 以字面量方式創(chuàng)建的空對象就相當(dāng)于:
o = Object.create(Object.prototype);


o = Object.create(Object.prototype, {
  // foo會成為所創(chuàng)建對象的數(shù)據(jù)屬性
  foo: { 
    writable:true,
    configurable:true,
    value: "hello" 
  },
  // bar會成為所創(chuàng)建對象的訪問器屬性
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});


function Constructor(){}
o = new Constructor();
// 上面的一句就相當(dāng)于:
o = Object.create(Constructor.prototype);
// 當(dāng)然,如果在Constructor函數(shù)中有一些初始化代碼,Object.create不能執(zhí)行那些代碼


// 創(chuàng)建一個以另一個空對象為原型,且擁有一個屬性p的對象
o = Object.create({}, { p: { value: 42 } })

// 省略了的屬性特性默認(rèn)為false,所以屬性p是不可寫,不可枚舉,不可配置的:
o.p = 24
o.p
//42

o.q = 12
for (var prop in o) {
   console.log(prop)
}
//"q"

delete o.p
//false

//創(chuàng)建一個可寫的,可枚舉的,可配置的屬性p
o2 = Object.create({}, {
  p: {
    value: 42, 
    writable: true,
    enumerable: true,
    configurable: true 
  } 
});
  • Object.keys(obj)
    參數(shù):要返回其枚舉自身屬性的對象
    返回值:一個表示給定對象的所有可枚舉屬性的字符串?dāng)?shù)組

用法

// 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']

如果想獲取不可枚舉的屬性,可以使用getOwnPropertyNames來獲取所有屬性。而且,在es6中,如果傳入的參數(shù)不是對象,那么該參數(shù)會被強(qiáng)制轉(zhuǎn)換成對象,但是這在es5中會出現(xiàn)類型錯誤。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容