4 cách làm phẳng một mảng (flatten array) với javascript

Nội dung bài viết

Flatten an array of arrays - Có nhiều trường hợp chúng ta sẽ gặp những dữ liệu trả về từ API ở một nhà cung cấp nào đó. Có một sự bối rối không hề nhẹ cho những bạn chưa từng sử dụng hay chưa từng biết về khái niệm này. Trong bài viết này, tips javascript sẽ cung cấp cho bạn 4 mẹo đơn giản nhưng vô cùng tiện lợi khi muốn làm phẳng mảng trong javascript. 


The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. 


Có nghĩa là: Phương thức phẳng mảng tạo ra một mảng mới với tất cả các phần tử mảng con được nối vào nó theo cách đệ quy cho đến độ sâu đã chỉ định. Và ngoài đệ quy thì cón có những phương pháp sau đây!


1 - flat() es6

Trong ES6 (ES2015) thì đã cung cấp một phương thức vô cùng hiệu quả đó là  flat() . Ví dụ:

    const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
    console.log(arr4.flat(Infinity)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]


2 - Đệ quy trong javascript

Đệ quy javascript là một trong những thuật toán không thể không biết khi học lập trình. Nếu bạn thật sự chưa hiểu thì hay tham khảo tại bài viết này "Hiểu và sử dụng đệ quy trong javascript"

let result = []
let flatten = function (arr) {
  for (let i = 0; i < arr.length; i++) {
    let item = arr[i]
    if (Array.isArray(arr[i])) {
      flatten(item)
    } else {
      result.push(item)
    }
  }
  return result
}

let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))

3 - Sử dụng reduce javascript làm phẳng mảng

Đối với những bạn yêu thích reduce thì ngoài làm phẳng ra thì còn có rất nhiều điều mà reduce javascript có thể làm được (25 trường hợp sử dụng reduce trong javascript)

function flatten(arr) {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
  }, [])
}

let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))

4 - Sử dụng operator spread làm phẳng mảng

Spread Operator cho phép chuyển đổi một chuỗi thành nhiều argument (trong trường hợp gọi với hàm) hoặc thành nhiều phần tử (cho array). Thêm vào nữa nó cũng cho phép làm nhiệm vụ destructure. Operator này có syntax là 3 dấu chấm ... Đọc thêm: 5 cách sử dụng Spread Operator trong javascript

function flatten(arr) {
  while (arr.some((item) => Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
}

let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))

5 - Tóm lại

Việc sử dụng cách nào thì tuỳ thuộc vào cách nghĩ và hoàn cảnh của mỗi lập trình viên. Ở đây chỉ là những cách làm phẳng một array mà đến thời điểm này là tốt nhất theo ý kiến của chúng tôi. Nếu bạn có phương pháp nào thì vui lòng comment or nhắn tin tại fan page tips javascript. Thank for reading!!!

Có thể bạn đã bị missing