search

Xóa phần tử khỏi mảng javascript

1 năms trước
Trả lời: 0
Lượt xem: 56

Đôi khi chúng ta có thể đang làm việc với một mảng các đối tượng có ID duy nhất cho phép mỗi đối tượng được xác định duy nhất giữa các đối tượng khác

Show

Ví dụ

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Peter' },
  { id: 3, name: 'Kate' },
];

Nếu chúng ta muốn xóa một đối tượng có ID cụ thể khỏi mảng thì sao?

Đăng ký bản tin Coding Beauty

Có được những hiểu biết hữu ích và nâng cao kiến ​​thức phát triển web của bạn với các mẹo và hướng dẫn hàng tuần từ Coding Beauty. Hơn 2.000 nhà phát triển đăng ký

1. Phương pháp Array findIndex() và function removeObjectWithId(arr, id) { const objWithIdIndex = arr.findIndex((obj) => obj.id === id); if (objWithIdIndex > -1) { arr.splice(objWithIdIndex, 1); } return arr; } const arr = [ { id: 1, name: 'John' }, { id: 2, name: 'Kate' }, { id: 3, name: 'Peter' }, ]; removeObjectWithId(arr, 2); // [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ] console.log(arr); 0

Để xóa một phần tử khỏi mảng bằng ID trong JavaScript, hãy sử dụng phương thức findIndex() để tìm chỉ mục của đối tượng có ID trong mảng. Sau đó gọi phương thức 

function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);

  if (objWithIdIndex > -1) {
    arr.splice(objWithIdIndex, 1);
  }

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);
2 trên mảng để xóa đối tượng khỏi mảng

function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);

  if (objWithIdIndex > -1) {
    arr.splice(objWithIdIndex, 1);
  }

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);

Phương thức Array findIndex() trả về chỉ mục của phần tử đầu tiên trong một mảng vượt qua kiểm tra được chỉ định bởi hàm gọi lại

const arr = [9, 8, 7, 6, 5];

const index = arr.findIndex((num) => num === 7);
console.log(index); // 2

Chúng tôi chỉ định một bài kiểm tra rằng một đối tượng trong mảng đó sẽ chỉ vượt qua nếu nó có ID bằng với ID đã chỉ định. Điều này làm cho findIndex() trả lại chỉ mục của đối tượng có ID đó

Phương thức Array 

function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);

  if (objWithIdIndex > -1) {
    arr.splice(objWithIdIndex, 1);
  }

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);
0 thay đổi nội dung của một mảng bằng cách loại bỏ các phần tử hiện có đồng thời thêm các phần tử mới

const arr1 = ['a', 'b', 'c'];

// Removing elements
arr1.splice(1, 2);
console.log(arr1); // [ 'a' ]

// Removing and adding new elements
const arr2 = ['a', 'b', 'c'];
arr2.splice(1, 2, 'd', 'e');
console.log(arr2); // [ 'a', 'd', 'e' ]

Phương thức này có ba đối số

  1. function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);

  if (objWithIdIndex > -1) {
    arr.splice(objWithIdIndex, 1);
  }

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);
    8 – chỉ mục để bắt đầu thay đổi mảng
  2. function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);

  if (objWithIdIndex > -1) {
    arr.splice(objWithIdIndex, 1);
  }

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);
    9 – số phần tử cần xóa khỏi 
    function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);

  if (objWithIdIndex > -1) {
    arr.splice(objWithIdIndex, 1);
  }

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);
    8
  3. const arr = [9, 8, 7, 6, 5];

const index = arr.findIndex((num) => num === 7);
console.log(index); // 2
    1 – một số phần tử thay đổi để thêm vào mảng, bắt đầu từ 
    function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);

  if (objWithIdIndex > -1) {
    arr.splice(objWithIdIndex, 1);
  }

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);
    8

Chúng tôi chỉ định một 

function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);

  if (objWithIdIndex > -1) {
    arr.splice(objWithIdIndex, 1);
  }

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);
9 của 
const arr = [9, 8, 7, 6, 5];

