ฉันจะลบรายการอาร์เรย์ใน TypeScript ได้อย่างไร


404

ฉันมีอาร์เรย์ที่ฉันสร้างใน TypeScript และมีคุณสมบัติที่ฉันใช้เป็นคีย์ หากฉันมีคีย์นั้นฉันจะลบรายการออกจากมันได้อย่างไร

คำตอบ:


639

เช่นเดียวกับที่คุณทำใน JavaScript

delete myArray[key];

undefinedโปรดทราบว่าชุดนี้องค์ประกอบที่จะ

ดีกว่าที่จะใช้Array.prototype.spliceฟังก์ชั่น:

const index = myArray.indexOf(key, 0);
if (index > -1) {
   myArray.splice(index, 1);
}

8
คุณสามารถเพิ่มประเภทได้! var index: number = myArray.indexOf(key, 0);
CorayThan

17
@CorayThan แน่นอนว่ามันจะถูกพิมพ์โดยปริยายเมื่อindexOfส่งคืน a number?
คริส

5
@Chris แม้ว่าจะชัดเจนในกรณีง่าย ๆ นี้ แต่ก็สามารถช่วยให้คุณวินิจฉัยข้อผิดพลาดได้เร็วขึ้นหากคุณกำหนดประเภทสำหรับตัวแปรทุกตัวอย่างชัดเจน คุณกำลังใช้งานindexมากกว่าหนึ่งสถานที่อยู่แล้วและหนึ่งในสถานที่เหล่านั้น ( splice) ต้องการเห็นตัวเลขหรือคุณจะได้รับข้อผิดพลาด ขณะนี้คอมไพเลอร์ไม่สามารถป้องกันคุณทำผิดพลาดได้
Jochem Kuijpers

33
@blorkfish var index = myArray.findIndex(x => x.prop==key.prop);มันเป็นเรื่องดีที่จะพูดถึงว่าถ้าคุณมีรายชื่อของวัตถุคุณสามารถใช้
Francisco Cabral

6
@ Cirelli94 - คุณกำลังตอบกระทู้เก่า แต่คำตอบสำหรับคำถามของคุณคือการลบองค์ประกอบอาร์เรย์ไม่ได้เปลี่ยนความยาวหรือสร้างดัชนีอาร์เรย์อีกครั้ง เพราะอาร์เรย์เป็นวัตถุใน JavaScript, delete myArr[2]ตัวอักษรลบทรัพย์สิน 2ของซึ่งยังแตกต่างกว่าmyArr myArr[2] = undefinedคุณธรรมของเรื่องนี้คือการใช้spliceสำหรับงานนี้เพราะมันเป็นวิธีที่ปลอดภัยในการรับผลที่ต้องการโดยไม่ทำให้เกิดผลข้างเคียงที่สับสน
winglerw28

200

ถ้าอาร์เรย์เป็นประเภทของวัตถุดังนั้นวิธีที่ง่ายที่สุดคือ

let foo_object // Item to remove
this.foo_objects = this.foo_objects.filter(obj => obj !== foo_object);

20
สิ่งนี้ไม่ได้ลบสิ่งที่มันเพียงแค่กรอง หากต้องการแก้ไขรายการจริง ๆ นี่ไม่ใช่วิธี
user573434

6
@ user573434 ใช่คุณพูดถูก แต่นี้เป็นวิธีการที่เรียบง่ายในกรณีที่คุณต้องการลบวัตถุบนที่ประสบความสำเร็จ ฯลฯ เรียก API ลบ
มาลิก Shahzad

3
สิ่งนี้ทำงานได้อย่างสมบูรณ์แบบสำหรับฉันในชุดของวัตถุโดยไม่มีคุณสมบัติคีย์ที่ไม่ซ้ำกัน @ user573434 วิธีการกรองส่งกลับอาร์เรย์ใหม่โดยไม่มีวัตถุที่ถูกกรองดังนั้นอาร์เรย์ที่เป็นผลลัพธ์จึงมีวัตถุที่ถูกลบ
Jason

6
ฉันคิดว่าเพื่อที่จะคืนมันเป็นวัตถุที่คุณต้องทำthis.foo_objects = this.foo_objects.filter(obj => obj !== foo_object)[0];
Roel

1
วิธีนี้ใช้ได้ผล แค่อ่านบรรทัดที่ 2 อย่างระมัดระวัง เขาทำตัวกรองด้วย obj! = foo_object และกำหนดให้กับตัวแปรดั้งเดิมดังนั้นแทนที่อาร์เรย์เดิมด้วยหนึ่งลบ foo_object ที่กรอง ใช้กับอาเรย์ของวัตถุที่มี ID deleteById(id: string) { this.data = this.data.filter(d => d.id !== id); }เพียงหนึ่งคำเตือนหากรหัสไม่ซ้ำกันคุณจะลบทั้งหมดด้วยเหมือนกันid
Markus

74

ด้วย ES6 คุณสามารถใช้รหัสนี้:

removeDocument(doc){
   this.documents.forEach( (item, index) => {
     if(item === doc) this.documents.splice(index,1);
   });
}

1
ทางออกที่ดีที่สุดในการลบโดยไม่ต้องเปลี่ยนการอ้างอิงอาร์เรย์และมีความเป็นไปได้ที่จะใช้ algorythm ความเท่าเทียมเฉพาะ
Sid

