詳解javascript,ES5標準中新增的幾種高效Object操做方法

一、Object 對象 (JavaScript)
提供對全部 JavaScript 對象通用的功能。參考網站:https://msdn.microsoft.com/zh-cn/library/kb6te8d3(v=vs.94).aspx
二、Object.create()

概念:Object.create():是E5中提出的一種新的對象建立方式。正則表達式

語法:Object.create(proto [, propertiesObject ]),第一個參數是要繼承的原型,若是不是一個子函數,能夠傳一個null,第二個參數是對象的屬性描述符,這個參數是可選的。數組

propertiesObject 參數的詳細解釋:(默認都爲false)。數據屬性,writable:是否可任意寫;configurable:是否可以刪除,是否可以被修改;enumerable:是否能用 for in 枚舉;value:值;訪問屬性:get(): 訪問;set(): 設置app

示例以下:ide

    function Car(desc){
        this.desc = desc;
        this.color = 'red';
    }
    Car.prototype = {
        getInfo:function(){
            return 'A ' + this.color + ' ' + this.desc + '.'; 
        }
    }
    var car = Object.create(Car.prototype);
    car.color = 'blue';
    var info = car.getInfo();
    console.log(info);//A blue undefined.

        var obj = {
        a:function(){
            console.log(100);//100
        },
        b:function(){
            console.log(200)
        },
        c:function(){
            console.log(300)
        }
    }
    var newObj = {};
    newObj = Object.create(obj,{
        t1:{
            value:'yupeng',
            writable:true
        },
        bar: {
            configurable: false,
            get: function() { return bar; },
            set: function(value) { bar=value }
        }
    })

    console.log(newObj.a());//undefined
    console.log(newObj.t1);//yupeng
    newObj.t1 = 'yupeng1'
    console.log(newObj.t1);//yupeng1
    newObj.bar = 201;
    console.log(newObj.bar);//201

三、Object.keys()函數

Object.keys():返回一個由給定對象的全部可枚舉自身屬性的屬性名組成的數組,數組中屬性名的排列順序和使用for-in循環遍歷該對象時返回的順序一致(二者的主要區別是 for-in 還會遍歷出一個對象從其原型鏈上繼承到的可枚舉屬性)。網站

語法:Object.keys(obj)。ui

參數:obj返回該對象的全部可枚舉自身屬性的屬性名。this

    var arr = ['a','b','c'];
    console.log(Object.keys(arr));//["0", "1", "2"]
    // 類數組對象
    var obj = { 0 : "a", 1 : "b", 2 : "c"};
    console.log(Object.keys(obj)); // ["0", "1", "2"]

    // getFoo是個不可枚舉的屬性
    var my_obj = Object.create({}, 
    {
         getFoo : { 
             value : function () { 
                 return this.foo 
             } 
         } 
     });
    my_obj.foo = 1;
    console.log(Object.keys(my_obj)); // ["foo"]

四、Object.prototype.isPrototypeOf()spa

isPrototypeOf:是用來判斷要檢查其原型鏈的對象是否存在於指定對象實例中,是則返回true,不然返回false。prototype

語法:prototype.isPrototypeOf(object)。

參數:prototype,必選。對象原型。 object,必選。另外一個對象,將對其原型鏈進行檢查。

示例以下:

function person(name,age){
    this.name = name;
    this.age = age;
}
var person1 = new person('xiaoming',23);
console.log(person.prototype.isPrototypeOf(person1));//true;原型鏈的對象:person,對象實例;person1

五、Object.getPrototypeOf()

getPrototypeOf:返回對象的原型。

語法:Object.getPrototypeOf(object)

參數:object,必需。引用原型的對象。

返回值:object 參數的原型。原型也是對象。

function person(name,age){
    this.name = name;
    this.age = age;
}
var person1 = new person('xiaoming',23);
var proto = Object.getPrototypeOf(person1);//獲取對象person1的原型
proto.eatFruit = 'apple';    //給原型添加新的屬性
console.log(person1.eatFruit);//apple
var reg = /a/;
var result1 = (Object.getPrototypeOf(reg) === RegExp.prototype);//比較正則表達式對象的原型
console.log(result1 + " ");//true

var err = new Error("an error");
var result2 = (Object.getPrototypeOf(err) === Error.prototype);//比較對象原型
console.log(result2);//true

六、object.hasOwnProperty()

object.hasOwnProperty(proName):肯定某個對象是否具備帶指定名稱的屬性。

語法:object.hasOwnProperty(proName)

參數:object,必需。對象的實例。proName,必需。一個屬性名稱的字符串值

function person(name,age){
    this.name = name;
    this.age = age;
}
person.prototype.singsong = function(songName){
    this.songName = songName;
    console.log('singsong');
}
person.prototype.sayHello = function(){
    console.log('sayHello');
}
var person1 = new person('xiaoming',23);
var person2 = new person('angerbaby',22);
console.log(person1.hasOwnProperty("name"));//true;
console.log(person1.hasOwnProperty("age"));//true;
console.log(person1.hasOwnProperty("singsong"));//false;
console.log(person.prototype.hasOwnProperty("singsong"));//true;
console.log(person.prototype.hasOwnProperty("songName"));//false;

七、Object.getOwnPropertyNames()