const index = arr.findIndex((num) => num === 7);
console.log(index); // 2
4 và một 
function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);

  if (objWithIdIndex > -1) {
    arr.splice(objWithIdIndex, 1);
  }

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);
8 của chỉ mục đích để làm cho 
function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);

  if (objWithIdIndex > -1) {
    arr.splice(objWithIdIndex, 1);
  }

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);
0 chỉ xóa đối tượng có chỉ mục đó khỏi mảng. Chúng tôi đã không chỉ định thêm bất kỳ đối số nào, vì vậy không có gì được thêm vào mảng

Nếu không có đối tượng nào vượt qua bài kiểm tra được chỉ định, findIndex() sẽ trả về 

const arr = [9, 8, 7, 6, 5];

const index = arr.findIndex((num) => num === 7);
console.log(index); // 2
8. Vì điều này, chúng tôi thêm dấu kiểm 
const arr = [9, 8, 7, 6, 5];

const index = arr.findIndex((num) => num === 7);
console.log(index); // 2
9 để đảm bảo rằng chỉ mục là 
const arr1 = ['a', 'b', 'c'];

// Removing elements
arr1.splice(1, 2);
console.log(arr1); // [ 'a' ]

// Removing and adding new elements
const arr2 = ['a', 'b', 'c'];
arr2.splice(1, 2, 'd', 'e');
console.log(arr2); // [ 'a', 'd', 'e' ]
0 hoặc cao hơn

Nếu không có kiểm tra 

const arr = [9, 8, 7, 6, 5];

const index = arr.findIndex((num) => num === 7);
console.log(index); // 2
9 này, thì 
function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);

  if (objWithIdIndex > -1) {
    arr.splice(objWithIdIndex, 1);
  }

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);
0 sẽ được gọi với đối số đầu tiên là 
const arr = [9, 8, 7, 6, 5];

const index = arr.findIndex((num) => num === 7);
console.log(index); // 2
8 và sẽ xóa phần tử cuối cùng của mảng, khi thực sự không có phần tử nào có ID trong mảng

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

// No such element with ID of 9
const objWithIdIndex = arr.findIndex((obj) => obj.id === 9);

console.log(objWithIdIndex); // -1

// ❌ No if check

arr.splice(objWithIdIndex, 1); // ❌ Removes last element!

// [ { id: 1, name: 'John' }, { id: 2, name: 'Kate' } ]
console.log(arr);

Tránh tác dụng phụ

Phương thức Array 

function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);

  if (objWithIdIndex > -1) {
    arr.splice(objWithIdIndex, 1);
  }

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);
0 thay đổi mảng đã truyền. Điều này giới thiệu một tác dụng phụ vào chức năng 
const arr1 = ['a', 'b', 'c'];

// Removing elements
arr1.splice(1, 2);
console.log(arr1); // [ 'a' ]

// Removing and adding new elements
const arr2 = ['a', 'b', 'c'];
arr2.splice(1, 2, 'd', 'e');
console.log(arr2); // [ 'a', 'd', 'e' ]
6 của chúng tôi. Để tránh sửa đổi mảng đã truyền và tạo một hàm thuần túy, hãy tạo một bản sao của mảng và gọi ____1_______0 trên bản sao, thay vì bản gốc

