ฉันมีชุดของตัวเลขและฉันใช้.push()วิธีการเพิ่มองค์ประกอบ

มีวิธีง่าย ๆ ในการลบองค์ประกอบเฉพาะออกจากอาร์เรย์หรือไม่?

ฉันกำลังมองหาสิ่งที่เทียบเท่า:

array.remove(number);

ฉันต้องใช้จาวาสคริปต์หลัก ไม่อนุญาตกรอบงาน

ค้นหาindexขององค์ประกอบอาร์เรย์ที่คุณต้องการที่จะลบโดยใช้และเอาดัชนีที่มีindexOfsplice

splice () วิธีการเปลี่ยนแปลงเนื้อหาของอาร์เรย์โดยการลบองค์ประกอบที่มีอยู่และ / หรือเพิ่มองค์ประกอบใหม่

const array = [2, 5, 9];

console.log(array);

const index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}

// array = [2, 9]
console.log(array); 

พารามิเตอร์ที่สองของspliceคือจำนวนองค์ประกอบที่จะลบ โปรดทราบว่าการspliceปรับเปลี่ยนอาร์เรย์ในสถานที่และส่งกลับอาร์เรย์ใหม่ที่มีองค์ประกอบที่ถูกลบ

สำหรับเหตุผลของความสมบูรณ์นี่คือฟังก์ชั่น ฟังก์ชั่นแรกจะลบเพียงเหตุการณ์เดียว (เช่นการลบการจับคู่ครั้งแรก5จาก[2,5,9,1,5,8,5]) ในขณะที่ฟังก์ชั่นที่สองเอาเหตุการณ์ที่เกิดขึ้นทั้งหมด:

function removeItemOnce(arr, value) { 
    var index = arr.indexOf(value);
    if (index > -1) {
        arr.splice(index, 1);
    }
    return arr;
}

function removeItemAll(arr, value) {
    var i = 0;
    while (i < arr.length) {
        if(arr[i] === value) {
            arr.splice(i, 1);
        } else {
            ++i;
        }
    }
    return arr;
}

ฉันไม่รู้ว่าคุณคาดหวังว่าarray.remove(int)จะประพฤติตนอย่างไร มีความเป็นไปได้สามอย่างที่ฉันสามารถนึกได้ว่าคุณอาจต้องการ

ในการลบองค์ประกอบของอาร์เรย์ที่ดัชนีi:

array.splice(i, 1);

หากคุณต้องการลบทุกองค์ประกอบที่มีค่าnumberออกจากอาร์เรย์:

for(var i = array.length - 1; i >= 0; i--) {
    if(array[i] === number) {
        array.splice(i, 1);
    }
}

หากคุณต้องการทำให้องค์ประกอบที่ดัชนีiไม่มีอยู่อีกต่อไป แต่คุณไม่ต้องการให้ดัชนีขององค์ประกอบอื่นเปลี่ยนแปลง:

delete array[i];

แก้ไขเมื่อวันที่ 2559 ตุลาคม

• ทำได้ง่ายใช้งานง่ายและชัดเจน ( Occam's razor )
• ทำไม่เปลี่ยนรูป (อาร์เรย์เดิมไม่เปลี่ยนแปลง)
• ทำได้ด้วยฟังก์ชั่น JavaScript มาตรฐานหากเบราว์เซอร์ของคุณไม่รองรับ - ใช้ polyfill

ในตัวอย่างรหัสนี้ฉันใช้ฟังก์ชัน "array.filter (... )"เพื่อลบรายการที่ไม่ต้องการออกจากอาร์เรย์ ฟังก์ชั่นนี้จะไม่เปลี่ยนอาร์เรย์เดิมและสร้างใหม่ หากเบราว์เซอร์ของคุณไม่รองรับฟังก์ชั่นนี้ (เช่น Internet Explorer ก่อนรุ่น 9 หรือ Firefox ก่อนรุ่น 1.5) ให้ลองใช้ตัวกรอง polyfill จาก MozillaMozilla

การลบรายการ (รหัส ECMA-262 Edition 5 หรือที่รู้จัก JavaScript เก่า)

var value = 3

var arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(function(item) {
    return item !== value
})

console.log(arr)
// [ 1, 2, 4, 5 ]

การลบรายการ (รหัส ECMAScript 6)

let value = 3

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => item !== value)

console.log(arr)
// [ 1, 2, 4, 5 ]

