扩展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));
目录
相关文章
|
1月前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
1月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
27 2
|
1月前
|
存储 Java
Java“(array) <X> Not Initialized” (数组未初始化)错误解决
在Java中,遇到“(array) &lt;X&gt; Not Initialized”(数组未初始化)错误时,表示数组变量已被声明但尚未初始化。解决方法是在使用数组之前,通过指定数组的大小和类型来初始化数组,例如:`int[] arr = new int[5];` 或 `String[] strArr = new String[10];`。
|
1月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
25 3
|
1月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
34 1
|
1月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
18 0
|
1月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
23 0
|
6月前
|
Python
使用array()函数创建数组
使用array()函数创建数组。
133 3
|
1月前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
27 3
|
1月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)