Javascript遍历数组的方法

最新推荐文章于 2024-05-11 11:32:11 发布
最新推荐文章于 2024-05-11 11:32:11 发布
阅读量328 收藏 2
点赞数
分类专栏： Javascript踩过的坑 文章标签： js javascript 前端
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/a5252145/article/details/108193224
版权

Javascript遍历数组的方法

普通for循环：

const arr = [1, 2, 3, 4, 5, 6];

// for 循环
for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

在ES5中新增了很多方便操作数组的方法，包括新5种数组的迭代方法：forEach、map、filter、some、every；
计算方法：reduce()；
检测数组方法Array.isArray()；
针对对象设计的：for..in；
在ES6中又增加了for..of以及values、entres、keys、find()、findIndex()等 。
这些方法让操作数组更加优雅，趋近于函数式编程.。

1. ES5

ES5 Array5种迭代方法
ES5定义了5个迭代方法，IE9+支持。

  1. 检测数组里的元素是否满足条件；every()、some() 返回Boolean值。
    不会对空数组进行检测；不会改变原始数组。
    every() 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测；如果所有元素都满足条件，则返回 true。
    some() 对数组的每一项运行给定函数, 如果函数对数组的任一项返回的true，return true

  2. 只做遍历，不返回任何值
    forEach()：不可以用break、continue 对数组的每一项运行给定函数, 不返回任何值，只做函数操作 类似于 for () { do something }
    返回数组
    filter()：对数组的每一项运行给定函数, 返回该函数会返回true的项组成的数组
    map()：对数组的每一项运行给定函数, 返回每次函数调用结果组成的数组

    // every  一非则非
arr.every(function(currentValue,index,arr) {
//     // console.log(currentValue);  // 1  当前元素的值
//     // console.log(index);  // 0  当前元素的索引值
//     // console.log(arr); // [1, 2, 3, 4, 5, 6]  当前元素属于的数组对象

//     console.log(currentValue < 0);   // false
//     console.log(currentValue > 0);   // true
})

     // some  一真则真
 // 1
 arr.some(function(currentValue,index,arr) {
 //     // console.log(currentValue);  // 1  当前元素的值
 //     // console.log(index);  // 0  当前元素的索引值
 //     // console.log(arr); // [1, 2, 3, 4, 5, 6]  当前元素属于的数组对象
 //
 //     // console.log(currentValue === 2);   // false true false false false false
 //     console.log(currentValue > 0);   // true true true true true true
 })
 // 2  阻止执行
 // console.log(arr.some(item =>  item === 2))  // true
 // let res = arr.some(function(currentValue,index,arr) {
 //     console.log(index);   // 0 1
 //     return currentValue === 2;  // 阻止执行
 // })
 // console.log(res);  // true

    // forEach
// arr.forEach(function (item) {
//     // console.log(item);
//     // break;
//     // continue
// })

    // filter
// console.log(arr.filter(item => item < 4));  // [1, 2, 3]

    // map
// console.log(arr.map((item, index) => ({index: item + 9})))  // [{0: 10}, {1: 11}, {2: 12}, {3: 13}, {4: 14}, {5: 15}]
ES5中 for...in遍历以及 every()和for...in对终止语句break、continue的处理

MDN提示： for...in不应该用于迭代一个 Array，其中索引顺序很重要。
处理有key-value数据（比如属性用作“键”），需要检查其中的任何键是否为某值的情况时，推荐用for … in。

const arr = [1, 2, 3, 4, 5, 6];
// for
for (let i = 0; i < arr.length; i++) {
    if (arr[i] === 2) {
        // break;
        // continue;
    }
    // console.log(arr[i]);  // 1  - break      1,3,4,5,6  - continue
}

// every  不可以用break、continue 但可以达到效果
arr.every(function (item) {
    // 1
    // console.log(item);   // 1  true,停止遍历


    // 2
    // if (item === 4) {
    //     // break;    //  无效
    //     // continue;  // 无效
    // }

    // 3
    // if (item === 4) {
    //     return true;
    // } else {
    //     console.log(item);
    //     return true;
    // }
    //
    // //   =>  简化
    // if (item === 4) {
    //
    // } else {
    //     console.log(item);
    // }
    // return true;   // 12356

    // 4
    // if (item === 4) {
    //     console.log(item)
    // }
    // return true;  // 4
})

