js数组方法map和filter

原创已于 2024-06-25 09:15:19 修改 · 2.7k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2023-12-15 11:11:55 首次发布

javascript 专栏收录该内容

15 篇文章

订阅专栏

.map()方法

概念

.map() 函数是 JavaScript 数组结构中很实用的一个方法之一。可以将 map() 方法视为经过一个循环并在回调函数中编写语句（格式化、数据处理）以构造一个新数组。用来创建新数组、修改其内容并保持原始数组不变的通用方法。当出现需要修改现有数组的内容并将结果存储为新变量的时候就可以用。

语法

语法：array.map(function(currentValue, index, arr), thisIndex)

function(currentValue, index, arr) 为回调函数，数组中的每个元素都会执行这个函数。其中函数参数：
- currentValue：必须。当前元素的的值。
- index：可选。当前元素的索引。
- arr：可选。当前元素属于的数组对象。
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。

注意

不光处理数组对象，也可处理具有length属性且具有已按数字编制索引名的任何对象使用（如字符串对象）
不会对空数组进行检测
不会改变原始数组（返回新数组）
不会为数组中缺少的元素调用回调函数

使用场景

元素翻倍

例如，可以将一个整数数组的每个元素翻倍构造一个新数组。

const oldArr = [1, 2, 3, 4, 5]; //原始数组
const newArr = oldArr.map(item => item * 2); //处理后的新数组
console.log(oldArr); //[1, 2, 3, 4, 5]
console.log(newArr); //[2, 4, 6, 8, 10]

过滤数组

例如，有一个对象数组，对象属性包含 username、address、age 等，对现有数组数据进行过滤。

// 原始数组数据
const usersArr = [
{
    id: 1,
    username: "Magic",
    address: "Johnson",
},
{
    id: 2,
    username: "Kobe",
    address: "Bryant",
},
{
    id: 3,
    username: "Lebron",
    address: "James",
},
{
    id: 4,
    username: "Kareem",
    address: "Abdul-Jabbar",
},
{
    id: 5,
    username: "Shaquille",
    address: "O’Neal",
},
];

过滤username值为新数组

const newUsersArr = usersArr.map(item => item.username); 
console.log(newUsersArr); // ['Magic', 'Kobe', 'Lebron', 'Kareem', 'Shaquille']

过滤数组中指定的字段

第一种方法：箭头函数、 解构赋值
const newUsersArrs = usersArr.map(({username, id}) => ({username, id}));
第二种方法：箭头函数、返回对象（相对更容易理解）
const newUsersArrs = usersArr.map(item => ({username: item.username, id: item.id}));
使用剪头函数简化函数时可省略return，但要注意的是return的对象需要用()包裹，防止和函数后面的大括号冲突而报错

过滤数组中指定的字段，且对username字段重命名为name

const newUsersArrs5 = usersArr.map(({username: name, id}) => ({name, id}));

回调数组中的某些元素

可以将指定的元素翻倍，而不是将数组中的每个元素都翻倍。例如，只对数组中的奇数元素进行翻倍。

const oldArr = [1, 2, 3, 4];
const newArr = oldArr.map(item => item % 2 === 1 ? item * 2 : item);
console.log(oldArr); // [ 1, 2, 3, 4 ]
console.log(newArr); // [ 2, 2, 6, 4 ]

将字符串转换为数组

const str = "China";
const map = Array.prototype.map;
const letters = map.call(str, i => `${i}`);
console.log(letters); //['C', 'h', 'i', 'n', 'a']

在 React.js 中渲染列表

import React from "react";
import ReactDOM from "react-dom";

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li> {number} </li>);

ReactDOM.render(<ul>{listItems}</ul>, document.getElementById("root"));

.filter()方法

概念

它的主要作用是对数组进行过滤，返回新数组中的元素是通过检查指定数组中符合条件的所有元素，且原数组不变。

语法

array.filter(function(currentValue,index,arr), thisValue);

function(currentValue, index, arr) 为回调函数，数组中的每个元素都会执行这个函数。其中函数参数：
- currentValue：必须。当前元素的的值。
- index：可选。当前元素的索引。
- arr：可选。当前元素属于的数组对象。
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。

注意

返回的新数组包含了符合条件的所有元素，如果没有符合条件的元素则返回空数组。
不会对空数组进行检测
不会改变原数组
在一个多维数组的情况下filter()是一个浅拷贝，在一个数据类型全部是基本数据类型的话filter()是一个深拷贝
thisValue在传入对象的时候，this打印的是传入的对象；没传对象的时候，非严格模式下打印的是 window，严格模式下打印的是undefined；

使用场景

返回符合条件的元素。

// 原始数据
const arrData = [1, 3, 6, 9, 10];
// 返回数组中元素大于等于6的所有元素
const newArr1 = arrData.filter(item => item >= 6); // [6, 9, 10]
// 获取数组中的偶数
const newArr2 = arrData.filter(item => item % 2 === 0) // [6, 10]
// 获取数组中的奇数
const newArr3 = arrData.filter(item => item % 2 === 1) // [1, 3, 9]
// 去掉数组中的6
const newArr4 = arrData.filter(item => item !== 6) // [1, 3, 9, 10]

筛选数组中不包含a的元素

const arrData = ['aa', 'ab', 'bb', 'cc', 'bd', 'ad'];
const newArr = arrData.filter(item => item.indexOf('a') < 0); // ['bb', 'cc', 'bd']

去重操作

var arrData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 5, 6, 7, 9,];
const newArr = arrData .filter((item, index, arr) => arr.indexOf(item) === index);

过滤假值，去掉数组中的空字符串、undefined、null、false

const arrData = ['', undefined, null, 4, 9, '', false, true];
const newArr = arrData.filter(item => item); // [4, 9, true]

过滤数组中有某个属性值的数据

const arrData = [
	{name: "a", type: "letter"}, 
	{name: "1", type: "digital"}, 
	{name?: "c", type: "letter"}, 
	{name: "2", type: "digital"}
];
const newData = arrData.filter(item => item.type === "letter"); //过滤数组中type为letter的