Mảng từ phương thức trong JavaScript là gì?

Trong JavaScript, mảng là một cấu trúc dữ liệu chứa danh sách các phần tử lưu trữ nhiều giá trị trong một biến duy nhất. Sức mạnh của mảng JavaScript nằm ở các phương thức mảng. Các phương thức mảng là các hàm được tích hợp sẵn trong JavaScript mà chúng ta có thể áp dụng cho các mảng của mình — Mỗi phương thức có một hàm duy nhất thực hiện thay đổi hoặc tính toán cho mảng của chúng ta và giúp chúng ta không phải viết các hàm phổ biến từ đầu

Show
Phương thức mảng JavaScript

1. bản đồ( )

Phương thức này tạo một mảng mới với kết quả gọi một hàm được cung cấp trên mọi phần tử trong mảng này

Mảng từ phương thức trong JavaScript là gì?

Cách thêm phần tử vào mảng trong JS

Sử dụng phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');
8 để chèn phần tử vào mảng. Phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');
8 thêm một phần tử vào cuối mảng. Hay là chúng ta thêm một ít đậu phộng vào món salad, như thế này

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');

Bây giờ mảng salad là

["🍅", "🍄", "🥦", "🥒", "🌽", "🥕", "🥑", "🥜"]

Lưu ý rằng phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');
8 thêm một phần tử vào cuối mảng. Nếu bạn muốn thêm một phần tử vào đầu mảng, bạn sẽ cần sử dụng phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.unshift('🥜');
1

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.unshift('🥜');

Bây giờ mảng salad là

["🥜", "🍅", "🍄", "🥦", "🥒", "🌽", "🥕", "🥑"]

Cách xóa phần tử khỏi mảng trong JS

Cách dễ nhất để xóa một phần tử khỏi mảng là sử dụng phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.unshift('🥜');
2. Mỗi khi bạn gọi phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.unshift('🥜');
2, nó sẽ loại bỏ một phần tử ở cuối mảng. Sau đó, nó trả về phần tử đã loại bỏ và thay đổi mảng ban đầu

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.pop(); // 🥑

console.log(salad); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕']

Sử dụng phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.unshift('🥜');
4 để xóa một phần tử khỏi đầu mảng. Giống như phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.unshift('🥜');
2,
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.unshift('🥜');
4 trả về phần tử đã loại bỏ và thay đổi mảng ban đầu

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
0

Cách sao chép và sao chép một mảng trong JS

Bạn có thể sao chép và sao chép một mảng sang một mảng mới bằng cách sử dụng phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.unshift('🥜');
7. Lưu ý rằng phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.unshift('🥜');
7 không thay đổi mảng ban đầu. Thay vào đó, nó tạo ra một bản sao nông mới của mảng ban đầu

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
1

Ngoài ra, bạn có thể sử dụng toán tử

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');
3 để tạo một bản sao của mảng. Chúng ta sẽ tìm hiểu về điều đó ngay sau đây

Cách xác định xem Giá trị có phải là một mảng trong JS không

Bạn có thể xác định xem một giá trị có phải là một mảng hay không bằng cách sử dụng phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.pop(); // 🥑

console.log(salad); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕']
0. Phương thức trả về true nếu giá trị truyền vào là một mảng

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
2Phá hủy mảng trong JavaScript

Với ECMAScript 6 (ES6), chúng tôi có một số cú pháp mới để trích xuất nhiều thuộc tính từ một mảng và gán chúng cho các biến trong một lần. Nó rất hữu ích để giúp bạn giữ cho mã của mình sạch sẽ và ngắn gọn. Cú pháp mới này được gọi là cú pháp phá hủy

Dưới đây là một ví dụ về trích xuất các giá trị từ một mảng bằng cách sử dụng cú pháp phá hủy

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
3

Bây giờ bạn có thể sử dụng các biến trong mã của mình

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
4

Để làm điều tương tự mà không phá hủy, nó sẽ trông như thế này

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
5

Vì vậy, cú pháp phá hủy giúp bạn không phải viết nhiều mã. Điều này mang lại cho bạn một sự gia tăng lớn về năng suất

Cách gán giá trị mặc định cho một biến

Bạn có thể gán một giá trị mặc định bằng cách hủy khi không có giá trị hoặc

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.pop(); // 🥑

console.log(salad); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕']
1 cho phần tử mảng

