Object.keys方法详解

一、官方解释

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组。

二、语法

Object.keys(obj)参数:要返回其枚举自身属性的对象返回值:一个表示给定对象的所有可枚举属性的字符串数组

三、处理对象,返回可枚举的属性数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Object.keys()处理对象,返回可枚举的属性数组</title>
    </head>
    <body>
        <script type="text/javascript">
            let person={
                name:‘一只流浪的kk‘,
                age:20,
                eat:function(){}
            }
            console.log(Object.keys(person));//    [‘name‘,‘age‘,‘eat‘]
        </script>
    </body>
</html>

四、处理数组,返回索引值数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Object.keys()处理数组,返回索引值数组</title>
    </head>
    <body>
        <script type="text/javascript">
            let arr=[1,2,3,4,5];
            console.log(Object.keys(arr));//[‘0‘,‘1‘,‘2‘,‘3‘,‘4‘,‘5‘]
        </script>
    </body>
</html>

五、处理字符串,返回索引值数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Object.keys()处理字符串,返回索引值数组</title>
    </head>
    <body>
        <script type="text/javascript">
            let str=‘hello‘;
            console.log(Object.keys(str));//[‘0‘,‘1‘,‘2‘,‘3‘,‘4‘]
        </script>
    </body>
</html>

六、实用技巧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
           let person={
                   name:‘一只流浪的kk‘,
                   age:18,
                   eat:function(){

                   }
           }
           Object.keys(person).map((key)=>{
                   person[key];//获得属性对应的值,可以进行其它处理
           })
        </script>
    </body>
</html>

七、Object.values()和Object.keys()是相反的操作,把一个对象的值转换为数组

注意:在ES5里,如果此方法的参数不是对象(而是一个原始值),那么它会抛出 TypeError。在ES2015中,非对象的参数将被强制转换为一个对象

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

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

原文地址:https://www.cnblogs.com/jjgw/p/11647012.html

时间: 2024-10-09 14:22:54

Object.keys方法详解的相关文章

JavaScript Object.defineProperty()方法详解

Object.defineProperty() Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法 Object.defineProperty(obj, prop, descriptor) 1 参数 obj 需要定义属性的对象. prop 需被定义或修改的属性名. descriptor 需被定义或修改的属性的描述符. 描述 该方法允许精确添加或修改对象的属性.一般情况下,我们为对象添加属性是通过赋值来创建并显示

javascript学习总结之Object.assign()方法详解

最近再写ES6的文章时候发现自己对Object.assign()方法不太了解,之前也没有接触过所以就就查阅了相关的资料,为了自己以后肯能会用到以及对知识进行巩固,所以在这里记录下自己学习的点点滴滴,毕竟好记性不如然笔筒,废话不多说,直接上干货. 官方解释:Object.assign方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法:Object.assign(target,...sources) 参数: target:目标对象 sources:源对象 返回值:

String.format(String format, Object... args)方法详解

很多次见到同事使用这个方法,同时看到https://blog.csdn.net/qq_27298687/article/details/68921934这位仁兄写的非常仔细,我也记录一下,好加深印象. 这个是从java5的时候添加进去的方法. /** * Returns a formatted string using the specified format string and * arguments. * * <p> The locale always used is the one r

并发编程(六)Object类中线程相关的方法详解

一.notify() 作用:唤醒一个正在等待该线程的锁的线程 PS : 唤醒的线程不会立即执行,它会与其他线程一起,争夺资源 /** * Object类的notify()和notifyAll()方法详解 */ public class MyNotify { // 在多线程间共享的对象上使用wait private String[] shareObj = {"true"}; public static void main(String[] args) { MyNotify test =

Python数据类型及其方法详解

Python数据类型及其方法详解 我们在学习编程语言的时候,都会遇到数据类型,这种看着很基础也不显眼的东西,却是很重要,本文介绍了python的数据类型,并就每种数据类型的方法作出了详细的描述,可供知识回顾. 一.整型和长整型 整型:数据是不包含小数部分的数值型数据,比如我们所说的1.2.3.4.122,其type为"int" 长整型:也是一种数字型数据,但是一般数字很大,其type为"long" 在python2中区分整型和长整型,在32位的机器上,取值范围是-2

Java构造和解析Json数据的两种方法详解二——org.json

转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html 在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Json数据的方法示例.       用json-lib构造和解析Json数据的方法详解请参见我上一篇博文:Java构造和解析Json数据的两种方法详解一 一.介

JavaScript原生对象属性和方法详解——Array对象 转载

length 设置或返回 数组中元素的数目. 注意:设置 length 属性可改变数组的大小.如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失.如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined.所以length不一定代表数组的元素个数. var arr = new Array(3) arr[0] = "John" arr[1] = "Andy" arr[2] = "Wendy" cons

Angular.js中处理页面闪烁的方法详解

Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让人感觉不到,这种情况一切正常,但这个时间也可能很长,这时候用户可能会看到满屏尽是{{xxxx}}.这种情况被叫做"Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.".

JqGrid 使用方法详解

JQGrid JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人blog的一个学习资料,与其说是学习资料,说成查询帮助文档更加合适. jqGrid学习之 ------------- 安装 jqGrid安装很简单,只需把相应的css.js文件加入到页面中即可. 按照官网文档: /myproject/css/ ui.jqgrid.css