js05_数组方法之遍历方法

前言：数组方法过多，在03中已有小总结，但不完善且较冗余，特此单开方便查询学习。

遍历数组并不会改变原始数组的方法（12个）：

ES5：
1.forEach() 2.map()  3.filter()
// forEach没有返回值，map | filter都返回新数组。
// filter是满足条件的留下，是对原数组的过滤；（true留下，false走开）
// map则是对原数组的加工，一一映射成新的数组；

//forEach适合于不打算改变数据、遍历item。
//map适用于要改变数据值的时候。更快，且返回一个新的数组
// - 这样可以使用链式(结合filter()、reduce()等使用) 
// - 性能上来说 for>forEach>map
4.every()   5.some()
6.reduce()  7.reduceRight()

ES6：
8.find()   9.findIndex() 
10.keys()  11.values()   12.entries()

---

1. forEach() - 遍历 + 每项执行回调函数

定义： 按升序为数组中含有效值的每一项执行一次回调函数。

语法：arr.forEach(function(item, index, arr), thisValue)

参数：

• function(必须)：数组中每个元素需要调用的函数。
  1. item(必须)，数组当前元素的值
  2. index(可选)，当前元素的索引值
  3. arr(可选)，数组对象本身
• thisValue(可选)：当执行回调函数时this绑定对象的值，默认值为undefined，匿名函数中的this指向window

返回值：

• forEach()总是返回 undefined值，即使你return了一个值。

PS：

• 无法中途退出循环，只能用return退出本次回调，进行下一次回调。

下面类似语法同样适用这些规则：

1. 对于空数组是不会执行回调函数的
2. 对于已在迭代过程中删除的元素，或者空元素会跳过回调函数
3. 遍历次数在第一次循环前就会确定，再添加到数组中的元素不会被遍历
4. 如果已经存在的值被改变，则传递给 callback 的值是遍历到它们那一刻的值

var arr = ['a','b','c']
var newArr= []
arr.forEach(function(item, index, arr){
     newArr.push(item)
})
console.log(newArr)

---

2. map() - 用函数修改每条数据 + 返回新数组

定义： 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

语法： arr.map(function(item, index, arr), thisValue)

参数：

• function(必须)：数组中每个元素需要调用的函数。
  1. item(必须)，数组当前元素的值
  2. index(可选)，当前元素的索引值
  3. arr(可选)，数组对象本身
• thisValue(可选)：当执行回调函数时this绑定对象的值，默认值为undefined

返回值：

• 根据需求格式化原数组，返回格式化后的数组。原数组不变

var a = [1,2,3,4,5]
// 参数同filter方法
var b = a.map(function(item,index,array){
    return item + 1
})
 
console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]

---

3. filter() - 过滤数据 + 返回新数组

定义： 返回一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法： arr = arr.filter(function(item, index, arr), thisValue)

参数：

• function(必须)：数组中每个元素需要调用的函数。
  1. item(必须)，数组当前元素的值
  2. index(可选)，当前元素的索引值
  3. arr(可选)，数组对象本身
• thisValue(可选)：当执行回调函数时this绑定对象的值，默认值为undefined

返回值：

• 返回数组中满足条件的元素组成的新数组，原数组不变

var a = [1,2,3,4,11]
// 第一个参数为一个方法，有三个参数，item:当前值 index:当前值下标 array:这个数组对象
var b = a.filter(function(item,index,array){
    return current < 10
})
 
console.log(b) // [1,2,3,4]
console.log(a) // [1,2,3,4,11]

---

4.5. every() && some() - 遍历 + 检测每项

定义： 方法用于检测数组所有元素是否都符合函数定义的条件

语法：arr.every|some (function(item, index, arr), thisValue)

参数：

• function(必须)：数组中每个元素需要调用的函数。
  1. item(必须)，数组当前元素的值
  2. index(可选)，当前元素的索引值
  3. arr(可选)，数组对象本身
• thisValue(可选)：当执行回调函数时this绑定对象的值，默认值为undefined

every方法返回值：

• 如果检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

some方法返回值：

• 如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

//every()
var a = [1,2,3,4,5]
var b = a.every(function(item,index,array){
       return item< 6
})
var c = a.every(function(item,index,array){
       return item< 3
})
console.log(b)  // true 
console.log(c)  // false 

//some()
function isBigEnough(item, index, array) {
 return (item >= 10); //数组中是否有一个元素大于 10
}
let result = [2, 5, 8, 1, 4].some(isBigEnough); // false
let result = [12, 5, 8, 1, 4].some(isBigEnough); // true

---

6. 7. reduce() reduceRight() - 累加/累乘

