为什么在 JavaScript 的 forEach 中删除元素会有奇怪的行为

发布于07月26日

我试图根据另一个数组中不存在的索引从数组中删除一个单词，但我在使用拼接和过滤方法时观察到了奇怪的行为.

有人能解释一下下面的情况吗？Why is it happening like this in both cases, even though the same object is being altered on iteration?

Words

['one', 'two', 'three', 'four', 'five', 'six', 'seven']

Removable Words

['four', 'two', 'eight']

let words = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];
let removedWords = ['four', 'two', 'eight'];

words.forEach((word) => {
  console.log(word);
  if (removedWords.includes(word)) {
    words = words.filter((removableWord) => removableWord !== word)
  }
});

/* Output */
//one
//two
//three
//four
//five
//six
//seven

let words = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];
let removedWords = ['four', 'two', 'eight'];
words.forEach((word, index) => {
  console.log(word);
  if (removedWords.includes(word)) {
    words.splice(index, 1);
  }
});

/* Output */
//one
//two
//four
//six
//seven

如本Mozila document-forEach() does not make a copy of the array before iterating.中所述，在过滤并分配回原始对象后，它的行为不应该与拼接相同吗？

Note:除此之外，拼接方法对原始数组进行更改，过滤方法创建数组的新副本，并且不改变原始数组，但在给定示例中(过滤后)，结果被分配回原始array.

let words = ['one', 'two', 'three', 'four', 'five', 'six', 'seven']; let removedWords = ['four', 'two', 'eight']; words.forEach((word, index, iterationArray) => { console.log(index, word, iterationArray.length, words.length); if (removedWords.includes(word)) { words = words.filter((removableWord) => removableWord !== word) } }); console.log(words);

let words = ['one', 'two', 'three', 'four', 'five', 'six', 'seven']; let removedWords = ['four', 'two', 'eight']; words.forEach((word, index, iterationArray) => { console.log(word, index, iterationArray.length); if (removedWords.includes(word)) { words.splice(index, 1); } }); console.log(words);

为什么在 JavaScript 的 forEach 中删除元素会有奇怪的行为

推荐答案

Javascript相关问答推荐

如何解决CORS政策的问题

Google图表时间轴—更改hAxis文本 colored颜色

React 17与React 18中的不同setState行为

如何在angular中从JSON值添加动态路由保护？

将自定义排序应用于角形数字数组

colored颜色检测JS，平均图像 colored颜色检测JS

有没有可能使滑动img动画以更快的速度连续？

在forEach循环中获取目标而不是父对象的属性

Eval vs函数()返回语义

连接到游戏的玩家不会在浏览器在线游戏中呈现

查询参数未在我的Next.js应用路由接口中定义

使用Ace编辑器对子组件实例的native-element 进行Angular 获取时面临的问题

当标题被点击时，如何使内容出现在另一个div上？

JavaScript：如果字符串不是A或B，则

更改agGRID/Reaction中的单元格格式

在Press Reaction本机和EXPO av上播放单个文件

验证Java脚本函数中的两个变量

鼠标进入，每秒将图像大小减小5%

如何让noWrap在嵌套在Alert/AlertTitle组件中的排版组件中工作？

使用EXCEL.js模块+node.js分隔标题行中的列