Object.keys方法之详解

在实际开发中,我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys(),该方法返回一个数组
  • 传入对象,返回属性名
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(obj));  //[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"]
  • 数组 返回索引
    var arr = ["a", "b", "c"];
    console.log(Object.keys(arr)); // console: ["0", "1", "2"]
### Object.keys() 方法详解 `Object.keys()` 是 JavaScript 中的一个静态方法,用于返回一个对象自身的所有可枚举属性的名称组成的数组。该方法不会遍历对象的原型链,仅针对对象自身的属性进行处理。 #### 语法 ```javascript Object.keys(obj) ``` - **参数**:`obj` 是需要返回其可枚举属性的对象。 - **返回值**:一个字符串数组,数组中包含对象自身的所有可枚举属性名称。 #### 特点与注意事项 - **仅可枚举属性**:`Object.keys()` 仅返回对象自身且是可枚举的属性。不可枚举属性(如通过 `Object.defineProperty()` 设置 `enumerable: false` 的属性)不会被包含在内。 - **不包含原型链**:该方法不会包括对象从原型链继承而来的属性。 - **处理数组和类数组对象**:当传入的是数组或类数组对象时,`Object.keys()` 会返回索引值的字符串形式组成的数组。 - **键排序**:返回的属性名称按照字符串排序规则排序(例如数字键会按照升序排序,字符串键则按字母顺序排序)。 #### 使用示例 ##### 示例 1:处理普通对象 ```javascript let person = { name: "zhangs", city: "xian", fav: "sing" }; console.log(Object.keys(person)); // ["name", "city", "fav"] ``` ##### 示例 2:处理数组 ```javascript let arr = [1, 32, 2, 23, 1]; console.log(Object.keys(arr)); // ["0", "1", "2", "3", "4"] ``` ##### 示例 3:处理字符串 ```javascript let str = "strings"; console.log(Object.keys(str)); // ["0", "1", "2", "3", "4", "5", "6"] ``` ##### 示例 4:处理类数组对象 ```javascript var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.keys(obj)); // ['0', '1', '2'] ``` ##### 示例 5:处理具有随机键排序的类数组对象 ```javascript var anObj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.keys(anObj)); // ['2', '7', '100'] ``` ##### 示例 6:不可枚举属性的处理 ```javascript var myObj = Object.create({}, { getFoo: { value: function () { return this.foo; } } }); myObj.foo = 1; console.log(Object.keys(myObj)); // ['foo'] ``` #### 应用场景 - **遍历对象属性**:`Object.keys()` 常用于遍历对象的属性,例如通过 `map()` 或 `forEach()` 方法对象的每个属性执行操作。 ```javascript let person = { name: "zhangs", city: "xian", fav: "sing" }; Object.keys(person).map((key) => { console.log(person[key]); // 输出每个属性的值 }); ``` - **对象转数组**:通过 `Object.keys()` 可以将对象的键转换为数组,方便后续处理。 - **调试与检查**:在调试时,`Object.keys()` 可用于快速查看对象的属性列表。 #### 可枚举属性的理解 可枚举属性是指对象属性的 `enumerable` 特性为 `true` 的属性。这些属性可以通过 `for...in` 循环和 `Object.keys()` 等方法访问到。而不可枚举属性则不会被这些方法处理。 #### 对比其他方法 - **`Object.values()`**:与 `Object.keys()` 类似,但返回的是对象属性的值组成的数组。 ```javascript let person = { name: "zhangs", city: "xian", fav: "sing" }; console.log(Object.values(person)); // ["zhangs", "xian", "sing"] ``` - **`Object.entries()`**:返回对象的键值对组成的数组。 ```javascript console.log(Object.entries(person)); // [["name", "zhangs"], ["city", "xian"], ["fav", "sing"]] ``` #### 总结 `Object.keys()` 是 JavaScript 中处理对象属性的重要方法,适用于多种场景,如遍历对象、调试、对象转数组等。它专注于可枚举属性,且不包含原型链中的属性。通过结合其他方法如 `Object.values()` 和 `Object.entries()`,可以更灵活地操作对象数据[^1]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值