对JS删除数组中的某个元素进行的一个小封装
扩展一个数组删除函数,删除时会改变数组自身的长度,这个方法将直接更改原数组
方式一
参数被限制为 [Number] 或者 [Object],
[Number] 默认会当做是下标,会删除以这个数字为下标位置。
[Object] 删除 === [Object] 的这个对象
/**
* 扩展一个数组删除函数,删除时会改变数组自身的长度,这个方法将直接更改原数组
* 当传入下标时会直接删除这个下标的元素。当传入对象时,会删除这个对象。
* @param obj 下标或者一个对象。
* @returns {Array} 返回数组本身,以方便链式操作。
*/
Array.prototype.remove = function (obj) {
let index = -1;
if(Object.prototype.toString.call(obj) === '[object Number]'){
index = obj;
}else{
for (let i = 0; i < this.length; i++) {
if(this[i] === obj){
index = i;
break;
}
}
}
if(index>-1) this.splice(index, 1);
return this;
};
//测试数组一
let arr = [
{name: '张三'},
"a",
1,
]
console.log(JSON.stringify(arr)); //[{"name":"张三"},"a",1] 打印原数组
arr.remove(arr[0])
console.log(JSON.stringify(arr)); //["a",1] 删除了第一个元素后打印
arr.remove(arr[0])
console.log(JSON.stringify(arr)); //[1] 再次删除第一个元素打印
arr.remove(arr[0])
console.log(JSON.stringify(arr.length)); //0 再次删除第一个元素后,数组为空
//测试数组二
let arr2 = [
{name: '李四'},
"b",
2,
false,
[1]
]
console.log(JSON.stringify(arr2.remove(0).reverse())) //[[1],false,2,"b"] 链式操作,删除下标为 0 的元素后,反转数组
let temp = arr2[1];
console.log(JSON.stringify(arr2.remove(temp).remove(2))) //[[1],2] 链式操作,删除 temp 元素对象后,删除数组中下标为 2 的元素
方式二 (兼容方式一)
参数被限制为 [Number] 、 [Object]、[Function],
[Number] 默认会当做是下标,会删除以这个数字为下标位置。
[Object] 删除 === [Object] 的这个对象
[Function] 以回调方式,将 item 交给开发者进行判断是否删除,回调结果为 true 则删除
/**
* 此方法会改变原数组
* 通过索引或者对象或者回调函数结果,将数组中的某个元素删除
* @param obj {Number|Object|Function} 下标或者一个对象。
* [Number] 默认会当做是 下标,会删除以这个数字为下标位置
* [Object] 删除 === [Object] 的对象
* [Function] 以回调方式,将 item 交给开发者进行判断是否删除,回调结果为 true 则删除
* @returns {this} 返回数组本身,以方便链式操作。
*/
Array.prototype.remove = function (obj) {
let type = Object.prototype.toString.call(obj);
if (type === '[object Number]') {
if (obj > -1) this.splice(obj, 1);
} else if (type === '[object Function]') {
for (let i = 0; i < this.length; i++) {
if (obj(this[i])) {
this.splice(i--, 1);
}
}
} else {
for (let i = 0; i < this.length; i++) {
if (this[i] === obj) {
this.splice(i--, 1)
}
}
}
return this;
};
let zhangsan = {name: '张三'};
//测试一
let arr = [
zhangsan,
zhangsan,
"a",
1,
]
console.log("测试一 obj === [Number]/[Object]")
console.log("原数组")
console.log(JSON.stringify(arr)); //[{"name":"张三"},{"name":"张三"},"a",1] 打印原数组
console.log("----------------")
console.log("删除 zhangsan 对象")
arr.remove(zhangsan)
console.log(JSON.stringify(arr)); //["a",1] 删除 {张三} 打印
console.log("----------------")
console.log("删除 'a' ")
arr.remove(arr[0])
console.log(JSON.stringify(arr)); //[1] 再次删除第一个元素打印
console.log("----------------")
console.log("删除 1 ")
arr.remove(arr[0])
console.log(JSON.stringify(arr.length)); //0 再次删除第一个元素后,数组为空
console.log("==========================")
//测试二
let arr2 = [1, 2, 3, 4, 5, 6]
console.log("测试二 obj === Function ")
console.log("打印原数组")
console.log(JSON.stringify(arr2))
console.log("----------------")
arr2.remove(item => item % 2 === 0);
console.log("删除偶数后结果")
console.log(JSON.stringify(arr2))
console.log("==========================")
console.log("测试三")
//测试三
let arr3 = [
"b",
2,
false,
[1]
]
console.log("测试三 链式操作")
console.log("打印原数组")
console.log(JSON.stringify(arr3))
console.log("----------------")
console.log("删除 'b' 后对数组进行倒序")
console.log(JSON.stringify(arr3.remove(0).reverse())) //[[1],false,2,"b"] 链式操作,删除下标为 0 的元素后,反转数组
let temp = arr3[1];
console.log(JSON.stringify(arr3.remove(temp).remove(2))) //[[1],2] 链式操作,删除 temp 元素对象后,删除数组中下标为 2 的元素