JS数组循环遍历常用方法总结
1. for 循环
for
循环在JavaScript 刚萌生的时候就出现了,for循环是使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。for循环没有返回值。
for (var i = 0; i < arr.length; i++) {console.log(arr[i])
}
2. forEach 循环
遍历数组中的每一项,没有返回值,对原数组没有影响,但不支持IE
arr.forEach((value, index, array) => {// 参数一是: 数组元素// 参数二是: 数组元素的索引// 参数三是:当前的数组
})
3. filter 数组过滤
filter()
方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组。
注意:它不会改变原始数组,但是直接返回一个新数组。
let arr = [12, 66, 4, 88, 3, 7];
let res = arr.filter((value, index, array) => {// 参数一是:数组元素// 参数二是:数组元素的索引// 参数三是:当前的数组return value >= 20;
});console.log(res); // [66,88] 返回值是一个新数组
4. map 循环
map()
的回调函数中支持 return 返回值,相当于把数组中的每一项改变,但并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了
let arr = [12,23,24,42,1];
let res = arr.map((item, index, ary) => { return item*10;
})
console.log(res); // [120,230,240,420,10]; 原数组拷贝了一份,并进行了修改
console.log(ary); // [12,23,24,42,1]; 原数组并未发生变化
5. some 循环
some()
是查找数组中是否有满足条件的元素,返回值是布尔值,如果查找到这个元素,就返回 true(有任意一项符合条件即返回true) , 如果查找不到就返回 false。
如果查询数组中唯一的元素,用 some 方法更合适,在 some 里面遇到 return true 就是终止遍历,迭代效率更高。
let arr = [10, 30, 4];
let flag = arr.some((value, index, array) => {return value < 3;
});console.log(flag); // false 返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环
6. every 循环
every()
是对数组中的每一项运行给定函数,只有当该函数对每一项返回true,才返回true,否则返回false。
let arr = [1, 2, 3, 4, 5, 6];
let flag = arr.every((value, index, array) => {return value > 3;
});console.log(flag); // false
7. for of 循环
for-of
循环是ES6新增特性,for-of 的功能不仅仅用于遍历数组,它还可以 遍历字符串、遍历类数组对象、支持 Map 和 Set 对象遍历。
let arr = [1, 2, 3, 4];
for (let item in arr) {console.log(item) // 遍历每个元素 1 2 3 4
}
8. find
find()
方法返回数组中符合测试函数条件的第一个元素。否则返回undefined
let ary = [{id: 1,name:'张三'
}, {id: 2,name:'李四'
}];let res = ary.find((item, index) => item.id === 2);
console.log(res) // {id:2,name:'李四'}
// 找数组里面符合条件的值,当数组中元素id等于2的查找出来,注意,只会匹配第一个
9. findIndex
findIndex()
用于找出第一个符合条件的数组成员的位置,如果没有找到返回 -1。
对于数组中的每个元素,findIndex方法都会调用一次回调函数(采用升序索引顺序),直到有元素返回 true。只要有一个元素返回 true,findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true,则 findIndex 返回 -1。注意:findIndex不会改变数组对象。
let ary = [1, 5, 10, 15];
let resIndex = ary.findIndex((value, index) => value > 9);
console.log(resIndex); // 2
// 找数组里面符合条件的值的位置(索引),注意,只会匹配第一个
数组原型方法还有以下这些:
join():用指定的分隔符将数组每一项拼接为字符串,默认使用逗号作为分隔符
push():向数组的末尾添加新元素
pop():删除数组的最后一项
shift():删除数组的第一项
unshift():向数组首位添加新元素
slice():按照条件查找出其中的部分元素
splice():对数组进行增删改
concat():用于连接两个或多个数组
indexOf():检测当前值在数组中第一次出现的位置索引
lastIndexOf():检测当前值在数组中最后一次出现的位置索引
includes():判断一个数组是否包含一个指定的值
sort():对数组的元素进行排序,默认排序顺序为升序排列
reverse():对数组进行倒序,反转数组
fill(): 方法能使用特定值填充数组中的一个或多个元素
copyWithin():用于从数组的指定位置拷贝元素到数组的另一个指定位置中
toLocaleString()、toString(): 将数组转换为字符串
flat()、flatMap():扁平化数组
entries() 、keys() 、values():遍历数组
JS数组循环遍历常用方法总结相关推荐
- js 数组遍历符合条件跳出循环体_Javascript数组循环遍历之forEach详解
1.js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i除此之外,也可以使用较简便的forEach 方式 2.forEach函数. Firefox 和Chrome 的Arra ...
- Javascript 数组循环遍历之forEach
1. js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式 2. forEac ...
- php的循环有哪几种,PHP数组循环遍历的几种方式
PHP数组循环遍历 1.for循环 //语法 for (init counter; test counter; increment counter) { code to be executed; } ...
- js三层数组循环遍历(笛卡尔积)运算,并生成顺序
笛卡尔乘积是指在数学中,两个集合X和Y的笛卡尔积(Cartesian product),又称直积,表示为X × Y,第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员 [1] . 假 ...
- js for循环 遍历数组 遍历对象属性
1.js for循环 遍历对象属性 var person = {fname:"John",lname:"Doe",age:25}; for (x in pers ...
- html编写数组求和,JS数组求和的常用方法总结【5种方法】
本文实例总结了JS数组求和的常用方法.分享给大家供大家参考,具体如下: 题目描述 计算给定数组 arr 中所有元素的总和 输入描述: 数组中的元素均为 Number 类型 输入例子: sum([ 1, ...
- ajax如何循环lis,关于js中循环遍历中顺序执行多个嵌套ajax的问题
就是业务上需要完成一个功能,这个功能需要依次调用四个接口,后面接口的参数都依赖于前一个接口的返回值. 类似这样: var objArr = "从其他逻辑获得"; for(var n ...
- vue 循环遍历list_vue使用map代替Aarry数组循环遍历的方法
需求:根据主键id来找到对应的数组下标 原本的方法是使用for循环遍历该数组,变量 i 就是下标,问题在于,如果有多重for循环,就会导致性能大大下降,数据也容易出错 因此使用map,让数组(原本是l ...
- vue数组循环遍历中途跳出整个循环
vue数组循环遍历中途跳出整个循环,使用some进行循环,return true时,跳出整个循环 judgePoint(arr) {if (this.haveError) {this.haveErro ...
最新文章
- 使用C++实现的一个五子棋系统(基于Socket编程)
- 问题集锦(48-51)
- jQuery easyUI--选项卡右键菜单
- jmap java opts_jmap --查看JVM内存使用详情
- python条件语句练习题_python学习-7 条件语句 while循环 + 练习题
- Python基础语法和数据类型最全总结
- python代码运行到一半终止_Python 程序运行时卡住,既不报错,也不停止,也不动,是什么原因?...
- Cesium基础使用介绍
- 恭喜你们微软论坛版主成为百度知道专家
- 00.Maven简介
- 使用Go构建区块链 第3部分:持久化和cli
- HDU 1285 确定比赛名次【拓扑排序】
- 组装机怎么重装系统?组装机U盘装系统方法
- 苹果系统macos腾讯企点无法打开麦克风权限
- qrcode 生成二维码不显示图片解决办法
- 基于Yolov5的草莓病虫害检测识别
- 手机删除的照片还能恢复吗
- discuz数据字典
- [网络安全]实操DVWS靶场复现CSRF漏洞
- 借助支付宝实现跨行跨省转账无手续费
热门文章
- 现代计算机体系结构介绍
- 阿拉伯语软件的 GUI 设计
- Goby资产扫描工具安装及报错处理
- 树莓派用WiringPi和Bcm2835库和PCA9685输出PWM
- 如何让图片无损放大,保持清晰度
- 异形工厂自动化工厂教程
- KD2671系列智能数字绝缘电阻测试仪
- Resource not found: rgbd_launch ROS path [0]=/opt/ros/melodic/share/ros ROS path [1]=/opt/ros/melodi
- Unity -控制车辆运动效果
- ssm+jsp计算机毕业设计演出赛事购票系统xy8hy(程序+lw+源码+远程部署)