js 数组循环和迭代
(之前一直没怎么注意数组循环,今天做一道题时,用到forEach循环发现它并没有按照我想象的样子执行,总结一下数组循环)
一.第一种方法就是for()循环
for( var index = 0; index < array.length; i ++){}
这种方法很常见,各个语言都有,这里就不再赘述
二.es5新增加的迭代方法(every,filter,forEach,map,some)
这些方法都接收两个参数,1)在每一项上可运行的函数(传入的函数接受三个参数:a. 数组项的值;b. 该项在数组中的位置; c. 数组本身);2)(可选)运行该函数的作用域——影响this的值。
语法:以forEach为例,其他类似
array.forEach(callback [, thisArg])
/**
*callback为要执行的回调函数,thisArg为绑定的this若未传参,*callback的this值在非严格模式下将是全局对象,严格模式下为undefined
*/
var nums = [3, 2, 3, 4]
nums.forEach(function(value, index, array){
//执行某些操作
})
/**
*其中匿名函数为每一项要执行的函数;thisArg省略
* 匿名函数中 value为每一项的值,如3,2,3,4
* index为每一项的位置即索引,如0,1,2,3
*array为数组本身,如nums
*
*thisArg省略
*/
1) every()方法:
测试数组中所有元素是否都通过指定函数的测试,若有一项返回false即返回false;
every方法为元素的每个元素执行一次callback函数(不包括通过某些方法删除或者未定义的项,值定义为undefined的项除外),直到找到一个使callback返回false(可转化为false的值),跳出迭代并返回false。否则(所有元素均返回true)返回true。
every方法遍历到的元素为第一次调用callback那一个的值,之后添加的值不会被访问到。
function isBigEnough(elemen) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true
var a = [1, 2, 3,, 4].every (function(value){
console.log(value)
return value
})//1,2,3,4
console.log(a)//true
a = [1, 2, 3, undefined,4].every (function(value){
console.log(value)
return value
})//1,2,3,undefind
console.log(a)//false
2)filter()方法:
使用指定的函数测试所有的元素,创建并返回一个包含所有通过测试的元素的新数组
filter为数组中的每个元素调用一次callback(不包括通过某些方法删除或者未定义的项,值定义为undefined的项除外),并利用所有callback返回true或等价于true的元素创建一个新数组,未通过callback测试的元素会被跳过,不会包含在新数组里。
var a = [1, 2, 3, 7,4].filter(function(value){
return value > 4
})
console.log(a)//[7]
3)forEach()方法:
forEach按升序为数组中含有相知的每一项执行一次callback函数(不包括通过某些方法删除或者未定义的项,值定义为undefined的项除外)
forEach遍历的范围在第一次调用 callback 前就会确定。调用forEach后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback 的值是 forEach遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()) ,之后的元素将被跳过 。总是返回undefined,不能链式调用。
没有办法中止或者跳出 forEach 循环,除了抛出一个异常。如果你需要这样,使用forEach()方法是错误的,你可以用一个简单的循环作为替代
function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
// 注意索引2被跳过了,因为在数组的这个位置没有项
[2, 5, ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[3] = 9
[2, 5,"" ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] =
// a[3] = 9
[2, 5, undefined ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9
let xxx;
// undefined
[2, 5, xxx ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9
如果数组在迭代时被修改了,则其他元素会被跳过。
下面的例子输出"one", "two", "four"。当到达包含值"two"的项时,整个数组的第一个项被移除了,这导致所有剩下的项上移一个位置。因为元素 "four"现在在数组更前的位置,"three"会被跳过。 forEach()不会在迭代之前创建数组的副本。
var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
console.log(word);
if (word === "two") {
words.shift();
}
});
// one
// two
// four
4) map()方法:
为数组每一项(不包括通过某些方法删除或者未定义的项,值定义为undefined的项除外)执行一个指定函数,返回一个新数组,每个元素都是回调函数的结果
使用 map 方法处理数组时,数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中:原数组中新增加的元素将不会被 callback 访问到;若已经存在的元素被改变或删除了,则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值;而被删除的元素将不会被访问到。
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
/* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */
5)some()方法:
测试数组中某些元素是否通过指定函数的测试,若有一项返回true即返回true
some为数组中的每一个元素执行一次 callback函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值),停止迭代并返回true;否则(所有元素均为false),返回false。
var a = [1, 2, 3, 7,4].some (function(value){
return value > 8
})
console.log(a)//false
a = [1, 2, 3, 9,4].some (function(value){
return value > 8
})
console.log(a)//true
js 数组循环和迭代的更多相关文章
- JavaScript 基础数组循环和迭代的几种方法
JavaScript 数组循环和迭代 (之前一直没怎么注意数组循环,今天做一道题时,用到forEach循环发现它并没有按照我想象的样子执行,总结一下数组循环) 一.第一种方法就是for()循环 ...
- JS数组循环的性能和效率分析(for、while、forEach、map、for of)
从最简单的for循环说起 for( 初始化:条件; ){} 条件为Trusy 值时候,可以继续执行for 循环,当条件变为Falsy 时跳出for循环.for循环常见的四种写法const person ...
- mustache.js 数组循环的索引
在使用mustache作为模板引擎时,想要利用数组中的对象的索引排序,却发现mustache中无法获得数组索引,在一番搜索之后,发现在数组的对象中加入索引,就可以了,示例如下 /html {{#dat ...
- js 数组循环删除元素或对象
1.根据不同条件,删除数组中的元素或对象 for(var i=0,flag=true,len=attrList.length;i<len;flag ? i++ : i){ if(attrList ...
- 解决js数组循环删除出错
for(var i=0,flag=true,len=arr.length;i<len;flag ? i++ : i){ if( arr[i]&&arr[i].status==0 ...
- JS --- 数组循环要用length
socket.on("receive", function (data) { deviceone.print("返回的数据:"+data) // 发送异常 va ...
- JavaScript数组循环遍历之forEach
1. js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式 2. forEac ...
- 手写js代码(一)javascript数组循环遍历之forEach
注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...
- JS数组+JS循环题
先看JS循环作业题: 一.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 <script type="text/javascript"> ...
随机推荐
- 子页面iframe跨域执行父页面定义的JS方法
问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...
- [BeiJing2011]元素[贪心+线性基]
2460: [BeiJing2011]元素 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 1245 Solved: 652[Submit][Stat ...
- 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验二十:SDRAM模块③ — 页读写 α
实验二十:SDRAM模块③ — 页读写 α 完成单字读写与多字读写以后,接下来我们要实验页读写.丑话当前,实验二十的页读写只是实验性质的东西,其中不存在任何实用价值,笔者希望读者可以把它当成页读写的热 ...
- [转] 基于TINY4412的Andorid开发-------简单的LED灯控制
阅读目录 一.编写驱动程序 二.编写代码测试驱动程序 三.编写HAL代码 四.编写Framework代码 五.编写JNI代码 六.编写App 参考资料: <Andriod系统源代码情景分析> ...
- 微信小游戏 50M那部分的缓存机制的使用
一.使用 AssetsManager 灵活定制微信小游戏的缓存策略 官网教程:http://developer.egret.com/cn/github/egret-docs/Engine2D/mini ...
- HTML 5 Audio/Video DOM canplaythrough 事件在移动端遇到的坑
canplaythrough 事件定义和用法 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件. 当音频/视频处于加载过程中时,会依次发 ...
- 一个js文件如何加载另外一个js文件
方法一,在调用文件的顶部加入下例代码: document.write(”<script language=javascript src=’/js/import.js’></scrip ...
- HBase一次客户端读写异常解读分析与优化全过程(干货)
大数据时代,HBase作为一款扩展性极佳的分布式存储系统,越来越多地受到各种业务的青睐,以求在大数据存储的前提下实现高效的随机读写操作.对于业务方来讲,一方面关注HBase本身服务的读写性能,另一方面 ...
- HDU 3182 - Hamburger Magi - [状压DP]
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3182 Time Limit: 2000/1000 MS (Java/Others) Memory Li ...
- POJ 1849 - Two - [DFS][树形DP]
Time Limit: 1000MS Memory Limit: 30000K Description The city consists of intersections and streets t ...