Trong ví dụ dưới đây, chúng tôi gán giá trị mặc định cho biến nấm

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
6

Cách bỏ qua một giá trị trong một mảng

Với tính năng hủy, bạn có thể bỏ qua một phần tử mảng để ánh xạ tới một biến. Ví dụ, bạn có thể không quan tâm đến tất cả các phần tử trong một mảng. Trong trường hợp đó, bỏ qua một giá trị có ích

Trong ví dụ bên dưới, chúng ta bỏ qua phần tử nấm. Lưu ý khoảng trắng trong khai báo biến ở phía bên trái của biểu thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
7

Phá hủy mảng lồng nhau trong JS

Trong JavaScript, các mảng có thể được lồng vào nhau. Điều này có nghĩa là một mảng có thể có một mảng khác làm phần tử. Việc lồng mảng có thể đi đến bất kỳ độ sâu nào

Ví dụ: hãy tạo một mảng lồng nhau cho các loại trái cây. Nó có một vài loại trái cây và một loạt các loại rau trong đó

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
8

Bạn sẽ truy cập '🥕' từ mảng trên bằng cách nào?

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
9

Ngoài ra, bạn có thể sử dụng cú pháp ngắn tay này

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');
0

Bạn cũng có thể truy cập nó bằng cú pháp phá hủy, như thế này

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');
1Cách sử dụng cú pháp trải rộng và tham số nghỉ trong JavaScript

Kể từ ES6, chúng ta có thể sử dụng

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');
4 (vâng, ba dấu chấm liên tiếp) làm cú pháp trải rộng và tham số còn lại trong cấu trúc mảng

  • Đối với tham số còn lại,
    const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    salad.push('🥜');
    4 xuất hiện ở phía bên trái của cú pháp phá hủy
  • Đối với cú pháp trải rộng,
    const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    salad.push('🥜');
    4 xuất hiện ở bên phải của cú pháp phá hủy

Cách sử dụng Tham số còn lại trong JS

Với

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.pop(); // 🥑

console.log(salad); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕']
5, chúng ta có thể vạch ra các phần tử bên trái của một mảng trong một mảng mới. Tham số còn lại phải là biến cuối cùng trong cú pháp phá hủy

Trong ví dụ dưới đây, chúng tôi đã ánh xạ hai phần tử mảng đầu tiên tới các biến cà chua và nấm. Các phần tử còn lại được ánh xạ tới biến

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.pop(); // 🥑

console.log(salad); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕']
6 bằng cách sử dụng biến
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');
4. Biến
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.pop(); // 🥑

console.log(salad); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕']
6 là một mảng mới chứa các phần tử còn sót lại

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');
2

Cách sử dụng Toán tử trải rộng trong JS

Với toán tử trải rộng, chúng ta có thể tạo một bản sao/bản sao của một mảng hiện có như thế này

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');
3Phá hủy các trường hợp sử dụng trong JavaScript

Hãy xem xét một vài trường hợp sử dụng thú vị của việc phá hủy mảng, toán tử trải rộng và tham số còn lại

Cách hoán đổi giá trị với hủy cấu trúc

Chúng ta có thể hoán đổi giá trị của hai biến một cách dễ dàng bằng cú pháp hủy mảng

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');
4

Cách hợp nhất các mảng

Chúng ta có thể hợp nhất hai mảng và tạo một mảng mới với tất cả các phần tử từ cả hai mảng. Hãy lấy hai mảng — một mảng có một vài khuôn mặt cười và mảng khác có một vài loại rau

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');
5

Bây giờ, chúng ta sẽ hợp nhất chúng để tạo một mảng mới

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');
6Phương thức mảng JavaScript

Cho đến nay, chúng ta đã thấy một vài thuộc tính và phương thức của mảng. Hãy tóm tắt nhanh những cái chúng ta đã xem xét

  • const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    salad.push('🥜');
    8 – Chèn một phần tử vào cuối mảng
  • const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    salad.unshift('🥜');
    1 – Chèn một phần tử vào đầu mảng
  • const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    salad.unshift('🥜');
    2 – Xóa phần tử ở cuối mảng
  • const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    salad.unshift('🥜');
    4 – Xóa phần tử ở đầu mảng
  • const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    salad.unshift('🥜');
    7 – Tạo một bản sao nông của một mảng
  • const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    04 – Xác định xem một giá trị có phải là một mảng không
  • const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    05 – Xác định kích thước của một mảng