สำคัญ ECMAScript 6 "() => {}" ไม่รองรับการใช้งานไวยากรณ์ของลูกศรใน Internet Explorer เลย, Chrome ก่อนรุ่น 45, Firefox รุ่นก่อน 22, และ Safari ก่อนรุ่น 10 หากต้องการใช้ ECMAScript 6 ไวยากรณ์ในเบราว์เซอร์เก่าคุณสามารถใช้BabelJS

การลบหลายรายการ (รหัส ECMAScript 7)

ข้อดีเพิ่มเติมของวิธีนี้คือคุณสามารถลบหลายรายการได้

let forDeletion = [2, 3, 5]

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => !forDeletion.includes(item))
// !!! Read below about array.includes(...) support !!!

console.log(arr)
// [ 1, 4 ]

สำคัญ "array.includes ( ... )" ฟังก์ชั่นไม่ได้รับการสนับสนุนใน Internet Explorer ที่ทุกคนก่อนที่จะ Chrome 47 รุ่น, Firefox ก่อน 43 รุ่น, Safari ก่อน 9 รุ่นและขอบก่อน 14 รุ่นเพื่อให้ที่นี่เป็น polyfill จาก Mozilla

การลบหลายรายการ (ในอนาคตอาจจะ)

หากข้อเสนอ"ไวยากรณ์นี้มีผลผูกพัน"เป็นที่ยอมรับคุณจะสามารถทำสิ่งนี้ได้:

// array-lib.js

export function remove(...forDeletion) {
    return this.filter(item => !forDeletion.includes(item))
}

// main.js

import { remove } from './array-lib.js'

let arr = [1, 2, 3, 4, 5, 3]

// :: This-Binding Syntax Proposal
// using "remove" function as "virtual method"
// without extending Array.prototype
arr = arr::remove(2, 3, 5)

console.log(arr)
// [ 1, 4 ]

ลองด้วยตัวคุณเองใน BabelJS :)

การอ้างอิง

• Array.prototype.includes
• องค์ประกอบการทำงาน

ขึ้นอยู่กับว่าคุณต้องการรักษาจุดที่ว่างเปล่าหรือไม่

หากคุณต้องการช่องว่างการลบเป็นเรื่องปกติ:

delete array[index];

หากไม่เป็นเช่นนั้นคุณควรใช้วิธีการประกบกัน :

array.splice(index, 1);

และถ้าคุณต้องการค่าของรายการนั้นคุณก็สามารถเก็บองค์ประกอบของอาร์เรย์ที่ส่งคืน:

var value = array.splice(index, 1)[0];

ในกรณีที่คุณต้องการที่จะทำในบางคำสั่งคุณสามารถใช้array.pop()สำหรับคนสุดท้ายหรือarray.shift()คนแรก (และทั้งสองคืนค่าของรายการเกินไป)

และถ้าคุณไม่รู้จักดัชนีของรายการคุณสามารถใช้array.indexOf(item)เพื่อรับมัน (ใน a if()เพื่อรับหนึ่งรายการหรือ a while()เพื่อรับทั้งหมด) array.indexOf(item)ส่งกลับทั้งดัชนีหรือ -1 ถ้าไม่พบ 

เพื่อนมีปัญหาในInternet Explorer 8และแสดงให้ฉันเห็นว่าเขาทำอะไร ฉันบอกเขาว่ามันผิดและเขาบอกฉันว่าเขาได้รับคำตอบที่นี่ คำตอบยอดนิยมปัจจุบันจะไม่ทำงานในเบราว์เซอร์ทั้งหมด (ตัวอย่างเช่น Internet Explorer 8) และจะลบรายการแรกที่เกิดขึ้นเท่านั้น

ลบอินสแตนซ์ทั้งหมดออกจากอาร์เรย์

function remove(arr, item) {
    for (var i = arr.length; i--;) {
        if (arr[i] === item) {
            arr.splice(i, 1);
        }
    }
}

มันวนลูปผ่านอาร์เรย์ไปข้างหลัง (เนื่องจากดัชนีและความยาวจะเปลี่ยนเมื่อมีการลบรายการ) และลบรายการหากพบ มันทำงานได้ในทุกเบราว์เซอร์

มีสองวิธีที่สำคัญ:

1. ประกบกัน () :anArray.splice(index, 1);

2. ลบ :delete anArray[index];

ระวังเมื่อคุณใช้ลบสำหรับอาร์เรย์ มันเป็นการดีสำหรับการลบคุณลักษณะของวัตถุ แต่ไม่ดีสำหรับอาร์เรย์ มันจะดีกว่าที่จะใช้spliceสำหรับอาร์เรย์

