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.
参考文章:
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()
不能指定要删除目标的问题。
如果删除指定目标的操作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); // ['苏', '大', '叔', '写文章']
参考文章:
结语
方法挺多的,看具体的需求使用即可。
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。