讲师中心 微信公众号

工具推荐

视频效率加速
剧云
剧云

中文短剧剧本制作平台

updream

一键生成高质量推广成片

立刻MV
立刻MV

低成本歌曲 MV、视频生成

Laper
Laper

剧本策划到成片协作

js 如何用pullAll移除数组中的多个值

夏强酱_9815

夏强酱_9815

发布时间:2025-08-22 11:15:01

|

275人浏览过

|

来源于php中文网

原创

lodash的pullall方法可高效移除数组中多个特定值,它直接修改原数组,接受一个待操作数组和一个包含需移除值的数组作为参数,例如\_.pullall(fruits, ['apple', 'banana'])会从fruits中移除所有匹配项;与pull的区别在于参数形式:pull接收多个独立值作为参数,如\_.pull(array, 'a', 'c'),而pullall接收一个值数组,如\_.pullall(array, ['a', 'c']),更适合动态值列表的场景;若不想修改原数组,应使用\_.without或原生filter方法,前者需配合解构操作符使用,如\_.without(originalarray, ...valuestoremove),后者更灵活,支持复杂条件过滤,尤其适用于对象数组;处理对象数组时pullall存在局限,因其基于严格相等(===)比较,只能通过传入数组中实际存在的对象引用才能成功移除,若按属性匹配删除应选用\_.remove或filter配合判断函数,如\_.remove(objects, obj => idstoremove.includes(obj.id))或objects.filter(obj => !idstoremove.includes(obj.id)),以避免引用不一致问题并提升代码可读性。

js 如何用pullAll移除数组中的多个值

js 中要高效移除数组里的多个特定值,Lodash 库的

pullAll
方法是个非常直接且实用的选择。它能让你指定一个数组,以及一个包含所有待移除值的数组,然后直接修改原数组,省去不少循环和条件判断的麻烦。

Lodash 的

_.pullAll(array, values)
方法是实现这一目标的利器。它会直接修改传入的
array
,将其中所有与
values
数组中任一元素相等的值都移除掉。

举个例子,假设你有一个水果列表,想把苹果和香蕉都从里面拿走:

const _ = require('lodash'); // 别忘了安装 Lodash:npm install lodash

let fruits = ['apple', 'banana', 'orange', 'apple', 'grape', 'banana'];
const valuesToRemove = ['apple', 'banana'];

_.pullAll(fruits, valuesToRemove);

console.log(fruits); // 输出: [ 'orange', 'grape' ]

你会发现

fruits
数组已经被原地修改了。这种直接操作原数组的特性,在某些场景下非常方便,但也需要注意,因为它有副作用。

pullAll
与
pull
的区别是什么?

很多人在 Lodash 中会遇到

pull
和
pullAll
,它们看起来很像,但用起来还是有点微妙的区别。简单来说,
pull
是用来移除你“一个个”明确列出的值,而
pullAll
则是批量处理,移除一个“列表”里的所有值。

比如说,你要移除一个数组里的 'a' 和 'c':

使用

pull
:
_.pull(array, 'a', 'c')
使用
pullAll
:
_.pullAll(array, ['a', 'c'])

看,参数的形态就不一样了。

pull
接受的是可变参数列表,而
pullAll
接受的是一个数组。

let letters1 = ['a', 'b', 'c', 'a', 'd'];
_.pull(letters1, 'a', 'c');
console.log('pull 后的结果:', letters1); // 输出: pull 后的结果: [ 'b', 'd' ]

let letters2 = ['a', 'b', 'c', 'a', 'd'];
_.pullAll(letters2, ['a', 'c']);
console.log('pullAll 后的结果:', letters2); // 输出: pullAll 后的结果: [ 'b', 'd' ]

虽然结果可能一样,但当你要移除的值是动态生成的一个列表时,

pullAll
的优势就体现出来了,你不需要把数组里的每个元素都解构出来作为
pull
的参数。这是一个很实际的场景,尤其是在处理用户输入或者从数据库查询出来的需要过滤的数据时。

如果不想修改原数组,该如何实现类似
pullAll
的功能?

pullAll
的一个特点是它会原地修改原数组。这在一些性能敏感或者链式操作的场景下可能很方便,但如果你的代码风格更倾向于函数式编程,或者你需要保留原数组的完整性,那这种副作用就得小心了。

CSS工具箱(专业版)
CSS工具箱(专业版)

全功能 CSS 工程手册,覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

Lodash 也提供了不修改原数组的方法。对于移除特定值,

_.without
是一个很好的选择,它返回一个新数组,不包含你指定的值。

const _ = require('lodash');

let originalNumbers = [1, 2, 3, 4, 5, 2, 6];
const valuesToExclude = [2, 4];

// 使用 _.without
let newNumbersWithout = _.without(originalNumbers, ...valuesToExclude); // 注意这里需要解构赋值
console.log('_.without 后的新数组:', newNumbersWithout); // 输出: _.without 后的新数组: [ 1, 3, 5, 6 ]
console.log('原数组是否改变:', originalNumbers); // 输出: 原数组是否改变: [ 1, 2, 3, 4, 5, 2, 6 ]

当然,你也可以直接用原生的 JavaScript

filter
方法结合
includes
来实现。这通常更灵活,尤其是在移除对象数组中的特定对象时,因为
pullAll
和
without
默认是基于值相等性判断的。

let originalItems = [
    { id: 1, name: 'Item A' },
    { id: 2, name: 'Item B' },
    { id: 3, name: 'Item C' }
];
const itemsToRemoveIds = [1, 3];