โปรดทราบว่าเมื่อคุณใช้งานdeleteอาร์เรย์คุณอาจได้รับผลลัพธ์ที่ไม่ถูกต้องanArray.lengthสำหรับอาร์เรย์คุณอาจจะได้รับผลที่ไม่ถูกต้องสำหรับในคำอื่น ๆdeleteจะลบองค์ประกอบ แต่จะไม่อัปเดตค่าคุณสมบัติความยาว

คุณสามารถคาดหวังว่าจะมีรูในจำนวนดัชนีหลังจากใช้การลบเช่นคุณสามารถจบลงด้วยการมีดัชนี 1, 3, 4, 8, 9, และ 11 และความยาวเหมือนเดิมก่อนที่จะใช้การลบ ในกรณีนั้นดัชนีทั้งหมดforลูปที่จะมีปัญหาเนื่องจากดัชนีไม่ได้เรียงลำดับแล้ว

หากคุณถูกบังคับให้ใช้deleteด้วยเหตุผลบางอย่างคุณควรใช้for eachลูปเมื่อคุณจำเป็นต้องวนซ้ำอาร์เรย์ ตามความเป็นจริงให้หลีกเลี่ยงการใช้forลูปที่จัดทำดัชนีเสมอถ้าเป็นไปได้ วิธีนี้จะทำให้รหัสมีเสถียรภาพมากขึ้นและมีแนวโน้มที่จะเกิดปัญหากับดัชนีน้อยลง

Array.prototype.remByVal = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
}
//Call like
[1, 2, 3, 4].remByVal(3);

Array.prototype.remByVal = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
}

var rooms = ['hello', 'something']

rooms = rooms.remByVal('hello')

console.log(rooms)

ไม่มีความจำเป็นที่จะใช้เป็นหรือindexOf spliceอย่างไรก็ตามมันจะทำงานได้ดีขึ้นหากคุณต้องการลบองค์ประกอบที่เกิดขึ้นเพียงครั้งเดียว

ค้นหาและย้าย (ย้าย):

function move(arr, val) {
  var j = 0;
  for (var i = 0, l = arr.length; i < l; i++) {
    if (arr[i] !== val) {
      arr[j++] = arr[i];
    }
  }
  arr.length = j;
}

ใช้indexOfและsplice(indexof):

function indexof(arr, val) {
  var i;
  while ((i = arr.indexOf(val)) != -1) {
    arr.splice(i, 1);
  }
}

ใช้เท่านั้นsplice(ต่อกัน):

function splice(arr, val) {
  for (var i = arr.length; i--;) {
    if (arr[i] === val) {
      arr.splice(i, 1);
    }
  }
}

เวลารันบน nodejs สำหรับอาร์เรย์ที่มี 1,000 อิลิเมนต์ (เฉลี่ยมากกว่า 10,000 การรัน):

indexofจะอยู่ที่ประมาณ 10 เท่าช้ากว่าย้าย แม้ว่าการปรับปรุงโดยการเอาการเรียกร้องให้indexOfในประกบกันจะดำเนินการมากยิ่งกว่าการย้าย

Remove all occurrences:
    move 0.0048 ms
    indexof 0.0463 ms
    splice 0.0359 ms

Remove first occurrence:
    move_one 0.0041 ms
    indexof_one 0.0021 ms

สิ่งนี้จัดเตรียมเพรดิเคตแทนค่า

หมายเหตุ:มันจะอัปเดตอาร์เรย์ที่กำหนดและส่งคืนแถวที่ได้รับผลกระทบ

การใช้

var removed = helper.removeOne(arr, row => row.id === 5 );

var removed = helper.remove(arr, row => row.name.startsWith('BMW'));

คำนิยาม

var helper = {

    // Remove and return the first occurrence

    removeOne: function(array, predicate) {
        for (var i = 0; i < array.length; i++) {
            if (predicate(array[i])) {
                return array.splice(i, 1);
            }
        }
    },

    // Remove and return all occurrences

    remove: function(array, predicate) {
        var removed = [];

        for (var i = 0; i < array.length;) {

            if (predicate(array[i])) {
                removed.push(array.splice(i, 1));
                continue;
            }
            i++;
        }
        return removed;
    }
};

คุณสามารถทำได้อย่างง่ายดายด้วยวิธีการกรอง :

function remove(arrOriginal, elementToRemove){
    return arrOriginal.filter(function(el){return el !== elementToRemove});
}
console.log(remove([1, 2, 1, 0, 3, 1, 4], 1));

นี้จะเอาองค์ประกอบทั้งหมดจาก array และยังทำงานได้เร็วกว่าการรวมกันของและsliceindexOf

John Resig โพสต์การใช้งานที่ดี :

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

