数组filter和map函数

3.数组高级扩展函数

ES6 针对 数组 提供了 很多高级筛选方法

image.png

3.1 filter筛选方法

• 作用：

  • 根据条件筛选 出 原数组 中的元素，并添加到一个 新数组 中返回
  • 不会改变原始数组，只是把符合条件的元素 添加到一个新数组中

• 参数：array.filter(回调函数( currentValue,index,arr ))

  • value - 当前元素值
  • index - 当前元素下标
  • arr - 当前数组

• 返回值：

• 返回包含符合条件的元素的数组

• 没有符合条件的元素，则返回 空数组。

• 本质：内部其实就是 对 数组做循环，并把原数组中符合条件的元素添加到新数组中返回

• 例子：筛选 常量数组

//1.返回 list 数组中 大于2的元素
let list = [1, 2, 3, 4];

let list2 = list.filter((v, i) => {
    return v > 2;
});

console.log(list2); // 输出: [ 3, 4 ]

image.png

• 例子：筛选 对象数组：

//2.返回 list3 中 age >22 的 对象
let list3 = [
    { name: 'j', age: 12 },
    { name: 'a', age: 22 },
    { name: 'm', age: 32 },
    { name: 'e', age: 42 },
    { name: 's', age: 52 }
];

let list4 = list3.filter((v, i) => {
    return v.age > 22;
});
console.log(list4);
/* 输出:
[
  { name: 'm', age: 32 },
  { name: 'e', age: 42 },
  { name: 's', age: 52 }
]
*/

• 扩展：自己模仿一个数组的 filter 方法，返回符合条件的元素组成的新数组

// 为数组 原型 添加一个 myfilter 方法
Array.prototype.myfilter = function (fn) {
    let newArr = [];
    // 遍历当前数组
    for (let i = 0; i < this.length; i++) {
        // 调用回调函数，传入 当前元素，下标，原数组本身，获取 bool返回值
        if (fn(this[i], i, this)) {
            // 将 元素 添加到 新数组
            newArr.push(this[i]);
        }
    }
    return newArr;
}
// 调用测试：
let list9 = [
    { name: 'j', age: 12 },
    { name: 'a', age: 22 },
    { name: 'm', age: 32 },
    { name: 'e', age: 42 },
    { name: 's', age: 52 }
];

let list10 = list9.myfilter((v, i) => {
    return v.age > 22;
});

console.log(list10);

3.2 map 方法

• 作用： 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

  • 遍历 原数组 中的元素并调用回调函数，将回调函数返回值添加到一个 新数组 中返回
  • 不会改变原始数组，只是 把回调函数返回值 添加到新数组

• 参数：array.map(回调函数( currentValue,index,arr ))

  • value - 当前元素值
  • index - 当前元素下标
  • arr - 当前数组

• 返回值：

• 将遍历数组 时每次调用 回调函数 的返回值 添加到新数组 返回

• 本质：对数组做循环，并取出元素传入回调函数，将回调函数返回值添加到新数组返回

• 例子：遍历对象，将每个对象的 age 添加到新数组 返回

let list5 = [
    { name: 'j', age: 12 },
    { name: 'a', age: 22 },
    { name: 'm', age: 32 },
    { name: 'e', age: 42 },
    { name: 's', age: 52 }
];

let list6 = list5.map((v, i) => {
    return v.age;
});
console.log(list6); // [ 12, 22, 32, 42, 52 ]

image.png

• 扩展：自己模仿一个数组的 map 方法，返回 由 回调函数 return元素 组成的新数组

// 为数组 原型 添加一个 mymap 方法
Array.prototype.mymap = function (fn) {
    let newArr = [];
    // 遍历当前数组
    for (let i = 0; i < this.length; i++) {
        // 调用回调函数，传入 当前元素，下标，原数组本身
        let newEle = fn(this[i], i, this);
        // 将 返回值 添加到 新数组
        newArr.push(newEle);
    }
    return newArr;
}
// 调用测试：
let list7 = [
    { name: 'j', age: 12 },
    { name: 'a', age: 22 },
    { name: 'm', age: 32 },
    { name: 'e', age: 42 },
    { name: 's', age: 52 }
];

let list8 = list7.mymap((v, i) => {
    return v.age;
});

console.log(list8);