原生js中Object.keys方法詳解

pumpkin9 發(fā)布于2019-08-22 18:41 / 1705人閱讀

摘要：實際開發(fā)中，有時需要知道對象的所有屬性，原生提供了一個方法。這些元素是來自于給定的可直接枚舉的屬性，這些屬性的順序與手動遍歷該對象屬性時的一致。在中，非對象的參數(shù)將被強(qiáng)制轉(zhuǎn)換為一個對象。六要在原生不支持的就環(huán)境中添加兼容的可以添加以下腳本

實際開發(fā)中，有時需要知道對象的所有屬性，原生js提供了一個方法Object.keys()。
Object.keys(obj)返回的是一個數(shù)組，該數(shù)組的所有元素都是字符串。這些元素是來自于給定的obj可直接枚舉的屬性，這些屬性的順序與手動遍歷該對象屬性時的一致。

一. 傳入數(shù)組：返回索引

 var arr = ["a", "b", "c"];
 console.log(Object.keys(arr)); // console: ["0", "1", "2"]

二. 傳入對象：返回屬性名

var obj = {"a":"123","b":"345"};
console.log(Object.keys(obj));  //["a","b"]

var obj1 = { 100: "a", 2: "b", 7: "c"};
console.log(Object.keys(obj1)); // console: ["2", "7", "100"]

var obj2 = Object.create(
    {}, 
    { 
        getFoo : { 
            value : function () { return this.foo } 
            } 
    }
);
obj2.foo = 1;
console.log(Object.keys(obj2)); // console: ["foo"]

三.傳入字符串：返回索引

var str = "ab1234";
console.log(Object.keys(str));  // ["0","1","2","3","4","5"]

四、構(gòu)造函數(shù)：返回空數(shù)組或者屬性名

function Pasta(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.toString = function () {
                    return (this.name + ", " + this.age + ", " + this.gender);
            }
}

    console.log(Object.keys(Pasta)); //console: []

    var spaghetti = new Pasta("Tom", 20, "male");
    console.log(Object.keys(spaghetti)); //console: ["name", "age", "gender", "toString"]

五、注意事項
在ES5里，如果此方法的參數(shù)不是對象（而是一個原始值），那么它會拋出 TypeError。在ES6中，非對象的參數(shù)將被強(qiáng)制轉(zhuǎn)換為一個對象。

Object.keys("foo");
// TypeError: "foo" is not an object (ES5 code)

Object.keys("foo");
// ["0", "1", "2"]                   (ES2015 code)

六、要在原生不支持的就環(huán)境中添加兼容的Object.keys(),可以添加以下腳本：

if (!Object.keys) {
  Object.keys = (function () {
    var hasOwnProperty = Object.prototype.hasOwnProperty,
        hasDontEnumBug = !({toString: null}).propertyIsEnumerable("toString"),
        dontEnums = [
          "toString",
          "toLocaleString",
          "valueOf",
          "hasOwnProperty",
          "isPrototypeOf",
          "propertyIsEnumerable",
          "constructor"
        ],
        dontEnumsLength = dontEnums.length;

    return function (obj) {
      if (typeof obj !== "object" && typeof obj !== "function" || obj === null) throw new TypeError("Object.keys called on non-object");

      var result = [];

      for (var prop in obj) {
        if (hasOwnProperty.call(obj, prop)) result.push(prop);
      }

      if (hasDontEnumBug) {
        for (var i=0; i < dontEnumsLength; i++) {
          if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
        }
      }
      return result;
    }
  })()
};