Object.getOwnPropertyNames(object):返回對象本身的屬性的名稱。一個對象的本身的屬性是指直接對該對象定義的屬性,而不是從該對象的原型繼承的屬性。對象的屬性包括字段(對象)和函數。

語法:Object.getOwnPropertyNames(object)

參數:object,必需。包含本身的屬性的對象。

返回值:一個數組,其中包含對象本身的屬性的名稱。

function person(name,age,number){
    this.name = name;
    this.age = age;
    this.number = number;
    this.toString = function(){
        return (this.name+","+this.age+","+this.number);
    }
}
var person1 = new person('xiaoming',23,'18615244521');
var propertyArr = Object.getOwnPropertyNames(person1);
console.log(propertyArr);//["name", "age", "number", "toString"]

//下面的示例顯示了使用 person 構造函數構造的 person1 對象中以字母「S」開頭的屬性名。
var names = Object.getOwnPropertyNames(person1).filter(checkkey);//filter(),傳參爲一個函數,做用爲用這個函數來過濾數組元素
console.log(names);//["name", "number"]
function checkkey(value){
    var firstchar = value.substr(0,1);
    if(firstchar.toLowerCase() == 'n'){
        return true;
    }else{
        return false;
    }
}
//下面的示例建立一個對象,該對象具備三個屬性和一個方法。而後使用 keys 方法獲取該對象的屬性和方法。
var propertyArr1 = Object.keys(person1);
console.log(propertyArr1);//["name", "age", "number", "toString"]

理解js對象中的可枚舉性(enumerable):

概念:可枚舉性(enumerable)用來控制所描述的屬性,是否將被包括在for...in循環之中。具體來講,若是一個屬性的enumerable爲false,下面三個操做不會取到該屬性。

  • for..in循環
  • Object.keys方法
  • JSON.stringify方法
var o = {a:1, b:2};
o.c = 3;
Object.defineProperty(o, 'd', {
  value: 4,
  enumerable: false
});
o.d
// 4

for( var key in o )
 console.log( o[key] ); 
// 1
// 2
// 3

Object.keys(o)  // ["a", "b", "c"]
JSON.stringify(o) // => "{a:1,b:2,c:3}"
//上面代碼中,d屬性的enumerable爲false,因此通常的遍歷操做都沒法獲取該屬性,使得它有點像「祕密」屬性,但仍是能夠直接獲取它的值。
//至於for...in循環和Object.keys方法的區別,在於前者包括對象繼承自原型對象的屬性,然後者只包括對象自己的屬性。若是須要獲取對象自身的全部屬性,無論enumerable的值,可使用Object.getOwnPropertyNames方法

八、Object.defineProperty()

概念:將屬性添加到對象,或修改現有屬性的特性。

語法:Object.defineProperty(object, propertyname, descriptor)

參數:obj爲須要定義的屬性對象;prop爲需定義或修改的屬性的名字;descriptor爲將被定義或修改的屬性的描述符。
返回值:返回傳入函數的對象,即第一個參數obj

對象裏目前存在的屬性描述符有兩種主要形式:數據描述符和存取描述符。數據描述符是一個擁有可寫或不可寫值的屬性。存取描述符是由一對 getter-setter 函數功能來描述的屬性。描述符必須是兩種形式之一;不能同時是二者。

數據描述符和存取描述符均具備如下可選鍵值:

  • configurable:當且僅當該屬性的 configurable 爲 true 時,該屬性纔可以被改變,也可以被刪除。默認爲 false。
  • enumerable:當且僅當該屬性的 enumerable 爲 true 時,該屬性纔可以出如今對象的枚舉屬性中。默認爲 false。

數據描述符同時具備如下可選鍵值:

  • value:該屬性對應的值。能夠是任何有效的 JavaScript 值(數值,對象,函數等)。默認爲 undefined。
  • writable:當且僅當該屬性的 writable 爲 true 時,該屬性才能被賦值運算符改變。默認爲 false。

存取描述符同時具備如下可選鍵值:

  • get:一個給屬性提供 getter 的方法,若是沒有 getter 則爲 undefined。該方法返回值被用做屬性值。默認爲 undefined。
  • set:一個給屬性提供 setter 的方法,若是沒有 setter 則爲 undefined。該方法將接受惟一參數,並將該參數的新值分配給該屬性。默認爲 undefined。

記住,這些選項不必定是自身屬性,若是是繼承來的也要考慮。爲了確認保留這些默認值,你可能要在這以前凍結 Object.prototype,明確指定全部的選項,或者將__proto__屬性指向null。

// 使用 __proto__
Object.defineProperty(obj, "key", {
  __proto__: null, // 沒有繼承的屬性
  value: "static"  // 沒有 enumerable
                   // 沒有 configurable
                   // 沒有 writable
                   // 做爲默認值
});

// 顯式
Object.defineProperty(obj, "key", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "static"
});

九、Object.defineProperties()

概覽:方法在一個對象上添加或修改一個或者多個自有屬性,並返回該對象。

語法:Object.defineProperties(obj, props)

 參數:obj:將要被添加屬性或修改屬性的對象,props:該對象的一個或多個鍵值對定義了將要爲對象添加或修改的屬性的具體配置。

var obj = {};
Object.defineProperties(obj, {
  "property1": {
    value: true,
    writable: true
  },
  "property2": {
    value: "Hello",
    writable: false
  }
  // 等等.
});
alert(obj.property2) //彈出"Hello"
相關文章
相關標籤/搜索