简单实用,JavaScript的8个数组遍历方法

 引言

成都创新互联是一家集网站建设,新蔡企业网站建设,新蔡品牌网站建设,网站定制,新蔡网站建设报价,网络营销,网络优化,新蔡网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

在 JavaScript 中,有一些用于遍历数组的方法。经常的总结并记住它们,可以让我们的工作得心应手。

map

map() 数组的每个元素都会调用回调函数,并将处理结果返回一个新数组。

 
 
  1. const numbers = [1, 2, 3, 4];
  2. const foo = number => number + 10;
  3. const newNumbers = numbers.map(foo);
  4. console.log(`新数组:${newNumbers}`);
  5. console.log(`旧数组:${numbers}`);
  6. /*
  7.  * 新数组:11,12,13,14
  8.  * 旧数组:1,2,3,4
  9. */

every

every() 方法使用指定函数检测数组中的所有元素是否满足条件,元素全部满足条件,方法返回 true ,有一个元素不满足条件,方法返回 false 且其余元素不再检测。

 
 
  1. const numbers = [1,2,3,4];
  2. const foo = num => num < 5;
  3. if (numbers.every(foo)) {
  4.   console.log('数组中所有元素都小于 5'); // is ok
  5. } else {
  6.   console.log('数组中至少有一个元素大于 5');
  7. }

some

some() 方法使用指定函数检测数组中是否有元素满足条件,有一个元素满足条件,方法返回 true 且剩余的元素不会再执行检测,没有满足条件的元素,方法返回 false 。

 
 
  1. const numbers = [1,2,3,4];
  2. const foo = num => num > 3;
  3. if (numbers.some(foo)) {
  4.   console.log('数组中至少有一个元素值大于 3'); // is ok 
  5. } else {
  6.   console.log('数组中没有大于 3 的元素值');
  7. }

filter

filter() 方法通过一个函数,筛选数组中的元素。用符合条件的元素创建一个新数组。

 
 
  1. const numbers = [1,2,3,4];
  2. const foo = number => number > 2;
  3. const newNumbers = numbers.filter(foo);
  4. console.log(`原始数组 [${numbers}] 中,满足 > 2 的元素有 : ${newNumbers}`);
  5. // 原始数组 [1,2,3,4] 中,满足 > 2 的元素有 : 3,4

reduce

reduce() 方法接收一个函数累加器,数组中的每个元素 (从左到右) 应用于函数,最终计算出一个最终值。

 
 
  1. const numbers = [1, 2, 3, 4];
  2. const sum = (total, num) => total + num;
  3. const numbers_sum = numbers.reduce(sum, 0); // 将 0 作为 reduce 的初始值
  4. console.log(`原始数组 '${numbers}' 的元素累加后,最终值是 ${numbers_sum}`);
  5. // 原始数组 [1,2,3,4] 的元素累加后,最终值是 10

reduceRight() 和 reduce() 使用方法一样,区别是它从右到左将数组中的每个元素应用于函数。

for

传统的 for 循环遍历数组很常用。

 
 
  1. const numbers = [1, 2, 3, 4];
  2. for (let index = 0; index < numbers.length; index++) {
  3.   console.log(numbers[index]); // 1 2 3 4
  4. }

forEach

forEach() 将数组的每个元素传入回调函数,且对空数组不会执行回调函数。

 
 
  1. const numbers = [1, 2, 3, 4];
  2. numbers.forEach((number, index, numbers) => {
  3.   console.log(`下标 ${index} 在数组 ${numbers} 中的值是 ${number}`);
  4. });
  5. /*
  6.  * 下标 0 在数组 1,2,3,4 中的值是 1
  7.  * 下标 1 在数组 1,2,3,4 中的值是 2
  8.  * 下标 2 在数组 1,2,3,4 中的值是 3
  9.  * 下标 3 在数组 1,2,3,4 中的值是 4
  10. */

while

while 也可以遍历数组,但很少用。

 
 
  1. let index = 0;
  2. const numbers = [1,2,3,4];
  3. while(index < numbers.length) {
  4.   console.log(numbers[index]);
  5.   index ++;
  6. }
  7. // 1 2 3 4

分享文章:简单实用,JavaScript的8个数组遍历方法
标题网址:http://www.shufengxianlan.com/qtweb/news24/144374.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联