文章目录
ES6 数组的遍历(元素的筛选)
这些方法的参数是一个回调函数functon(value,index,arr)
- value:当前遍历的元素
- index:当前遍历的元素下标
- arr:当前遍历的数组
总结
- 特定的循环,需要中断和跳过可使用
for
- 无需返回值可使用
forEach
、for...of
- 检查是否满足指定条件而无需使用元素可使用
some
、every
- 筛选符合条件的元素可使用
filter
、find
、findLast
- 找到符合条件的元素索引可使用
findIndex
、findLastIndex
- 需要对不符合展示条件的数据继续再处理时可使用
map
- 需要依赖数组元素上次结果,如累计可使用
reduce
、reduceRight
find(callback)寻找第一个满足条件的元素/findLast寻找最后一个满足条件的元素
数组实例方法find(function)
:遍历数组,查找数组中符合条件的第一个元素,立即返回该元素的值。如果没有找到,则返回undefined
。
数组实例方法findLast(function)
:从后往前遍历,寻找最后一个满足条件的元素
callback
返回布尔值,true表示找到了
案例
const arr = [
{
id: 1, name: 'Alice' },
{
id: 2, name: 'Bob' },
{
id: 3, name: 'Charlie' }
];
const targetId = 2;
const targetObj = arr.find(obj => obj.id === targetId);// { id: 2, name: 'Bob' },
实现原理
//调用时通过数组实例.find调用,所以this指向调用的数组实例
Array.prototype.find = function(fn) {
for (let i = 0; i < this.length; i++) {
if (fn(this[i],i)) return this[i]
//this指向调用的数组,i表示数组的下表,this[i]代表依次去数组元素
}
}
findIndex(callback)寻找第一个满足条件的元素下标/findLastIndex(callback)
数组实例方法find(callback)
:遍历数组,查找数组中符合条件的第一个元素,立即返回该元素的下标。如果没有找到,则返回-1。
数组实例方法findLastIndex(callback)
:从右往左遍历,寻找数组中最后一个满足条件的元素
callback
返回布尔值,true表示找到了
使用场景
- 数组中的元素是值类型:
arr.indexOf()
- 数组中的元素是引用类型:
arr.findIndex()
案例
const arr = [
{
id: 1, name: 'Alice' },
{
id: 2, name: 'Bob' },
{
id: 3, name: 'Charlie' }
];
const targetId = 2;
const targetObj = arr.findIndex(obj => obj.id === targetId); //1
实现原理
Array.prototype.find = function(fn) {
for(let i=0;i<this.length;i++){
if(fn(this[i],i)){
return i;
}
}
}
map(callback)映射数组
数组实例方法map(callback)
:将原数组的每一个元素进行映射,返回一个新数组。
数组实例方法callback
返回映射后的元素
说明
- 映射之后一定要将映射后的元素返回,也就是参数函数一定要有返回值,不然返回
undefined
- 不会影响原数组,只是将原来的数组拷贝了一份,把拷贝的数组项进行更改,支持链式调用
案例
const arr = [
{
id: 1, name: 'Alice' },
{
id: 2, name: 'Bob' },
{
id: 3, name: 'Charlie' }
];
const targetId = 2;
const targetObj = arr.map(obj => obj.id++);
实现原理
Array.prototype.map = function (callback){
const newArr= [];
for(let i =0;i<this.length;i++){
newArr.push(callback&&callback(this[i]))
}
return newArr;
}
filter(callback)筛选数组
数组实例方法filter(callback)
:根据条件筛选数组,将符合条件的元素放入新数组中,返回新数组。
数组实例方法callback
返回布尔值,结果为true的元素放入新数组中
案例:去重
const arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
const arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index)
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]
实现原理
Array.prototype.filter = function (callback) {
const newArr = [];
for(let i=0;i<this.length;i++){
if(callback(this[i]))newArr.push(this[i])
}
return newArr;
}
reduce(callback,intialValue)累加器/reduceRight从后往前
数组实例方法 reduce(callback,intialValue)
相当于数组的累加器,常用于条件统计。比如统计数组中大于20的元素个数,返回累计值。
数组实例方法reduceRight(callback,intialValue)
类似 reduce(callback,intialValue)
,遍历顺序从右到左,使用场景:字符串的反转等。
callback(accumulator,currentValue,[index],[array])
回调函数的参数
- accumulator 累计器的值,是上一次调用回调时返回的累计值或者是初始值intialValue
- currentValue 当前元素
- index 当前元素下标
- array 当前数组
- callback函数的返回值就是当前函数执行结束后的累计值
案例
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((prev, curr) => prev + curr, 0);
console.log(sum); // 15
实现原理
Array.prototype.reduce= function (callback,initVal) {
const res = initVal;
for(let i=0;i<this.length;i++){
res = callback(res ,this[i],i,this)//累计值
}
return res ;
}
some(callback)判断该数组是否存在符合条件的元素
数组实例方法some(callback)
:判断数组中是否存在符合条件的元素,如果数组中有一个元素满足条件,立即返回true , 剩余的元素不会再执行检测。如果全部都不符合,返回false
。返回布尔值
callback
返回布尔值,true
表示找到了符合条件的元素,循环结束直接返回true
经典场景 : 非空判断。 多个表单只要有一个是空的,就不能提交
const arr = [1, 2, 3, 4, 5];
const result = arr.some(item => item > 3);
console.log(result); // true
实现原理
Array.prototype.some= function(callback){
for(let i=0;i<this.length;i++){
if(callback(this[i]))return true
}
return false;
}
every(callback):判断该该数组是否每一个元素都符合条件
数组实例方法every(callback)
:判断数组中是否每一个元素都符合条件,如果是返回true
callback
返回布尔值,true
表示当前元素符合条件。false
表示当前元素不符合条件,循环结束,返回false
案例
let arr = [1,2,3,4];
let res = arr.every(item => item > 0)
console.log(res); // true
实现原理
Array.prototype.some= function(callback){
for(let i=0;i<this.length;i++){
if(!callback(this[i]))return false
}
return true;
}
forEach(callback)循环修改旧数组
数组实例方法forEach(callback)
循环数组, 用于对数组中的每个元素执行指定的操作。
特点
- 不返回新数组,会修改旧数组
- 不能
break
终止和continue
进入下一个循环,除非抛出异常 - 使用
return
时,效果和在for
循环中使用continue
一致 - 对空数组不执行回调
形参item采用赋值的形式
// 不可以直接修改元素,但是可以修改元素的属性- 形参是赋值形式
numbers.forEach((item, index, arr) => {
item = item * 2; // 这里只是修改了形参item的值,并不会修改原数组
arr[index] = item * 2; // 通过修改属性修改原数组值
})