// for...in
for (let index in arr) {
    // 1
    // console.log(index, arr[index]);   // 0 1, 1 2, 2 3, 3 4, 4 5, 5 6

    // 2  瑕疵： arr.a = 8;  for...in为对象设计的
    // arr.a = 8;
    // console.log(index, arr[index]);   // 0 1, 1 2, 2 3, 3 4, 4 5, 5 6, a 8

    // 3   break: 支持
    // if (index === 2) {
    //     break;
    // }
    // console.log(index, arr[index]);  // 0 1, 1 2, 2 3, 3 4, 4 5, 5 6
    //
    //
    // if (index === '2') {
    //     break;
    // }
    // console.log(index, arr[index]);  // 0 1, 1 2, 2 3

    // 4   continue: 支持
    // if (index === 2) {
    //     continue;
    // }
    // console.log(index, arr[index]);  // 0 1, 1 2, 2 3, 3 4, 4 5, 5 6
    //
    //
    // if (index === '2') {
    //     continue;
    // }
    // console.log(index, arr[index]);  // 0 1, 1 2, 3 4, 4 5, 5 6
}

2. ES6

for...of遍历
// for...of
// for (let item of arr) {
//     // 1
//     // console.log(item);  // 123456
// }
//
// // for...in和for...of差异：eg
// 1
// arr.push(7);
// for(let item of arr) {
//     // console.log(item); // 1 2 3 4 5 6
// }
// for(let key in arr) {
//     console.log(arr[key]); // 1 2 3 4 5 6 7
// }
const Price = {
    A: [1.5, 2.99 ,4.5],
    B: [99, 199 ,399],
    C: [10, 14 ,6]
}
// Object.prototype.D = '97';
for(let key in Price) {
    // console.log(key, Price[key]); // A: [1.5, 2.99 ,4.5], B: [99, 199 ,399], C: [10, 14 ,6]
}
// 若不想出现这种情况
for(let key in Price) {
    if(!Object.prototype.hasOwnProperty.call(Price, key)) continue;
    // console.log(Price[key]); //  [1.5, 2.99, 4.5]  [99, 199 ,399]  [10, 14 ,6]
}
keys()：对键名(数组下标)的遍历
for (let i of arr.keys()) {
    // console.log(i);  // 0 1 2 3 4 5
}
values()：对键值的遍历
for (let i of arr.values()) {
    // console.log(i);  // 1 2 3 4 5 6
}
entries()：对键值对的遍历
for (let i of arr.keys()) {
// for (let i of arr.entries()) {
//     console.log(i);  // [0, 1] [1, 2] [2, 3] [3, 4] [4, 5] [5, 6]
// }
// for (let [index, elem] of arr.entries()) {
//     console.log(index, elem);  // 0 1 1 2 2 3 3 4 4 5 5 6
// }
find()：返回数组中满足提供的测试函数的第一个元素的值
console.log(arr.find((value, index, arr) => value > 4));  // 5
findIndex()：返回数组中满足提供的测试函数的第一个元素的索引 若没有找到对应元素则返回-1
console.log(arr.findIndex((value, index, arr) => value > 4));  // 4

3. 遍历数组时对空格的处理

ES5中：
forEach()、filter()、reduce()、every()和some()都会跳过空位。
map()会跳过空位，但会保留这个值
join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串

// forEach方法
// [,'a'].forEach((x,i) => console.log(i)); // 1

// filter方法
// console.log(['a',,'b'].filter(x => true)); // ['a','b']

// every方法
// console.log([,'a'].every(x => x==='a')); // true

// reduce方法  求和，求乘积  计算数组中每个元素出现的次数  https://www.jianshu.com/p/e375ba1cfc47
// console.log([1,,2].reduce((x,y) => x+y)); // 3

// some方法
// console.log([,'a'].some(x => x !== 'a'));  // false

// map方法
// console.log([,'a'].map(x => 1)); // [empty, 1]

// join方法
// console.log([,'a',undefined,null].join('#')); // "#a##"

// toString方法
// console.log([,'a',undefined,null].toString()); // ",a,,"

ES6中：
明确将空位转为undefined。

//entries()
// console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]
// const object1 = {
//     a: 'somestring',
//     b: 42
// };
// for (const [key, value] of Object.entries(object1)) {
//     console.log(`${key}: ${value}`);  // a: somestring  b: 42
// }

// keys()
// console.log([...[,'a'].keys()]); // [0,1]

// values()
// console.log([...[,'a'].values()]); // [undefined, "a"]

// find() 
// console.log([,'a'].find(x => true)); // undefined

// findIndex()  
// console.log([,'a'].findIndex(x => true)); // 0
小城听风雨
关注
专栏目录
JavaScript遍历数组的方法代码实例
10-15
本篇文章将详细介绍JavaScript中几种遍历数组的方法，并通过代码实例进行演示。 1. **for循环**：这是最基础的遍历数组的方式，通过索引来访问数组的每个元素。 ```javascript let arr = ["A", "B", "C", "D", "E...
JavaScript 数组定义方式 与方法
weixin_44026098的博客
09-22 313
第一种方法 // 字面量 var arr = [] ; 第二种方法 var arr = new Array() ; Array.prototype 数值的读和写
JS遍历数组的十五种方法
材女的进击
05-25 2万+
这个遍历器生成函数大致的模样可以用ES5 语法模拟出来：这个函数返回一个next() 方法，每调用next() 方法，都会返回数据结构的当前成员的信息。每个数据结构都有一个默认的遍历器，例如数组的默认遍历器是values()，在没有明确指定遍历器的情况下，这些数据结构都会使用默认的遍历器。map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，并没有改变原来的数组。forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，没有返回值，原数组不变。
Javascript常见遍历数组的方法
警警的博客
04-08 313
Javascript常见遍历数组的方法
JS中的apply，call
七十多岁的人了、
10-04 229
一句代码（[].slice.apply(obj)）引起了一篇博客。 在JavaScript中，call和apply作用是一样的，都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部this的指向。 function test(){ console.log(this); } let obj = { name:"Ghui", age:24, } 这里先定义了一个方法和一个对象。我们直接运行方法时，结果是这样的：
JS遍历数组的12种方法
iteval
07-15 7334
JS遍历数组的12种方法 const arr = [1, 2, 3]; 1. for 普通版 for (let i = 0; i < arr.lengthl; i++) { // ... } 优化版 // 使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。 let len = arr.length; for (let i = 0; i < len; i++) { // ... } for 循环和 for…in 能正确响应 break、c
JavaScript遍历数组的三种方法map、forEach与filter实例详解
10-17
主要介绍了JavaScript遍历数组的三种方法map、forEach与filter,结合实例形式详细分析了javascript针对数组遍历的map、forEach与filter三种方法相关操作技巧与注意事项,需要的朋友可以参考下
JavaScript遍历数组和对象的元素简单操作示例
12-01
本文实例讲述了JavaScript遍历数组和对象的元素。分享给大家供大家参考，具体如下： 博主最近一直在学习JavaScript，今天给大家分享如何遍历JavaScript中的数组和对象的元素，这篇文章相当于做一篇小的笔记，希望能...
js中数组的遍历的几种方法
热门推荐
1000001000
02-21 9万+
javascript中数组的几种遍历方法
JS遍历数组的十种方法总结
最新发布
大圣归来圣骑士清欢的博客
05-11 1989
JS遍历数组的十种方法
elasticsearch使用script进行聚合，统计数组类型字段
西凉的悲伤博客
03-13 7649
最近在使用elasticsearch进行聚合时遇到一个问题，有一个字段是数组类型，该字段存储的是客户订阅的产品id，要聚合统计每个客户订阅了几个产品，比如统计订阅了2到3个的。 这个时候就要知道每个客户该字段数组的长度，但是elasticsearch聚合文档里没有相关操作，查阅资料后发现要用script来处理。 DSL语句如下： GET customer/_search { "query":...
Elasticsearch 5.6.3 通过script添加、删除数组元素
lengchanguo的专栏
12-06 1万+
环境：Elasticsearch 5.6.3 需求描述：对ES文档中一个数组字段tags添加或者删除元素“3”，esIP代表Elasticsearch的IP，docid代表文档ID 方法： 1、添加数组元素 curl -XPOST 'http://esIP:9200/in_news/document/docid/_update' -d ' {"script":{"in
JavaScriptES5常用的数组遍历
m0_61848095的博客
08-23 371
forEach遍历数组，里面包含了一个匿名函数，匿名函数里面有三个参数，第一个参数为item为元素的值，第二个为index，元素的索引号，第三个为arr，原数组，我们只需要根据自己所需要的去写即可。every也是查找符合条件的数组，不过every的要求是数组中全部满足条件就返回true，只要有一个不满足就返回false。map，与forEach相似，都是遍历数组，不过map可以对数组里的每一项进行操作，并且返回一个新的数组。filter是一个过滤，相当于根据你设置的条件来过滤数组。
js数组遍历的十种方法
HRD的博客
06-13 2万+
对数组中每个元素执行一次ok函数，知道某个元素返回true，则直接返回true。如果都返回false,则返回false检查整个数组中是否有满足元素。 private some(id: number) { const arr = [ { cityId: 195, cityName: '深圳'}, { cityId: 196, cityName: '北京'}, { cityId: 198, cityName: '上海'} ]
【Elasticsearch】使用 Elasticsearch Painless 脚本以递归方式遍历 JSON 字段
九师兄
06-16 1254
Painless 是一种简单、安全的脚本语言，专为与 Elasticsearch 一起使用而设计。它是 Elasticsearch 的默认脚本语言，可以安全地用于内联和存储脚本。在众多用例之一中，Painless 可以在文档被摄取到您的 Elasticsearch 集群时对其进行修改。在这个用例中，您可能会发现您想使用 Painless 来评估 Elasticsearch 接收到的每个文档中的每个字段。但是，由于 JSON 文档的分层性质，如何迭代所有字段可能并不明显。
JS中循环遍历数组的几种常用方式总结
铁锤妹妹的博客
04-15 6万+
第一种：for循环，也是最常见的 const arr = [11, 22, 33, 44, 55, 66, 77, 88]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 打印结果： 第二种：forEach（） 1.）forEach() 遍历普通数组 const arr = [11, 22, 33, 44, 55, 66, 77, 88]; arr.forEach(item => {
再学JavaScript ES(6-10)全版本语法大全（3）- 数组的遍历
一角残叶的博客
11-14 332
1 数组遍历 1.2 ES5 数组遍历 方法1 const arr = [1, 2, 3, 4, 5, 6] for (let i = 0; i < arr.length; i++){ console.log(arr[i]) } 方法2 const arr = [1, 2, 3, 4, 5, 6] arr.forEach(function (item) { console.log(item) }) for 和 foreach的区别 for (let i = 0; i &
js循环对象，（多层数组）
weixin_30482181的博客
08-06 3437
javaScript遍历对象、数组总结 在日常工作过程中，我们对于javaScript遍历对象、数组的操作是十分的频繁的，今天抽空把经常用到的方法小结一下，方便今后参考使用！ javaScript遍历对象总结 1、使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性). ...
重温 JavaScript 之 ES5数组遍历的方法
SongGLing的博客
06-27 551
重温 JavaScript 之 ES5数组遍历的方法
javascript遍历数组
08-20
在JavaScript中，有多种方法可以遍历数组。下面是其中一些常用的方法： 1. 使用for循环：可以使用for循环来遍历数组，通过获取数组的长度以及数组的索引来访问数组元素。例如： ```javascript let arr = [1, 2, 3, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值