JS 数组删除元素

对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 的元素

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容