Bây giờ chúng ta sẽ tìm hiểu về các phương thức mảng JS quan trọng khác với các ví dụ

Cách tạo, xóa, cập nhật và truy cập mảng trong JavaScript

Trong phần này, chúng ta sẽ tìm hiểu về các phương thức bạn có thể sử dụng để tạo một mảng mới, loại bỏ các phần tử để làm cho mảng trống, truy cập các phần tử, v.v.

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];06

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
06 hợp nhất một hoặc nhiều mảng và trả về một mảng đã hợp nhất. Đó là một phương pháp bất biến. Điều này có nghĩa là nó không thay đổi (biến đổi) các mảng hiện có

Hãy nối hai mảng

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');
7

Sử dụng phương pháp

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
06, chúng ta có thể hợp nhất nhiều hơn hai mảng. Chúng ta có thể hợp nhất bất kỳ số lượng mảng nào với cú pháp này

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');
8

Đây là một ví dụ

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');
9

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];09

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
09 nối tất cả các phần tử của mảng bằng cách sử dụng dấu tách và trả về một chuỗi. Dấu phân cách mặc định được sử dụng để nối là
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

for(let i=0; i
2

const element = array[index];
0

Bạn có thể chuyển dấu phân cách bạn chọn để nối các phần tử. Dưới đây là một ví dụ về việc nối các phần tử với dấu tách tùy chỉnh

const element = array[index];
1

Gọi phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
09 trên một mảng trống sẽ trả về một chuỗi rỗng

const element = array[index];
2

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];13

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
13 điền vào một mảng có giá trị tĩnh. Bạn có thể thay đổi tất cả các thành phần thành giá trị tĩnh hoặc thay đổi một vài mục đã chọn. Lưu ý rằng phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
13 thay đổi mảng ban đầu

const element = array[index];
3

Đây là một ví dụ mà chúng ta chỉ thay đổi hai phần tử cuối cùng của mảng bằng cách sử dụng phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
13

const element = array[index];
4

Trong trường hợp này, đối số đầu tiên của phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
13 là giá trị mà chúng ta thay đổi bằng. Đối số thứ hai là chỉ số bắt đầu để thay đổi. Nó bắt đầu bằng
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

for(let i=0; i
4. Đối số cuối cùng là xác định nơi dừng điền. Giá trị tối đa của nó có thể là
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
19

Vui lòng xem chủ đề Twitter này để biết cách sử dụng thực tế của phương pháp

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
13

Bạn đã sử dụng phương thức #JavaScript array fill() trong thực tế chưa? . 🧵 👇#DEVCộng đồng #100DaysOfCode ảnh. Twitter. com/ahfsJBOacT

– Tapas Adhikary (@tapasadhikary) ngày 12 tháng 2 năm 2021

Ngoài ra, bạn có thể thấy dự án demo này hữu ích. https. //github. com/atapas/mảng-điền-màu-thẻ

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];21

Bạn có thể xác định sự có mặt của một phần tử trong mảng bằng cách sử dụng phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
21. Nếu phần tử được tìm thấy, phương thức trả về
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
23 và ngược lại là
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
24

const element = array[index];
5

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];25

Bạn có thể muốn biết vị trí chỉ mục của một phần tử trong mảng. Bạn có thể sử dụng phương pháp

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
25 để có được điều đó. Nó trả về chỉ số của lần xuất hiện đầu tiên của một phần tử trong mảng. Nếu một phần tử không được tìm thấy, phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
25 trả về
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
28

const element = array[index];
6

Có một phương pháp khác là

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
29 giúp bạn tìm chỉ số của lần xuất hiện cuối cùng của một phần tử trong mảng. Giống như
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
25,
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
29 cũng trả về
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
28 nếu không tìm thấy phần tử

const element = array[index];
7

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];33

Đúng như tên gọi, phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
33 đảo ngược vị trí của các phần tử trong mảng sao cho phần tử cuối cùng chuyển sang vị trí đầu tiên và phần tử đầu tiên chuyển sang vị trí cuối cùng

const element = array[index];
8

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
33 sửa đổi mảng ban đầu

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];36

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
36 có lẽ là một trong những phương thức mảng thường được sử dụng nhất. Phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
36 mặc định chuyển đổi các loại phần tử thành chuỗi và sau đó sắp xếp chúng. Thứ tự sắp xếp mặc định là tăng dần. Phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
36 thay đổi mảng ban đầu

