HomeLập trìnhJavaScriptCách sử dụng...

Cách sử dụng các phương thức flat() và flatMap() để làm phẳng mảng trong JavaScript


Trong bài viết này, tôi sẽ giải thích cách sử dụng các phương thức mảng mới được giới thiệu trong ES2019 (EcmaScript 2019) – flat()flatMap(). Bạn sử dụng các phương pháp này để làm phẳng các mảng.

Các phương pháp rất hữu ích và dễ sử dụng. Sẽ thật tuyệt khi sử dụng những phương pháp này trong dự án tiếp theo của bạn. Lấy một ly cà phê và chúng ta hãy đi sâu vào nó.

điều kiện tiên quyết

Bạn nên làm quen với khái niệm mảng trong JavaScript để làm theo hướng dẫn này.

Mảng là gì?

Đối tượng mảng là một cấu trúc dữ liệu được sử dụng trong các ngôn ngữ lập trình khác nhau để lưu trữ các bộ sưu tập dữ liệu khác nhau.

Ví dụ về một mảng trong JavaScript

const array = [1, 2, 3, true, null, undefined];

console.log(array);

// expected output
1, 2, 3, true, null, undefined

Trong đoạn mã trên, chúng tôi đã gán một biến có tên arr và lưu trữ các phần tử/dữ liệu khác nhau của các loại dữ liệu khác nhau trong đó.

Phần tử đầu tiên là 1 có chỉ số 0. Phần tử cuối cùng, không xác định, có chỉ số 5.

Đừng quên rằng các đối tượng mảng không được lập chỉ mục, có nghĩa là phần tử đầu tiên bắt đầu ở chỉ mục bằng không.

Đặc điểm của mảng JavaScript

  • Mảng không được lập chỉ mục: Điều này đơn giản có nghĩa là phần tử đầu tiên trong một mảng nằm ở chỉ số 0. Chỉ số ở đây có nghĩa là vị trí. Trong JavaScript và tương tự như vậy trong các ngôn ngữ lập trình khác, từ thích hợp để sử dụng là chỉ mục chứ không phải vị trí.
  • Mảng JavaScript có thể chứa các loại dữ liệu khác nhau: Điều này có nghĩa là các mảng JavaScript có thể chứa hỗn hợp các số, chuỗi, booleans, giá trị null, v.v.
  • JavaScript tạo các bản sao nông: Điều này có nghĩa là bạn có thể tạo một bản sao riêng biệt của một mảng – nghĩa là không làm thay đổi mảng ban đầu.
Đọc thêm  JavaScript 正则表达式和 replace() 方法使用示例

Các phương thức mảng JavaScript mới

Mảng là một trong những cấu trúc dữ liệu phổ biến nhất trong JavaScript được sử dụng để lưu trữ dữ liệu.

Có nhiều phương pháp mảng khác nhau mà bạn có thể sử dụng để đơn giản hóa các hoạt động và làm cho cuộc sống của bạn dễ dàng hơn. Một vài trong số các phương pháp đó bao gồm reduce(), filter(), map(), flat(), flatMap()và nhiều thứ khác nữa.

Nhưng trong bài viết này, chúng ta sẽ không thảo luận về tất cả các phương thức mảng được sử dụng trong JavaScript. Thay vào đó, ở đây, chúng ta sẽ thảo luận về cái mới flat()flatMap() các phương thức bạn có thể sử dụng để chuyển đổi một mảng ban đầu thành một mảng mới.

Làm thế nào để sử dụng flat Phương thức mảng trong JavaScript

Bạn sử dụng flat phương pháp để chuyển đổi một mảng ban đầu thành một mảng mới. Nó thực hiện điều này bằng cách thu thập và nối các mảng con trong một mảng thành một mảng duy nhất.

Một lưu ý quan trọng về phương pháp mảng này là bạn có thể tính toán bản gốc thành một mảng khác dựa trên độ sâu của mảng. Phương pháp này thực sự hữu ích vì nó giúp tính toán các hoạt động của một mảng dễ dàng hơn nhiều.

Ví dụ về flat() phương pháp mảng

Cách đặt tham số độ sâu‌

array.flat(depth);

Giá trị độ sâu là 1 theo mặc định và bạn có thể để trống. Giá trị độ sâu lấy một số làm kiểu dữ liệu của nó.

flat() phương pháp mảng ví dụ 1

array.flat(1) bằng array.flat().

array.flat(2);

Độ sâu trên là 2.

const arr = ["mon", "tues", ["wed", "thurs", ["fri", "sat"]], "sun"] ;

console.log(arr.flat());

// expected output 
["mon", "tues", "wed", "thurs", Array ["fri", "sat"], "sun"];

Vì vậy, những gì đang xảy ra trong mã này?

Đầu tiên, mảng chứa hai mảng con là ["wed", "thurs", ["fri", "sat"]].

chúng tôi sử dụng bằng phẳng() phương thức trên mảng có tên arr để nối mảng con đầu tiên vì chúng tôi không chỉ định bất kỳ giá trị độ sâu nào bên trong bằng phẳng() phương pháp. Nhớ lại rằng giá trị độ sâu mặc định là 1.

