有模有样~看一遍就能记住的js数组方法

75 阅读3分钟

前些天看到一张神图,先供着

1659064796252.jpg

# Array.prototype.map()

返回一个新数组,由原数组中的每个元素都调用一次提供的函数后的返回值组成

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

image.png

# Array.prototype.forEach()

按升序为数组中含有效值的每一项执行一次 callback 函数,那些已删除或者未初始化的项将被跳过

const arr = [1,2,3,,5]
const newArr = []
// 将arr里的每一项有效值都加1 然后push到另外一个数组中
// 3和5之间的不属于有效值,会被forEach跳过
arr.forEach(item => {
    newArr.push(item + 1)
})
console.log(arr)
console.log(newArr)

image.png

# Array.prototype.filter()

为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用,那些已经被删除或者从未被赋值的索引不会被调用。

const arr = [1,3,4,5,6,,8]
console.log('数组长度:',arr.length)
let count = 0
// 数组arr中的每一项都和5比较大小,比5的元素会成为返回数组中的元素
const result = arr.filter(item => {
    count ++
    console.log('执行次数:',count)
    return  item > 5
})
console.log(result)

image.png 无效的元素会跳过执行callback函数,6和8之间的元素并未执行;并且满足条件的元素会成为返回数组中的元素

# Array.prototype.some()

数组中的元素只要有一个满足条件,就返回true,否则返回false;无效值会被跳过执行

const arr = [4,5,6,7,8,,]
// 检索数组中的元素是否有一个满足大于8的,有则返回true,否则返回false
const result = arr.some(item => item > 8)
console.log(result)

image.png

Array.prototype.every()

检索数组中的所有元素都满足条件才会返回true,否则返回false;无效值会被跳过执行

const arr = [1,2,3,4,5]
// 检索数组的所有元素是否都满足大于0的条件
const result = arr.every(item => item > 0)
console.log(result)

image.png

Array.prototype.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)

image.png

Array.prototype.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)

image.png

# Array.prototype.reduce()

对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

例子1

// 累加 无初始值
const list = [1,2,3,4]
const result = list.reduce((pre,curr)=> pre + curr)
console.log(result)

image.png

例子2

// 累加 有初始值
const list = [1,2,3,4]
const result = list.reduce((pre,curr)=> pre + curr,10)
console.log(result)

image.png

例子3

// 计算对象数组里的属性
const list = [
    {name:'super',age:18},
    {name:'tiger',age:19},
]
const totalAge = list.reduce((pre,curr)=> pre.age + curr.age)
console.log(totalAge)

image.png

例子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)

image.png

例子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)

image.png

例子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)

image.png