JavaScript遍历对象-总结一
原生JavaScript 遍历
1、for 循环遍历
let array1 = ['a','b','c']; for (let i = 0;i < array1.length;i++){
console.log(array1[i]); // a b c
}
2、JavaScript 提供了 foreach() map() 两个可遍历 Array对象 的方法
forEach和map用法类似,都可以遍历到数组的每个元素,而且参数一致;
Array.forEach(function(value , index , array){ //value为遍历的当前元素,index为当前索引,array为正在操作的数组
//do something
},thisArg) //thisArg为执行回调时的this值
不同点:
forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined;
例子如下:
var array1 = [1,2,3,4,5]; var x = array1.forEach(function(value,index){ console.log(value); //可遍历到所有数组元素 return value + 10
});
console.log(x); //undefined 无论怎样,总返回undefined var y = array1.map(function(value,index){ console.log(value); //可遍历到所有数组元素 return value + 10
});
console.log(y); //[11, 12, 13, 14, 15] 返回一个新的数组
对于类似数组的结构,可先转换为数组,再进行遍历
let divList = document.querySelectorAll('div'); //divList不是数组,而是nodeList //进行转换后再遍历
[].slice.call(divList).forEach(function(element,index){
element.classList.add('test')
}) Array.prototype.slice.call(divList).forEach(function(element,index){
element.classList.remove('test')
}) [...divList].forEach(function(element,index){ //ES6写法
//do something
})
3、 for ··· in ··· / for ··· of ···
for...in
语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。每次迭代时,分配的是属性名
补充 : 因为迭代的顺序是依赖于执行环境的,所以数组遍历不一定按次序访问元素。 因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for
循环 (或者使用 Array.prototype.forEach()
或 for...of
循环) 。
let array2 = ['a','b','c']
let obj1 = {
name : 'lei',
age : '16'
} for(variable in array2){ //variable 为 index
console.log(variable ) //0 1 2
} for(variable in obj1){ //variable 为属性名
console.log(variable) //name age
}
ES6新增了 遍历器(Iterator)机制,为不同的数据结构提供统一的访问机制。只要部署了Iterator的数据结构都可以使用 for ··· of ··· 完成遍历操作 ( Iterator详解 : http://es6.ruanyifeng.com/#docs/iterator ),每次迭代分配的是 属性值
原生具备 Iterator 接口的数据结构如下:
Array Map Set String TypedArray 函数的arguments对象 NodeList对象
let array2 = ['a','b','c']
let obj1 = {
name : 'lei',
age : '16'
} for(variable of array2){ //variable 为 value
console.log(variable ) //'a','b','c'
} for(variable of obj1){ //普通对象不能这样用
console.log(variable) // 报错 : main.js:11Uncaught TypeError: obj1[Symbol.iterator] is not a function
} let divList = document.querySelectorAll('div'); for(element of divlist){ //可遍历所有的div节点
//do something
}
如何让普通对象可以用for of 进行遍历呢? http://es6.ruanyifeng.com/#docs/iterator 一书中有详细说明了!
除了迭代时分配的一个是属性名、一个是属性值外,for in 和 for of 还有其他不同 (MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of)
for...in循环会遍历一个object所有的可枚举属性。
for...of会遍历具有iterator接口的数据结构
for...in
遍历(当前对象及其原型上的)每一个属性名称,而 for...of遍历(当前对象上的)每一个属性值
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {}; let iterable = [3, 5, 7];
iterable.foo = "hello"; for (let i in iterable) {
console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
} for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}
JavaScript遍历对象-总结一的更多相关文章
- javaScript遍历对象、数组总结(转载)
javaScript遍历对象.数组总结 转载来源 https://www.cnblogs.com/chenyablog/p/6477866.html 在日常工作过程中,我们对于javaScript遍 ...
- JavaScript 遍历对象、数组总结
在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用! javaScript遍历对象总结 1.使用Objec ...
- javaScript遍历对象、数组总结
javaScript遍历对象总结 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性). var obj = {'0':'a ...
- JavaScript 遍历对象查找指定的值并返回路径
问:JavaScript 如何查找对象中某个 value 并返回路径上所有的 key? let obj = { key1: 'str1', key2: { key3: 'str3' }, key4: ...
- javascript遍历对象的属性
不同类型的循环 JavaScript 支持不同类型的循环: for - 多次遍历代码块 for/in - 遍历对象属性 while - 当指定条件为 true 时循环一段代码块 do/while - ...
- JavaScript遍历对象4种方法和遍历数组的3种方式 代码
//遍历对象 4种方法 //Object.keys(obj).forEach() console.log("keys...遍历</br>") var obj1 = { ...
- 关于javascript遍历对象
1:遍历对象属性var obj={a:'aa',b:'bb'} for(var i in obj) { alert(i); //输出 a b } var obj={'a':'aa','b':'bb'} ...
- JavaScript遍历对象中所有元素
操作对象如下,属性名不确定: 遍历方法: var temp = new Array(); for(var i in result.datas[0]){ temp.push(result.datas[0 ...
- JavaScript遍历对象方法总结
前言 本篇内容将按照下图展开: 遍历Object Object最常见的遍历方法方法就是使用for...in...,但其有一定的局限性,比如只能遍历可枚举属性.虽然Object无法直接使用for循环和f ...
随机推荐
- 借助扩展事件查看SQL 2016备份和还原操作的内幕
当遇到备份或者还原操作占用较长时间时,很多人会问: 备份/还原是不是僵死了?要不要kill掉,再重来? 到底是哪一个部分的操作占用较长时间? 到底现在进行到什么阶段了? 在SQL 2016 之前,要回 ...
- 【概率论与数理统计】小结3 - 一维离散型随机变量及其Python实现
注:上一小节对随机变量做了一个概述,这一节主要记录一维离散型随机变量以及关于它们的一些性质.对于概率论与数理统计方面的计算及可视化,主要的Python包有scipy, numpy和matplotlib ...
- When Startup Disk is Full
参考自What To Do When Your Mac's Startup Disk is Almost Full Delet——Empty Trash
- maven 搭新建成之后 无法创建 src/main/java 目录解决
maven项目创建后 创建 src/main/java 和 src/main/test 会报错,目录已存在 打开build path 界面 src/main/java 和 ...
- python的引用计数分析(二)
python所有对象引用计数被减少1的情况: 一.对象的别名被赋予新的对象; a = 23345455 # 增加了一个引用 b = a # 增加了一个引用 print(sys.getrefcount( ...
- 每次启动懂maven项目都必须关闭javaw.exe进程
最近几天一致在搞配置问题,今天总于解决了.下面说问题: 我发现我每次配置完maven build的goals运行,总是会出现TOMCAT绑定接口问题,我做的方法就是不断地关掉JAVAw.exe进程.但 ...
- Spark Structured Streaming框架(2)之数据输入源详解
Spark Structured Streaming目前的2.1.0版本只支持输入源:File.kafka和socket. 1. Socket Socket方式是最简单的数据输入源,如Quick ex ...
- Linux常用命令简单总结
Liunx常用命令 1. 文件及目录管理 1.1. ls:显示目录 参数及说明 空:补显示隐含文件 -a:显示所有文件 -l:显示详细列表 1.2. chgrp:设置文件组(root权限) 用法示例 ...
- Shuffle 的 5步
Shuffle的本意是洗牌.混乱的意思,类似于java中的Collections.shuffle(List)方法,它会随机地打乱参数list里的元素顺序.MapReduce中的Shuffle过程.所谓 ...
- jmeter日记
1.不要像loadrunner一样使用集合点,jmeter不需要 2.性能测试 线程组设置的时候 永远 3.启动jmeter之后,打开log 4.分布式的话 tps是多台电脑的tps之和 自动加好了的 ...