for in,Object.keys()与for of的区别
for in
- for in一般用于遍历对象的属性;
- 作用于数组的for in除了会遍历数组元素外,还会遍历自定义可枚举的属性,以及原型链上可枚举的属性;
- 作用于数组的for in的遍历结果是数组的索引,且都为字符串型,不能用于运算;
- 某些情况下,可能按照随机顺序遍历数组元素;
Array.prototype.sayLength = function(){
console.log(this.length);
}
let arr = ['a','b','c','d'];
arr.name = '数组';
Object.defineProperties(arr,{
type:{
value:true,
writable:true,
enumerable:true
}
});
for(let i in arr){
console.log(i);//0,1,2,3,name,type,sayLength
}
Object.keys()
- 遍历结果为由对象自身可枚举属性组成的数组,数组中的属性名排列顺序与使用for in循环遍历该对象时返回的顺序一致;
- 与for in区别在于不能遍历出原型链上的属性;
Array.prototype.sayLength = function(){
console.log(this.length);
}
let arr = ['a','b','c','d'];
arr.name = '数组';
Object.defineProperties(arr,{
type:{
value:true,
writable:true,
enumerable:true
}
});
var keys = Object.keys(arr);
console.log(keys);//["0", "1", "2", "3", "name", "type"]
for of
- ES6中添加的循环语法;
- for of支持遍历数组、类对象(例如DOM NodeList对象)、字符串、Map对象、Set对象;
- for of不支持遍历普通对象,可通过与Object.keys()搭配使用遍历;(见示例二)
- for of遍历后的输出结果为数组元素的值;
- 搭配实例方法entries(),同时输出数组内容和索引;(见示例三)
示例一:
Array.prototype.sayLength = function(){
console.log(this.length);
}
let arr = ['a','b','c','d'];
arr.name = '数组';
Object.defineProperties(arr,{
type:{
value:true,
writable:true,
enumerable:true
}
});
for(let i of arr){
console.log(i);//a,b,c,d
}
示例二:
var person={
name:'coco',
age:22,
locate:{
country:'China',
city:'beijing',
}
}
for(var key of Object.keys(person)){
//使用Object.keys()方法获取对象key的数组
console.log(key+": "+person[key]);//name: coco,age: 22,locate: [object Object]
}
示例三:
let arr3 = ['a', 'b', 'c'];
for (let [index, val] of arr3.entries()) {
console.log(index + ':' + val);//0:a 1:b 2:c
}
PS:让jquery对象支持for of遍历
// 因为jQuery对象与数组相似
// 可以为其添加与数组一致的迭代器方法 jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
注:本文部分内容来自以下链接内容
for in,Object.keys()与for of的区别的更多相关文章
- 关于Object.keys()和for in的区别
今天见到一道面试题让说一说Object.keys()和for in的区别,顿时有些发懵“What's Object.keys?”我立马上网搜了一下,大致作用也是做遍历,参数是一个对象,返回值是一个数组 ...
- [转]IE8兼容Object.keys
转自:http://blog.sina.com.cn/s/blog_6d63cf160102vbsg.html 只需要加入 var DONT_ENUM = "propertyIsEnumer ...
- JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别
ECMAScript将对象的属性分为两种:数据属性和访问器属性.每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以 ...
- Object.keys()
Object.keys(obj),返回一个数组,数组里是该obj可被枚举的所有属性名.请看示例: 示例一: function Pasta(grain, width, shape) { this.gra ...
- 获取对象属性(key)组成的数组 Object.keys( obj ).md
Object.keys() 方法会返回一个由给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in ...
- Object.keys、Object.getOwnPropertyNames区别
用途 Object.keys 定义:返回一个对象可枚举属性的字符串数组: Object.getOwnPropertyNames 定义:返回一个对象可枚举.不可枚举属性的名称: 属性的可枚举性.不可枚举 ...
- 遍历对象属性(for in、Object.keys、Object.getOwnProperty)
js中几种遍历对象的方法,包括for in.Object.keys.Object.getOwnProperty,它们在使用场景方面各有不同. for in 主要用于遍历对象的可枚举属性,包括自有属性. ...
- [转] JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别
ECMAScript将对象的属性分为两种:数据属性和访问器属性.每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以 ...
- Array.from();Object.keys();Array.map()
Array.from():方法从一个类似数组或可迭代对象创建一个新的数组形式: const bar = ["a", "b", "c"]; A ...
随机推荐
- vim7.3中文乱码问题
在测试机安装vim7.3之后编辑中文文本出现乱码问题. vim在编译安装的时候: ./configure --enable-gdb --enable-multibyte --enable-cscope ...
- OpenCV探索之路(二十七):皮肤检测技术
好久没写博客了,因为最近都忙着赶项目和打比赛==| 好吧,今天我打算写一篇关于使用opencv做皮肤检测的技术总结.那首先列一些现在主流的皮肤检测的方法都有哪些: RGB color space Yc ...
- MVC 小案例 -- 信息管理
前几次更新博客都是每次周日晚上到周一,这次是周一晚上开始写,肯定也是有原因的!那就是我的 Tomact 忽然报错,无法启动,错误信息如下!同时我的 win10 也崩了,重启之后连 WIFI 的标志也不 ...
- python中使用selenium调用Firefox缺少geckodriver解决方法
from selenium import webdriver driver=webdriver.Firefox() 会报错 解决方法: 因为缺少geckodriver.exe,先到https://gi ...
- Mysql基础--表的操作
1.表的基本概念 每一行代表一条唯一的记录,每一列代表记录中的一个字段. 2.创建表 例子: 3.查看表结构 (1)DESCRIBE语句查看表定义 语法: 例子: (2)SHOW CREATE TAB ...
- DIV居中的经典方法
1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 height: 100px ...
- 【17-06-19】Java进阶自测:面向对象基础知识掌握了吗?(附答案及个人解析)
描述 题目和答案来自于阿里云大学 - 知乎专栏 题目 现在有如下一段代码 public class Test { public int aMethod() { static int i=0; i++; ...
- poj 1064 Cable master 判断一个解是否可行 浮点数二分
poj 1064 Cable master 判断一个解是否可行 浮点数二分 题目链接: http://poj.org/problem?id=1064 思路: 二分答案,floor函数防止四舍五入 代码 ...
- js+画曲线和圆 并限制圆的渲染范围
通过三个点的坐标可确定一条双曲线. 公式: 1)y=ax^2+bx+c; 2) y=a(x-k)+h; 通过已知三点可确定a,b,c,h,k 2.通过圆心坐标(a,b)和半径r可确定一个圆,和已知的x ...
- WebLogic部署报java.lang.ClassCastException: weblogic.xml.jaxp.RegistrySAXParserFactory cannot be cast to javax.xml.parsers.SAXParserFactory
今天在部署WebLogic项目时,报了java.lang.ClassCastException: weblogic.xml.jaxp.RegistrySAXParserFactory cannot b ...