Làm phẳng mảng trong Vanilla JavaScript với flat () và flatMap ()
Các thư viện như Lodash và Underscore.js đã cung cấp cho ta các tiện ích giúp làm phẳng mảng từ lâu. Nhờ sự phát triển liên tục của tiêu chuẩn ECMAScript, giờ đây ta sẽ nhận được các phương pháp để thực hiện điều đó trực tiếp trong JavaScript vani mà không cần đến các hàm tiện ích bên ngoài.
Như bạn thấy nếu gần đây bạn đang theo dõi interwebs, những phương pháp mới này để làm phẳng mảng đã gây ra khá nhiều sự cố. Bây giờ được biết đến tại #Smooshgate , ý chính của nó là Array.prototype.flatten () đang được vá bởi MooTools, vốn vẫn được một số trang web sử dụng, vì vậy tại một số thời điểm, một gợi ý xuất hiện để đặt tên cho phương thức là Smoosh thay vì làm phẳng như một trò đùa, để tránh phá vỡ một số trang web vẫn dựa vào MooTools. Rất nhiều người đã coi trọng đề xuất này và khá nhiều lần nhấn phím đã bị mất vì điều này.
Bây giờ bụi đã giải quyết từ mini-tranh cãi này, quyết định cuối cùng đã được để đi với TV và flatMap như hai tên phương pháp để giúp đỡ với phẳng mảng trong JavaScript.
Hãy xem qua chúng ngay bây giờ.
Array.prototype.flat ()
Như tên gọi của nó, phương thức flat () có sẵn trên nguyên mẫu Array trả về một mảng mới là version phẳng của mảng mà nó được gọi. Không có đối số được truyền vào, độ sâu là 1 được giả định. Ngược lại, nếu một số được chuyển vào làm đối số đầu tiên, nó được sử dụng làm độ sâu tối đa để làm phẳng mảng.
Đây là một ví dụ đơn giản:
const animals = [['🐕', '🐶'], ['😺', '🐈']];
const flatAnimals = animals.flat();
// same as: const flatAnimals = animals.flat(1);
console.log(flatAnimals);
// ['🐕', '🐶', '😺', '🐈']
Và lưu ý điều gì sẽ xảy ra khi tổng độ sâu của mảng lớn hơn độ sâu tối đa cho phương pháp phẳng:
const animals = [['🐕', '🐶'], ['😺', '🐈', ['😿',['🦁'], '😻']]];
const flatAnimals = animals.flat(2);
console.log(flatAnimals);
// ['🐕', '🐶', '😺', '🐈', '😿',['🦁'], '😻']
Bạn có thể sử dụngInfinity nếu bạn muốn làm phẳng một mảng có độ sâu tùy ý:
const animals = [['🐕', '🐶'], ['😺', '🐈', ['😿',['🦁'], '😻']]];
const flatAnimals = animals.flat(Infinity);
console.log(flatAnimals);
// ['🐕', '🐶', '😺', '🐈', '😿', '🦁', '😻']
Array.prototype.flatMap ()
Phương thức flatMap () có sẵn trên nguyên mẫu Array có tác dụng tương tự như sử dụng phương thức map () theo sau là phương thức flat () với độ sâu mặc định là 1. Nói cách khác, flatMap () ánh xạ mỗi giá trị thành một giá trị mới và thì mảng kết quả được làm phẳng đến độ sâu tối đa là 1.
Đây là một ví dụ:
const animals = ['🐕', '🐈', '🐑', '🐮'];
const noises = ['woof', 'meow', 'baa', 'mooo'];
const mappedOnly = animals.map((animal, index) => [animal, noises[index]]);
const mappedAndFlatten = animals.flatMap((animal, index) => [animal, noises[index]]);
console.log(mappedOnly);
// [['🐕', 'woof'], ['🐈', 'meow'], ['🐑', 'baa'], ['🐮', 'mooo']
console.log(mappedAndFlatten);
// ['🐕', 'woof', '🐈', 'meow', '🐑', 'baa', '🐮', 'mooo']
Hàm gọi lại được truyền vào flatMap () mong đợi các đối số giống như các đối số có thể được truyền vào phương thức map () truyền thống, đối số đầu tiên là giá trị hiện tại, đối số thứ hai là chỉ số của giá trị hiện tại trong mảng và thứ ba là mảng đầy đủ đang được ánh xạ.
Hỗ trợ trình duyệt
Hỗ trợ đã khá tốt, với version mới nhất của hầu hết các trình duyệt mới nhất hỗ trợ cả hai phương pháp. Ví dụ: các phương pháp được hỗ trợ trong Chrome 69+, Firefox 62+ và Safari 12+. Hiện tại không có hỗ trợ cho bất kỳ version nào của Internet Explorer hoặc Edge, tại thời điểm viết bài này.
Nếu bạn muốn bắt đầu sử dụng nó ngay bây giờ và hỗ trợ tất cả các trình duyệt, bạn luôn có thể sử dụng polyfill chính thức / shim cho phẳng và flatMap .
Các tin liên quan
Cách sử dụng các phương thức đối tượng trong JavaScript2018-08-03
Xử lý lỗi trong JavaScript Sử dụng try ... catch
2018-08-03
Hiểu sự kiện trong JavaScript
2018-06-19
Lập lịch tác vụ trong JavaScript Sử dụng setTimeout & setInterval
2018-06-12
Hiểu các lớp trong JavaScript
2018-05-04
Truy cập API Rails trong ứng dụng khách JavaScript bằng Rails Ranger
2018-03-15
Hiểu các biến, phạm vi và lưu trữ trong JavaScript
2018-02-20
Tìm hiểu Nguyên mẫu và Kế thừa trong JavaScript
2018-01-12
Khám phá đối tượng ngày JavaScript
2017-12-06
chuỗi con so với chuỗi con trong JavaScript
2017-11-06
