JavaScript 基础数组循环和迭代的几种方法
JavaScript 数组循环和迭代
(之前一直没怎么注意数组循环,今天做一道题时,用到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
JavaScript 基础数组循环和迭代的几种方法的更多相关文章
- javascript获取数组最后一个元素(三种方法)
JavaScript 获取Array末尾元素 一.JavaScript pop() 方法 pop() 方法用于删除并返回数组的最后一个元素. 注意:pop() 方法将删除 arrayObject 的最 ...
- javascript递归、循环、迭代、遍历和枚举概念
javascript递归.循环.迭代.遍历和枚举概念 〓递归(recursion)在数学与计算机科学中,是指在函数的定义中使用函数自身的方法.递归一词还较常用于描述以自相似方法重复事物的过程.例如,当 ...
- JavaScript从数组中删除指定值元素的方法
本文实例讲述了JavaScript从数组中删除指定值元素的方法.分享给大家供大家参考.具体分析如下: 下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函数,第二种为Array对象定义了一个 ...
- Javascript获取数组中的最大值和最小值的方法汇总
比较数组中数值的大小是比较常见的操作,下面同本文给大家分享四种放哪广发获取数组中最大值和最小值,对此感兴趣的朋友一起学习吧 比较数组中数值的大小是比较常见的操作,比较大小的方法有多种,比如可以使用 ...
- 详解JavaScript数组过滤相同元素的5种方法
详解JavaScript数组过滤相同元素的5种方法:https://www.jb51.net/article/114490.htm
- 关于iOS去除数组中重复数据的几种方法
关于iOS去除数组中重复数据的几种方法 在工作工程中我们不必要会遇到,在数组中有重复数据的时候,如何去除重复的数据呢? 第一种:利用NSDictionary的AllKeys(AllValues)方 ...
- JS去除数组中重复值的四种方法
JS去除数组中重复值的四种方法 1 /// <summary> o[this[i]] = ""; } } newArr.p ...
- php获取数组中重复数据的两种方法
分享下php获取数组中重复数据的两种方法. 1,利用php提供的函数,array_unique和array_diff_assoc来实现 <?php function FetchRepeatMem ...
- Javascript定义类(class)的三种方法
将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越 ...
随机推荐
- 文本分类学习 (十)构造机器学习Libsvm 的C# wrapper(调用c/c++动态链接库)
前言: 对于SVM的了解,看前辈写的博客加上读论文对于SVM的皮毛知识总算有点了解,比如线性分类器,和求凸二次规划中用到的高等数学知识.然而SVM最核心的地方应该在于核函数和求关于α函数的极值的方法: ...
- echarts pie 图表 显示的label 中内容 字体大小自定义
option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, lege ...
- 更换title上的ico
var rurl = "/static/dashboard/img/favicon.ico"; var a = ''; var links = document.getElemen ...
- CHARACTER SET
mysql> show tables; +-----------------+ | Tables_in_w0811 | +-----------------+ | t | | w_engine ...
- OLTP/OLAP
原文地址:https://www.cnblogs.com/hhandbibi/p/7118740.html 数据处理大致可以分成两大类:联机事务处理OLTP(on-line transaction p ...
- 《Mysql ALTER基本操作》
一:ALTER 添加单列 - 语法 - ALTER TABLE 表名 ADD 列名 定义类型 [FIRST(列将加入最上方) | AFTER 字段名(列加入某某字段之后) ] - 示例 `user` ...
- 继承数组的slice方法
<script> var arr=[1,2,3,4,5]; console.log(Array.prototype.slice.call(arr,1)); </script> ...
- java上传文件代码
import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;impo ...
- java 网络编程(五)Socket多线程上传文件
客户端: package cn.sasa.socketUploadFileDemo; import java.io.FileInputStream; import java.io.IOExceptio ...
- 数据库使用:sql server/mysql/sqlite
本科学过sql server数据库,上研刚开始在做研究时自己想点子自己做,为了简便使用了论文中看到的一个简易数据库sqlite存储使用数据.后来随着数据量的增长,以及数据处理的需求sqlite速度明显 ...