Web/07-JavaScript进阶/数组的进阶操作.md
2022-08-05 22:47:51 +08:00

98 lines
2.0 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: 数组的进阶操作
---
## 删除数组的元素
现在有这样一个需求:遍历数组的同时,删除数组中的所有元素。
思路:我们可以想到的办法是使用数组的 splice() 方法,此外还有 JS 的 delete 关键字。
需要注意的是:使用数组的 splice() 方法删除数组元素之后,数组的长度会发生变化;使用 delete 删除数组中的元素之后,**数组的长度不会发生变化**。
下面来看看具体写法。
### 使用数组的 splice() 方法
写法1错误
```js
let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr.length);
arr.splice(i, 1);
}
console.log(arr);
```
打印结果及解释:
```bash
数组长度的打印结果5、4、3
arr最终的值[2, 4]
```
写法1的错误在于没有意识到splice方法会使 arr 的长度不断变化。
写法2错误
```js
let arr = [1, 2, 3, 4, 5];
const len = arr.length;
for (let i = 0; i < len; i++) {
console.log(arr.length);
arr.splice(i, 1);
}
console.log(arr);
```
打印结果:
```bash
数组长度的打印结果5、4、3、2、2
arr最终的值[2, 4]
```
上方代码,依然没有达到预期的结果。
写法3正确写法从末尾开始删除元素
```js
let arr = [1, 2, 3, 4, 5];
for (let i = arr.length - 1; i >= 0; i--) {
console.log(arr.length);
arr.splice(i, 1);
}
console.log(arr);
console.log(arr.length);
```
打印结果及解释:
```bash
数组长度的打印结果:// 5、4、3、2、1
arr最终的值[]
arr最终的长度0
```
### 使用 delete 关键字
```js
let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr.length);
// 注意点: 通过 delete 删除数组中的元素, 数组的长度不会发生变化
delete arr[i];
}
console.log(JSON.stringify(arr));
```
打印结果及解释:
```bash
数组长度的打印结果5、5、5、5、5
最终的arr是空数组长度为5[null, null, null, null ,null]
```