Object.keys()应用

本文介绍了一个JavaScript实用函数Object.keys()的使用方法,并通过一个简单的示例展示了如何利用此函数遍历对象的所有可枚举属性。

在csdn桑推荐的博文上看到这个东东,学习了,Object.keys(不是Object.prototype.keys )返回的正是一个对象属性数组!据说用起来很优雅,然后我就试试

<!DOCTYPE html>
<html lang="utf-8">
    <head>
        <meta http-equiv="content-type" type="text/html;charset=utf-8">
        <title>Object.keys()应用</title>
        <script type="text/javascript">
            var person={
                firstName:"David",
                lastName:"Walsh",
                others:"Smith"
            };
            Object.keys(person).forEach(function(trait){
                console.log('person',trait,':',person[trait]);
            });
        </script>       
    </head>
    <body>
    <body>
</html>

结果是这样的,感觉还不错
这里写图片描述

### JavaScript 中 `Object.keys` 方法的使用说明 `Object.keys` 是 JavaScript 中用于获取对象自身可枚举属性键名的一个内置方法。它返回一个由给定对象自身的所有可枚举属性组成的数组,属性顺序与手动遍历对象属性时的顺序一致[^1]。 #### 方法签名 语法如下: ```javascript Object.keys(obj) ``` - **参数**:`obj` 是目标对象。 - **返回值**:一个包含对象所有可枚举属性键名的字符串数组[^4]。 #### 示例代码 以下是一些常见的用法示例: ##### 1. 获取对象的键名 对于普通对象,`Object.keys` 返回其所有可枚举属性的键名。 ```javascript const person = { name: "zhangs", city: "xian", fav: "sing" }; console.log(Object.keys(person)); // 输出: ["name", "city", "fav"] ``` ##### 2. 处理数组 当目标为数组时,`Object.keys` 返回数组索引的字符串形式。 ```javascript const arr = [1, 32, 2, 23, 1]; console.log(Object.keys(arr)); // 输出: ["0", "1", "2", "3", "4"] ``` ##### 3. 处理字符串 如果将字符串作为参数传递,`Object.keys` 会将其视为类似数组的对象,并返回字符索引。 ```javascript const str = "strings"; console.log(Object.keys(str)); // 输出: ["0", "1", "2", "3", "4", "5", "6"] ``` ##### 4. 结合其他方法使用 可以与其他数组方法结合,例如 `map` 或 `forEach`,以实现更复杂的功能。 ```javascript const person = { name: "zhangs", city: "xian", fav: "sing" }; Object.keys(person).forEach((key) => { console.log(`${key}: ${person[key]}`); // 输出每个键值对 }); ``` ##### 5. 注意不可枚举属性 `Object.keys` 不会返回不可枚举属性。例如: ```javascript const obj = {}; Object.defineProperty(obj, "hidden", { value: "invisible", enumerable: false }); console.log(Object.keys(obj)); // 输出: [] ``` #### 应用场景 `Object.keys` 常用于以下场景: - 遍历对象的所有可枚举属性[^4]。 - 将对象的键名转换为数组以便进一步操作。 - 在 Vue 源码中,`Object.keys` 被用来劫持并监听对象的所有属性变化[^4]。 #### 与其他方法的区别 - `Object.keys` 返回的是键名数组。 - 如果需要同时获取键和值,可以使用 `Object.entries()`[^3]。 - 若要直接获取值数组,则可以使用 `Object.values()`[^4]。 ### 总结 `Object.keys` 是一个简单且强大的工具,适用于需要提取对象键名或对其进行迭代的场景。在实际开发中,结合其他数组方法(如 `map`、`forEach`)可以实现更多功能。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值