迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

如何在 JavaScript 中清空一个数组

作者:迹忆客 最近更新:2024/03/16 浏览次数:

数组是存储在一个方便的、有索引的集合中的元素集合。如果我们想清空一个包含乘法项的数组怎么办?

本教程介绍了如何在 JavaScript 中清空数组的不同方法。


JavaScript 将数组设置为大小为零的新数组

这是最快的方法。这将把数组设置为一个新的空数组。

let Arr = [1, 2, 3, 4];
Arr = [];

如果你没有任何其他地方对原数组的引用,这是很直接的。如果你这样做,这些引用不会被更新,这些地方将继续使用旧数组。这意味着对以前的数组内容的引用仍然保留在内存中,导致内存泄漏。

只有当你用原来的变量 Arr 来引用数组时,才可以使用这个方法。

下面的代码示例显示了使用该方法时可能遇到的问题。

let Arr1 = [1, 2, 3, 4, 5, 6];
let Arr2 = Arr1;
Arr1 = [];
console.log({Arr1, Arr2});

输出:

{
  Arr1: [],
  Arr2: [1, 2, 3, 4, 5, 6]
}

在 JavaScript 中使用 length 属性清空一个数组

它通过将现有数组的长度设置为 0 来清除现有数组,数组的长度属性是一个读/写属性,所以在 ECMAScript 5 中使用严格模式时也可以使用。

Arr1.length = 0

这种方式有一个优点,因为它删除了数组中的所有内容,这确实会影响其他引用。如果我们有两个对同一个数组的引用,我们使用 Arr1.length = 0 删除数组的内容,现在两个引用都将指向同一个空数组。

例子:Arr1.length = 0

let foo1 = [1, 2, 3];
let bar1 = [1, 2, 3];
let foo2 = foo1;
let bar2 = bar1;
foo1 = [];
bar1.length = 0;
console.log({foo1, bar1, foo2, bar2});

输出:

{
  bar1: [],
  bar2: [circular object Array],
  foo1: [],
  foo2: [1, 2, 3]
}

在 JavaScript 中使用 splice() 方法清空一个数组

array.splice() 方法是 JavaScript 中的一个内置方法,用于在数组中添加/删除项目,并返回删除的项目。

let Arr1 = ['Tomato', 'Letcuce', 'Spinash', 'Cucumber'];
Arr1.splice(2, 0, 'Lemon', 'Kiwi')
console.log(Arr1);

输出:

["Tomato", "Letcuce", "Lemon", "Kiwi", "Spinash", "Cucumber"]

清空数组:

Arr1.splice(0, Arr1.length);
console.log(Arr1);

输出:

[]

它从数组中删除所有元素,并将清理原始数组。


在 JavaScript 中使用 pop() 方法清空一个数组

pop() 方法从一个数组中删除最后一个元素,并返回该元素。并且会改变数组的长度。

let vegetables = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(vegetables.pop());

console.log(vegetables);

输出:

tomato
(4) ["broccoli", "cauliflower", "cabbage", "kale"]

我们在数组上循环,每循环一次就弹出一个数组元素,最后得到一个空数组。

let Arr1 = [1, 2, 3, 4, 5];
for (let i = Arr1.length; i > 0; i--) {
  Arr1.pop();
}
console.log(Arr1);

输出:

[]

该解决方案不是很简洁,它也是最慢的解决方案。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便