Xóa phần tử trong mảng javascript

Câu hỏi kinh điển này thỉnh thoảng lại xuất hiện. Ngay cả người tạo ra Node. js Ryan Dahl đã hỏi câu hỏi này từ khán giả trong Node của anh ấy. js (nhân tiện, đây là một bản trình bày xuất sắc)

Làm cách nào để xóa phần tử khỏi mảng?

Toán tử

> let array = ["a", "b", "c"];
> array.pop();
'c'
> array;
[ 'a', 'b' ]

5 có được sử dụng không?

Sử dụng mối nối () để xóa mục tùy ý

Cách chính xác để xóa một phần tử khỏi mảng là sử dụng

> let array = ["a", "b", "c"];
> array.pop();
'c'
> array;
[ 'a', 'b' ]

6. Phải mất một chỉ mục và số lượng mục cần xóa bắt đầu từ chỉ mục đó

> let array = ["a", "b", "c"];
> let index = 1;
> array.splice(index, 1);
[ 'b' ]
> array;
[ 'a', 'c' ]

Đừng nhầm lẫn điều này với người anh em họ tương tự của nó là

> let array = ["a", "b", "c"];
> array.pop();
'c'
> array;
[ 'a', 'b' ]

7 được sử dụng để trích xuất một phần của mảng

Sử dụng shift() để xóa từ đầu

Nếu bạn luôn quan tâm đến việc xóa mục đầu tiên hoặc mục cuối cùng, thì bạn có một giải pháp thay thế. Các phương pháp

> let array = ["a", "b", "c"];
> delete array[1];
> array;
[ 'a', , 'c' ]
> array.length
3

0 và

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

0 tồn tại chính xác cho mục đích này. Với

> let array = ["a", "b", "c"];
> delete array[1];
> array;
[ 'a', , 'c' ]
> array.length
3

0, bạn có thể xóa mục đầu tiên

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

Sử dụng pop() để xóa từ cuối

Và với

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

0, bạn có thể xóa mục cuối cùng

> let array = ["a", "b", "c"];
> array.pop();
'c'
> array;
[ 'a', 'b' ]

Sử dụng xóa tạo các điểm trống

Dù bạn làm gì, đừng sử dụng

> let array = ["a", "b", "c"];
> array.pop();
'c'
> array;
[ 'a', 'b' ]

5 để xóa một mục khỏi mảng. Ngôn ngữ JavaScript chỉ định rằng các mảng thưa thớt, tôi. e. , họ có thể có lỗ hổng trong họ

Sử dụng

> let array = ["a", "b", "c"];
> array.pop();
'c'
> array;
[ 'a', 'b' ]

5 tạo ra các loại lỗ này. Nó xóa một mục khỏi mảng, nhưng nó không cập nhật thuộc tính độ dài. Điều này khiến mảng ở trạng thái buồn cười tốt nhất nên tránh

> let array = ["a", "b", "c"];
> delete array[1];
> array;
[ 'a', , 'c' ]
> array.length
3

Lưu ý chỗ trống và chiều dài không thay đổi

Nhớ điều này

Lần tới khi bạn cần xóa thứ gì đó khỏi mảng, hãy ghi nhớ những điều sau

Xóa?Một mục

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

5Mục đầu tiên

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

6Mục cuối cùng

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

7Còn xóa thì sao?Cố gắng tránh

> let array = ["a", "b", "c"];
> array.pop();
'c'
> array;
[ 'a', 'b' ]

5, gây ra các mảng thưa thớt. Các phương thức JavaScript để xóa một phần tử khỏi một mảng

Nút không đợi cuộc gọi cơ sở dữ liệu của bạn kết thúc?

Tìm hiểu cách cuộc gọi không đồng bộ hoạt động và làm cho ứng dụng của bạn chạy như bạn dự định. Nhận khóa học email ngắn về tính không đồng bộ và hai chương từ Hoàn thiện ứng dụng nút của bạn

Đô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

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 1.400 nhà phát triển đăng ký

1. Phương pháp > let array = ["a", "b", "c"]; > delete array[1]; > array; [ 'a', , 'c' ] > array.length 35 > let array = ["a", "b", "c"]; > delete array[1]; > array; [ 'a', , 'c' ] > array.length 36 và > let array = ["a", "b", "c"]; > array.shift(); 'a' > array; [ 'b', 'c' ]00