หากคุณไม่ต้องการขยายวัตถุร่วมคุณสามารถทำสิ่งต่อไปนี้แทน:

// Array Remove - By John Resig (MIT Licensed)
Array.remove = function(array, from, to) {
    var rest = array.slice((to || from) + 1 || array.length);
    array.length = from < 0 ? array.length + from : from;
    return array.push.apply(array, rest);
};

แต่เหตุผลหลักที่ฉันโพสต์ข้อความนี้คือเพื่อเตือนผู้ใช้เกี่ยวกับการใช้งานทางเลือกที่แนะนำในความคิดเห็นในหน้านั้น (14 ธันวาคม 2550):

Array.prototype.remove = function(from, to){
  this.splice(from, (to=[0,from||1,++to-from][arguments.length])<0?this.length+to:to);
  return this.length;
};

ดูเหมือนว่าจะทำงานได้ดีในตอนแรก แต่ผ่านกระบวนการที่เจ็บปวดฉันค้นพบว่ามันล้มเหลวเมื่อพยายามลบองค์ประกอบที่สองถึงองค์ประกอบสุดท้ายในอาร์เรย์ ตัวอย่างเช่นหากคุณมีอาร์เรย์ 10 องค์ประกอบและคุณพยายามลบองค์ประกอบที่ 9 ด้วยสิ่งนี้:

myArray.remove(8);

คุณจบลงด้วยอาร์เรย์ 8 องค์ประกอบ ไม่ทราบว่าทำไม แต่ฉันยืนยันว่าการใช้งานดั้งเดิมของ John ไม่มีปัญหานี้

Underscore.jsสามารถใช้แก้ปัญหาหลายเบราว์เซอร์ได้ มันใช้วิธีเบราว์เซอร์ในการสร้างถ้ามี หากไม่มีในกรณีที่เป็น Internet Explorer เวอร์ชั่นเก่าจะใช้วิธีการที่กำหนดเอง

ตัวอย่างง่ายๆในการลบองค์ประกอบออกจากอาร์เรย์ (จากเว็บไซต์):

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4]

คุณสามารถใช้ ES6 ตัวอย่างเช่นการลบค่า '3' ในกรณีนี้:

var array=['1','2','3','4','5','6']
var newArray = array.filter((value)=>value!='3');
console.log(newArray);

ผลผลิต:

["1", "2", "4", "5", "6"]

หากคุณต้องการอาร์เรย์ใหม่ที่ลบตำแหน่งที่ถูกลบออกคุณสามารถลบองค์ประกอบเฉพาะและกรองอาร์เรย์นั้นออกได้ อาจต้องการส่วนขยายของวัตถุอาร์เรย์สำหรับเบราว์เซอร์ที่ไม่ได้ใช้วิธีการกรอง แต่ในระยะยาวมันง่ายกว่าเนื่องจากคุณทำสิ่งนี้:

var my_array = [1, 2, 3, 4, 5, 6];
delete my_array[4];
console.log(my_array.filter(function(a){return typeof a !== 'undefined';}));

[1, 2, 3, 4, 6]มันควรจะแสดง

ลองดูรหัสนี้ มันทำงานได้ในทุกเบราว์เซอร์ที่สำคัญ

remove_item = function (arr, value) {
    var b = '';
    for (b in arr) {
        if (arr[b] === value) {
            arr.splice(b, 1);
            break;
        }
    }
    return arr;
}

เรียกใช้ฟังก์ชันนี้

remove_item(array,value);

คุณสามารถใช้ lodash _.pull (กลายพันธุ์อาร์เรย์), _.pullAt (กลายพันธุ์อาร์เรย์) หรือ_.without (ไม่ได้กลายพันธุ์อาร์เรย์)

var array1 = ['a', 'b', 'c', 'd']
_.pull(array1, 'c')
console.log(array1) // ['a', 'b', 'd']

var array2 = ['e', 'f', 'g', 'h']
_.pullAt(array2, 0)
console.log(array2) // ['f', 'g', 'h']

var array3 = ['i', 'j', 'k', 'l']
var newArray = _.without(array3, 'i') // ['j', 'k', 'l']
console.log(array3) // ['i', 'j', 'k', 'l']

ES6 และไม่มีการกลายพันธุ์: (ตุลาคม 2016)

const removeByIndex = (list, index) =>
      [
        ...list.slice(0, index),
        ...list.slice(index + 1)
      ];
         
output = removeByIndex([33,22,11,44],1) //=> [33,11,44]
      
console.log(output)

การลบองค์ประกอบ / สตริงเฉพาะออกจากอาร์เรย์สามารถทำได้ในหนึ่งซับ:

theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);

ที่อยู่:

theArray : อาร์เรย์ที่คุณต้องการลบบางอย่างออก

stringToRemoveFromArray : สตริงที่คุณต้องการลบและ 1 คือจำนวนองค์ประกอบที่คุณต้องการลบ

บันทึก : ถ้า "stringToRemoveFromArray" ไม่ได้อยู่ในอาร์เรย์ของคุณสิ่งนี้จะลบองค์ประกอบสุดท้ายของอาร์เรย์

เป็นแนวปฏิบัติที่ดีเสมอในการตรวจสอบว่ามีองค์ประกอบอยู่ในอาร์เรย์ของคุณก่อนหรือไม่

if (theArray.indexOf("stringToRemoveFromArray") >= 0){
   theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);
}

หากคุณสามารถเข้าถึงเวอร์ชัน Ecmascript ที่ใหม่กว่าบนคอมพิวเตอร์ของลูกค้าของคุณ (คำเตือนอาจไม่ทำงานบนสถานีที่เก่ากว่า):

var array=['1','2','3','4','5','6']
var newArray = array.filter((value)=>value!='3');

โดยที่ '3' เป็นค่าที่คุณต้องการลบออกจากอาร์เรย์ อาร์เรย์จะกลายเป็น:['1','2','4','5','6']

ต่อไปนี้เป็นวิธีการลบรายการออกจากอาร์เรย์โดยใช้ JavaScriptJavaScript

วิธีการทั้งหมดที่อธิบายไว้ไม่ได้กลายพันธุ์อาร์เรย์เดิมและสร้างใหม่แทน

ถ้าคุณรู้ว่าดัชนีของรายการ

iสมมติว่าคุณมีอาร์เรย์และคุณต้องการที่จะลบรายการในตำแหน่ง

วิธีหนึ่งคือการใช้slice():

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const i = 3
const filteredItems = items.slice(0, i).concat(items.slice(i+1, items.length))

console.log(filteredItems)

slice()สร้างอาร์เรย์ใหม่โดยมีดัชนีที่ได้รับ เราเพียงแค่สร้างอาร์เรย์ใหม่ตั้งแต่เริ่มต้นไปจนถึงดัชนีที่เราต้องการลบและเชื่อมโยงอาร์เรย์อื่นจากตำแหน่งแรกตามหลังอาร์เรย์ที่เราลบไปจนถึงจุดสิ้นสุดของอาร์เรย์

ถ้าคุณรู้คุณค่า

ในกรณีนี้หนึ่งทางเลือกที่ดีคือการใช้filter()ซึ่งมีวิธีการที่เปิดเผยมากขึ้น:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(item => item !== valueToRemove)

console.log(filteredItems)

ใช้ฟังก์ชันลูกศร ES6 คุณสามารถใช้ฟังก์ชั่นดั้งเดิมเพื่อรองรับเบราว์เซอร์รุ่นเก่า:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(function(item) {
  return item !== valueToRemove
})

console.log(filteredItems)

หรือคุณสามารถใช้ Babel และเปลี่ยนรหัส ES6 กลับไปเป็น ES5 เพื่อให้ย่อยได้มากขึ้นในเบราว์เซอร์เก่า แต่ยังเขียน JavaScript ที่ทันสมัยในรหัสของคุณ

การลบหลายรายการ

เกิดอะไรขึ้นถ้าแทนที่จะเป็นรายการเดียวคุณต้องการลบหลายรายการ

ลองหาทางออกที่ง่ายที่สุด

ตามดัชนี

คุณสามารถสร้างฟังก์ชั่นและลบรายการในซีรีส์:

const items = ['a', 'b', 'c', 'd', 'e', 'f']

const removeItem = (items, i) =>
  items.slice(0, i-1).concat(items.slice(i, items.length))

let filteredItems = removeItem(items, 3)
filteredItems = removeItem(filteredItems, 5)
//["a", "b", "c", "d"]

console.log(filteredItems)

ตามมูลค่า

คุณสามารถค้นหาการรวมไว้ในฟังก์ชันการโทรกลับ:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valuesToRemove = ['c', 'd']
const filteredItems = items.filter(item => !valuesToRemove.includes(item))
// ["a", "b", "e", "f"]

console.log(filteredItems)

หลีกเลี่ยงการกลายพันธุ์อาร์เรย์เดิม

splice()(เพื่อไม่ให้สับสนกับslice()) ทำให้กลายพันธุ์อาร์เรย์เดิมและควรหลีกเลี่ยง

