จะลบองค์ประกอบออกจากอาร์เรย์ใน JavaScript ได้อย่างไร


340
var arr = [1,2,3,5,6];

ลบองค์ประกอบแรก

ฉันต้องการลบองค์ประกอบแรกของอาร์เรย์เพื่อให้มันกลายเป็น:

var arr = [2,3,5,6];

ลบองค์ประกอบที่สอง

หากต้องการขยายคำถามนี้จะต้องทำอย่างไรหากฉันต้องการลบองค์ประกอบที่สองของอาร์เรย์เพื่อให้เป็น:

var arr = [1,3,5,6];

1
slice(start, end)ไม่ใช่'how_many_to_remove'
seanjacob

2
@Ped arr.unshift () ไม่ลบ แต่ "เพิ่มองค์ประกอบหนึ่งรายการขึ้นไปในตอนต้นของอาร์เรย์"
psycho brm

@ seanjacob ฉันspliceไม่sliceเดาเลย
Animesh Singh

คำตอบ:


346

สำหรับโซลูชันที่ยืดหยุ่นมากขึ้นให้ใช้splice()ฟังก์ชัน ช่วยให้คุณสามารถลบรายการใด ๆ ใน Array ตามค่าดัชนี:

var indexToRemove = 0;
var numberToRemove = 1;

arr.splice(indexToRemove, numberToRemove);

12
และคำถามที่ตามมา: arr.splice(1,1)สำหรับองค์ประกอบที่สอง
slebetman

1
ฉันชอบsplice()มากกว่าshift()เพราะมันยืดหยุ่นกว่า ฉันอาจต้องการทำสิ่งที่แตกต่างในอนาคตและฉันไม่ต้องการลบองค์ประกอบเดียวเท่านั้นหรือแม้กระทั่งองค์ประกอบแรก
Gabriel McAdams

14
หากคุณมาที่นี่จาก Google: กาเบรียลชอบคำตอบนี้ แต่คุณควรระวังด้วยว่ามีการเปลี่ยน () ดูคำตอบของโจเซฟ
SHernandez

668

shift()เหมาะสำหรับสถานการณ์ของคุณ shift()เอาองค์ประกอบแรกออกจากอาร์เรย์และส่งกลับองค์ประกอบนั้น วิธีนี้จะเปลี่ยนความยาวของอาร์เรย์

array = [1, 2, 3, 4, 5];

array.shift(); // 1

array // [2, 3, 4, 5]

ใช้งานได้ แต่จะลบองค์ประกอบแรกในอาร์เรย์เท่านั้น
Gabriel McAdams

53
@Gabriel: คำถามนั้นใช่มั้ย ฉันชอบที่shift()จะเป็นsplice(..., ...)เพราะมันชัดเจนมากขึ้นโดยตรง
Bruno Reis

6
การแก้ไข: มันกลับองค์ประกอบแรกไม่ได้เป็นแถวใหม่ลบองค์ประกอบแรกตามลิงก์ที่คุณให้ :)
Danh

ในขณะที่ตัวอย่างโค้ดถูกต้องคำอธิบายจะทำให้เข้าใจผิด: (a) ตามที่ @DanH ชี้ให้เห็นมันเป็นองค์ประกอบแรกที่ถูกส่งคืนและ (b) ข้อเท็จจริงที่ว่ามีการแก้ไขอาร์เรย์อินพุตไม่ชัดเจน ดังนั้นคำตอบของ Ped จึงเหนือกว่า
mklement0

2
shiftเร็วกว่าเว้นแต่คุณจะเชื่อมต่อรายการขนาดใหญ่jsperf.com/splice-vs-shift3และjsperf.com/splice-vs-shift2
kcathode

61

Array.prototype.shiftวิธีการเอาองค์ประกอบแรกจากอาร์เรย์และส่งกลับไป มันปรับเปลี่ยนอาร์เรย์เดิม

var a = [1,2,3]
// [1,2,3]
a.shift()
// 1
a
//[2,3]

4
การปรับปรุงที่ดีในคำตอบของ Joseph Silvashy - ไม่สอดคล้องกันระหว่างคำอธิบายและรหัส
mklement0

48
arr.slice(begin[,end])

ไม่ทำลายการประกบกันและการเปลี่ยนจะปรับเปลี่ยนอาร์เรย์เดิมของคุณ


3
ใช่สำหรับการไม่กลายพันธุ์ สิ่งนี้ควรมองเห็นได้ชัดเจนขึ้น
ผู้ใช้

16

เขียนบทความเล็ก ๆ เกี่ยวกับการแทรกและลบองค์ประกอบที่ตำแหน่งโดยพลการใน Javascript Arrays

นี่คือตัวอย่างเล็ก ๆ เพื่อลบองค์ประกอบออกจากตำแหน่งใด ๆ สิ่งนี้จะขยายคลาส Array ใน Javascript และเพิ่มเมธอด remove (index)

// Remove element at the given index
Array.prototype.remove = function(index) {
    this.splice(index, 1);
}

ดังนั้นในการลบรายการแรกในตัวอย่างของคุณโทร arr.remove ():

var arr = [1,2,3,5,6];
arr.remove(0);

ในการลบรายการที่สอง

arr.remove(1);

และนี่ก็เป็นเล็ก ๆบทความที่มีการแทรกและลบวิธีการสำหรับการเรียนอาร์เรย์

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



7

คำตอบที่คนอื่นจะดีฉันแค่อยากจะเพิ่มเป็นโซลูชั่นทางเลือกที่มีฟังก์ชั่นอาร์เรย์: ES6filter

filter() สร้างอาร์เรย์ใหม่ที่มีองค์ประกอบที่อยู่ภายใต้เกณฑ์ที่กำหนดจากอาร์เรย์ที่มีอยู่

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