Để 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

> let array = ["a", "b", "c"];
> delete array[1];
> array;
[ 'a', , 'c' ]
> array.length
3

6 để tìm chỉ mục của đối tượng có ID trong mảng. Sau đó gọi phương thức

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

02 trên mảng để xóa đối tượng khỏi mảng

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

0

Phương thức

> let array = ["a", "b", "c"];
> delete array[1];
> array;
[ 'a', , 'c' ]
> array.length
3

5

> let array = ["a", "b", "c"];
> delete array[1];
> array;
[ 'a', , 'c' ]
> array.length
3

6 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

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

3

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

> let array = ["a", "b", "c"];
> delete array[1];
> array;
[ 'a', , 'c' ]
> array.length
3

6 trả về chỉ mục của đối tượng có ID đó

Phương thức

> let array = ["a", "b", "c"];
> delete array[1];
> array;
[ 'a', , 'c' ]
> array.length
3

5

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

00 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

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

5

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

1. > let array = ["a", "b", "c"];
   > array.shift();
   'a'
   > array;
   [ 'b', 'c' ]

   08 – chỉ mục để bắt đầu thay đổi mảng

2. > let array = ["a", "b", "c"];
   > array.shift();
   'a'
   > array;
   [ 'b', 'c' ]

   09 – số phần tử cần xóa khỏi

   > let array = ["a", "b", "c"];
   > array.shift();
   'a'
   > array;
   [ 'b', 'c' ]

   08

3. > let array = ["a", "b", "c"];
   > array.shift();
   'a'
   > array;
   [ 'b', 'c' ]

   31 – một số phần tử thay đổi để thêm vào mảng, bắt đầu từ

   > let array = ["a", "b", "c"];
   > array.shift();
   'a'
   > array;
   [ 'b', 'c' ]

   08

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

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

09 của

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

34 và một

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

08 của chỉ mục đích để làm cho

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

00 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,

> let array = ["a", "b", "c"];
> delete array[1];
> array;
[ 'a', , 'c' ]
> array.length
3

6 sẽ trả về

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

38. Vì điều này, chúng tôi thêm dấu kiểm

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

39 để đảm bảo rằng chỉ mục là

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

50 hoặc cao hơn

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

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

39 này, thì

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

00 sẽ được gọi với

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

38 làm đối số đầu tiên 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

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

1

Tránh tác dụng phụ

Phương thức

> let array = ["a", "b", "c"];
> delete array[1];
> array;
[ 'a', , 'c' ]
> array.length
3

5

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

00 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

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

56 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

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

00 trên bản sao, thay vì bản gốc

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

5

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 > let array = ["a", "b", "c"]; > delete array[1]; > array; [ 'a', , 'c' ] > array.length 35 > let array = ["a", "b", "c"]; > array.shift(); 'a' > array; [ 'b', 'c' ]59

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

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

59. Chúng tôi gọi

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

59 trên mảng, chuyển một hàm gọi lại trả về

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

12 cho mọi phần tử trong mảng đó ngoại trừ đối tượng có ID đã chỉ định

Thí dụ

> let array = ["a", "b", "c"];
> array.pop();
'c'
> array;
[ 'a', 'b' ]

0

Phương thức

> let array = ["a", "b", "c"];
> delete array[1];
> array;
[ 'a', , 'c' ]
> array.length
3

5

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

59 tạo một mảng mới chứa các phần tử vượt qua bài 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ụ

> let array = ["a", "b", "c"];
> array.pop();
'c'
> array;
[ 'a', 'b' ]

2

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

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

15 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ừ

> let array = ["a", "b", "c"];
> array.shift();
'a'
> array;
[ 'b', 'c' ]

59

11 Tính năng JavaScript mới tuyệt vời trong ES13

Hướng dẫn này sẽ giúp bạn cập nhật tất cả các tính năng mới nhất được thêm vào trong ECMAScript 13. Những tính năng mới mạnh mẽ này sẽ hiện đại hóa JavaScript của bạn bằng mã ngắn hơn và biểu cảm hơn

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

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ở