const element = array[index];
9

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
36 chấp nhận một hàm so sánh tùy chọn làm đối số. Bạn có thể viết một hàm so sánh và chuyển sang phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
36 để ghi đè hành vi sắp xếp mặc định

Bây giờ chúng ta hãy lấy một mảng các số và sắp xếp chúng theo thứ tự tăng dần và giảm dần bằng cách sử dụng hàm so sánh

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'
0

Đầu tiên, chúng ta sẽ gọi phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
36 mặc định và xem kết quả

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'
1

Bây giờ mảng được sắp xếp là, [1, 10, 100, 13, 23, 37, 5, 56, 9]. Chà, đó không phải là đầu ra mà chúng tôi mong đợi. Nhưng điều đó xảy ra bởi vì phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
36 mặc định chuyển đổi các phần tử thành một chuỗi và sau đó so sánh chúng dựa trên các giá trị đơn vị mã
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
44

Để giải quyết vấn đề này, hãy viết một hàm so sánh. Đây là một cho thứ tự tăng dần

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'
2

Bây giờ chuyển cái này sang phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
36

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'
3

Đối với thứ tự giảm dần, hãy làm điều này

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'
4

Kiểm tra kho lưu trữ GitHub này để biết thêm các ví dụ và mẹo sắp xếp. https. //github. com/atapas/js-array-sorting

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];46

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
46 giúp bạn thêm, cập nhật và xóa các phần tử trong một mảng. Phương pháp này có thể hơi khó hiểu lúc đầu, nhưng một khi bạn biết cách sử dụng đúng cách, bạn sẽ thành công

Mục đích chính của phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
46 là xóa các phần tử khỏi mảng. Nó trả về một mảng các phần tử đã bị xóa và sửa đổi mảng ban đầu. Nhưng bạn cũng có thể thêm và thay thế các phần tử bằng cách sử dụng nó

Để thêm phần tử bằng phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
46, chúng ta cần truyền vị trí muốn thêm, số lượng phần tử cần xóa bắt đầu bằng vị trí và phần tử cần thêm

Trong ví dụ bên dưới, chúng tôi đang thêm một phần tử

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
50 tại chỉ mục
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
51 mà không xóa bất kỳ phần tử nào

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'
5

Hãy xem ví dụ sau. Ở đây chúng tôi đang xóa một phần tử khỏi

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

