JavaScript，普通数组成员操作，如何添加和删除？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

总结一下浏览器或者node环境下，js的数组操作。主要涉及三种情况：目标数据在尾部，目标数据在头部，目标数据位置不定。当然，具体来说，每个函数都有各自的使用场景，不能一概而论。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的编程经验文章。测试环境：chrome@131.0.6778.70，nodejs@20.18.0。

普通变量和对象变量

本文代码正确执行的前提是，数组成员是普通变量，例如：数字/字符串等，而不是对象object。主要涉及到的两个变量是否相等比较。普通的基础变量，可以直接做比较。而对象用==或者===做比较的时候，会比较的是引用地址。会得出和大家的潜意识所不一样的结论。另外，还会有浅比较和深比较的说法。总之，对象object的情况，另外开题。

let a = "苏南";
let b = 123;
let c = true;
let d = { name: "苏南大叔" };
console.log(a === "苏南");                // true
console.log(b === 123);                  // true
console.log(c === true);                 // true
console.log(c === 1);                    // false
console.log(d === { name: "苏南大叔" });  // false
// This condition will always return 'false' since JavaScript compares objects by reference, not value.

参考文章：

• https://newsn.net/say/js-equal-equal.html

push 和 pop

let a = ["苏", "南", "大"];
b = a.push("叔");
console.log(a);     // ['苏', '南', '大', '叔']
console.log(b);     // 4
c = a.pop();
console.log(a);     // ['苏', '南', '大']
console.log(c);     // 叔

push()和pop()，操作的都是数组本身。

• push()返回值是新的数组长度！并不是新的数组。压入栈底，返回长度。
• pop()返回值是最后一个元素。没有参数！弹出栈底，返回元素。

这组操作，就跟玩儿似得...

shift 和 unshift

let a = ["南", "大", "叔"];
d = a.unshift("苏");
console.log(a);       // ['苏', '南', '大', '叔']
console.log(d);       // 4
e = a.shift();
console.log(a);       // ['南', '大', '叔']
console.log(e);       // 苏

结论是：

• unshift()类似于push()，压入【栈顶】，返回长度。
• shift()类似于pop()，压出【栈顶】，返回元素。

参考文章：

• https://newsn.net/say/js-arr-shift.html

攻防兼备 splice

这个splice厉害了，在指定位置删除数据，或者添加数据，都可以。不过这个方法，没有办法指定要删除的值。除非配合其它方法。

let a = ["苏", "大", "叔"];
f = a.splice(1, 0, "南");
console.log(a);           // ['苏', '南', '大', '叔']
console.log(f);           // []
g = a.splice(2, 1);
console.log(a);           // ['苏', '南', '叔']
console.log(g);           // ['大']

第一个参数是位置，第一个元素位置为0。
第二个参数是删除几个，0就是不删除，返回被删除的值。
第三个参数是要添加进去的参数，没有就是不添加。

参考文章：

• https://newsn.net/say/js-splice.html

[] 和 filter 【推荐】

let a = ["苏", "南"];
a[a.length] = "叔";
a[a.length] = "叔";
a[a.length] = "写文章";
console.log(a);              // ['苏', '南', '叔', '叔', '写文章']
f = a.filter((item) => item !== "叔");
console.log(a);              // ['苏', '南', '叔', '叔', '写文章']
console.log(f);              // ['苏', '南', '写文章']

a[a.length]，压箱底的方法，万能。和push()是差不多的意思。
a.filter()，不改变原数组，对目标数组进行指定筛选。

[] 和 indexOf

let a = ["苏", "南"];
a[a.length] = "叔";
a[a.length] = "叔";
a[a.length] = "写文章";
console.log(a);             // ['苏', '南', '叔', '叔', '写文章']

let target = "叔";
let index = a.indexOf(target);
while (index != -1) {
  a.splice(index, 1);
  index = a.indexOf("叔");
}
console.log(a);             // ['苏', '南', '写文章']

这里的.indexOf()解决了.splice()不能指定要删除目标的问题。

如果删除指定目标的操作a.splice(index, 1);换成delete a[index];，理论上来说，也是可以。但是，看输出的话，就可以发现两者有本质的区别。delete操作会留下坑位empty。

let a = ["苏", "南", "叔", "叔", "写文章"];
let target = "叔";
let index = a.indexOf(target);
while (index != -1) {
  delete a[index];
  index = a.indexOf("叔");
}
console.log(a);             // ['苏', '南', empty × 2, '写文章']

切分和联合

当然，这里还有很多其它方案，解决这个问题。

let a = ["苏", "南", "叔", "写文章"];
a1 = a.slice(0, 2);          // 0号位置2个单位
a2 = a.slice(2);             // 2号位置到尾部
o = a1.concat(["大"], a2);
console.log(o);              // ['苏', '南', '大', '叔', '写文章']

index = o.indexOf("南");
if (index !== -1) {
  k1 = o.slice(0, index);
  k2 = o.slice(index + 1);
  k = k1.concat(k2);
}
console.log(k);              // ['苏', '大', '叔', '写文章']

参考文章：

• https://newsn.net/say/js-slice.html
• https://newsn.net/say/js-array-merge.html

结语

方法挺多的，看具体的需求使用即可。

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。