// 使用 filter 和 includes
let filteredItems = originalItems.filter(item => !itemsToRemoveIds.includes(item.id));
console.log('filter 后的新数组:', filteredItems);
// 输出: filter 后的新数组: [ { id: 2, name: 'Item B' } ]
console.log('原数组是否改变:', originalItems);
// 输出: 原数组是否改变: [ { id: 1, name: 'Item A' }, { id: 2, name: 'Item B' }, { id: 3, name: 'Item C' } ]

这种方式的灵活性在于,你可以自定义过滤的逻辑,不仅仅是简单的值相等。比如说,移除所有

id
大于 5 的项,或者移除所有名字包含“测试”的项,
filter
都能轻松应对。这在处理复杂数据结构时特别有用。

pullAll
在处理对象数组时有哪些需要注意的地方?

当你在数组里处理对象时,

pullAll
的行为可能会让你有点困惑,因为它默认是使用严格相等(
===
)来比较值的。这意味着,如果你想移除一个对象,你必须传入那个数组中“确切的”对象引用,而不是一个仅仅内容看起来一样的“新”对象。

想象一下这个场景:

const _ = require('lodash');

let users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

// 尝试移除 Bob,但传入的是一个新的对象实例
const bobToRemove = { id: 2, name: 'Bob' };
_.pullAll(users, [bobToRemove]);
console.log('尝试移除 Bob (新对象) 后的 users:', users);
// 输出: 尝试移除 Bob (新对象) 后的 users: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ]
// 发现 Bob 还在,因为传入的 bobToRemove 和数组里的 { id: 2, name: 'Bob' } 是不同的内存地址。

要让

pullAll
工作,你必须传入数组中实际存在的那个对象:

let users2 = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

const actualBob = users2[1]; // 获取数组中 Bob 的实际引用
_.pullAll(users2, [actualBob]);
console.log('移除实际 Bob 引用后的 users2:', users2);
// 输出: 移除实际 Bob 引用后的 users2: [ { id: 1, name: 'Alice' }, { id: 3, name: 'Charlie' } ]
// 这次就成功了。

所以在处理对象数组时,如果你的目标是根据对象的某个属性(比如

id
)来移除,
pullAll
就不是最直接的工具了。这时候,通常会倾向于使用 Lodash 的
_.remove
或者原生的
filter
方法,它们允许你传入一个判断函数(predicate)。

使用

_.remove
(会修改原数组):

let products = [
    { id: 101, name: 'Laptop' },
    { id: 102, name: 'Mouse' },
    { id: 103, name: 'Keyboard' }
];
const idsToRemove = [101, 103];

_.remove(products, product => idsToRemove.includes(product.id));
console.log('_.remove 后的 products:', products);
// 输出: _.remove 后的 products: [ { id: 102, name: 'Mouse' } ]

或者使用

filter
(返回新数组,不修改原数组):

let articles = [
    { id: 201, title: 'JS Basics' },
    { id: 202, title: 'CSS Advanced' },
    { id: 203, title: 'React Hooks' }
];
const idsToFilterOut = [201, 203];

let remainingArticles = articles.filter(article => !idsToFilterOut.includes(article.id));
console.log('filter 后的 remainingArticles:', remainingArticles);
// 输出: filter 后的 remainingArticles: [ { id: 202, title: 'CSS Advanced' } ]
console.log('原 articles 数组:', articles);
// 输出: 原 articles 数组: [ { id: 201, title: 'JS Basics' }, { id: 202, title: 'CSS Advanced' }, { id: 203, title: 'React Hooks' } ]

在我看来,处理对象数组时,使用带判断函数的

_.remove
或
filter
几乎总是更清晰、更符合直觉的做法。它避免了对象引用带来的潜在陷阱,让你的代码意图表达得更明确。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

函子Zion

一款支持AI搭建、可视化编辑和多端发布的全栈无代码开发平台。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

相关专题

更多
treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2881

2023.12.01

C++ 高效算法与数据结构
C++ 高效算法与数据结构

本专题讲解 C++ 中常用算法与数据结构的实现与优化,涵盖排序算法(快速排序、归并排序)、查找算法、图算法、动态规划、贪心算法等,并结合实际案例分析如何选择最优算法来提高程序效率。通过深入理解数据结构(链表、树、堆、哈希表等),帮助开发者提升 在复杂应用中的算法设计与性能优化能力。

416

2025.12.22

深入理解算法:高效算法与数据结构专题
深入理解算法:高效算法与数据结构专题

本专题专注于算法与数据结构的核心概念,适合想深入理解并提升编程能力的开发者。专题内容包括常见数据结构的实现与应用,如数组、链表、栈、队列、哈希表、树、图等;以及高效的排序算法、搜索算法、动态规划等经典算法。通过详细的讲解与复杂度分析,帮助开发者不仅能熟练运用这些基础知识,还能在实际编程中优化性能,提高代码的执行效率。本专题适合准备面试的开发者,也适合希望提高算法思维的编程爱好者。

437

2026.01.06

C++ 数据结构与算法实现教程合集
C++ 数据结构与算法实现教程合集

以 C++ 为实现语言,系统讲解核心数据结构与算法,涵盖链表(单链表/双链表/环检测)、栈与队列(单调栈/优先队列)、二叉树(遍历/BST/AVL/红黑树)、哈希表(开地址法/链地址法)、图(邻接表/BFS/DFS/Dijkstra/拓扑排序)、常见排序算法(快排/归并/堆排/计数排序)的实现与复杂度分析,同时分享 LeetCode 刷题技巧、竞赛编程常用模板(二分/前缀和/滑动窗口/动态规划),帮助开发者夯实算法基础。

492

2026.05.09

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4956

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1435

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1918

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

10503

2023.08.17

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

0

2026.11.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn