前些天看到一张神图,先供着
# 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)
# 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)
# 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)
无效的元素会跳过执行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)
Array.prototype.every()
检索数组中的所有元素都满足条件才会返回true,否则返回false;无效值会被跳过执行
const arr = [1,2,3,4,5]
// 检索数组的所有元素是否都满足大于0的条件
const result = arr.every(item => item > 0)
console.log(result)
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)
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)
# Array.prototype.reduce()
对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
例子1
// 累加 无初始值
const list = [1,2,3,4]
const result = list.reduce((pre,curr)=> pre + curr)
console.log(result)
例子2
// 累加 有初始值
const list = [1,2,3,4]
const result = list.reduce((pre,curr)=> pre + curr,10)
console.log(result)
例子3
// 计算对象数组里的属性
const list = [
{name:'super',age:18},
{name:'tiger',age:19},
]
const totalAge = list.reduce((pre,curr)=> pre.age + curr.age)
console.log(totalAge)
例子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)