CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết trên blog CFSDN ECMAScript 6 này sẽ sớm mang đến cho chúng ta bản xem trước về các phương thức hoạt động mảng mới. Nó được tác giả sưu tầm và biên soạn. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.

Bài viết này giới thiệu các phương thức thao tác mảng mới mà ECMAScript 6 sẽ mang lại cho chúng ta và cách áp dụng các tính năng mảng mới này trong các trình duyệt hiện có.

Lưu ý: Tôi sẽ sử dụng thuật ngữ hàm tạo và lớp thay thế cho nhau.

Phương thức thuộc sở hữu của chính mảng phương thức lớp (Array).

Mảng.from(arrayLike, mapFunc?, thisArg?) 。

Chức năng cơ bản của Array.from() là chuyển đổi hai loại đối tượng thành mảng.

Các đối tượng giống như mảng.

Các đối tượng của lớp này có thuộc tính độ dài và chỉ mục. Kết quả của toán tử DOM thuộc về lớp này, chẳng hạn như document.getElementsByClassName().

Các đối tượng có thể lặp lại

Loại đối tượng này chỉ có thể lấy một phần tử tại một thời điểm khi lấy giá trị. Mảng có thể lặp lại, giống như các cấu trúc mảng mới trong ECMAScript, Map và Set.

Đoạn mã sau đây là một ví dụ về việc chuyển đổi một đối tượng giống mảng thành một mảng:

  。

  。

Kết quả của querySelectorAll() không phải là một mảng và không có phương thức forEach(). Đây là lý do tại sao chúng ta cần chuyển đổi nó thành một mảng trước khi sử dụng phương thức này.

Sử dụng Ánh xạ qua Array.from() Array.from() cũng là một cách thay thế cho việc sử dụng map() với generic.

  。

  。

Tham số thứ hai trong cả hai phương pháp là hàm mũi tên. Trong ví dụ này, kết quả của document.querySelectorAll() là một đối tượng giống mảng chứ không phải mảng. Đây là lý do tại sao chúng ta không thể gọi trực tiếp map(). Trong ví dụ đầu tiên, để sử dụng forEach(), chúng ta chuyển đổi đối tượng giống mảng thành một mảng. Ở đây chúng tôi sử dụng phương thức chung và phiên bản hai tham số của Array.from(), loại bỏ bước trung gian.

Holes Array.from() bỏ qua các phần tử bị thiếu trong mảng - các lỗ, được coi là các phần tử không xác định.

  。

  。

Điều này có nghĩa là bạn có thể sử dụng Array.from() để tạo hoặc điền vào một mảng:

  。

  。

Nếu bạn muốn điền vào một mảng với một giá trị cố định thì Array.prototype.fill() (xem bên dưới) sẽ là lựa chọn tốt hơn. Cách đầu tiên là hai cách của ví dụ trên.

from() trong các lớp con Array Một trường hợp sử dụng khác của Array.from() là chuyển đổi một đối tượng giống như mảng hoặc đối tượng có thể lặp thành một thể hiện của lớp con Array. Nếu bạn tạo một lớp con Array MyArray và muốn chuyển đổi một đối tượng như vậy thành một phiên bản của MyArray, bạn chỉ cần sử dụng MyArray.from(). Lý do điều này có thể được sử dụng là vì trong ECMAScript 6, các hàm tạo được kế thừa (hàm tạo của lớp cha là nguyên mẫu của hàm tạo của lớp con của nó).

  。

  。

Bạn có thể kết hợp chức năng này với ánh xạ, trong đó bạn thực hiện thao tác bản đồ ở nơi bạn điều khiển hàm tạo kết quả:

  。

  。

Nếu bạn muốn chuyển đổi một tập hợp các giá trị thành một mảng, bạn nên sử dụng một mảng bằng chữ. Đặc biệt khi chỉ có một giá trị và là số thì hàm tạo mảng sẽ thất bại. Vui lòng tham khảo trang này để biết thêm thông tin.

  。

  。