定义： reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 可以作为一个高阶函数，用于函数的 compose。

语法： arr.reduce(function(perviousValue,currentValue,currentIndex,arr),initialValue)

参数：

• function(必须)：数组中每个元素需要调用的函数
  1. perviousValue(必须)：初始值，上一次的计算结果的返回值
  2. currentValue(必须)：当前元素,若指定了初始值，则起始索引为 0，否则为 1
  3. currentIndex(可选)：当前元素的索引。若指定了初始值，则起始索引为 0，否则为 1
  4. arr(可选)：被遍历的对象数组
• initialValue(可选)：此参数作为第一次调用函数时参数 previousValue 的值，

若指定了初始值initialValue，则currentValue取数组第一个元素；
若未指定初始值，则perviousValue取数组的第一个元素，currentValue取数组第二个元素

返回值

• reduce里面必须要return，return出去累加/累乘等等的值

PS： reduce() 对于空数组不会执行回调函数。

// 当没有设置初始值
let arr = [1,3,4,6,7]
let sum = arr.reduce((perviousValue,current,index)=>{
   console.log(index, current, total);
   return perviousValue + current
})
console.log(sum, '求和')

实例：

// 累加和累乘
let arr3 = [1,3,4,6,7];
let sum3 = arr3.reduce((pre,cur)=> pre+cur)
let multiply = arr3.reduce((pre,cur) => pre*cur)
console.log(sum3) // 21
console.log(multiply) // 504

//数组去重
let arr4 = [1,3,2,5,3,1,2,7,8];
let newArr = arr4.reduce((pre,cur)=>{
  if(!pre.includes(cur)){
    return pre.concat(cur)
  } else {
    return pre
  }
},[]);
console.log(newArr, '数组去重') // [1, 3, 2, 5, 7, 8] , 数组去重

---

8.9. ES6 - find() & findIndex() - 查找符合条件的成员 + 返回元素或index

find()定义： 用于找出第一个符合条件的数组成员，并返回该成员，如果没有符合条件的成员，则返回undefined。

findIndex()定义： 返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

语法：arr.find|findIndex(function(item, index, arr), thisValue)

参数：

• function(必须)：数组中每个元素需要调用的函数。
  1. item(必须)，数组当前元素的值
  2. index(可选)，当前元素的索引值
  3. arr(可选)，数组对象本身
• thisValue(可选)：当执行回调函数时this绑定对象的值，默认值为undefined

返回值：

• find 返回第一个符合条件的数组成员，没有返回undefined
• findIndex 返回第一个符合条件的数组成员的index，没有返回-1

这两个方法都可以识别NaN，弥补了indexOf的不足

// find
let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素-5
let b = [1, 4, -5, 10, NaN].find((n) => Object.is(NaN, n)); // 返回元素NaN

// findIndex
let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2
let b = [1, 4, -5, 10, NaN].findIndex((n) => Object.is(NaN, n)); // 返回索引4

// find
var a = [1,2,3,4]
// b在下面需要使用，则一般用find
var b = a.find(function(ele,index,array){
    return ele == 1
})
 
var c = 3
var d = b + c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4
 
// 若只需判断元素是否存在
// 若果是简单数组(非对象数组)，则一般使用Array.includes(value)方法
// 如果为对象数组，则可以使用Array.some()方法
 
var a = [1,2,3]
console.log(a.includes(1))  // true
 
var a = [{"name": "xiaoming" },{"name": "xiaohong"}]
console.log(a.some(function(ele){
    return ele.name == 'xiaoming'
}))                            // true

// findIndex
var a = [1,2,3,4]
var b = a.findIndex(function(ele,index,array){
    return ele === 2
})
var c = a.indexOf(2)  
 
console.log(a)  // [1,2,3,4]
console.log(b)  // 1
console.log(c)  // 1

---

ES6 - 10.11.12 keys() & values() & entries()

遍历键名、遍历键值、遍历键名+键值

定义： 三个方法都返回一个新的 Array Iterator 对象，对象根据方法不同包含不同的值。

语法：
arr.keys()
arr.values()
arr.entries()

参数： 无

遍历例子(摘自ECMAScript 6 入门)：

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"

在for…of中如果遍历中途要退出，可以使用break退出循环。

如果不使用for…of循环，可以手动调用遍历器对象的next方法，进行遍历:

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

entries()浏览器兼容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 7.1

keys()浏览器兼容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 8

---

PS. isArray() - ES6

用来判断一个元素是否为数组

Array.isArray([])  // true
Array.isArray({})  // false

---

附上原博客地址：
js 常用数组操作方法总结
js 数组详细操作方法及解析合集