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)
Object.keys方法详解的更多相关文章
- JavaScript Object.defineProperty()方法详解
Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法 Object.defineProperty(obj, prop ...
- javascript学习总结之Object.assign()方法详解
最近再写ES6的文章时候发现自己对Object.assign()方法不太了解,之前也没有接触过所以就就查阅了相关的资料,为了自己以后肯能会用到以及对知识进行巩固,所以在这里记录下自己学习的点点滴滴,毕 ...
- String.format(String format, Object... args)方法详解
很多次见到同事使用这个方法,同时看到https://blog.csdn.net/qq_27298687/article/details/68921934这位仁兄写的非常仔细,我也记录一下,好加深印象. ...
- Object 公共方法详解
在C#中,所有类型最终都从System.Object派生,所以每个类型的每个对象都保证了一组最基本的方法.具体地说,System.Object提供了一组公共实例方法. 一.Equals 如果两个对象具 ...
- 并发编程(六)Object类中线程相关的方法详解
一.notify() 作用:唤醒一个正在等待该线程的锁的线程 PS : 唤醒的线程不会立即执行,它会与其他线程一起,争夺资源 /** * Object类的notify()和notifyAll()方法详 ...
- Java构造和解析Json数据的两种方法详解二
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...
- Python数据类型及其方法详解
Python数据类型及其方法详解 我们在学习编程语言的时候,都会遇到数据类型,这种看着很基础也不显眼的东西,却是很重要,本文介绍了python的数据类型,并就每种数据类型的方法作出了详细的描述,可供知 ...
- 利用C#实现AOP常见的几种方法详解
利用C#实现AOP常见的几种方法详解 AOP面向切面编程(Aspect Oriented Programming) 是通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术. 下面这篇文章主要 ...
- Java构造和解析Json数据的两种方法详解二——org.json
转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html 在www.json.org上公布了很多JAVA下的jso ...
随机推荐
- android CTS 介绍
[转]http://blog.csdn.net/pugongying1988/article/details/6976091 一.为什么需要兼容性测试(以下称CTS)? 1.1.让APP提供更好的用户 ...
- win、mac 设置 php上传文件大小限制
修改php.ini win平台WAMP修改 步骤 左键点击wamp 选择php 在弹出的窗口中选择php.ini 在打开的文件中进行修改(修改步骤如下) 修改完毕,保存并重启wamp mac MAM ...
- [译]Introduction to Concurrency in Spring Boot
当我们使用springboot构建服务的时候需要处理并发.一种错误的观念认为由于使用了Servlets,它对于每个请求都分配一个线程来处理,所以就没有必要考虑并发.在这篇文章中,我将提供一些建议,用于 ...
- 每天学会一点点(spring-mvc.xml与web.xml配置文件)
1.spring-mvc.xml中拦截器的使用 首先在springMVC.xml配置如下代码: <!-- 拦截器 --> <mvc:interceptors> <bean ...
- Python面向对象编程——继承与派生
Python面向对象编程--继承与派生 一.初始继承 1.什么是继承 继承指的是类与类之间的关系,是一种什么"是"什么的关系,继承的功能之一就是用来解决代码重用问题. 继承是一种创 ...
- 彻底解决android拍照后无法显示的问题
这是对上篇"android 图片拍照,相册选图,剪切并显示"的文章之后的 改进 上一篇文章虽然能解决图片的拍照剪切以及显示,但是发现他有一个缺点, 如果该程序单独运行,貌似没有任何 ...
- 新手学习FFmpeg - 调用API调整视频局部速率
通过修改setpts代码实现调整视频部分的播放速率. 完整代码可参考: https://andy-zhangtao.github.io/ffmpeg-examples/ 在前面提到了PTS/DTS/T ...
- 用OSS给阿里云ECS扩展硬盘容量
阿里云的虚拟机ECS在创建时可以指定一个云盘,但在使用过程中,随着时间推移数据越来越多,难免硬盘就不够用了.当然你可以在另外加个云盘,不过总还有用完的时候,而且价格也不便宜.今天给大家介绍一个方法,给 ...
- a149: 乘乘樂
题目: 你拿到一个整数,却忍不住想把每个位数都乘在一起.例如看到356就会想要知道3 * 5 * 6的值为何.快写个程序帮帮为了乘数字而快发疯的自己吧! 思路:把这个数每一位%10,并且再将它每次/1 ...
- 单点登录(Single Sign On)解决方案
单点登录(Single Sign On)解决方案 需求 多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. A 网站和 B 网站是同一家公司的关联服务.现在要求,用户只要在其中一个网 ...