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

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

苏南大叔:JavaScript,普通数组成员操作,如何添加和删除成员? - js数组成员的添加和删除
JavaScript,普通数组成员操作,如何添加和删除成员?(图3-1)

苏南大叔的“程序如此灵动”博客,记录苏南大叔的编程经验文章。测试环境:chrome@131.0.6778.70nodejs@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.

参考文章:

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(),压出【栈顶】,返回元素。

参考文章:

攻防兼备 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就是不删除,返回被删除的值。
第三个参数是要添加进去的参数,没有就是不添加。

参考文章:

[] 和 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()不能指定要删除目标的问题。

苏南大叔:JavaScript,普通数组成员操作,如何添加和删除成员? - 代码测试一
JavaScript,普通数组成员操作,如何添加和删除成员?(图3-2)

如果删除指定目标的操作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, '写文章']

苏南大叔:JavaScript,普通数组成员操作,如何添加和删除成员? - 代码测试二
JavaScript,普通数组成员操作,如何添加和删除成员?(图3-3)

切分和联合

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

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);              // ['苏', '大', '叔', '写文章']

参考文章:

结语

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js