JavaScript中7种常见删除数组中指定元素的方法(含代码)

2024-04-08 1285阅读

在JavaScript中,有多种方法可以从数组中删除指定的元素。以下是几种常见的方法:

JavaScript中7种常见删除数组中指定元素的方法(含代码)

1. 使用 splice() 方法

2.1 splice介绍

JavaScript的splice()方法是一个非常强大的数组方法,它允许你同时从数组中删除和添加元素。splice()方法可以接受两个参数:开始修改数组的索引位置和要删除的元素数量。之后,你可以添加任意数量的新元素到该位置。

下面是splice()方法的基本使用方法:

let arr = [1, 2, 3, 4, 5];  
arr.splice(index, deleteCount, item1, ..., itemX);

参数说明:

  • index(必需):开始修改数组的索引位置。如果为负值,则从数组尾部开始计算位置。
  • deleteCount(必需):要删除的元素数量。如果设置为0,则不会删除任何元素。如果省略,则默认删除从index位置到数组末尾的所有元素。
  • item1, ..., itemX(可选):要添加到数组的新元素。

    注意:splice()方法会直接修改原始数组,并返回被删除的元素(如果有)。如果没有元素被删除,则返回一个空数组。

    2.2 代码实现

    splice() 方法可以同时从数组中删除和添加元素。如果只提供了两个参数,那么它只会删除元素。

    let arr = [1, 2, 3, 4, 5];  
    let index = arr.indexOf(3); // 找到要删除的元素的索引  
    if (index !== -1) { // 确保元素存在于数组中  
        arr.splice(index, 1); // 删除一个元素  
    }  
    console.log(arr); // 输出: [1, 2, 4, 5]
    

    2. 使用 filter() 方法

    2.1 filter介绍

    JavaScript的filter()方法是一个非常有用的数组方法,它创建一个新数组,新数组中的元素是通过检查指定条件为真的元素。这个方法不会改变原始数组。

    这是filter()方法的基本语法:

    javascript复制代码
    let newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
    

    参数说明:

    • callback:必需。测试每个元素是否符合条件的函数,该函数应返回一个布尔值。
    • thisArg:可选。执行 callback 函数时使用的 this 值。

      回调函数callback接收以下参数:

      • element:必需。数组中正在处理的当前元素。
      • index(可选):数组中正在处理的当前元素的索引。
      • array(可选):filter 被调用的数组。

        回调函数callback应该返回一个布尔值,以指示元素是否应包含在新数组中。如果返回 true,则该元素将包含在新数组中;如果返回 false,则不包含。

        2.2 代码实现

        let arr = [1, 2, 3, 4, 5];  
        let newArr = arr.filter(item => item !== 3); // 过滤掉等于3的元素  
        console.log(newArr); // 输出: [1, 2, 4, 5]
        

        3. 使用 delete 运算符

        3.1 delete介绍

        JavaScript 中的 delete 运算符用于删除对象的属性或数组的元素。

        当用于对象时,delete 运算符将删除对象的指定属性。如果该属性存在,则该属性及其相关联的值将被完全删除。如果该属性不存在,则 delete 运算符将返回 false。

        需要注意的是,delete 运算符只会删除引用类型的属性或元素,而不能删除基本类型的属性或元素。此外,删除后的属性或元素将被设置为 undefined,而不是完全消失。

        3.2 代码实现

        delete 运算符可以删除数组的元素,但是不会影响其他数组元素,也不会改变数组的长度。

        let arr = [1, 2, 3, 4, 5];  
        let index = arr.indexOf(3); // 找到要删除的元素的索引  
        if (index !== -1) { // 确保元素存在于数组中  
            delete arr[index]; // 删除元素  
        }  
        console.log(arr); // 输出: [1, 2, undefined, 4, 5]
        

        4. 使用 for 循环和 splice() 方法

        我们可以使用 for 循环遍历数组,并在遍历过程中使用 splice() 方法删除元素。

        let arr = [1, 2, 3, 4, 5];  
        for (let i = 0; i  
        

        5. 使用 includes() 方法

        5.1 includes介绍

        includes() 是 JavaScript 中的一个数组方法,用于检查数组中是否包含特定的元素。如果数组包含该元素,则返回 true,否则返回 false。

        语法:

        javascript复制代码
        arr.includes(searchElement[, fromIndex])
        
        • searchElement:必需。要在数组中查找的值。
        • fromIndex:(可选)开始搜索的位置。如果该索引值大于或等于数组长度,则返回 false。如果该索引值小于0,则将其视为0。默认值为 0。

          注意事项:

          • includes() 方法对NaN的处理与 == 和 === 运算符不同。例如,[NaN].includes(NaN) 的结果为 false。
          • 与 indexOf() 方法相比,includes() 方法在查找 NaN 时表现得更准确。例如,[NaN].indexOf(NaN) 的结果为 -1,而 [NaN].includes(NaN) 的结果为 false。

            5.2 代码实现

            我们可以使用 includes() 方法检查数组中是否存在指定的元素,如果存在,则使用 splice() 方法删除它。这种方法可以避免在循环中使用复杂的条件判断。

            let arr = [1, 2, 3, 4, 5];  
            let itemToRemove = 3; // 要删除的元素  
            let index = arr.indexOf(itemToRemove); // 在数组中查找要删除的元素的索引  
            if (index !== -1) { // 如果元素存在于数组中,则删除它  
                arr.splice(index, 1); // 使用splice()删除元素,并返回被删除的元素(虽然在这个例子中我们不需要它)  
            }  
            console.log(arr); // 输出: [1, 2, 4, 5]
            

            6. 使用 shift() 或 pop() 方法

            6.1 shift介绍

            shift() 是 JavaScript 中的一个数组方法,用于删除并返回数组的第一个元素。

            语法:

            arr.shift()
            

            注意事项:

            • shift() 方法会改变原数组。
            • 如果数组为空,则 shift() 方法不返回任何值,也不更改数组。

              6.2 代码实现

              shift() 方法删除并返回数组的第一个元素,而 pop() 方法删除并返回数组的最后一个元素。

              let arr = [1, 2, 3, 4, 5];  
              let itemToRemove = 3; // 要删除的元素  
              arr.splice(arr.indexOf(itemToRemove), 1); // 删除元素  
              console.log(arr); // 输出: [1, 2, 4, 5]
              

              7. 使用 map() 方法

              7.1 map介绍

              map() 是 JavaScript 中的一个数组方法,用于创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后的结果。

              语法:

              javascript复制代码
              arr.map(callback(currentValue, index, array)[, thisArg])
              
              • callback:必需。为数组中每个元素执行的函数,并返回一个由回调函数返回的结果组成的数组。
              • thisArg:(可选)执行回调函数时使用的 this 值。
              • 注意事项:

                • map() 方法不会改变原始数组。
                • 如果提供的回调函数在某个位置返回 undefined,则该位置在新数组中将被设置为 undefined。

                  7.2 代码实现

                  map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后的结果。如果提供的函数在某个位置返回 false,则该位置的元素不会被包括在新数组中。

                  let arr = [1, 2, 3, 4, 5];  
                  let newArr = arr.map(item => item !== 3); // 过滤掉等于3的元素  
                  console.log(newArr); // 输出: [1, 2, 4, 5]
                  
VPS购买请点击我

免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

目录[+]