js 数组遍历小结

1、for循环
使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。

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

2、foreach遍历
遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE

const arr=[1,2,3,4,5,6];
arr.forEach((item, index, arr) => {
    console.log(item);
});
//参数：value数组中的当前项, index当前项的索引, array原始数组；
//数组中有几项，那么传递进去的匿名回调函数就需要执行几次；

3、map循环
有返回值，可以return出来
map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；

const arr=[1,2,3,4,5,6];
let tmp = arr.map((item, index, arr)=>{
    //console.log(item);
    return item+6;
});
console.log(tmp);   //Array [7,8,9,10,11,12]

4、for ... of 遍历
可以正确响应break、continue和return语句

const arr=[1,2,3,4,5,6];
for (var value of arr) {
console.log(value);
}

5、filter 遍历
不会改变原始数组,返回新数组

var arr = [
  { id: 1, text: 'aa', done: true },
  { id: 2, text: 'bb', done: false }
]
console.log(arr.filter(item =>  item.done));
//或
console.log(arr.filter(function (item) {
          return item.done;
 }));

6、every遍历
every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。

const arr=[1,2,3,4,5,6];
let res = arr.every((item, index, array) => {
    return item > 3;
});
console.log(res);   //false

7、some遍历
some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。

const arr=[1,2,3,4,5,6];
let res = arr.every((item, index, array) => {
    return item > 3;
});
console.log(res);   //true

8、reduce遍历
reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。

const arr=[1,2,3,4,5,6];
let res = arr.reduce((a, b) => {
    return a+b;
});
console.log(res);

9、find遍历
find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined

//es6
const arr=[1,2,3,4,5,6];
let res = arr.find((item, index) => {
    return item ==3;
});
console.log(res);  //3

//es5
var stu = [
    {name: '张三', gender: '男',age: 20},
    {name: '王小毛', gender: '男',age: 20},
    {name: '李四',gender: '男',age: 20 }
];
function getStu(element){
   return element.name == '李四'
}
console.log(stu.find(getStu));

10、findIndex 遍历
对于数组中的每个元素，findIndex 方法都会调用一次回调函数（采用升序索引顺序），直到有元素返回 true。只要有一个元素返回 true，findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true，则 findIndex 返回 -1。
findIndex 不会改变数组对象。

const arr=[1,2,3,4,5,6];
let res = arr.findIndex(el => el==4);
console.log(res);  //3

let res = [1,2,3].findIndex(x => x == 4);
console.log(res);   // -1

11、keys，values，entries 遍历
ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

for (let index of ['a', 'b'].keys()) {
   console.log(index);
} 
// 0 1

for (let elem of ['a', 'b'].values()) {
console.log(elem);
}   
// a b

for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
//0 "a"
//1 "b"

猜你喜欢