Vậy chúng ta nên làm gì nếu muốn chuyển đổi một tập hợp các giá trị thành một thể hiện của hàm tạo phụ số? Đây là giá trị của Array.of() (hãy nhớ, hàm tạo mảng kế thừa tất cả các phương thức mảng, bao gồm cả of()).

  。

  。

Array.of() rất thuận tiện cho việc gói và lồng các giá trị trong một mảng mà không cần phương thức xử lý kỳ lạ của Array(). Nhưng cũng hãy chú ý đến Array.prototype.map(), ở đây có những cạm bẫy:

  。

  。

Như bạn có thể thấy, map() chuyển ba tham số cho lệnh gọi lại của nó. Hai điều cuối cùng thường bị bỏ qua (chi tiết).

Các phương thức nguyên mẫu Sẽ có nhiều phương thức mới có sẵn cho các thể hiện mảng.

Lặp lại trên mảng.

Các phương pháp sau đây sẽ giúp hoàn thành việc lặp trong mảng:

  。

  。

Mỗi phương thức trên sẽ trả về một chuỗi giá trị chứ không phải dưới dạng mảng. Chúng sẽ được hiển thị lần lượt thông qua iterator. Hãy xem một ví dụ (Tôi sẽ sử dụng Array.from() để đưa nội dung của iterator vào một mảng):

  。

  。

Bạn có thể kết hợp các mục() với vòng lặp for-of trong ECMAScript 6 để dễ dàng phân tách đối tượng lặp thành các cặp khóa-giá trị:

  。

  。

Lưu ý: Mã này đã hoạt động trong trình duyệt Firefox mới nhất. t Firefox.

Tìm các phần tử mảng.

Array.prototype.find(predicate, thisArg?) sẽ trả về phần tử đầu tiên thỏa mãn hàm gọi lại. Nếu không có phần tử nào thỏa mãn điều kiện, nó sẽ trả về không xác định. Ví dụ:

  。

  。

Sẽ trả về chỉ mục của phần tử đầu tiên thỏa mãn hàm gọi lại. Nếu không tìm thấy phần tử thỏa mãn, -1 được trả về. Ví dụ:

  。

  。

Cả hai phương thức find* sẽ bỏ qua các lỗ hổng, nghĩa là chúng sẽ không chú ý đến các phần tử không xác định. Chữ ký hàm hoàn thành cho lệnh gọi lại là:

vị ngữ(phần tử, chỉ mục, mảng) Tìm NaN thông qua findIndex().

Array.prototype.indexOf() có một hạn chế nổi tiếng, đó là nó không thể tìm kiếm NaN. Bởi vì nó sử dụng danh tính (===) để tìm các phần tử phù hợp:

  。

  。

Khi sử dụng findIndex(), bạn có thể sử dụng Object.is(), điều này sẽ không gây ra những vấn đề như vậy:

  。

  。

Bạn cũng có thể áp dụng cách tiếp cận tổng quát hơn và tạo hàm trợ giúp elemIs():

  。

  。

Điền vào một mảng với các giá trị đã cho:

  。

  。

Các lỗ sẽ không nhận được bất kỳ sự xử lý đặc biệt nào:

  。

  。

Bạn cũng có thể giới hạn phần bắt đầu và kết thúc của phần đệm:

  。

  。

Khi nào tôi có thể sử dụng các phương thức mảng mới? Một số phương pháp đã có sẵn trong trình duyệt.

Cuối cùng, bài viết này về bản xem trước các phương thức hoạt động mảng mới mà ECMAScript 6 sẽ mang đến cho chúng ta ở đây. Nếu bạn muốn biết thêm về bản xem trước các phương thức hoạt động mảng mới mà ECMAScript 6 sẽ mang đến cho chúng ta, vui lòng tìm kiếm CFSDN. Hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .