JS遍历数组的12种方法

一、 for

普通版

for (let i = 0; i < arr.lengthl; i++) {// ...
}

优化版

// 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。
let len = arr.length;
for (let i = 0; i < len; i++) {// ...
}

for 循环和 for...in 能正确响应 breakcontinuereturn 语句,但 forEach 不行。

二、 forEach

注意:forEach 不会对空数组进行检测

arr.forEach((item, index, arr) => {// ...
})

item : 每个元素 index : 元素数组下标 arr : 数组本身

三、 map

  • map 有返回值
  • mapforEach 都不会对空数组进行检测
  • map 不会改变原始数组
const result = arr.map((item, index, arr) => {return item * 2;
})console.log(result); // [2, 4, 6]

四、 for...of

只有可迭代对象(iterator)才能使用(Array, Map, Set, String, TypedArray, arguments 对象等等)

for (let item of arr) {// ...
}

五、 filter

接收一个回调函数作为参数,返回值是一个新数组

注意:

  • filter() 不会对空数组进行检测
  • filter() 不会改变原始数组
const arr = [{name: 'tony', age: '20'},{name: 'jack', age: '18'}
]const result1 = arr.filter(item => {return item.age >= 20;
})const result2 = arr.filter(item => {return item.age >= 20;
})console.log(result1); // [{name: 'tony', age: 20}]
console.log(result2); // [] --> 没有满足条件的就返回一个空数组

六、 every

如果每一项返回 true, 则返回 true(全部符合条件),否则返回 false

  • every 不会对空数组进行检测
  • every 不会改变原始数组
const arr = [1, 2, 3, 4, 5];
const result = arr.every((item, index, arr) => {return item > 3; // 每一项是否大于3
})console.log(result); // false
----------------------------------------------------------
const arr = [1, 2, 3, 4, 5];
const result = arr.every((item, index, arr) => {return item > 0; // 每一项是否大于0
})console.log(result); // true

七、 some

some 如果每一项都返回 true,则返回 true(只要有一个符合),否则返回 false

  • some 不会对空数组进行检测
  • some 不会改变原数组
const arr = [1, 2, 3, 4, 5];
const result = arr.some((item, index, arr) => {return item > 3; // 数组有没有大于3的
})console.log(result); // true --> 只要有一个大于3结果都为 true

八、 reduce


reduce 顺着挨个累加,对于空数组是不会执行回调函数的。

const arr = [1, 2, 3];
// 没指定初始值的情况下
arr.reduce((initialValue, currentValue, index, arr) => {console.log(initialValue); // 第一次循环 initialValue = 1return initialVaule + currentValue; // 6 --> 从左往右累加起来
})// 给了初始值之后
arr.reduce((initialValue, currentValue, index, arr) => {console.log(initialValue); // 第一次循环 initialValue = 10return initialVaule + currentValue; // 16 --> 从左往右累加起来
}, 10)

九、 reduceRight

reduceRight 倒着挨个累加,遍历的是空数组的话,不会执行

const arr = [1, 2, 3];
arr.reduceRight((initialValue, currentValue, index, arr) => {console.log(initialValue); // 第一次循环 initialValue = 3return initialVaule + currentValue; // 6
})arr.reduceRight((initialValue, currentValue, index, arr) => {console.log(initialValue); // 第一次循环 initialValue = 10return initialVaule + currentValue; // 16
}, 10)

十、 find

找到符合条件的第一项,没找到返回 undefined,对于空数组,是不会执行的,并且不改变原数组

const arr = [{name: 'tony', age: '20'},{name: 'jack', age: '18'}
]const result1 = arr.find(item => {return item.name === 'jack';
})
console.log(result1); // {name: 'jack', age: 18}const result2 = arr.filter(item => {return item.namee === 'mary';
})
console.log(result2); // undefined

十一、 fiendIndex

返回符合条件的第一项的下标,没有则返回 -1,对于空数组,是不会执行的,并且不改变原数组

const arr = [{name:'tony1',age:'20'},{name:'tony2',age:'20'},{name:'tony3',age:'20'},{name:'jack',age:"30"}, // 只管返回第一个满足条件的{name:'jack',age:"100"}
];const result = arr.findIndex(item => {return item.name === 'jack';
})console.log(result); // 3

十二、 keysvaluesentries

它们都返回一个遍历器对象,可以用 for...of 循环进行遍历

  • keys – 返回元素索引
  • values – 返回元素本身
  • entries – 返回元素和下标
const arr = ['a', 'b', 'c'];for (let index of arr.keys()) {console.log(index);// 0// 1// 2
}for (let ele of arr.values()) {console.log(ele);// a// b// c
}for (let [index, ele] of arr.entries()) {console.log(idnex, ele);// 0 "a"// 1 "b"// 2 "c"
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/556186.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Log4j2突发重大漏洞

长话短说吧。 相信大家已经被 Log4j2 的重大漏洞刷屏了&#xff0c;估计有不少小伙伴此前为了修 bug 已经累趴下了。很不幸&#xff0c;我的小老弟小二的 Spring Boot 项目中恰好用的就是 Log4j2&#xff0c;版本特喵的还是 2.14.1&#xff0c;在这次漏洞波及的版本范围之内。…

不改变原数组的一些方法

改变原数组 push / pop / shift / unshift / sort / reverse / splice 不改变原数组 concat / join --> split / toString / slice 一、 concat — 数组合并 var arr [1, 2, 3]; var arr1 [4, 5, 6]; console.log(arr.concat(arr1)); // [1, 2, 3, 4, 5, 6];二、 toStri…

python描述对象静态特性的数据为_对于需要几个单位共同负担的一张原始凭证上的支出,应根据其他单位负担部分为其提高( )。...

【单选题】字符串s是一个字符序列,以下表示s从右侧向左第三个字符的是: ‪‪‪‫‪‪‪‪‪‪‫‪‪‪‪‪‫‫‪‪‪‪‪‪‪‪‪‪‪‪‫‪‪‪‪‪‪【多选题】我国《婚姻法》规定夫妻人身关系的内容包括 ( )【填空题】白露横江【多选题】我国《婚姻法》规定的婚姻成立的实质…

PageHelper分页插件源码及原理剖析

摘要: com.github.pagehelper.PageHelper是一款好用的开源免费的Mybatis第三方物理分页插件。 PageHelper是一款好用的开源免费的Mybatis第三方物理分页插件&#xff0c;其实我并不想加上好用两个字&#xff0c;但是为了表扬插件作者开源免费的崇高精神&#xff0c;我毫不犹豫…

arguments 类数组

一、类数组&#xff1a;长得像数组&#xff0c;可以拿它当数组用&#xff0c;但它不是数组 可以利用属性名模拟数组的特性可以动态的增长 length 的属性如果强行让类数组调用 push 方法&#xff0c;则会根据 length 属性值的位置进行属性的扩充 二、不能往类数组里面添加东西…

净网大师最好用旧版本_云顶之弈手把手教你吃分系列:决斗大师

很忏愧&#xff0c;这个阵容并非我原创&#xff0c;也是我偷师而来&#xff0c;不过最近一直在用&#xff0c;效果也不错&#xff0c;所以主要会讲讲心得&#xff0c;而不是原先的基础。先看阵容构成&#xff1a;亚索(天选决斗大师)、剑姬、武器、风女、卡莉斯塔/赵信、慎、永恩…

PageHelper 关闭COUNT(0)查询 以及PageHelper 的分页原理分析

pagehelper 关闭count(0)查询 以及pagehelper的分页原理分析 情景再现&#xff1a;在给移动端提供分页查询数据接口时&#xff0c;知道他们不需要总条数。但是使用pagehelper 分页查询打印的sql总是会查询两次&#xff0c;先统计条数&#xff0c;在进行列表查询。对于有点强迫…

local service system账户_systemd.service学习和使用总结

公众号&#xff1a;暮北林 Q Q 群 : 一起学前端Systemd Service 学习和使用总结什么是Systemd servicesystem就是系统,d的意思是daemon,systemd就是系统守护进程,守护系统级的服务.我的个人理解就是管理系统服务的工具,可以对系统服务做一些操作,如:启动、结束、重启等,这里我…

js 函数参数

函数有了参数才变得强大。 一、参数规则 形参比实参多&#xff0c;多的形参赋值undefined 实参比形参多&#xff0c;有多少形参就对应赋多少实参&#xff0c;其余的放到 arguments arguments[] 是一个类数组 – 实参列表 // 形式参数 -- 形参 -- 用来占位的 function fun(a,…

MySQL中OR和AND的区别是什么____MySQL中or与in

MySQL中OR和AND的区别是什么 区别如下&#xff1a; 1、or就是’或’得意思&#xff0c;只要其中一个条件成立就可以了&#xff1b; 2、and就是’与’得意思&#xff0c;并列&#xff0c;两个条件要都成立。 简明的说&#xff1a;and必须满足所有条件&#xff1b;or满足一个…

stm32 lwip 如何发送不出_mbedtls | 移植mbedtls库到STM32裸机的两种方法

一、mbedtls 开源库1. mbedtls是什么Mbed TLS是一个开源、可移植、易于使用、代码可读性高的SSL库。可实现加密原语&#xff0c;X.509证书操作以及SSL / TLS和 DTLS 协议&#xff0c;它的代码占用空间小&#xff0c;非常适合用于嵌入式系统。mbedtls遵循 Apache 2.0 开源许可协…

函数的结束条件和返回值 — return

一、当做返回值 function sum(a, b) {return a b; }sum(1, 2); // 3二、作为函数的终止条件 函数遇到 return 就会停止 function sum(a, b) {console.log(a);return; // 如果 return 写在这里&#xff0c;后面的语句通通不会执行console.log(b); }sum(1, 2);输入数字&#x…

java面试题:当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?

java面试题&#xff1a;当一个对象被当作参数传递到一个方法后&#xff0c;此方法可改变这个对象的属性&#xff0c;并可返回变化后的结果&#xff0c;那么这里到底是值传递还是引用传递? 答&#xff1a;是值传递。Java编程语言只有值传递参数。 当一个对象实例作为一个参数…

keras训练完以后怎么预测_农村小孩只有户口,没有承包地,以后怎么养老?看完我安心了...

阅读本文前&#xff0c;请您先点击上面的蓝色字体“三农荟”&#xff0c;再点击“关注”&#xff0c;这样您就可以继续免费收到最新情感文章了。每天都有分享。完全是免费订阅&#xff0c;请放心关注。 农村小孩&#xff0c;只有户口&#xff0c;没有属于自己的承包地&#xff…

函数的作用域以及预编译

一、函数的作用域 函数作用域有点像单面镜&#xff08;外面看不到里面&#xff0c;里面可以看到外面&#xff09;JS的特点&#xff1a;单线程、是 解释性语言 (翻译一行&#xff0c;执行一行) 二、预解析 JS预解析三部曲&#xff1a;语法解析 ⇒ 预编译 ⇒ 解释执行 JS 在执…

完整版PayPal支付(java后端教程)

首先引入 PayPal的sdk 这里我引入的是1.0.4版本的 <!-- 贝宝支付 SDK --><dependency><groupId>com.paypal.sdk</groupId><artifactId>checkout-sdk</artifactId><paypal-sdk.version>1.0.4</paypal-sdk.version></depe…

mac玩rust用什么画质_Mac上的活动监视器到底有什么用?你会用么?

您希望当Mac卡住或沙滩球不断旋转时&#xff0c;Mac中有一个任务管理器。它允许您强制退出已冻结的网站或应用程序。Windows用户熟悉任务管理器&#xff0c;并且擅长使用它来管理PC任务以优化PC性能。因此&#xff0c;您想知道Mac上是否有任务管理器&#xff1f;是的&#xff0…

js 闭包

一、闭包的作用 实现公有变量 — 函数累加器可以做缓存&#xff08;存储结构&#xff09;可以实现封装&#xff0c;属性私有化模块化开发&#xff0c;防止污染全局变量 闭包实现 1 … 100 function add() {var count 0;function demo() {count;console.log(count);}retur…

java实现 支付宝支付

文章目录支付宝开放平台官网创建demo实例分析效果图实例代码AlipayConfigPaymentControllerOrderService OrderServiceImplapplicationContext-alipay.xml支付宝开放平台官网 用自己手机支付宝扫码登录 根据页面提示填写自己真实信息 进去之后 东西主要用的就在这里 sdk 在 …

python读取git日志_Python获取gitlab提交历史!

工作中的场景&#xff0c;记录下来分享给大家。需求公司私有部署了gitlab保存公司代码&#xff0c;希望在发布系统中可以展示项目在gitlab的提交历史&#xff0c;供发布人员选择提交commit记录并构建对应的docker镜像。不可行的方案但是很快我就发现&#xff0c;这个方案是不可…