原生js中Object.keys方法详解

pumpkin9 发布于2019-08-22 18:41 / 1702人阅读

摘要：实际开发中，有时需要知道对象的所有属性，原生提供了一个方法。这些元素是来自于给定的可直接枚举的属性，这些属性的顺序与手动遍历该对象属性时的一致。在中，非对象的参数将被强制转换为一个对象。六要在原生不支持的就环境中添加兼容的可以添加以下脚本

实际开发中，有时需要知道对象的所有属性，原生js提供了一个方法Object.keys()。
Object.keys(obj)返回的是一个数组，该数组的所有元素都是字符串。这些元素是来自于给定的obj可直接枚举的属性，这些属性的顺序与手动遍历该对象属性时的一致。

一. 传入数组：返回索引

 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"]

四、构造函数：返回空数组或者属性名

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里，如果此方法的参数不是对象（而是一个原始值），那么它会抛出 TypeError。在ES6中，非对象的参数将被强制转换为一个对象。

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

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

六、要在原生不支持的就环境中添加兼容的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;
    }
  })()
};

云服务器 GPU云服务器 js原生动画详解 js中数据排序方法 js方法中变量前置 js中keyup方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96092.html

【进阶4-2期】Object.assign 原理及其实现

摘要：木易杨注意原始类型被包装为对象木易杨原始类型会被包装，和会被忽略。木易杨原因在于时，其属性描述符为不可写，即。木易杨解决方法也很简单，使用我们在进阶期中介绍的就可以了，使用如下。引言上篇文章介绍了赋值、浅拷贝和深拷贝，其中介绍了很多赋值和浅拷贝的相关知识以及两者区别，限于篇幅只介绍了一种常用深拷贝方案。本篇文章会先介绍浅拷贝 Object.assign 的实现原理，然后带你手动实...

layman 2019-08-23 18:04 评论0 收藏0
JS进阶篇--JS数组reduce()方法详解及高级技巧

摘要：基本概念方法接收一个函数作为累加器，数组中的每个值从左到右开始缩减，最终为一个值。例进阶应用使用方法可以完成多维度的数据叠加。在该函数内部，则执行多维的叠加工作。参考的内建函数数组方法的高级技巧基本概念 reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 reduce 为数组中的每一个元素依次执行回调函数，不包括...

jerryloveemily 2019-08-21 12:00 评论0 收藏0
js对象详解(JavaScript对象深度剖析，深度理解js对象)

摘要：对象详解对象深度剖析，深度理解对象这算是酝酿很久的一篇文章了。用空构造函数设置类名每个对象都共享相同属性每个对象共享一个方法版本，省内存。 js对象详解(JavaScript对象深度剖析，深度理解js对象) 这算是酝酿很久的一篇文章了。 JavaScript作为一个基于对象(没有类的概念)的语言，从入门到精通到放弃一直会被对象这个问题围绕。平时发的文章基本都是开发中遇到的问题和对...

CatalpaFlat 2019-08-22 11:12 评论0 收藏0
【前端基础进阶】JS-Object 功能详解

摘要：可以用来处理数组，但是会把数组视为对象。返回指定对象的原型内部属性的值，即，而非对象的。判断一个对象是否存在于另一个对象的原型链上。该方法返回被冻结的对象。密封一个对象会让这个对象变的不能添加新属性，且所有已有属性会变的不可配置。 showImg(https://segmentfault.com/img/bVboKpP?w=796&h=398); Object.assign(targe...

tangr206 2019-08-23 15:25 评论0 收藏0
从Vue.js源码角度再看数据绑定

摘要：在学习过程中，为加上了中文的注释，希望可以对其他想学习源码的小伙伴有所帮助。数据绑定原理前面已经讲过数据绑定的原理了，现在从源码来看一下数据绑定在中是如何实现的。写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/answershuto/le...

elina 2019-08-21 16:16 评论0 收藏0