Đọc thêm  Hướng dẫn về khóa đối tượng JavaScript – Cách sử dụng cặp khóa-giá trị JS

Vì vậy, bạn có thể đoán đối tượng mảng sẽ là gì nếu giá trị độ sâu là 2, phải không?‌

flat() phương pháp mảng ví dụ 2

const arr = [1, 2, [3, 4, 5], 6, 7];

console.log(arr.flat());

// expected output 
[1, 2, 3, 4, 5, 6, 7]

Trong đoạn mã trên, mảng chứa một mảng con là [3, 4, 5].

chúng tôi sử dụng bằng phẳng() phương thức trên mảng có tên arr để nối hai mảng lại với nhau thành một mảng duy nhất.

flat() phương pháp mảng ví dụ 3

//depth 2 example 
const arr2 = [[[1, 2], 3, 4, 5]] ;

console.log(arr2.flat(2));

// expected output 
[1, 2, 3, 4, 5]

Trong đoạn mã trên, mảng có tên arr2 chứa hai mảng con.

chúng tôi sử dụng bằng phẳng() phương pháp trên arr2 để nối hai mảng thành một mảng vì giá trị độ sâu 2 được sử dụng bên trong phương thức phẳng(2). Hãy xem nhanh ở trên để xem giá trị độ sâu làm gì.‌

Phương thức mảng là một cách hay để nối các phần tử trong một mảng theo cách đệ quy.

Làm thế nào để sử dụng flatMap Phương thức mảng trong JavaScript

Các flatMap() phương pháp sử dụng kết hợp các map()flat() phương thức thực hiện các thao tác.

Các flatMap() lặp qua các phần tử của một mảng và nối các phần tử thành một cấp. flatMap() nhận một hàm gọi lại lấy phần tử hiện tại của mảng ban đầu làm tham số.

flatMap() ví dụ về phương thức mảng

const arr3 = [1, 2, [4, 5], 6, 7, [8]] ;

console.log(arr3.flatMap((element) => element)); 

// expected output 
[1, 2, 4, 5, 6, 7, 8]

Trong đoạn mã trên, mảng có tên arr3 chứa hai mảng con riêng biệt.

chúng tôi đã sử dụng Bản đồ phẳng() phương thức trên mảng bằng cách chuyển vào hàm gọi lại, (phần tử) => phần tử vòng lặp qua mảng và sau đó nối các mảng thành một mảng duy nhất.

Đôi khi, bạn sẽ gặp tình huống trong đó bạn có nhiều hơn một độ sâu của mảng và bạn quyết định thay đổi mảng mới thành một mức cơ sở. Sau đó, bạn sẽ phải sử dụng flat() phương pháp ngay sau khi flatMap() phương pháp.

Đọc thêm  Trường hợp chuyển đổi JavaScript – Ví dụ về câu lệnh chuyển đổi JS

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

const arr4 = [1, 2, [3, [4, 5, [6, 7]]]] ;

console.log(arr4.flatMap((element) => element).flat(2)) ;

// expected output 
[1, 2, 3, 4, 5, 6, 7]

Trong đoạn mã trên, mảng có tên arr4 chứa ba mảng con.

chúng tôi đã sử dụng Bản đồ phẳng() phương thức trên mảng bằng cách chuyển vào hàm gọi lại, (phần tử) => phần tử vòng lặp qua mảng và sau đó nối các mảng.

chúng tôi đã sử dụng căn hộ(2) phương pháp để nối thêm mảng thành một mảng duy nhất bằng cách chuyển vào độ sâu 2.

Đảm bảo thực hành ví dụ trên mà không vượt qua phương thức flat(2) và thấy sự khác biệt.

Đây là tất cả những gì bạn cần để bắt đầu với hai phương thức mảng mới này.

Tóm lược

Trong bài viết này, tôi đã thảo luận ngắn gọn về mảng là gì và mức độ hữu ích của chúng trong JavaScript. Sau đó, chúng ta đã tìm hiểu về hai phương thức mảng quan trọng mới đã được giới thiệu trong ECMAScript 2019 cho phép bạn thay đổi một mảng ban đầu thành một mảng mới.

Các phương thức mảng mới này là flat()flatMap() các phương pháp.

Bạn sử dụng flat() phương thức nối các mảng con theo cách đệ quy thành một mảng. Các flat() phương thức lấy một giá trị độ sâu làm tham số của nó, giá trị này là tùy chọn tùy thuộc vào độ sâu của mảng mà bạn muốn làm phẳng (nối). Các flat() phương thức lấy 1 làm độ sâu theo mặc định.

Mặt khác, flatMap() hoạt động về cơ bản giống như mong đợi rằng nó là sự kết hợp của map()flat() các phương pháp với nhau. flatMap() lặp qua các phần tử trong mảng và nối các phần tử.

Cả hai phương pháp mới đều hữu ích khi bạn thay đổi một mảng ban đầu thành một mảng mới. Chúng đáng để thử trong dự án lớn hoặc nhỏ tiếp theo của bạn.

Các tài nguyên hữu ích khác:



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status