扩展JavaScript数组(Array)添加删除元素方法

简介: 在JavaScript数组中,有很多不便之处,比如直接使用delete关键字删除数组中的一个元素是会产生空位的。文本为JavaScript数组(Array)扩展添加删除元素方法。

为JavaScript数组(Array)扩展
添加删除元素方法


作者:jcLee95

已入驻阿里云博客

邮箱:291148484@163.com
本文地址:
- https://developer.aliyun.com/article/
- https://blog.csdn.net/qq_28550263/article/details/121710541

目 录


1. 引言:没有依索引删除元素的JavaScript数组(Array)

2. 删除一个动态数组需要完成的事情

3. 代码实现


1. 引言:没有依索引删除元素的JavaScript数组(Array)

在JavaScript数组中,直接使用delete关键字删除数组中的一个元素是会产生空位的。比如:

vara= [0,1,2,3,4,5,6]
deletea[2]
console.log(a);

NodeJS-OutPut[]:

[ 0, 1, <1 empty item>, 3, 4, 5, 6 ]

这表明,该方法仅仅是将索引处对应元素的值给抹掉了(成了udefined),除此之外数组还是那个数组,就连长度都没变。因此算不上真正意义的删除。

2. 删除一个动态数组需要完成的事情

这里必须区分一些动态链表表示的数组,由于链表是由节点构成的,其删除中间的某个元素只需将删除处前一个结点的后继指向删除处的后继节点。(如果是双链表还需要修改原后继的前驱指针)

但是JavaScript的数组不是基于链表实现的,其删除中间某个索引处元素后必须逐个移动后面的元素,最后将先前最后一个空位所占用的空间释放出来。

因此,要让JavaScript数组删除后得到一个我们一般期待的新数组,需要做这三件事:

  • 删除索引处的元素;
  • 将后面的元素依次前移以填补空位;
  • 从数组中弹出原最后一个元素。

3. 代码实现

通过 ES 6 类的语法实现如下:

classListextendsArray{
drop(index){
deletethis[index];
for(leti=index;i<this.length-index+1;i++){
this[i] =this[i+1];
    }
this.pop()
  }
}

使用方式:

leta=newList(0,1,2,3,4,5,6)
console.log('删除元素前:');
console.log(a);
console.log(a.length);
a.drop(2)
console.log('删除元素后:');
console.log(a);
console.log(a.length);

NodeJS-OutPut[]:

删除元素前:
List(7) [
  0, 1, 2, 3,
  4, 5, 6
]
7
删除元素后:
List(6) [ 0, 1, 3, 4, 5, 6 ]
6

如果使用的是TypeScript,请添加类型注释:

不限制类型:

class List extends Array{
  drop(index){
    delete this[index];
    for(let i=index;i<this.length-index+1;i++){
      this[i] = this[i+1];
    }
    this.pop()
  }
}

限制类型:

classList<T>extendsArray<T>{
drop(index:number){
deletethis[index];
for(leti=index;i<this.length-index+1;i++){
this[i] =this[i+1];
    }
this.pop()
  }
}

附: tsc编译

var__extends= (this&&this.__extends) || (function () {
varextendStatics=function (d, b) {
extendStatics=Object.setPrototypeOf||            ({ __proto__: [] } instanceofArray&&function (d, b) { d.__proto__=b; }) ||function (d, b) { for (varpinb) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] =b[p]; };
returnextendStatics(d, b);
    };
returnfunction (d, b) {
if (typeofb!=="function"&&b!==null)
thrownewTypeError("Class extends value "+String(b) +" is not a constructor or null");
extendStatics(d, b);
function__() { this.constructor=d; }
d.prototype=b===null?Object.create(b) : (__.prototype=b.prototype, new__());
    };
})();
varList=/** @class */ (function (_super) {
__extends(List, _super);
functionList() {
return_super!==null&&_super.apply(this, arguments) ||this;
    }
List.prototype.drop=function (index) {
deletethis[index];
for (vari=index; i<this.length-index+1; i++) {
this[i] =this[i+1];
        }
this.pop();
    };
returnList;
}(Array));
目录
相关文章
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
1869 0
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
1816 80
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储 Go 索引
go语言中的数组(Array)
go语言中的数组(Array)
472 67
|
人工智能 Java
Java 中数组Array和列表List的转换
本文介绍了数组与列表之间的相互转换方法,主要包括三部分:1)使用`Collections.addAll()`方法将数组转为列表,适用于引用类型,效率较高;2)通过`new ArrayList&lt;&gt;()`构造器结合`Arrays.asList()`实现类似功能;3)利用JDK8的`Stream`流式计算,支持基本数据类型数组的转换。此外,还详细讲解了列表转数组的方法,如借助`Stream`实现不同类型数组间的转换,并附带代码示例与执行结果,帮助读者深入理解两种数据结构的互转技巧。
1178 1
Java 中数组Array和列表List的转换
|
测试技术 PHP 开发者
PHP 数组查找:为什么 `isset()` 比 `in_array()` 快得多?
PHP 数组查找:为什么 `isset()` 比 `in_array()` 快得多?