文章目录
0. 给定一个数组
const arr = [{
name: '袁绍',
age: 33,
title: '本初',
index: 2
},
{
name: '曹操',
age: 40,
title: '孟德',
index: 1
},
{
name: '刘备',
age: 35,
title: '玄德',
index: 6
},
{
name: '马超',
age: 30,
title: '孟起',
index: 7
},
{
name: '张飞',
age: 28,
title: '翼德',
index: 3
},
{
name: '关羽',
age: 27,
title: '云长',
index: 4
},
{
name: '赵云',
age: 22,
title: '子龙',
index: 4
},
]
1. find():查找成员对象
用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。find()返回的结果是一个对象。
const obj1 = arr.find(item => item.age < 30)
const obj2 = arr.find(item => item.index == 4)
const obj3 = arr.find(item => item.title !== '玄德')
const obj4 = arr.find(item => item.name.indexOf('关', 0) !== -1)
console.log(obj1) //{"name": "张飞","age": 28,"title": "翼德","index": 3}
console.log(obj2) //{"name": "关羽","age": 27,"title": "云长","index": 4}
console.log(obj3) //{"name": "袁绍","age": 33,"title": "本初","index": 2}
console.log(obj4) //{"name": "关羽","age": 27,"title": "云长","index": 4}
字符串查找可参考这里
2. findIndex():查找成员下标
返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。findIndex()返回的结果是一个整型的值。
const index1 = arr.findIndex(item => item.age < 30)
const index2 = arr.findIndex(item => item.index == 4)
const index3 = arr.findIndex(item => item.title !== '玄德')
const index4 = arr.findIndex(item => item.name.indexOf('关', 0) !== -1)
console.log(index1) //4
console.log(index2) //5
console.log(index3) //0
console.log(index4) //5
3. filter():过滤数组
使用指定的回调函数测试所有数组元素,并创建一个包含所有通过测试的元素构成的新数组。filter()不改变原数组内容,返回的结果是一个新的数组。
const arr1 = arr.filter(item => item.age < 30)
const arr2 = arr.filter(item => item.index == 4)
const arr3 = arr.filter(item => item.title !== '玄德')
const arr4 = arr.filter(item => item.name.indexOf('关', 0) !== -1)
console.log(arr1)
console.log(arr2)
console.log(arr3)
console.log(arr4)
返回值
注意:上边所述的函数都是有返回值的。因此,箭头函数体部分都是一个可以得到布尔值的表达式,而不是一个语句块{…}。当然也可以显式return一个具有布尔值的表达式。
4. forEach():迭代数组
遍历数组所有元素,利用回调函数对数组的每一个元素进行操作。不支持break或continue关键字。特别地,return只用于决定是否结束当前循环(不是整个循环),类似continue。forEach()仅是一个遍历操作,没有返回值——可理解为返回void。forEach()不会修改原来的数组。
let newArr = []
arr.forEach(item => {
if (item.age < 30) {
newArr.push(item.name)
}
})
newArr.forEach(item => {
console.log(item)
})
/* 输出:
张飞
关羽
赵云
*/
既然是操作,箭头函数体部分当然要使用{…}语句块形式。
let nb
arr.forEach(item => {
if (item.index === 4) { // 4可有两个呕!
nb = item.name
}
})
console.log(nb) // 赵云
//return到底有啥用?
let nb
arr.forEach(item => {
if (item.index === 4) {
nb = item.name
return
}
})
console.log(nb) // 还是输出:赵云
//再看
let nb
arr.forEach(item => {
if (item.index === 4) {
nb = item.name
return // 相当于continue
console.log(nb) //不被输出
}
})
特殊方法修改原数组内容
let test = arr.forEach((item, index, input) => {
input[index] = item.age + 10
})
console.log(test) // 没有返回值
console.log(arr) // 原数组被改了
结果
5. some()和every():量词遍历
两个函数都遍历数组中的所有元素。两个函数都返回布尔值。
- some()
存在量词,数组中只要存在(至少一个)满足条件的元素就返回true,否则返回false。 - every()
全称量词,数组中的元素必须都满足条件才返回true,否则返回false。
console.log(
arr.some(item => item.age > 39)
) // true
console.log(
arr.every(item => item.age < 30)
) // false
6. map():变换
依次处理数组中的每一个元素。每一个元素均被map()定义的回调函数进行变换,将变换后的元素再收集起来,最终返回一个新的数组。
map()不会对空数组进行处理,不会改变原始数组。
const newArr = arr.map(item => item.name)
console.log(newArr) //["袁绍","曹操","刘备","马超","张飞","关羽","赵云"]
const newArr = arr.map(item => item.age > 30)
console.log(newArr) //[true,true,true,false,false,false,false]
const newArr = arr.map(item => item.age > 30? 'A':'B')
console.log(newArr) //["A","A","A","B","B","B","B"]
const newArr = arr.map(item => {
if (item.index < 4) {
return item
}
})
console.log(newArr)
/** 输出:
[
{
"name": "袁绍",
"age": 33,
"title": "本初",
"index": 2
},
{
"name": "曹操",
"age": 40,
"title": "孟德",
"index": 1
},
null,
null,
{
"name": "张飞",
"age": 28,
"title": "翼德",
"index": 3
},
null,
null
]
*/
const newArr = arr.map(item => item.age + 10)
console.log(newArr) // [43,50,45,40,38,37,32]
数组成员是对象的变换
const newArr = arr.map(item => {
let {name, age, title} = item
let elem = {
name,
age: age+10,
alias: title
}
return elem
})
console.log(newArr)
结果
7. reduce():规约
这里“规约”类似于SQL中的聚合函数。即把一个数组表达的集合聚合为一个值——多个值变一个值。该函数最终返回一个单值。
// preVal:前一次调用reduce()的返回值;currVal:当前遍历到的数组元素
const totle = arr.reduce((preVal, currVal) => {
return preVal + currVal.age
}, 0) // 0是初始值
console.log(totle) //215