0

0

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

煙雲

煙雲

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

|

255人浏览过

|

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

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

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

Videoleap
Videoleap

Videoleap是一个一体化的视频编辑平台

下载
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工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
treenode的用法
treenode的用法

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

539

2023.12.01

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

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

21

2025.12.22

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

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

28

2026.01.06

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

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

515

2023.06.20

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

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

244

2023.07.28

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

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

320

2023.08.03

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

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

5330

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

481

2023.09.01

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

CSS教程
CSS教程

共754课时 | 25.4万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号