for(let i=0; i
7 (phần tử thứ 3) và thêm một phần tử mới,
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
50. Phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
46 trả về một mảng có phần tử bị xóa,
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
55

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'
6

Hãy xem chủ đề Twitter này để tìm hiểu cách phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
46 giúp bạn tạo một mảng trống

Bạn muốn xóa một, nhiều hoặc tất cả các phần tử khỏi mảng #javascript theo cách gốc như thế nào?

- 🗑️ mảng. chiều dài = 0
- 🗑️arr = []
- 🗑️ mảng. sự thay đổi()
- 🗑️ mảng. nhạc pop()
- 🗑️ mảng. nối()

Đây là một chủ đề để nói về nó. 🧵#CodeNewbie #100DaysOfCode #DevCommunityIN #DEVCommunity

– Tapas Adhikary (@tapasadhikary) Ngày 5 tháng 10 năm 2020

Phương thức mảng tĩnh trong JavaScript

Trong JavaScript, mảng có ba phương thức tĩnh. Chúng ta đã thảo luận về

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
04 rồi. Bây giờ chúng ta hãy thảo luận về hai người kia

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']; salad.push('🥜');2

Hãy lấy một đoạn mã HTML đơn giản có chứa div và một vài phần tử danh sách

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'
7

Bây giờ chúng ta sẽ truy vấn DOM bằng phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
59

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'
8

Nó trả về một

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
60 trông như thế này

Mảng từ phương thức trong JavaScript là gì?
HTMLCollection là một đối tượng giống như mảng

Vì vậy, nó giống như một mảng. Bây giờ, hãy thử lặp lại nó bằng cách sử dụng

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');
7

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'
9

Đoán xem đầu ra là gì?

Mảng từ phương thức trong JavaScript là gì?
Lỗi khi sử dụng forEach trên đối tượng Array-Like

Nhưng tại sao? . Nó là một đối tượng

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
63. Vì vậy, bạn không thể lặp lại nó bằng cách sử dụng
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');
7

Mảng từ phương thức trong JavaScript là gì?
Nguyên mẫu là Object

Đây là lúc bạn nên sử dụng phương pháp

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');
2. Nó chuyển đổi một đối tượng dạng mảng thành một mảng để bạn có thể thực hiện tất cả các thao tác mảng trên đó

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'
0

Đây

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
66 là một mảng

Mảng từ phương thức trong JavaScript là gì?
Nguyên mẫu là Array

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']; salad.push('🥜');1

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');
1 tạo một mảng mới bằng cách sử dụng bất kỳ số lượng phần tử nào thuộc bất kỳ loại nào

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'
1

Đầu ra trông như thế này

Mảng từ phương thức trong JavaScript là gì?
Đầu ra của mảng. phương thức ()

Các phương thức lặp mảng trong JavaScript

Bây giờ chúng ta sẽ tìm hiểu về các phương thức lặp mảng. Đây là những phương pháp rất hữu ích để lặp qua mảng và thực hiện tính toán, đưa ra quyết định, lọc nội dung, v.v.

Cho đến nay, chúng ta chưa thấy một ví dụ nào về mảng đối tượng. Trong phần này, chúng ta sẽ sử dụng mảng đối tượng sau để giải thích và chứng minh các phương thức bên dưới

Mảng này chứa thông tin cho một số sinh viên đã đăng ký các khóa học trả phí khác nhau

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'
2

Được rồi, chúng ta hãy bắt đầu. Tất cả các phương thức lặp mảng đều lấy một hàm làm đối số. Bạn cần chỉ định logic để lặp lại và áp dụng trong chức năng đó

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];69

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
69 tạo một mảng mới với tất cả các phần tử thỏa mãn điều kiện được đề cập trong hàm. Cùng tìm học sinh là nữ. Vì vậy, điều kiện lọc phải là giới tính bằng 'F'

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'
3

Đầu ra là cái này

Mảng từ phương thức trong JavaScript là gì?

Đúng rồi. Học sinh có tên

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
71 là học sinh nữ duy nhất mà chúng tôi có được cho đến nay

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];72

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
72 tạo một mảng mới bằng cách lặp qua các phần tử và áp dụng logic mà chúng tôi đã cung cấp trong hàm dưới dạng đối số. Chúng ta sẽ tạo một mảng mới gồm tên đầy đủ của tất cả các sinh viên trong mảng
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
74

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'
4

Đầu ra trông như thế này

Mảng từ phương thức trong JavaScript là gì?

Ở đây chúng ta thấy một mảng mới với các thuộc tính

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
75 được tính toán bằng cách sử dụng các thuộc tính
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
76 và
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
77 của mỗi đối tượng sinh viên

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];78

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
78 áp dụng hàm rút gọn trên từng phần tử mảng và trả về giá trị đầu ra. Chúng ta sẽ áp dụng một hàm rút gọn trên mảng
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
74 để tính tổng số tiền mà tất cả các sinh viên đã trả

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'
5

Trong đoạn mã trên,

  • Chúng tôi khởi tạo
    const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    81 với
    const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    
    for(let i=0; i
    4
  • Chúng tôi áp dụng phương pháp
    const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    83 trên từng đối tượng sinh viên. Chúng tôi truy cập thuộc tính
    const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
    84 và thêm nó vào bộ tích lũy
  • Cuối cùng, chúng tôi trả lại bộ tích lũy

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];85

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
85 trả về giá trị boolean (true/false) dựa trên ít nhất một phần tử trong mảng truyền điều kiện trong hàm. Cùng xem có bạn sinh viên nào dưới 30 tuổi không nhé

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'
6

Có, chúng tôi thấy có ít nhất một sinh viên dưới 30 tuổi

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];87

Sử dụng phương pháp

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
85, chúng tôi đã thấy rằng có một sinh viên dưới 30 tuổi. Hãy cùng tìm hiểu học sinh đó là ai

Để làm điều đó, chúng tôi sẽ sử dụng phương pháp

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
87. Nó trả về phần tử khớp đầu tiên từ mảng thỏa mãn điều kiện trong hàm

