Cách làm phẳng một mảng trong JavaScript

Hướng dẫn thực tế để làm phẳng các mảng JavaScript

ES2019đã giới thiệu hai phương thức mới cho nguyên mẫu Array:flatflatMap. Cả hai đều rất hữu ích cho những gì chúng tôi muốn làm:làm phẳng một mảng.

Hãy xem chúng hoạt động như thế nào.

Nhưng trước tiên, một lời cảnh báo: chỉ có Firefox 62+, Chrome 69+, Edge 76+ và Safari 12+ hỗ trợ 2 phương pháp đó, vì chúng khá gần đây. Kiểm trahỗ trợ trình duyệt hiện tạivà hãy nhớ rằng bạn có thể sử dụngBabelđể sao lưu mã của bạn sang phiên bản ES trước đó, nếu bạn cần hỗ trợ các trình duyệt cũ hơn.

Nếu bạn không muốn đối phó với Babel và bạn chưa có bước xây dựng, bạn có thể sử dụngflatten(),flattenDeep()flattenDepth()các chức năng do Lodash cung cấp.

Điều thú vị về Lodash là bạn không cần phải nhập toàn bộ thư viện. Bạn có thể sử dụng các chức năng đó một cách riêng lẻ bằng các gói đó:

Đây là cách làm phẳng một mảng bằng cách sử dụnglodash.flatten:

const flatten = require('lodash.flatten')

const animals = [‘Dog’, [‘Sheep’, ‘Wolf’]]

flatten(animals) //[‘Dog’, ‘Sheep’, ‘Wolf’]

Bây giờ chúng ta hãy nói về bản địaflat()flatMap()Các phương pháp JavaScript bây giờ.

flat()là một phương thức thể hiện mảng mới có thể tạo mảng một chiều từ mảng nhiều chiều.

Thí dụ:

['Dog', ['Sheep', 'Wolf']].flat()
//[ 'Dog', 'Sheep', 'Wolf' ]

Theo mặc định, nó chỉ "căn hộ" tối đa một cấp.

Bạn có thể thêm một tham số vàoflat()để đặt số cấp bạn muốn làm phẳng mảng.

Đặt nó thànhInfinityđể có cấp độ không giới hạn:

['Dog', ['Sheep', ['Wolf']]].flat()
//[ 'Dog', 'Sheep', [ 'Wolf' ] ]

['Dog', ['Sheep', ['Wolf']]].flat(2)
//[ 'Dog', 'Sheep', 'Wolf' ]

['Dog', ['Sheep', ['Wolf']]].flat(Infinity)
//[ 'Dog', 'Sheep', 'Wolf' ]

Nếu bạn đã quen thuộc với JavaScriptmap()của một mảng, bạn biết rằng khi sử dụng nó, bạn có thể thực thi một hàm trên mọi phần tử của mảng.

Nếu không, hãy kiểm traHướng dẫn về JavaScript map ().

flatMap()là một phương pháp nguyên mẫu Array mới kết hợpflat()vớimap(). Nó hữu ích khi gọi một hàm trả về một mảng trongmap()gọi lại, nhưng bạn muốn mảng kết quả của mình bằng phẳng:

['My dog', 'is awesome'].map(words => words.split(' '))
//[ [ 'My', 'dog' ], [ 'is', 'awesome' ] ]

['My dog', 'is awesome'].flatMap(words => words.split(' '))
//[ 'My', 'dog', 'is', 'awesome' ]

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: