数组对象判重最佳实践

数组对象判重最佳实践

赶紧挣钱,回家过年......

1.问题回顾

js 复制代码
       deviceSelectedRow(row) {
        this.ElectricalPartList.push(row)
      },

在此方法中,ElectricalPartList需要多次push进去数据,但是row可能存在重复,如何判重呢?
我要求根据partId判重,重复就不再push进去

2.问题解决

根据代码片段,想要在 ElectricalPartList 数组中添加新的元素 row,但是如果该元素的 partId 已经存在于数组中,就不再添加。可以使用一些数组方法来实现这一目标,例如 some 方法来检查数组中是否存在相同的 partId。下面是一个可能的实现:

javascript 复制代码
deviceSelectedRow(row) {
  // 检查是否存在相同的 partId
  const isDuplicate = this.ElectricalPartList.some(item => item.partId === row.partId);

  // 如果不存在重复的 partId,则将 row 添加到 ElectricalPartList 中
  if (!isDuplicate) {
    this.ElectricalPartList.push(row);
  }
}

在这个代码中,some 方法用于检查数组中是否存在满足指定条件的元素。如果存在具有相同 partId 的元素,则 isDuplicate 将为 true,否则为 false。根据这个条件,我们决定是否将新的 row 添加到 ElectricalPartList 数组中。

3.问题拓展

Array.prototype.some() 方法用于检测数组中是否至少有一个元素满足指定条件。这个方法会遍历数组,对每个元素应用提供的测试函数,直到找到一个使测试函数返回 true 的元素。如果找到这样的元素,some 方法将立即返回 true,否则返回 false

下面是对 some 方法的详细解释以及一些用法示例:

some 方法的语法:

javascript 复制代码
array.some(callback(element, index, array), thisArg);
  • callback 是一个用来测试数组元素的函数,它接受三个参数:

    • element: 当前被处理的元素。
    • index (可选): 当前处理元素的索引。
    • array (可选): 调用 some 的数组。
  • thisArg (可选): 执行回调函数时,用作 this 的对象。

示例 1: 检测数组中是否存在偶数

javascript 复制代码
const numbers = [1, 3, 5, 7, 8, 9];

const hasEven = numbers.some(function(element) {
  return element % 2 === 0;
});

console.log(hasEven); // 输出 true

示例 2: 使用箭头函数进行同样的检测

javascript 复制代码
const numbers = [1, 3, 5, 7, 9];

const hasEven = numbers.some(element => element % 2 === 0);

console.log(hasEven); // 输出 false

示例 3: 检测数组中是否有字符串长度大于等于 5 的元素

javascript 复制代码
const words = ["apple", "banana", "kiwi", "orange"];

const hasLongString = words.some(word => word.length >= 5);

console.log(hasLongString); // 输出 true

示例 4: 使用 thisArg 指定回调函数中的 this

javascript 复制代码
const contextObject = { threshold: 10 };

const numbers = [2, 5, 8, 12];

const hasValueAboveThreshold = numbers.some(function(element) {
  return element > this.threshold;
}, contextObject);

console.log(hasValueAboveThreshold); // 输出 true

这些示例演示了 some 方法的基本用法,可以根据具体的需求调整回调函数来进行不同的测试。

相关推荐
放下华子我只抽RuiKe54 小时前
React 从入门到生产(四):自定义 Hook
前端·javascript·人工智能·深度学习·react.js·自然语言处理·前端框架
XinZong4 小时前
OpenClaw 实现双重心跳(Heartbeat)+ clawreach虾聊项目实现
javascript
还有多久拿退休金6 小时前
一张栈的图,治好你面试答不出 script 阻塞的病
前端·javascript
zithern_juejin6 小时前
原型与原型链
javascript
还有多久拿退休金8 小时前
我用 Three.js 造了个 3D 漫步世界,角色走路像喝醉了——以及我是怎么修好的
前端·vue.js
LJA648448 小时前
为什么 AI 时代更需要配置化组件库
vue.js
008爬虫实战录9 小时前
【码上爬】 题十二:如来神掌 困难, JSVMP加密,使用代理补环境
前端·javascript·node.js
threelab9 小时前
Three.js 数学函数着色器 | 三维可视化 / AI 提示词
javascript·人工智能·着色器
ZC跨境爬虫10 小时前
跟着 MDN 学CSS day_3:(为一个传记页面添加样式)
前端·javascript·css·ui·音视频·html5
夜雪闻竹10 小时前
sql.js WASM 实战:浏览器里跑 SQLite
javascript·sql·wasm