Mảng có một phương thức liên quan khác,

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
90, trả về chỉ số của phần tử mà chúng ta tìm thấy bằng cách sử dụng phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
87. Nếu không có phần tử nào khớp với điều kiện, phương thức
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
90 trả về
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
28

Trong ví dụ bên dưới, chúng ta truyền một hàm cho phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
87 để kiểm tra tuổi của từng học sinh. Nó trả về sinh viên phù hợp khi điều kiện thỏa mãn

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'
7

Đầu ra là cái này

Mảng từ phương thức trong JavaScript là gì?

Như chúng ta thấy, đó là Alex 22 tuổi. Chúng tôi đã tìm thấy anh ấy

Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];95

Phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
95 phát hiện xem mọi phần tử của mảng có thỏa mãn điều kiện được truyền trong hàm hay không. Hãy tìm xem tất cả các sinh viên đã đăng ký ít nhất hai khóa học

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'
8

Như mong đợi, chúng tôi thấy rằng đầu ra là

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
23

Phương pháp mảng được đề xuất

Kể từ tháng 5 năm 2021, ECMAScript có phương thức ,

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
98

Phương pháp const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];98

Phương pháp

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
98 được đề xuất sẽ giúp bạn truy cập các phần tử của một mảng bằng cách sử dụng số chỉ mục âm. Hiện tại, điều này là không thể. Bạn chỉ có thể truy cập các phần tử từ đầu mảng bằng cách sử dụng số chỉ mục dương

Có thể truy cập các phần tử từ phía sau của mảng bằng cách sử dụng giá trị độ dài. Với việc bao gồm phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
98, bạn sẽ có thể truy cập các phần tử bằng cách sử dụng cả chỉ số tích cực và tiêu cực bằng một phương thức duy nhất

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'
9

Đây là một bản demo nhanh của nó

Mảng từ phương thức trong JavaScript là gì?
Bản trình diễn phương thức Javascript Array at()

Bạn có thể sử dụng polyfill này để đạt được chức năng của phương thức

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
98 cho đến khi phương thức này được thêm vào ngôn ngữ JavaScript. Vui lòng kiểm tra kho lưu trữ GitHub này để biết các ví dụ về phương pháp
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
98. https. //github. com/atapas/js-array-at-method

Trước Khi Chúng Ta Kết Thúc

Tôi hy vọng bạn thấy bài viết này sâu sắc và nó giúp bạn hiểu rõ hơn về mảng JavaScript. Hãy thực hành các ví dụ nhiều lần để nắm bắt chúng tốt. Bạn có thể tìm thấy tất cả các

Kết nối nào. Bạn sẽ thấy tôi hoạt động trên Twitter (@tapasadhikary). Mời các bạn theo dõi

Bạn cũng có thể thích những bài viết này

  • Tại sao bạn cần biết về Array-like Objects?
  • 5 mẹo hữu ích về phương pháp sắp xếp mảng trong JavaScript
  • Các cách để làm trống một mảng trong JavaScript và hậu quả
  • Xây dựng cơ bắp JavaScript của bạn với bản đồ, rút ​​gọn, bộ lọc và các trình vòng lặp mảng khác
  • Tại sao bạn cần biết về phương thức JavaScript Array at()?

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO


Mảng từ phương thức trong JavaScript là gì?
QUẢNG CÁO TAPAS

nhà văn. YouTuber. Người sáng tạo. Người hướng dẫn


Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Mảng và phương thức của nó trong JavaScript là gì?

Các phương thức và thuộc tính của mảng JavaScript

Phương thức mảng nghĩa là gì?

Các phương thức mảng là các hàm được tích hợp sẵn trong JavaScript mà chúng ta có thể áp dụng cho các mảng của mình — Mỗi phương thức có một chức năng duy nhất thực hiện thay đổi .

Từ trong JS là gì?

from() là thuộc tính tĩnh của đối tượng Mảng JavaScript . Bạn chỉ có thể sử dụng nó như Array. từ(). Sử dụng x. from(), trong đó x là một mảng sẽ trả về không xác định.

Làm cách nào để lấy mảng từ tập hợp trong JavaScript?

Một tập hợp có thể được chuyển đổi thành một mảng trong JavaScript bằng các cách sau. Mảng JavaScript. phương thức from() . Phương thức này trả về một Mảng mới từ một mảng giống như một đối tượng hoặc các đối tượng có thể lặp lại như Bản đồ, Tập hợp, v.v.