js数组遍历总结

oujie 发布于2019-08-23 12:20 / 3246人阅读

摘要：中的数组遍历是项目中经常用到的，在这里将几种方法做个对比。第一个参数为数组元素必选，第二个参数为数组元素索引值可选，第三个参数为数组本身可选循环中传入要执行的回调函数，函数有三个参数。用于遍历数组元素使用，，，用于循环对象属性使用

js中的数组遍历是项目中经常用到的，在这里将几种方法做个对比。

for循环：使用评率最高，也是最基本的一种遍历方式。

let arr = ["a","b","c","d","e"];
for (let i = 0, len = arr.length; i < len; i++) {
    console.log(i);       //  0 1 2 3 4
    console.log(arr[i]);  //a b c d e
}

forEach()循环：forEach中传入要执行的回调函数，函数有三个参数。第一个参数为数组元素(必选)，第二个参数为数组元素索引值(可选)，第三个参数为数组本身(可选)

let arr = ["a","b","c","d","e"];
arr.forEach((item,index,arr)=> {
    console.log(item);   // a b c d e 
    console.log(index);  // 0 1 2 3 4
    console.log(arr);    // ["a","b","c","d","e"]
})

map循环： map()中传入要执行的回调函数，函数有三个参数。第一个参数为数组元素(必选)，第二个参数为数组元素索引值(可选)，第三个参数为数组本身(可选)

var arr = [
    {name:"a",age:"18"},
    {name:"b",age:"19"},
    {name:"c",age:"20"}
];
arr.map(function(item,index) {
    if(item.name == "b") {
        console.log(index)  // 1
    }
})

for...in循环：for...in循环可用于循环对象和数组,推荐用于循环对象,可以用来遍历json

let obj = {
    name: "王大锤",
    age: "18",
    weight: "70kg"
}
for(var key in obj) {
    console.log(key);       //  name age weight
    console.log(obj[key]);  //  王大锤 18 70kg
}
let arr = ["a","b","c","d","e"];
for(var key in arr) {
    console.log(key);  //  0 1 2 3 4 返回数组索引
    console.log(arr[key]) //  a b c d e
}

for...of循环：可循环数组和对象，推荐用于遍历数组。

for...of提供了三个新方法：

key()是对键名的遍历；

value()是对键值的遍历；

entries()是对键值对的遍历；

let arr = ["科大讯飞", "政法BG", "前端开发"];
for (let item of arr) {  
  console.log(item); //  科大讯飞  政法BG  前端开发
}
// 输出数组索引
for (let item of arr.keys()) {  
  console.log(item);  // 0 1 2
}
// 输出内容和索引
for (let [item, val] of arr.entries()) {  
  console.log(item + ":" + val); //  0:科大讯飞  1：政法BG  2：前端开发
}

总结：forEach、map、filter、reduce、every、some 都会有 break 和 continue 不生效的问题，因为是在function中，但function解决了闭包陷阱的问题；要使用 break、continue 可以使用 for、for...in、for...of、while。用于遍历数组元素使用：for()，forEach()，map()，for...of 用于循环对象属性使用：for...in

超融合服务器云服务器 js 遍历数组查找 js遍历标签数组长度 js数组遍历foreach js数组遍历添加元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98332.html

JS 数组常用API方法和遍历方法总结

摘要：数组语法功能遍历数组，返回回调返回值组成的新数组，不改变原数组，不会对空数组进行检测语法功能无法，可以用中来停止，不改变原数组语法功能过滤，返回过滤后的数组，不改变原数组，不会对空数组进行检测语法功能有一项返回，则整体为，不改变原数组语法数组 (array) ES5 * map 语法：[].map(function(item, index, array) {return xxx})功...

TNFE 2019-08-23 16:51 评论0 收藏0
js数组去重方法总结

摘要：注方法可以返回某个指定字符串在字符串中首次出现的位置比如首次出现的位置是数组中的第一个，即下标为遍历数组使用标识符去重声明一个变量标识排序后遍历过滤数组思路先给数组排序，这样相同的项总是相邻。假设我们有数组arr，并且声明新数组hash用来存放去重后的元素： var arr = [23,44,5,2,23,5,1,7,8,7]; //包含重复元素 var hash= [];...

snowLu 2019-08-23 14:55 评论0 收藏0
js数组去重方法总结

摘要：注方法可以返回某个指定字符串在字符串中首次出现的位置比如首次出现的位置是数组中的第一个，即下标为遍历数组使用标识符去重声明一个变量标识排序后遍历过滤数组思路先给数组排序，这样相同的项总是相邻。假设我们有数组arr，并且声明新数组hash用来存放去重后的元素： var arr = [23,44,5,2,23,5,1,7,8,7]; //包含重复元素 var hash= [];...

moven_j 2019-08-05 16:05 评论0 收藏0
数组的使用总结— (js基础复习第2期)

摘要：前一个值，当前值，索引，数组对象产生新数组的迭代器方法类似，对数组的每个元素使用某个函数，并返回新数组和相似，传入一个返回值为布尔类型的函数。 1. 前言数组真的是每天用了，但是有很多方法都是记不住，总是要百度查，很烦，所以才写了个数组使用总结，有什么不对的希望大家指出来。 2. 思路先看看这些问题都记得很清楚么？创建数组，怎么创建数组的数组的构造方法Array有哪些方法？E...

zhigoo 2019-08-23 13:10 评论0 收藏0
jS:关于对象遍历和数组遍历的那些事

摘要：如图遍历数组遍历数组元素并以某种方式处理每个元素是一个常见的操作。如图不过，里的功能比较强大，可以遍历而且返回值是的则被省略掉总结遍历对象，遍历出来的是键名，而不是键值，参数必须是对象。可能是由于职业的关系，下班之后完全不想Open PC，但很多知识点有必要自己做个小小总结。本人之前对原生Array和Object完全没概念。遍历对象的方法： Object.keys(Object)...

qingshanli1988 2019-08-20 18:16 评论0 收藏0