javascript数组 forEach,filter,some,every,map,find,reduce的用法与区别

forEach等同于for循环

循环遍历数组中的每个元素，并将元素传递给回调方法。

javascript 复制代码

let arr = [1,2,3,4,5]

let a = arr.forEach((val,index)=>{
    arr[index] +=1
    return index
})
console.log(a)   //undefined
console.log(arr)  // [2, 3, 4, 5, 6]

map

主要功能是可以将一个数组中的元素转换为另外一种数据格式，并返回一个新的数组，也就是投影操作。

javascript 复制代码

let arr = [1,2,3,4,5]

let arr1 = arr.map((val,index)=>{
    return arr[index] + 1
})
console.log(arr)   //[1,2,3,4,5]
console.log(arr1)  //[2, 3, 4, 5, 6]

map与forEach的区别就是，forEach没有返回值，即使return,它的返回值也只会是undefined;
map的所有返回值会组成一个新的数组

find、findIndex、indexOf

find()：主要功能用于查找符合指定条件的第一个数组元素，并返回该元素。如果没有找到匹配的元素，则返回undefined。注意这里返回的是一个元素对象，filter()返回的是数组。

javascript 复制代码

let arr = [1,2,3,4,5]

let find1 = arr.find((val,index)=>{
    return val>1
})
console.log(find1)  // 2

//find()
const numbers = [1, 3, 5, 7, 9];
const result = numbers.find(num => num > 6);
console.log(result); // 返回符合条件的值：7
 
//findIndex()
const numbers = [1, 3, 5, 7, 9];
const result = numbers.findIndex(num => num > 6);
console.log(result); // 返回符合条件值的索引：3
 
//indexOf()
const numbers = [1, 3, 5, 7, 9];
const result = numbers.indexOf(7);
console.log(result); // 返回某一特定值所在数组里面的索引：3

相同：find与some 的用法类似，都是在数组中查找符合条件的值，且当找到符合的值便会停止往后遍历。
区别：some返回的值是布尔型，而find返回的是具体的值。

filter

主要的功能是根据一定条件过滤数组数据。具体实现，将数组中的每个元素传递给一个回调函数，经过设定的逻辑处理返回一个布尔值，过滤相关的元素。最终返回一个新的数组。注意的是该方法不会对空数组进行检测、不会改变原始数组

javascript 复制代码

let arr = [1,2,3,4,5]

let filter1 = arr.filter((val,index)=>{
    return val>1
})
console.log(filter1)   //[2,3,4,5]

every

判断数组中所有元素是否满足条件，满足则返回true。

javascript 复制代码

let arr = [1,2,3,4,5]

let every1 = arr.every((val,index)=>{
    return val>0
})
console.log(every1)   //true

let every2 = arr.every((val,index)=>{
    return val>1
})
console.log(every2)    //false

some

判断数组中是否有元素满足条件，只要有一条满足则返回true。

javascript 复制代码

let arr = [1,2,3,4,5]

let some1 = arr.some((val,index)=>{
    return val==1
})
console.log(some1)  //true

let some2 = arr.some((val,index)=>{
    return val==6
})
console.log(some2)  //false

reduce

若数组元素为数字，则会求数组中所有元素的总和；若数组元素为字符，则会将所有字符拼合在一起

javascript 复制代码

let arr = [1,2,3,4,5]
let arrString = ["one","two","three","four","five"]
let sum1 = arr.reduce((item,val)=>{
    return item+val
})
let sum2 = arrString.reduce((item,val)=>{
    return item+val
})
console.log(sum1)  //15
console.log(sum2)  //onetwothreefourfive

for in 、for of

for in（ES1）

for in和for循环方式历史悠久，从ECMAScript 1就被支持。

for in 用来循环数组不是一个合适的选择。迭代的是属性key，不是值。
由于属性 key 是字符串，迭代出的元素索引是 string,不是 number，不能直接进行运算，如下

javascript 复制代码

var arr = [1,2,3]
    
for (let index in arr) {
  let res = index + 1
  console.log(res)
}
//01 11 21

for of（ES6）

再来说说ES6 中的 for of

for of遍历的是数组元素值，而且for of遍历的只是数组内的元素，不包括原型属性和索引

javascript 复制代码

var arr = [1,2,3]
arr.a = 123
Array.prototype.a = 123
    
for (let value of arr) {
  console.log(value)
}
//1 2 3

for of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象（iterator）的集合，但是不能遍历对象，因为没有迭代器对象。

但如果想遍历对象的属性，你可以用for in循环（这也是它的本职工作）或用内建的Object.keys()方法

javascript 复制代码

var myObject={
　　a:1,
　　b:2,
　　c:3
}
for (var key of Object.keys(myObject)) {
  console.log(key + ": " + myObject[key]);
}
//a:1 b:2 c:3