看一遍都懂的数组遍历~确定不试试?

前些天看到一张神图:是不是很形象?

一: 数组遍历

Array.prototype.map:(主要为了其返回值)

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

const numList = [1,2,3]
// 对数组中的每一项都乘以 3, 然后返回新的数组
const resultLis = numList.map(item=> item * 3)
console.log('旧数组:',numList)
console.log('新数组:',resultLis)

 

Array.prototype.forEach:(不返回值,但会处理数组)

forEach() 方法对数组的每个元素执行一次给定的函数。

const numList = [1,2,3]
const newArray = []

numList.forEach(item => {
    newArray.push(item + 1)
    console.log(item+1)
})
console.log(numList,newArray)

Array.prototype.filter:(过滤值,返回符合过滤条件的值的新数组) 

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 

const list  = [1,2,3,4]
// 过滤大于2的值  
const filtered = list.filter(item => item > 2)
console.log(list,filtered )

 

Array.prototype.some:(数组中只要有一个满足条件,就返回true,否则返回false)

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试

const list = [1,2,3,4,5]
// 检测数组中的值是否有一个大于2 
const result = list.some(item=> item > 2) 
console.log(result)

 

Array.prototype.every:(数值中所有值都满足条件才会返回true,否则返回false)

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试

const list = [2,3,4]
// 检测数组中的所有元素是否都大于3
const result = list.every(item=> item > 3)
console.log(result)

Array.prototype.reduce:(依次处理每个元素,返回处理后的结果)

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)

个人感觉reduce()方法逼格更高一点

语法:

arr.reduce(callback,[initialValue])

reduce为数组中的每一个元素都执行回调函数(callback), callback可以接收4个参数:

callback:

1:previousValue(初始值) ===> 必须

2:currentValue(当前被处理的元素) ===> 必须

3:index(当前被处理元素在数组中的索引) ===>可选

4:array(调用reduce的数组) ===> 可选

initialValue:

注意:作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

例子1:(累加,无初始值)

const list = [1,2,3,4]
const result = list.reduce((pre,curr)=> pre + curr)
console.log(result,'--')

 

 例子1_1:(累加,有初始值)

const list = [1,2,3,4]
const result = list.reduce((pre,curr)=> pre + curr,10)
console.log(result,'--')

列子2:(累加对象数组里的值,无初始值)

const list = [
{name:'super',age:18},
{name:'tiger',age:19},
]
const totalAge = list.reduce((pre,curr)=> pre.age + curr.age)

console.log(totalAge)

 

 列子2_1:(累加对象数组里的值,无初始值)

const list = [
{name:'super',age:18},
{name:'tiger',age:19},
]
const totalAge = list.reduce((pre,curr)=> pre.age + curr.age,20)

console.log(totalAge)

 

 例子3:(将二维数组转化一维,有点大材小用)

const list = [1,2,[3,4],['superTiger_Y','博客']]
const flattenedList = list.reduce((pre,curr)=> pre.concat(curr),[])
console.log(flattenedList )

例子4:(计算数组中每个元素出现的次数)

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']

const countNames = names.reduce((pre,curr)=> {
    
     curr in pre ? pre[curr]++ : pre[curr] = 1

    return pre
},{})

console.log(countNames)

 

 例子5:(按属性对object分类)

const people = [
    {name:'super',age:21},
    {name:'tiger',age:22},
    {name:'_Y',age:21},
]


function groupBy(objectArray,property){
   return objectArray.reduce((pre,curr)=>{
        const key = curr[property]
        if(!pre[key]){
            pre[key] = []
        }
        pre[key].push(curr)
        return pre
    },{})

}

const result = groupBy(people ,'age')

console.log(result)

 例子6(对象数组元素合并)

const friends = [{
  name: 'Anna',
  books: ['Bible', 'Harry Potter'],
  age: 21
}, {
  name: 'Bob',
  books: ['War and peace', 'Romeo and Juliet'],
  age: 26
}, {
  name: 'Alice',
  books: ['The Lord of the Rings', 'The Shining'],
  age: 18
}];

const allBooks = friends.reduce((pre,curr)=>{
    return [...pre,...curr.books]

},['superTiger_y'])

console.log(allBooks)

Array.prototype.reduceRight

用法和reduce一样,只是遍历顺序相反,reduce是从左往右,reduceRight是从右往左

Array.prototype.indexOf(查找元素,并返回第一次出现的位置,不存在则返回-1)

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));

Array.prototype.lastIndexOf(查找元素,并返回最后一个的位置,不存在则返回-1)

lastIndexOf() 方法返回指定元素在数组中的最后一个的索引,如果不存在，则返回-1。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.lastIndexOf('bison'));

Array.prototype.find(返回满足条件第一个元素的值)

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const people = [
    {name:'super',age:20},
    {name:'tiger',age:19},
    {name:'_Y',age:22}
] 

const item= people.find(item => item.age === 19)
console.log('年龄等于19的元素:',item)


const item1= people.find(item => item.age === 100)
console.log('年龄等于100的元素:',item1)

 

Array.prototype.findIndex (返回满足条件第一个元素的值的索引)

 findIndex() 方法返回数组中满足提供的测试函数的第一个元素的值的索引。否则返回 -1

const people = [
    {name:'super',age:20},
    {name:'tiger',age:19},
    {name:'_Y',age:22}
] 

const index= people.findIndex(item => item.age === 19)
console.log('年龄等于19的元素的索引:',index)


const index1= people.findIndex(item => item.age === 100)
console.log('年龄等于100的元素的索引:',index1)