ตัวอย่างบางส่วน:

ลบองค์ประกอบแรก :

// Not very useful but it works
function removeFirst(element, index) {
  return index > 0;
}
var arr = [1,2,3,5,6].filter(removeFirst); // [2,3,4,5,6]

ลบองค์ประกอบที่สอง :

function removeSecond(element, index) {
  return index != 1;
}
var arr = [1,2,3,5,6].filter(removeSecond); // [1,3,4,5,6]

ลบองค์ประกอบคี่ :

function removeOdd(element, index) {
  return !(element % 2);
}
var arr = [1,2,3,5,6].filter(removeOdd); [2,4,6]

ลบรายการที่ไม่อยู่ในสต็อก

const inventory = [
  {name: 'Apple', qty: 2},
  {name: 'Banana', qty: 0},
  {name: 'Orange', qty: 5}
];

const res = inventory.find( product => product.qty > 0);


2

คุณสามารถใช้คุณสมบัติการกำหนดรูปแบบการทำลายล้าง ES6 กับผู้ควบคุมเครื่อง เครื่องหมายจุลภาคเป็นการระบุตำแหน่งที่คุณต้องการลบองค์ประกอบและตัวดำเนินการส่วนที่เหลือ (... arr) เพื่อให้องค์ประกอบที่เหลือของอาร์เรย์

const source = [1,2,3,5,6];

function removeFirst(list) {
   var  [, ...arr] = list;
   return arr;
}
const arr = removeFirst(source);
console.log(arr); // [2, 3, 5, 6]
console.log(source); // [1, 2, 3, 5, 6]


1

Array.splice()มีคุณสมบัติที่น่าสนใจที่ไม่สามารถใช้เพื่อลบองค์ประกอบแรก ดังนั้นเราต้องหันไปใช้

function removeAnElement( array, index ) {
    index--;

    if ( index === -1 ) {
        return array.shift();
    } else {
        return array.splice( index, 1 );
    }
}

3
Array.splice (0,1) ลบองค์ประกอบแรก ตามทุกคำตอบอื่น ๆ ที่นี่และเป็นไปตามdeveloper.mozilla.org/en-US/docs/Web/JavaScript/Reference/... นอกจากนี้ทำไมบางคนถึงผ่าน -1 ถึงลบองค์ประกอบแรก พวกเขาจะไม่ผ่าน 0 หรือไม่
ศิลา

@skypecakes ฉันไม่สามารถพูดเกี่ยวกับความถูกต้องของรอยต่อในดัชนีที่ 0 แต่นี่ดัชนีจะลดลงก่อนการตรวจสอบนั้นดังนั้นมันจะเป็น 0 เมื่อผ่านเข้า
Jake T.

ใช่มันแน่นอนสามารถลบองค์ประกอบแรก ฉันทดสอบที่นี่: jsfiddle.net/sijpkes/d87rcLob/2
sijpkes

1

โซลูชั่น typescript ที่ไม่ได้กลายพันธุ์อาร์เรย์เดิม

function removeElementAtIndex<T>(input: T[], index: number) {
  return input.slice(0, index).concat(input.slice(index + 1));
}

1

มีหลายวิธีในการลบองค์ประกอบออกจาก Array ฉันขอชี้ให้เห็นตัวเลือกที่ใช้มากที่สุดด้านล่าง ฉันกำลังเขียนคำตอบนี้เพราะฉันไม่สามารถหาเหตุผลที่เหมาะสมเกี่ยวกับสิ่งที่จะใช้จากตัวเลือกเหล่านี้ทั้งหมด คำตอบสำหรับคำถามคือตัวเลือก 3 ( Splice () )

1) SHIFT () - ลบองค์ประกอบแรกออกจากอาร์เรย์ดั้งเดิมและส่งกลับองค์ประกอบแรก

ดูข้อมูลอ้างอิงสำหรับArray.prototype.shift () ใช้สิ่งนี้เฉพาะเมื่อคุณต้องการลบองค์ประกอบแรกและเฉพาะในกรณีที่คุณไม่เป็นไรด้วยการเปลี่ยนอาร์เรย์เดิม

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

2) SLICE () - ส่งคืนสำเนาของอาเรย์ที่คั่นด้วยดัชนีเริ่มต้นและดัชนีสิ้นสุด

ดูข้อมูลอ้างอิงสำหรับArray.prototype.slice () คุณไม่สามารถลบองค์ประกอบเฉพาะออกจากตัวเลือกนี้ คุณสามารถแบ่งเฉพาะอาร์เรย์ที่มีอยู่และรับส่วนต่อเนื่องของอาร์เรย์ได้ มันเหมือนกับการตัดอาร์เรย์จากดัชนีที่คุณระบุ อาร์เรย์เดิมไม่ได้รับผลกระทบ

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

3) SPLICE () - เปลี่ยนเนื้อหาของอาเรย์โดยการลบหรือเปลี่ยนอิลิเมนต์ที่ดัชนีเฉพาะ

ดูข้อมูลอ้างอิงสำหรับArray.prototype.splice () splice () วิธีการเปลี่ยนแปลงเนื้อหาของอาร์เรย์โดยการลบหรือแทนที่องค์ประกอบที่มีอยู่และ / หรือเพิ่มองค์ประกอบใหม่ในสถานที่ ส่งคืนอาร์เรย์ที่อัพเดต อาร์เรย์ดั้งเดิมได้รับการอัปเดต

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

0

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

let arr = [1, 2, 3]

arr.reduce((xs, x, index) => {
        if (index == 0) {
            return xs
        } else {
            return xs.concat(x)
        }
    }, Array())

// Or if you like a oneliner
arr.reduce((xs, x, index) => index == 0 ? xs : xs.concat(x), Array())
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.