ฉันมีชุดของตัวเลขและฉันใช้.push()
วิธีการเพิ่มองค์ประกอบ
มีวิธีง่าย ๆ ในการลบองค์ประกอบเฉพาะออกจากอาร์เรย์หรือไม่?
ฉันกำลังมองหาสิ่งที่เทียบเท่า:
array.remove(number);
ฉันต้องใช้จาวาสคริปต์หลัก ไม่อนุญาตกรอบงาน
ฉันมีชุดของตัวเลขและฉันใช้.push()
วิธีการเพิ่มองค์ประกอบ
มีวิธีง่าย ๆ ในการลบองค์ประกอบเฉพาะออกจากอาร์เรย์หรือไม่?
ฉันกำลังมองหาสิ่งที่เทียบเท่า:
array.remove(number);
ฉันต้องใช้จาวาสคริปต์หลัก ไม่อนุญาตกรอบงาน
คำตอบ:
ค้นหาindex
ขององค์ประกอบอาร์เรย์ที่คุณต้องการที่จะลบโดยใช้และเอาดัชนีที่มีindexOf
splice
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.indexOf(testValue)
ในอาเรย์ที่ว่างเปล่าจะเป็น -1 และถ้าคุณกำลังทดสอบว่าจะไม่มีรอยต่อ บางทีคำตอบก็เปลี่ยนไป
ฉันไม่รู้ว่าคุณคาดหวังว่า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];
delete
ไม่ใช่วิธีที่ถูกต้องในการลบองค์ประกอบออกจากอาร์เรย์!
array.hasOwnProperty(i)
ผลตอบแทนและมีองค์ประกอบที่ผลตอบแทนจากตำแหน่งว่าfalse
undefined
แต่ฉันจะยอมรับว่านั่นไม่ใช่เรื่องปกติที่จะทำ
delete
จะไม่อัปเดตความยาวของอาร์เรย์และจะไม่ลบองค์ประกอบ แต่จะแทนที่ด้วยค่าพิเศษundefined
เท่านั้น
undefined
: มันเอาทั้งดัชนีและความคุ้มค่าจากอาร์เรย์คือหลังจากdelete array[0]
, "0" in array
จะกลับเท็จ
delete
จะเข้าใจอะไรทำไมมันไม่ทำงานอย่างที่พวกเขาคาดหวัง
ในตัวอย่างรหัสนี้ฉันใช้ฟังก์ชัน "array.filter (... )"เพื่อลบรายการที่ไม่ต้องการออกจากอาร์เรย์ ฟังก์ชั่นนี้จะไม่เปลี่ยนอาร์เรย์เดิมและสร้างใหม่ หากเบราว์เซอร์ของคุณไม่รองรับฟังก์ชั่นนี้ (เช่น Internet Explorer ก่อนรุ่น 9 หรือ Firefox ก่อนรุ่น 1.5) ให้ลองใช้ตัวกรอง polyfill จาก MozillaMozilla
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 ]
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
ข้อดีเพิ่มเติมของวิธีนี้คือคุณสามารถลบหลายรายการได้
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 ]
การอ้างอิง
filter
ต้องช้ากว่ามากสำหรับอาร์เรย์ขนาดใหญ่
filter
อาจมีประสิทธิภาพการทำงานช้าลง แต่มันปลอดภัยและรหัสที่ดีกว่า นอกจากนี้คุณสามารถกรองตามดัชนีโดยระบุอาร์กิวเมนต์ที่สองในแลมบ์ดา:arr.filter((x,i)=>i!==2)
ขึ้นอยู่กับว่าคุณต้องการรักษาจุดที่ว่างเปล่าหรือไม่
หากคุณต้องการช่องว่างการลบเป็นเรื่องปกติ:
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 ถ้าไม่พบ
delete
ไม่ใช่วิธีที่ถูกต้องในการลบองค์ประกอบออกจากอาร์เรย์ !!
array[index] = undefined;
การใช้งาน การใช้delete
จะทำลายการเพิ่มประสิทธิภาพ
เพื่อนมีปัญหาในInternet Explorer 8และแสดงให้ฉันเห็นว่าเขาทำอะไร ฉันบอกเขาว่ามันผิดและเขาบอกฉันว่าเขาได้รับคำตอบที่นี่ คำตอบยอดนิยมปัจจุบันจะไม่ทำงานในเบราว์เซอร์ทั้งหมด (ตัวอย่างเช่น Internet Explorer 8) และจะลบรายการแรกที่เกิดขึ้นเท่านั้น
function remove(arr, item) {
for (var i = arr.length; i--;) {
if (arr[i] === item) {
arr.splice(i, 1);
}
}
}
มันวนลูปผ่านอาร์เรย์ไปข้างหลัง (เนื่องจากดัชนีและความยาวจะเปลี่ยนเมื่อมีการลบรายการ) และลบรายการหากพบ มันทำงานได้ในทุกเบราว์เซอร์
i = arr.length -1
หรือi--
ทำให้เหมือนกับดัชนีสูงสุด เป็นเพียงค่าเริ่มต้นสำหรับarr.length
จะเป็นtruthy (และลดลง 1 ในแต่ละวง op) จนกว่าจะเท่ากับ(ค่า falsy) และห่วงจะหยุดแล้ว i
i--
0
arr.filter(function (el) { return el !== item })
หลีกเลี่ยงความจำเป็นในการกลายพันธุ์ของอาร์เรย์หลายครั้ง สิ่งนี้ใช้หน่วยความจำเพิ่มขึ้นเล็กน้อย แต่ทำงานได้อย่างมีประสิทธิภาพมากขึ้นเนื่องจากมีงานที่ต้องทำน้อยกว่า
มีสองวิธีที่สำคัญ:
ประกบกัน () :anArray.splice(index, 1);
ลบ :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)
for in
อาร์เรย์คุณมีปัญหาอยู่แล้ว
for in
ในอาร์เรย์คุณมีปัญหาที่ใหญ่กว่า
ไม่มีความจำเป็นที่จะใช้เป็นหรือ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 และยังทำงานได้เร็วกว่าการรวมกันของและslice
indexOf
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 ไม่มีปัญหานี้
Object.prototype.hasOwnProperty
เสมอ¬¬
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);
for in
-loop และความจริงที่ว่าสคริปต์สามารถหยุดก่อนหน้านี้ได้โดยส่งคืนผลลัพธ์จากลูปโดยตรง upvotes นั้นสมเหตุสมผล;)
for( i = 0; i < arr.length; i++ )
จะเป็นวิธีที่ดีกว่าเพราะมันจะรักษาดัชนีที่แน่นอนเมื่อเทียบกับสิ่งที่เบราว์เซอร์ตัดสินใจที่จะจัดเก็บรายการ (ด้วยfor in
) การทำเช่นนี้ยังช่วยให้คุณได้รับดัชนีอาร์เรย์ของค่าหากคุณต้องการ
คุณสามารถใช้ 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)
filter
ล่ะ? array.filter((_, index) => index !== removedIndex);
.
การลบองค์ประกอบ / สตริงเฉพาะออกจากอาร์เรย์สามารถทำได้ในหนึ่งซับ:
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']
"stringToRemoveFromArray"
ไม่ได้อยู่ในอาร์เรย์ของคุณสิ่งนี้จะลบองค์ประกอบสุดท้ายของอาร์เรย์
ต่อไปนี้เป็นวิธีการลบรายการออกจากอาร์เรย์โดยใช้ 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
this.splice(num.indexOf(x), 1);
=>this.splice(this.indexOf(x), 1);
ฉันค่อนข้างใหม่กับ 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ในการทดสอบฉันลบองค์ประกอบกลางออกจากอาร์เรย์ด้วยวิธีที่ต่างกัน 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) คุณสามารถดำเนินการทดสอบบนเครื่องของคุณที่นี่
เปรียบเทียบกับเบราว์เซอร์: 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เพื่อให้แน่ใจว่ารองรับเบราว์เซอร์ได้ดี
.filter
ส่งคืนอาร์เรย์ใหม่ซึ่งไม่เหมือนกับการลบองค์ประกอบออกจากอาร์เรย์เดียวกัน ประโยชน์ของวิธีนี้คือคุณสามารถรวมวิธีการต่างๆเข้าด้วยกันได้ เช่น:[1,2,3].filter(n => n%2).map(n => n*n) === [ 1, 9 ]
splice
slice
items= items.filter(x=>x!=3)
ซึ่งอาจจะเป็นสั้น นอกจากนี้ OP ไม่ได้ระบุความต้องการใด ๆ สำหรับชุดข้อมูลขนาดใหญ่
คุณมี 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);
}