在javascript中的Array子类中使用.splice方法?

2024-04-23

我正在尝试创建 javascript 数组的子类。我想使用数组类型参数启动子类,并添加一个方法来从数组(子类)中删除元素。

我的代码如下所示:

class CustomArray extends Array {
        
  constructor(array) {
    console.log('Initiating array:', array)
    super(...array);
  }

  remove(element) {
    let index = this.indexOf(element);
    if (index > -1) {
      return this.splice(index, 1);
    } 
    return [];
  }

}

var a = ['a', 'b', 'c', 'd', 'e'];

var list = new CustomArray(a)
console.log('list:', list);
console.log('remove:', list.remove('c'));
console.log('list:', list);

问题是当我打电话时。拼接() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice它从数组中删除元素,但也返回已删除元素的数组,实际上它返回我的子类 CustomArray 的新实例,该实例应该使用数组类型的参数启动,但 .splice() 使用整数类型的参数启动它。

这是我认为当我打电话时会发生的情况的示例。拼接() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice:

假设我们有实例list of CustomArray以争论开始的课程['a','b','c','d','e']然后我们调用方法list.remove('c')。 (就像代码片段中一样)。
Method remove of CustomArray类检查索引c在数组中['a','b','c','d','e'],即2然后调用method this.splice(2,1)这应该删除数组中索引 2 处的 1 个元素['a','b','c','d','e']。方法splice删除元素c形成数组,但也返回类似的东西new CustomArray(1)因为从数组中删除了一个元素,所以它尝试创建长度为 1 的数组,但失败了,因为类CustomArray是期望数组。

我想阻止splice方法从启动一个新实例CustomArray类并返回普通数组(Array 对象的实例)。

jsbin链接。 https://jsbin.com/boqomuj/1/edit?js,console


有可能有splice返回一个标准数组——所以不需要它调用你的构造函数。这是通过改变@@species财产 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species您的自定义类的,它确定将使用哪个构造函数。但要注意,这不仅会影响splice, 但是也all其他创建新实例的方法,包括map, filter, slice, ...

您可以更改@@species通过覆盖相应的静态 getter 来获取属性:

class CustomArray extends Array {
  static get [Symbol.species]() { return Array; } // <-----------

  constructor(array) {
    console.log('Initiating array:', array)
    super(...array);
  }

  remove(element) {
    let index = this.indexOf(element);
    if (index > -1) {
      return this.splice(index, 1); // Now calls Array constructor, not CustomArray
    } 
    return [];
  }

}

var a = ['a', 'b', 'c', 'd', 'e'];

var list = new CustomArray(a)
console.log('list:', list);
console.log('remove:', list.remove('c'));
console.log('list:', list);

// Some examples of effects on other methods
console.log(list.map(x => x) instanceof CustomArray); // false
console.log(list.filter(x => 1) instanceof CustomArray); // false
console.log(list.slice() instanceof CustomArray); // false
console.log(list.concat() instanceof CustomArray); // false
// Other methods, that do not return a new instance, are not affected:
console.log(list.reverse() instanceof CustomArray); // true
console.log(list.sort() instanceof CustomArray); // true
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在javascript中的Array子类中使用.splice方法? 的相关文章

  • 如何使用 javascript 创建一个 for 循环,返回一个月中剩余天数的新日期对象数组

    对于给定的日期 我需要返回一个数组 其中包含当月剩余的每一天的日期对象 我需要一个for循环创建new Date 对象设置为该月剩余的每一天 将它们添加到数组并返回该数组 我想出了代码来检索该月的剩余天数 但是由于某种原因我无法弄清楚循环
  • HTML5 - 创建画布视口

    我有一个 2D 数组 宽 30 下 20 然而 视口仅绘制横向 15 和向下 10 的内容 我最初有一个这样的游戏 我一直在努力实现这样的目标 这是我的小提琴 http jsfiddle net sTr7q http jsfiddle ne
  • 使用带有代码分割的汇总时,有什么方法可以保留包的目录结构吗?

    Context 给定这样的项目结构 src a module js b module js util js 两者都在哪里module js文件导入util js 使用以下配置 export default experimentalCodeS
  • Excel函数:引用单元格中的数组

    我在单元格 A1 中有一个数组 通过 A1 G6 J6 aa b ccc 1 现在我想将单元格 A1 用于 B1 中的数组公式 基本上B1应该是 B1 SUMPRODUKT C6 C12 B6 B12 G6 J6 但我不想直接引用 G6 J
  • Javascript 设置输入字段的值

    因为虽然我无法设置 type text 的输入字段的值 以前 我总是使用这样的东西
  • JavaScript 动态变量名称[重复]

    这个问题在这里已经有答案了 好吧 我想在用户单击时创建变量 每次单击都会添加一个新变量 我目前正在使用 jquery 和 javascript 我无法在服务器端执行此操作 这必须在浏览器中完成 newCount document getEl
  • 多维数组上的数组合并

    要么我是瞎子 要么我在任何地方都找不到这个问题 昨天我在合并数组时遇到了问题 我可以在 SO 的帮助下解决这个问题 今天 我再次遇到了合并数组的问题 但这一次是多维数组 我有一个数组 usergroup groups 和一个数组 userg
  • 如果 jQuery 验证失败,JSLint 有什么用?

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在 div 中加载页面?

    我被告知使用 Div 代替 iframe 是前进的方向 所以我使用横幅和主体中的框架 如何将我的index html加载到我的div中 你尝试过 jquery 的 load 吗 通过服务器端技术 您可以轻松地做到这一点
  • 如何像mysql一样对数组进行排序

    如何对与数据库数据相同的数组进行排序 我请求谷歌分析数据 数据是一个大数组 我想将数组与本地数据库中的一些其他字段连接起来 然后我再次扩展大数组 现在我想对大数组进行排序 这与使用我的 sql 相同 如下所示 select from ga
  • 检测“文件下载”弹出窗口何时关闭

    我有一个网页 用 JSF 制作 其中一些链接允许用户获取 PDF 文件 当用户点击这样的链接时 会显示一个等待弹出窗口 它是一个模式面板 因为 PDF 的生成可能很长 并且一旦创建文件 IE 就会显示 文件下载 弹出窗口 建议 打开 保存
  • JavaScript:发送 POST,重定向到响应

    我有一个带有 onclick 的图像 当单击事件触发时 我想发送 HTTP POST 并将 window location 重定向到 POST 的响应 我怎样才能做到这一点 只需将按钮绑定到表单元素的提交方法 重定向就会自然发生
  • 窗口位置替换 - 超时帮助? JavaScript问题

    我曾尝试找到一种方法 在我的代码中添加超时 然后再重定向您 我用谷歌搜索并找到了一些帮助 但他们都没有达到我的预期 这会提示用户出生年份并计算年龄 大致 如果用户未满18岁 则带他们去迪士尼乐园 否则允许进入 函数年龄按钮 var AskD
  • Chrome 无法识别我对 javascript 文件的更改并加载旧代码?

    我在这里坐了将近一个小时来测试我正在构建的网站 由于我想查看代码中的新更改 因此我重新加载了代码 但它正在重新加载旧代码 我打开了 devetools 进行硬重新加载和清空缓存硬重新加载 它们都加载我的旧代码 我进入隐身模式 它做了同样的事
  • 在函数内部使用时,c 数组大小会发生变化

    我有这段代码 include
  • NestJs:如何使 Body 输入形状与实体的 DTO 不同?

    我的照片和标签对象有 DTO 如下所示 export class PhotoDto readonly title string readonly file string readonly tags TagDto export class T
  • 使用 javascript 在字符串中查找电子邮件地址

    我想做的是从字符串中提取电子邮件地址SomeName First email protected cdn cgi l email protection 这是我已经尝试过的代码 var stringToSearchIn SomeName Fi
  • 指向数组的指针 int (*ptr)[]

    我想了解指向数组的指针如何工作 代码片段 include
  • 将文本字段输入限制为仅数字

    我搜索过谷歌 但我能找到的所有解决方案都非常复杂和冗长 我需要的是将我正在进行的调查中的文本字段的输入限制为仅数字 最快 最干净的方法是什么 我使用的是严格的 HTML 4 01 和 ECMAScript 提前致谢 最快
  • 创建一个跨浏览器 mixin 进行转换:旋转

    我想为 sass 创建一个 mixin 它将对指定元素应用旋转 mixin 应采用一个参数 表示要应用的旋转度数 从 css3please com 我找到了一种使用 CSS 实现此功能的跨浏览器方法 box rotate moz trans

随机推荐