4 ứng dụng của Array.from

6547

Bài viết này sẽ liệt kê 4 ứng dụng của Array.from: khởi tạo một dãy số, tạo một mảng gồm n phần tử giống nhau, sao chép một array và tạo một array không trùng lặp.

Array.from được dùng để convert giá trị về kiểu Array, cú pháp như sau

Array.from(arrayLikeOrIterable [, mapFunction [, thisArg]])

Có 3 tham số có thể truyền vào, 2 thằng sau không bắt buộc

arrayLikeOrIterable giá trị muốn chuyển
mapFunction(item, index) function sẽ chạy qua toàn bộ các phần tử
thisArg được sử dụng như giá trị this bên trong mapFunction

const someNumbers = { "0": 10, "1": 15, length: 2 }
Array.from(someNumbers, value => value * 2)
// => [20, 30]

Ứng dụng 1: khởi tạo một dãy số

Khởi tạo dãy số từ 0 đến giá trị truyền vào

function range(end) {
    return Array.from({ length: end }, (_, index) => index)
}

range(4)
// => [0,1,2,3]

Ứng dụng 2: Tạo một mảng gồm n phần tử giống nhau

Input: số lượng phần tử, giá trị. Output: toàn một mảng n phần tử giống với giá trị đã cho.

const length = 3
const init = 0
const result = Array.from({ length }, () => init )

// => [0,0,0]

Thật ra chúng ta cũng có thể viết bằng Array.fill() dễ nhìn hơn

const length = 3;
const init   = 0;
const result = Array(length).fill(init);

Ứng dụng 3: sao chép một array

Nếu chỉ đơn giản là sao chép array thì ta có thể viết

const cloneArray = [...array1, array2]

Nhưng nếu array1 lại chứa một array bên trong đó thì sao? Hàm đệ quy để chép tuốt

function recursiveClone(val) {
  return Array.isArray(val) ? Array.from(val, recursiveClone) : val;
}

const numbers = [[0, 1, 2], ['one', 'two', 'three']];
const numbersClone = recursiveClone(numbers);

numbersClone; // => [[0, 1, 2], ['one', 'two', 'three']]
numbers[0] === numbersClone[0] // => false

Ứng dụng 4: Tạo một array không trùng lặp

Thật ra thì bản thân Array.from không làm được, chúng ta dùng new Set() rồi mới sau đchuyển ngược lại về array

function unique(arr) {
    return Array.from(new Set(arr))
}
unique([1, 1, 2, 3, 3]); // => [1, 2, 3]