Xóa phần tử khỏi mảng JavaScript mà không có đột biến

Khi bạn bắt đầu học các cách khác nhau để thao tác với một mảng, thế giới của bạn sẽ bừng sáng. Bạn có thể thêm và xóa các phần tử. Bạn có thể đảo ngược chúng. Sau đó, bạn nhận ra rằng không phải tất cả các phương thức mảng tích hợp đều hoạt động theo cách bạn muốn. Ở đâu đó trên đường đi, bạn sẽ bối rối không biết phương thức nào thay đổi mảng ban đầu của bạn và phương thức nào không

Sẽ thật tuyệt nếu có một công cụ cho bạn biết liệu một phương thức mảng cụ thể có thay đổi mảng ban đầu hay không?

Vâng tôi biết. Chúng tôi luôn có thể kiểm tra tài liệu của MDN. Tốt hơn nữa, có trang web tuyệt vời này [hy vọng] liệt kê tất cả các phương thức mảng thường được sử dụng và xác định chúng là "đột biến" hoặc "không đột biến". ”

Tôi đã kiểm đếm nhanh và thấy rằng chỉ có 9 trong số 31 phương pháp được liệt kê trên trang web làm biến đổi mảng

Đây là một ý tưởng. Tại sao không chỉ nhớ chín phương pháp mảng hủy diệt? . Nếu chúng ta gọi bất kỳ phương thức nào trong chín phương thức, chắc chắn mảng ban đầu sẽ bị sửa đổi

Được rồi, hãy cùng khám phá chín phương pháp này và xem những người đột biến biến đổi

1. . xô[]

Phương thức

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

1 nhận một phần tử mảng sẽ được thêm vào cuối mảng

Ở đây, chúng tôi có một mảng được gọi là

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

2 bao gồm ba biểu tượng cảm xúc khuôn mặt hạnh phúc. Sau khi chúng tôi đẩy một mặt phân, mảng

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

2 hiện có một mặt phân vui vẻ được gắn vào cuối

let happy = ['🙂', '😀', '😊'];happy.push['💩'];happy
// => [ '🙂', '😀', '😊', '💩']

2. . nhạc pop[]

Phương pháp này tương tự như phương pháp

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

1, vì cả hai đều liên quan đến việc thay đổi phần tử cuối cùng của mảng

Không giống như phương thức

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

1,

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

6 sẽ loại bỏ phần tử cuối cùng của mảng. Như được hiển thị bên dưới, chúng tôi chỉ cần

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

6 phân ra khỏi mảng

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

2

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

Mẹo. Biểu tượng cảm xúc phân không được chọn ngẫu nhiên. Nó ở đây để giúp chúng ta nhớ rằng cả

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

9 và

let happy = [ '🙂', '😀', '😊']happy.unshift['👻'];happy
// => [ '👻', '🙂', '😀', '😊']

0 đều thay đổi mảng bằng cách thêm [đẩy] hoặc xóa [bật] mục cuối cùng [poop]

3. . bỏ dịch []

Phương thức

let happy = [ '🙂', '😀', '😊']happy.unshift['👻'];happy
// => [ '👻', '🙂', '😀', '😊']

1 hoạt động tương tự như phương thức

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

1, ngoại trừ việc nó thêm một phần tử mới vào đầu mảng

Quay lại ví dụ khuôn mặt hạnh phúc sạch sẽ, không có phân của chúng tôi. Sau khi chúng tôi chuyển một biểu tượng cảm xúc ma vào phương thức

let happy = [ '🙂', '😀', '😊']happy.unshift['👻'];happy
// => [ '👻', '🙂', '😀', '😊']

1, mảng

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

2 hiện được dẫn dắt bởi một con ma

let happy = [ '🙂', '😀', '😊']happy.unshift['👻'];happy
// => [ '👻', '🙂', '😀', '😊']

Bây giờ, nếu chúng ta muốn xóa mục đầu tiên thì sao?

4. . sự thay đổi[]

Trong khi

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

6 xóa mục cuối cùng, thì

let happy = [ '🙂', '😀', '😊']happy.unshift['👻'];happy
// => [ '👻', '🙂', '😀', '😊']

6 chỉ cần xóa mục đầu tiên trong một mảng như vậy

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

Mẹo. Như bây giờ bạn có thể đã nhận thấy,

let happy = [ '🙂', '😀', '😊']happy.unshift['👻'];happy
// => [ '👻', '🙂', '😀', '😊']

7 và

let happy = [ '🙂', '😀', '😊']happy.unshift['👻'];happy
// => [ '👻', '🙂', '😀', '😊']

8 là các phương thức phản chiếu để thêm/xóa phần tử đầu tiên trong một mảng. Cũng giống như vậy, bạn có thể coi

happy
// => [ '🙂', '😀', '😊', '💩']happy.pop[];happy
// => [ '🙂', '😀', '😊']

9 và

let happy = [ '🙂', '😀', '😊']happy.unshift['👻'];happy
// => [ '👻', '🙂', '😀', '😊']

0 như một tập hợp các phương thức khác để thêm/xóa phần tử cuối cùng của một mảng

5. . đảo ngược[]

Đây là một trong những không có trí tuệ. Đúng như tên gọi của nó, phương thức

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

1 đảo ngược thứ tự các phần tử trong một mảng. Ở đây, chúng ta có thể thấy hiệu ứng trăng tròn và khuyết nhờ phương pháp

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

1

let moon = ['🌒', '🌓', '🌔', '🌕'];moon.reverse[];moon
// => [ '🌕', '🌔', '🌓', '🌒']

6. . nối[]

Phương thức

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

