学习笔记 JavaScript ES6 数组的各种遍历

• ES5中的数组遍历
  • for和forEach
  • map
  • filter
  • some（返回布尔值，有一个符合返回true）
  • every（返回布尔值，全部符合返回true）
  • reduce（累加、求最大、去重）
  • for in (谨慎，可以循环但并不合适数组)
• ES6中的数组遍历
  • find（返回通过测试的第一个元素）
  • findIndex
  • for of
    • values()
    • keys()
    • entries()

先来复习下ES5中的数组遍历

• for forEach

// for
let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// forEach
// 第一个参数：正在遍历的对象
// 第二个参数：当前索引
// 第三个参数：数组本身
arr.forEach(function(elem,index,array) {
    console.log(elem,index,array)
})

-----------------------
1 0 (3) [1, 2, 3]
2 1 (3) [1, 2, 3]
3 2 (3) [1, 2, 3]

普通的for循环和forEach间的差别：

forEach循环中不可以使用break continue关键字，也就是说，循环开始后就无法停止

• 数组的map循环

let newarr = arr.map(function(value) {
    // /console.log(value);
    return value+1;
})

console.log(arr,newarr)

--------------------
[1,2,3] [2,3,4]

map和forEach的区别：

forEach只是简单的循环，map循环会遍历数据里的每一个元素，将返回值生成新的一个数组

• 数组的filter循环

let arr = [1, 2, 3];
let newarr  = arr.filter(function(value) {
    return value == 2 // 过滤条件
})

console.log(arr,newarr)

---------------------------------
[1,2,3] [2] // [2]就是过滤后的新数组

与map的区别是：

首先同样会生成新的数组，但是filter会根据return xx=xx设置过滤条件，将过滤后结果装入新的数组

• 数组的some循环

let arr = [1, 2, 3];
let newarr  = arr.some(function(value) {
    return value == 2 // 过滤条件
})
console.log(arr,newarr)

----------------------
[1,2,3] true

some，只要有一个符合条件的就会返回true，与之对应的还有every循环，every必须全部符合条件才会返回true，否则返回false，看下面的代码

• 数组的every循环

let arr = [1, 2, 3];
let newarr  = arr.every(function(value) {
    return value == 2 // 过滤条件
})
console.log(arr,newarr)

----------------------
[1,2,3] false

• 数组的reduce（接收一个函数作为累加器）
• 数组的reduce场景一，计算数组中元素的和

let arr = [1, 2, 3];

// reduce有两个参数，第一个是方法，第二个是初始值（比如求1，2，3的和，初始值设置为0）
// function中的参数有4个
// 第一个prev表示上一次调用回调时候的返回值，如果是第一次调用对应的是reduce的初始值
// 第二个cur表示当前在处理的数组元素
// 第三个index表示当前索引
// 第四个arrar表示原数组
let sum = arr.reduce(function (prev, cur, index, array) {
  return prev + cur;
}, 0);

console.log(sum);

--------------------
6

• 数组的reduce场景二，求数组中值最大的元素

let arr = [1, 2, 3];

// 参数用不上那么多可以不写
let max = arr.reduce(function (prev, cur) {
  return Math.max(prev, cur);
});

console.log(max);

--------------
3

• 数组的reduce场景三，数组去重复

let arr = [1, 2, 3, 2, 3, 4];
let newarr = arr.reduce(function (prev, cur) {
  prev.indexOf(cur) == -1 && prev.push(cur);
  return prev;
}, []);

console.log(newarr);

----------------------
[1,2,3,4]

• 数组的for in

从输出的结果看到for in不仅把数组元素输出了，还把原型下的自定义方法也输出了

Array.prototype.foo = function () {
  console.log("foo");
};

let arr = [1, 2, 3];
for (let index in arr) {
  console.log(index, arr[index]);
}

---------------------------
0 1
1 2
2 3
foo ƒ () {
  console.log("foo");
}

下面是ES6中的数组遍历

• 数组的find

// 查找内容存在 
let arr = [1, 2, 3, 4, 5];
let res = arr.find(function (value) {
  return value == 2;
});

console.log(arr, res);

-----------------------------------
[1, 2, 3, 4, 5] 2 // 返回的是第一个2


// 查找内容不存在
let arr = [1, 2, 3, 4, 5];
let res = arr.find(function (value) {
  return value == 8;
});

console.log(arr, res);

-------------------------------------------------
[1, 2, 3, 4, 5] undefined // 未找到，返回undefined

• 数组的findIndex

let arr = [1, 2, 3, 4, 5];
let res = arr.findIndex(function (value) {
  return value == 3;
});

console.log(arr, res);
--------------------
[1, 2, 3, 4, 5] 2 // 返回第一次出现value == 3元素的下标

• 数组的for of

let arr = [1, 2, 3, 4, 5];
for (item of arr) {
  console.log(item);
}

for (item of arr.values()) {
  console.log(item);
}

// 由此可见，item of arr和item of arr.values()的作用是一样的，都可以循环输出数组的内容
---------------------------------------------------------------------------------
1
2
3
4
5

1
2
3
4
5

使用keys()可以输出数组的下标

for (item of arr.keys()) {
  console.log(item);
}

---------------
0
1
2
3
4

如果既想输入值也想输出下标，要这样写

let arr = [1, 2, 3, 4, 5];
for (let [index,item] of arr.entries()) {
  console.log(index,item);
}

-------------
0 1
1 2
2 3
3 4
4 5