function removeObjectWithId(arr, id) {
  // Making a copy with the Array from() method
  const arrCopy = Array.from(arr);

  const objWithIdIndex = arrCopy.findIndex((obj) => obj.id === id);
  arrCopy.splice(objWithIdIndex, 1);
  return arrCopy;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

const newArr = removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(newArr);

// original not modified
/**
[
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' }
]
 */
console.log(arr);

Mẹo

Các chức năng không sửa đổi trạng thái bên ngoài (i. e. , các hàm thuần túy) có xu hướng dễ dự đoán hơn và dễ suy luận hơn về. Điều này làm cho nó trở thành một phương pháp hay để hạn chế số lượng tác dụng phụ trong chương trình của bạn

2. Phương pháp Array const arr1 = ['a', 'b', 'c']; // Removing elements arr1.splice(1, 2); console.log(arr1); // [ 'a' ] // Removing and adding new elements const arr2 = ['a', 'b', 'c']; arr2.splice(1, 2, 'd', 'e'); console.log(arr2); // [ 'a', 'd', 'e' ] 9

Chúng ta cũng có thể xóa một phần tử khỏi mảng bằng ID bằng phương thức 

const arr1 = ['a', 'b', 'c'];

// Removing elements
arr1.splice(1, 2);
console.log(arr1); // [ 'a' ]

// Removing and adding new elements
const arr2 = ['a', 'b', 'c'];
arr2.splice(1, 2, 'd', 'e');
console.log(arr2); // [ 'a', 'd', 'e' ]
9. Chúng tôi gọi 
const arr1 = ['a', 'b', 'c'];

// Removing elements
arr1.splice(1, 2);
console.log(arr1); // [ 'a' ]

// Removing and adding new elements
const arr2 = ['a', 'b', 'c'];
arr2.splice(1, 2, 'd', 'e');
console.log(arr2); // [ 'a', 'd', 'e' ]
9 trên mảng, chuyển một cuộc gọi lại trả về 
const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

// No such element with ID of 9
const objWithIdIndex = arr.findIndex((obj) => obj.id === 9);

console.log(objWithIdIndex); // -1

// ❌ No if check

arr.splice(objWithIdIndex, 1); // ❌ Removes last element!

// [ { id: 1, name: 'John' }, { id: 2, name: 'Kate' } ]
console.log(arr);
2 cho mọi phần tử trong mảng đó ngoại trừ đối tượng có ID đã chỉ định

Thí dụ

function removeObjectWithId(arr, id) {
  return arr.filter((obj) => obj.id !== id);
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

const newArr = removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(newArr);

// original not modified
/**
[
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' }
]
 */
console.log(arr);

Phương thức Array 

const arr1 = ['a', 'b', 'c'];

// Removing elements
arr1.splice(1, 2);
console.log(arr1); // [ 'a' ]

// Removing and adding new elements
const arr2 = ['a', 'b', 'c'];
arr2.splice(1, 2, 'd', 'e');
console.log(arr2); // [ 'a', 'd', 'e' ]
9 tạo một mảng mới chứa các phần tử vượt qua kiểm tra được chỉ định bởi hàm gọi lại. Nó không sửa đổi mảng ban đầu

Thí dụ

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

const filtered = arr.filter((num) => num > 2);
console.log(filtered); // [ 3, 4 ]

Trong ví dụ của chúng tôi, chúng tôi đặt một bài kiểm tra rằng một đối tượng trong mảng sẽ chỉ vượt qua nếu thuộc tính 

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

// No such element with ID of 9
const objWithIdIndex = arr.findIndex((obj) => obj.id === 9);

console.log(objWithIdIndex); // -1

// ❌ No if check

arr.splice(objWithIdIndex, 1); // ❌ Removes last element!

// [ { id: 1, name: 'John' }, { id: 2, name: 'Kate' } ]
console.log(arr);
5 của nó không bằng ID đã chỉ định. Điều này đảm bảo rằng đối tượng có ID đã chỉ định không được bao gồm trong mảng mới được trả về từ 
const arr1 = ['a', 'b', 'c'];

// Removing elements
arr1.splice(1, 2);
console.log(arr1); // [ 'a' ]

// Removing and adding new elements
const arr2 = ['a', 'b', 'c'];
arr2.splice(1, 2, 'd', 'e');
console.log(arr2); // [ 'a', 'd', 'e' ]
9



Mọi điều điên rồ mà JavaScript làm

Hướng dẫn hấp dẫn về những cảnh báo tinh tế và những phần ít được biết đến của JavaScript

Xóa phần tử khỏi mảng javascript
Xóa phần tử khỏi mảng javascript

Đăng ký và nhận ngay một bản sao miễn phí


Xóa phần tử khỏi mảng javascript
Xóa phần tử khỏi mảng javascript

Ayibatari Ibaba

Ayibatari Ibaba là nhà phát triển phần mềm có nhiều năm kinh nghiệm xây dựng trang web và ứng dụng. Anh ấy đã viết rất nhiều về nhiều chủ đề lập trình và đã tạo ra hàng chục ứng dụng và thư viện mã nguồn mở

programming javascript

Bài Viết Liên Quan

Làm cách nào để tính tuổi trong Excel từ số ID?
Làm cách nào để tính tuổi trong Excel từ số ID?

Python có sử dụng float64 không?
Python có sử dụng float64 không?

Kết nối mongodb không xác định
Kết nối mongodb không xác định

4 thành phần cơ bản của bảng tính là gì?
4 thành phần cơ bản của bảng tính là gì?

Làm cách nào để thêm khoảng cách giữa 2 từ trong JavaScript?
Làm cách nào để thêm khoảng cách giữa 2 từ trong JavaScript?

Một lỗi PHP đã gặp phải cảnh báo mức độ nghiêm trọng
Một lỗi PHP đã gặp phải cảnh báo mức độ nghiêm trọng

Phản ứng hooks cheat sheet pdf
Phản ứng hooks cheat sheet pdf

Làm cách nào để gán một giá trị biến cho một biến khác trong Python?
Làm cách nào để gán một giá trị biến cho một biến khác trong Python?

Mức tăng lương tối thiểu vào năm 2023 là bao nhiêu?
Mức tăng lương tối thiểu vào năm 2023 là bao nhiêu?

Từ điển Python thêm nhiều cặp giá trị khóa
Từ điển Python thêm nhiều cặp giá trị khóa

MỚI CẬP NHẬP

Răng khôn mọc như thế nào thì phải nhổ năm 2024
1 phúts trước . bởi UnansweredPublicist
Các công thức excel thường dùng trong kế toán năm 2024
19 phúts trước . bởi GratingThicket
Đầu số 095 là mạng gì năm 2024
38 phúts trước . bởi HealingCorrelation
Cau trúc nào là nào là trong tieng nhat năm 2024
1 giờs trước . bởi AvowedCreator
Các tác phẩm trong chương trình ngữ văn 9 năm 2024
1 giờs trước . bởi MalevolentAnomaly
Baek jong wons top 3 chef king vietsub chaeyeon dia năm 2024
1 giờs trước . bởi DelightedCumin
Yêu thương của em là gì châu việt cường năm 2024
1 giờs trước . bởi ActingFunction
Light at the end of the tunnel là gì năm 2024
1 giờs trước . bởi ShyIceberg
Chỉ số bmi tính như thế nào trẻ em năm 2024
1 giờs trước . bởi AdmiringTaker
Làm thế nào để khoá tài khoản fb năm 2024
2 giờs trước . bởi IntermediateDaybreak

Xem Nhiều

Câu bạn làm bài tập chưa có chức năng gì năm 2024
4 ngàys trước . bởi Law-abidingMartin
Yeu tố nước trong kiến trúc cảnh quan là gì năm 2024
1 ngàys trước . bởi PreservingWiring
Caâu hỏi trắc nghiệm về văn hóa tổ chức năm 2024
6 ngàys trước . bởi EngravedSchism
Làm thế nào để hết quầng thâm mắt bẩm sinh năm 2024
4 ngàys trước . bởi TransparentSubcommittee
An toàn thông tin và hệ thống là gì năm 2024
4 ngàys trước . bởi AppreciableNervousness
Lỗi file word 2010 bị kẻ ô vuông khi mở năm 2024
3 ngàys trước . bởi ElderlyWoodward
Kho chuyển hàng đi quốc tế tiếng anh là gì năm 2024
5 ngàys trước . bởi StrongEmperor
Chính sách kế hoạch hóa gia đình 2023 năm 2024
22 giờs trước . bởi FinancialAllotment
Chảy máu cam là bị bệnh gì năm 2024
3 ngàys trước . bởi OliveBlossom
Dau tư trung quốc vào tây nam thái bình dương năm 2024
3 ngàys trước . bởi OversizeAirtime

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.