3 rất mạnh, vì nó có thể lấy bao nhiêu đối số tùy thích và thay đổi mảng bằng cách thêm và/hoặc thay thế [các] mục trong mảng

Trong ví dụ về mảng three-wise-monkeys bên dưới, chúng ta triển khai phương thức

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

3 bằng cách truyền vào ba loại đối số

1. Chỉ mục tại đó thay đổi bắt đầu [chỉ mục 1]
2. Số mục cần xóa [một mục. con khỉ không nghe lời]
3. [Các] mục để thêm vào mảng [ba mặt ác]

let monkeys = ['🙈', '🙉', '🙊'];monkeys.splice[1, 1, '😈', '😈', '😈'];

Bây giờ con khỉ không nghe thấy gì đã biến mất và thay vào đó là ba khuôn mặt xấu xa

monkeys
// => [ '🙈', '😈', '😈', '😈', '🙊']

Bạn cũng có thể chọn chỉ thêm các mục vào một vị trí cụ thể bên trong mảng. Ở đây, chúng tôi đã chèn khuôn mặt ác quỷ vào chỉ mục 2 nhưng giữ lại cả ba con khỉ [bằng cách chuyển vào

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

5 làm đối số thứ hai]

let monkeys = ['🙈', '🙉', '🙊'];monkeys.splice[2, 0, '😈'];monkeys
// => [ '🙈', '🙉', '😈', '🙊']

Mẹo. Coi chừng phương pháp

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

6. Nhìn bề ngoài thì có vẻ như là _

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

7, nhưng phương thức ___

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

8 tạo ra một mảng mới và do đó không làm thay đổi mảng ban đầu

7. . loại[]

Đây là một doozy. Theo mặc định, phương thức

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

9 sẽ sắp xếp các mục trong mảng theo thứ tự giảm dần, nhưng nó không nhất thiết phải hoạt động theo cách mà những người bình thường chúng ta mong đợi

Giả sử chúng ta có một dãy số. Điều gì xảy ra nếu chúng ta áp dụng phương pháp

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

9?

let numbers = [3, 25, 99];numbers.sort[];numbers
// => [ 25, 3, 99 ]

Kỳ lạ, phải không?

Hóa ra, phương thức

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

9 chuyển đổi từng mục thành một chuỗi và so sánh chúng theo các điểm mã Unicode của chúng

Chúng ta có thể kiểm tra các điểm mã Unicode của giá trị đầu tiên của chuỗi bằng cách gọi phương thức

let moon = ['🌒', '🌓', '🌔', '🌕'];moon.reverse[];moon
// => [ '🌕', '🌔', '🌓', '🌒']

2

Sau khi ép buộc những con số này thành các chuỗi, chúng ta hiểu tại sao

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

9 coi

let moon = ['🌒', '🌓', '🌔', '🌕'];moon.reverse[];moon
// => [ '🌕', '🌔', '🌓', '🌒']

4 nhỏ hơn

let moon = ['🌒', '🌓', '🌔', '🌕'];moon.reverse[];moon
// => [ '🌕', '🌔', '🌓', '🌒']

5

Đừng quên rằng biểu tượng cảm xúc cũng được truyền vào dưới dạng chuỗi

Tận cùng đen đủi

Nếu bạn thực sự muốn sắp xếp các số theo thứ tự hợp lý với con người, bạn có thể chuyển vào một hàm so sánh làm đối số trong phương thức

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

9

Và nếu đầu bạn vẫn chưa nổ tung, hãy xem bài viết tuyệt vời này đi sâu vào phương pháp

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

9

8. . copyWithin[]

Như tên gợi ý, phương thức này sao chép một phần của mảng và đặt nó vào một phần khác trong cùng một mảng

Phải mất ba đối số

1. Chỉ mục để đặt [các] mục đã sao chép
2. [tùy chọn] Chỉ mục để bắt đầu sao chép [các] mục từ [bao gồm]
3. [tùy chọn] Chỉ mục để kết thúc sao chép [các] mục từ [độc quyền]

Để minh họa, đây là cách chúng ta có thể sử dụng phương pháp

let moon = ['🌒', '🌓', '🌔', '🌕'];moon.reverse[];moon
// => [ '🌕', '🌔', '🌓', '🌒']

8

Đây là một ví dụ khác để giúp làm rõ mục đích của từng đối số

Lưu ý cách mục cuối cùng [“🙏”] được thay thế sau khi chúng tôi sao chép hai mục [“👌”, “✋”]

Mặc dù tôi chưa có cơ hội sử dụng

let moon = ['🌒', '🌓', '🌔', '🌕'];moon.reverse[];moon
// => [ '🌕', '🌔', '🌓', '🌒']

9 trong chương trình của mình, nhưng phương pháp này dường như hoạt động tương tự như

happy
// => [ '👻', '🙂', '😀', '😊']happy.shift[];happy
// => ['🙂', '😀', '😊']

3. Dựa trên các loại đối số mà cả hai phương thức đều sử dụng, phương thức sau linh hoạt hơn vì chúng ta có thể chèn các mục mới thay vì sao chép từ bên trong. Vì vậy, chọn chất độc của bạn

9. . lấp đầy[]

Cuối cùng, phương thức

let monkeys = ['🙈', '🙉', '🙊'];monkeys.splice[1, 1, '😈', '😈', '😈'];

1 thay đổi một số hoặc tất cả các mục trong mảng thành giá trị được truyền vào

Nó cũng có 3 đối số

1. Một giá trị để điền vào mảng với
2. [tùy chọn] Chỉ số bắt đầu [bao gồm]
3. [tùy chọn] Chỉ số kết thúc [độc quyền]

Ví dụ, bạn có thể sửa chữa một trái tim tan vỡ

let spreadTheLove = ["