1
พบคำตอบที่ดีที่สุด
Gvs Akhil

1
คำตอบที่ดีที่สุดถ้าใช้ ES6
Nathan Beck

2
คุณยังสามารถใช้: this.documents.forEach ((รายการดัชนีอาร์เรย์) => {ถ้า (รายการ === doc) array.splice (ดัชนี 1);}); ซึ่งสามารถทำความสะอาดได้มากโดยเฉพาะเมื่อทำงานกับอาร์เรย์ที่ซ้อนกัน
CGundlach

20

มันเป็นทางออกของฉันสำหรับสิ่งนั้น:

onDelete(id: number) {
    this.service.delete(id).then(() => {
        let index = this.documents.findIndex(d => d.id === id); //find index in your array
        this.documents.splice(index, 1);//remove element from array
    });

    event.stopPropagation();
}

สิ่งที่ดีเกี่ยวกับวิธีแก้ปัญหานี้คือมันจะทำงานแม้ว่าความเท่าเทียมกันของวัตถุจะไม่สามารถระบุวัตถุสองชิ้นได้เท่ากัน
แบรดจอห์นสัน

18

คุณสามารถใช้spliceวิธีการในอาร์เรย์เพื่อลบองค์ประกอบ

ตัวอย่างเช่นถ้าคุณมีอาร์เรย์ที่มีชื่อarrใช้สิ่งต่อไปนี้:

arr.splice(2, 1);

ดังนั้นที่นี่องค์ประกอบที่มีดัชนี 2 จะเป็นจุดเริ่มต้นและอาร์กิวเมนต์ 2 จะกำหนดจำนวนองค์ประกอบที่จะลบ

ถ้าคุณต้องการที่จะลบองค์ประกอบสุดท้ายของอาร์เรย์ชื่อarrทำเช่นนี้:

arr.splice(arr.length-1, 1);

นี่จะส่งคืน arr พร้อมกับองค์ประกอบสุดท้ายที่ถูกลบ

ตัวอย่าง:

var arr = ["orange", "mango", "banana", "sugar", "tea"];
arr.splice(arr.length-1, 1)
console.log(arr); // return ["orange", "mango", "banana", "sugar"]

1
เพียงแค่ FYI วิธีการประกบกันจะแก้ไขอาร์เรย์ (ดังนั้นในกรณีนี้จะลบรายการสุดท้าย) และส่งคืนรายการที่ถูกลบไม่ใช่อาร์เรย์เอง
CGundlach

2
จริง ๆ แล้วควรเป็น arr.splice (arr.length-1,1) เพื่อลบองค์ประกอบสุดท้าย
สตีฟใน CO

15

ให้แผนกเป็นอาร์เรย์ คุณต้องการลบรายการออกจากอาร์เรย์นี้

departments: string[] = [];

 removeDepartment(name: string): void {
    this.departments = this.departments.filter(item => item != name);
  }

8

นี่คือหนึ่งซับง่าย ๆ สำหรับการลบวัตถุโดยคุณสมบัติจากอาร์เรย์ของวัตถุ

delete this.items[this.items.findIndex(item => item.item_id == item_id)];

หรือ

this.items = this.items.filter(item => item.item_id !== item.item_id);

1
ปัญหาเกี่ยวกับวิธีแก้ไขปัญหาแรกคือการลบจะลบองค์ประกอบออก แต่ขนาดอาร์เรย์จะยังคงเหมือนเดิมก่อนที่จะทำการ Deteling ในการแก้ปัญหาที่สองเราจะมีวัตถุใหม่ดังนั้นถ้าเรามีการพึ่งพา spme แล้วเราจะสูญเสียมัน Splice (ซึ่งอยู่ในคำตอบยอดนิยม) ไม่มีผลกระทบนี้
Krystian

ขอบคุณสำหรับการชี้ให้เห็นว่า ฉันคิดว่าในกรณีที่ใช้ฉันยังไม่ได้ค้นพบว่า สังเกตได้ดี :)
Jamie Armor

5

คำตอบโดยใช้โอเปอเรเตอร์ TypeScript (... )

// Your key
const key = 'two';

// Your array
const arr = [
    'one',
    'two',
    'three'
];

// Get either the index or -1
const index = arr.indexOf(key); // returns 0


// Despite a real index, or -1, use spread operator and Array.prototype.slice()    
const newArray = (index > -1) ? [
    ...arr.slice(0, index),
    ...arr.slice(index + 1)
] : arr;

5

อีกหนึ่งโซลูชั่นที่ใช้ typescript:

let updatedArray = [];
for (let el of this.oldArray) {
    if (el !== elementToRemove) {
        updated.push(el);
    }
}
this.oldArray = updated;

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

1

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

  • รายการจะไม่เริ่มต้นใหม่
  • อัปเดตความยาวของอาร์เรย์อย่างเหมาะสม
    const objWithIdToRemove;
    const objIndex = this.objectsArray.findIndex(obj => obj.id === objWithIdToRemove);
    if (objIndex > -1) {
      this.objectsArray.splice(objIndex, 1);
    }

0

แค่ต้องการเพิ่มวิธีการขยายสำหรับอาร์เรย์

interface Array<T> {
      remove(element: T): Array<T>;
    }

    Array.prototype.remove = function (element) {
      const index = this.indexOf(element, 0);
      if (index > -1) {
        return this.splice(index, 1);
      }
      return this;
    };
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.