(โพสต์ครั้งแรกที่https://flaviocopes.com/how-to-remove-item-from-array/ )

ตกลงตัวอย่างเช่นคุณมีอาร์เรย์ด้านล่าง:

var num = [1, 2, 3, 4, 5];

และเราต้องการลบหมายเลข 4 คุณสามารถใช้รหัสด้านล่าง:

num.splice(num.indexOf(4), 1); // num will be [1, 2, 3, 5];

หากคุณใช้ฟังก์ชั่นนี้ซ้ำคุณเขียนฟังก์ชั่นที่สามารถนำกลับมาใช้ใหม่ได้ซึ่งจะแนบกับฟังก์ชันอาเรย์ดั้งเดิมดังด้านล่าง:

Array.prototype.remove = Array.prototype.remove || function(x) {
  const i = this.indexOf(x);
  if(i===-1)
      return;
  this.splice(i, 1); // num.remove(5) === [1, 2, 3];
}

แต่ถ้าคุณมีอาร์เรย์ด้านล่างแทนด้วย [5] สองสามตัวในอาร์เรย์?

var num = [5, 6, 5, 4, 5, 1, 5];

เราต้องการการวนซ้ำเพื่อตรวจสอบพวกเขาทั้งหมด แต่วิธีที่ง่ายและมีประสิทธิภาพมากขึ้นคือการใช้ฟังก์ชัน JavaScript ในตัวดังนั้นเราจึงเขียนฟังก์ชันที่ใช้ตัวกรองแบบด้านล่างแทน:

const _removeValue = (arr, x) => arr.filter(n => n!==x);
//_removeValue([1, 2, 3, 4, 5, 5, 6, 5], 5) // Return [1, 2, 3, 4, 6]

นอกจากนี้ยังมีห้องสมุดบุคคลที่สามที่ช่วยให้คุณทำเช่นนี้เช่น Lodash หรือ Underscore สำหรับข้อมูลเพิ่มเติมดูที่ lodash _.pull, _.pullAt หรือ _.without

ฉันค่อนข้างใหม่กับ JavaScript และต้องการฟังก์ชั่นนี้ ฉันแค่เขียนสิ่งนี้:

function removeFromArray(array, item, index) {
  while((index = array.indexOf(item)) > -1) {
    array.splice(index, 1);
  }
}

จากนั้นเมื่อฉันต้องการใช้:

//Set-up some dummy data
var dummyObj = {name:"meow"};
var dummyArray = [dummyObj, "item1", "item1", "item2"];

//Remove the dummy data
removeFromArray(dummyArray, dummyObj);
removeFromArray(dummyArray, "item2");

ผลผลิต - ตามที่คาดไว้ ["item1", "item1"]

คุณอาจมีความต้องการที่แตกต่างจากฉันดังนั้นคุณสามารถปรับเปลี่ยนให้เหมาะกับพวกเขา ฉันหวังว่านี่จะช่วยใครซักคน

หากคุณมีวัตถุที่ซับซ้อนในอาร์เรย์คุณสามารถใช้ตัวกรองได้หรือไม่ ในสถานการณ์ที่ $. inArray หรือ array.splice นั้นไม่ใช้งานง่าย โดยเฉพาะอย่างยิ่งถ้าวัตถุนั้นอาจตื้นเขิน

เช่นถ้าคุณมีวัตถุที่มีเขตข้อมูล Id และคุณต้องการเอาวัตถุออกจากอาร์เรย์:

this.array = this.array.filter(function(element, i) {
    return element.id !== idToRemove;
});

ฉันต้องการที่จะตอบขึ้นอยู่กับECMAScript 6 สมมติว่าคุณมีอาร์เรย์ดังนี้:

let arr = [1,2,3,4];

หากคุณต้องการลบที่ดัชนีพิเศษเช่น2เขียนรหัสด้านล่าง:

arr.splice(2, 1); //=> arr became [1,2,4]

แต่ถ้าคุณต้องการลบรายการพิเศษเช่น3และคุณไม่รู้จักดัชนีให้ทำดังนี้

arr = arr.filter(e => e !== 3); //=> arr became [1,2,4]

คำแนะนำ : โปรดใช้ฟังก์ชั่นลูกศรสำหรับการเรียกกลับตัวกรองเว้นแต่ว่าคุณจะได้รับอาร์เรย์ว่าง

อัปเดต:แนะนำวิธีนี้เฉพาะเมื่อคุณไม่สามารถใช้ ECMAScript 2015 (เดิมชื่อ ES6) หากคุณสามารถใช้คำตอบอื่น ๆ ที่นี่ให้การใช้งาน neater มาก

ส่วนสำคัญนี้จะแก้ปัญหาของคุณและลบอาร์กิวเมนต์ทั้งหมดที่เกิดขึ้นแทนที่จะเป็นเพียง 1 (หรือค่าที่ระบุ)

Array.prototype.destroy = function(obj){
    // Return null if no objects were found and removed
    var destroyed = null;

    for(var i = 0; i < this.length; i++){

        // Use while-loop to find adjacent equal objects
        while(this[i] === obj){

            // Remove this[i] and store it within destroyed
            destroyed = this.splice(i, 1)[0];
        }
    }

    return destroyed;
}

การใช้งาน:

var x = [1, 2, 3, 3, true, false, undefined, false];

x.destroy(3);         // => 3
x.destroy(false);     // => false
x;                    // => [1, 2, true, undefined]

x.destroy(true);      // => true
x.destroy(undefined); // => undefined
x;                    // => [1, 2]

x.destroy(3);         // => null
x;                    // => [1, 2]

ประสิทธิภาพ

วันนี้ (2019-12-09) ฉันทำการทดสอบประสิทธิภาพบน macOS v10.13.6 (High Sierra) สำหรับโซลูชันที่เลือก ฉันแสดงdelete(A) แต่ฉันไม่ได้ใช้มันเปรียบเทียบกับวิธีอื่นเพราะมันปล่อยให้มีพื้นที่ว่างในอาร์เรย์

บทสรุป

• ทางออกที่เร็วที่สุดคือarray.splice(C) (ยกเว้น Safari สำหรับอาร์เรย์ขนาดเล็กที่มีครั้งที่สอง)
• สำหรับอาร์เรย์ขนาดใหญ่array.slice+splice(H) เป็นโซลูชั่นที่ไม่เปลี่ยนรูปเร็วที่สุดสำหรับ Firefox และ Safari Array.from(B) เร็วที่สุดใน Chrome
• วิธีแก้ไขที่ไม่แน่นอนมักจะ 1.5x-6x เร็วกว่าไม่เปลี่ยนรูป
• สำหรับตารางเล็ก ๆ บน Safari การแก้ปัญหาที่ไม่แน่นอน (C) ช้ากว่าโซลูชั่นที่ไม่เปลี่ยนรูป (G)

รายละเอียด

ในการทดสอบฉันลบองค์ประกอบกลางออกจากอาร์เรย์ด้วยวิธีที่ต่างกัน A, Cการแก้ปัญหาอยู่ในสถานที่ B, D, E, F, G, Hแก้ปัญหาจะไม่เปลี่ยนรูป

ผลลัพธ์สำหรับอาร์เรย์ที่มี 10 องค์ประกอบ

ใน Chrome array.splice(C) เป็นโซลูชันแบบแทนที่ได้เร็วที่สุด The array.filter(D) เป็นทางออกที่ไม่เปลี่ยนรูปเร็วที่สุด ช้าที่สุดคือarray.slice(F) คุณสามารถดำเนินการทดสอบบนเครื่องของคุณที่นี่

ผลลัพธ์สำหรับอาร์เรย์ที่มีองค์ประกอบ 1,000,000

ใน Chrome array.splice(C) เป็นวิธีการแก้ปัญหาแบบแทนที่ได้เร็วที่สุด (the delete(C) คล้ายกันอย่างรวดเร็ว - แต่มันปล่อยให้สล็อตว่างในอาร์เรย์ (ดังนั้นจึงไม่ได้ทำการ 'ลบเต็ม') array.slice-splice (H) เป็นทางออกที่ไม่เปลี่ยนรูปเร็วที่สุด ช้าที่สุดคือarray.filter(D และ E) คุณสามารถดำเนินการทดสอบบนเครื่องของคุณที่นี่

var a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var log = (letter,array) => console.log(letter, array.join `,`);

function A(array) {
  var index = array.indexOf(5);
  delete array[index];
  log('A', array);
}

function B(array) {
  var index = array.indexOf(5);
  var arr = Array.from(array);
  arr.splice(index, 1)
  log('B', arr);
}

function C(array) {
  var index = array.indexOf(5);
  array.splice(index, 1);
  log('C', array);
}

function D(array) {
  var arr = array.filter(item => item !== 5)
  log('D', arr);
}

function E(array) {
  var index = array.indexOf(5);
  var arr = array.filter((item, i) => i !== index)
  log('E', arr);
}

function F(array) {
  var index = array.indexOf(5);
  var arr = array.slice(0, index).concat(array.slice(index + 1))
  log('F', arr);
}

function G(array) {
  var index = array.indexOf(5);
  var arr = [...array.slice(0, index), ...array.slice(index + 1)]
  log('G', arr);
}

function H(array) {
  var index = array.indexOf(5);
  var arr = array.slice(0);
  arr.splice(index, 1);
  log('H', arr);
}

A([...a]);
B([...a]);
C([...a]);
D([...a]);
E([...a]);
F([...a]);
G([...a]);
H([...a]);

This snippet only presents code used in performance tests - it does not perform tests itself.

เปรียบเทียบกับเบราว์เซอร์: Chrome v78.0.0, Safari v13.0.4 และ Firefox v71.0.0

คุณไม่ควรเปลี่ยนแปลงอาเรย์ของคุณ เช่นนี้ขัดกับรูปแบบการเขียนโปรแกรมการทำงาน คุณสามารถสร้างอาร์เรย์ใหม่โดยไม่ต้องอ้างอิงอาร์เรย์ที่คุณต้องการเปลี่ยนแปลงข้อมูลของการใช้ ECMAScript 6 วิธีfilter;

var myArray = [1, 2, 3, 4, 5, 6];

สมมติว่าคุณต้องการลบออก5จากอาร์เรย์คุณสามารถทำได้ดังนี้

myArray = myArray.filter(value => value !== 5);

สิ่งนี้จะทำให้คุณมีอาร์เรย์ใหม่โดยไม่มีค่าที่คุณต้องการลบ ดังนั้นผลลัพธ์จะเป็น:

 [1, 2, 3, 4, 6]; // 5 has been removed from this array

สำหรับการทำความเข้าใจต่อไปคุณจะสามารถอ่านเอกสาร MDN ในArray.filter

ECMAScript 2015 ที่ทันสมัยมากขึ้น(เดิมชื่อ Harmony หรือ ES 6) ได้รับ:

const items = [1, 2, 3, 4];
const index = 2;

แล้ว:

items.filter((x, i) => i !== index);

ผลผลิต:

[1, 2, 4]

คุณสามารถใช้Babelและบริการ polyfillเพื่อให้แน่ใจว่ารองรับเบราว์เซอร์ได้ดี

คุณมี 1 ถึง 9 ในอาร์เรย์และคุณต้องการลบ 5 ใช้รหัสด้านล่าง:

var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var newNumberArray = numberArray.filter(m => {
  return m !== 5;
});

console.log("new Array, 5 removed", newNumberArray);

หากคุณต้องการหลายค่า ตัวอย่าง: - 1,7,8

var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var newNumberArray = numberArray.filter(m => {
  return (m !== 1) && (m !== 7) && (m !== 8);
});

console.log("new Array, 1,7 and 8 removed", newNumberArray);

หากคุณต้องการลบค่าอาร์เรย์ในอาร์เรย์ ตัวอย่าง: [3,4,5]

var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var removebleArray = [3,4,5];

var newNumberArray = numberArray.filter(m => {
    return !removebleArray.includes(m);
});

console.log("new Array, [3,4,5] removed", newNumberArray);

รวมถึงเบราว์เซอร์ได้รับการสนับสนุนการเชื่อมโยง

ฉันรู้ว่ามีคำตอบมากมายอยู่แล้ว แต่พวกเขาหลายคนดูเหมือนจะทำให้ปัญหาซับซ้อนเกินไป นี่เป็นวิธีที่ง่ายและเรียกซ้ำได้สำหรับการลบอินสแตนซ์ทั้งหมดของคีย์ - เรียกตนเองจนกว่าจะไม่พบดัชนี ใช่ใช้ได้กับเบราว์เซอร์ที่มีเท่านั้นindexOfแต่ใช้งานง่ายและสามารถเติมได้อย่างง่ายดาย

ฟังก์ชั่นสแตนด์อะโลน

function removeAll(array, key){
    var index = array.indexOf(key);

    if(index === -1) return;

    array.splice(index, 1);
    removeAll(array,key);
}

วิธีการต้นแบบ

Array.prototype.removeAll = function(key){
    var index = this.indexOf(key);

    if(index === -1) return;

    this.splice(index, 1);
    this.removeAll(key);
}

คุณสามารถทำลูปย้อนกลับเพื่อให้แน่ใจว่าจะไม่ทำให้ดัชนีผิดพลาดหากมีองค์ประกอบหลายส่วน

var myElement = "chocolate";
var myArray = ['chocolate', 'poptart', 'poptart', 'poptart', 'chocolate', 'poptart', 'poptart', 'chocolate'];

/* Important code */
for (var i = myArray.length - 1; i >= 0; i--) {
    if (myArray[i] == myElement) myArray.splice(i, 1);
}

การสาธิตสด