Nhiều lúc khi viết các hàm khác nhau, chúng ta có thể muốn tạo ranges (dải giá trị) để làm việc với dữ liệu. Một range đại diện cho dữ liệu trong mảng hoặc đối tượng với giá trị bắt đầu và kết thúc.
Nhiều ngôn ngữ có phương thức built-in để tạo ranges, ví dụ to_a trong Ruby:
('a'..'e').to_a => ["a", "b", "c", "d", "e"]
JavaScript không có phương thức built-in cụ thể cho việc này, nhưng có nhiều cách chúng ta có thể tự xây dựng ranges. Chúng ta sẽ chỉ cho bạn ba cách.
_.range() – Lodash
Nếu muốn tạo range số và muốn nhanh nhất, chúng ta có thể dùng phương thức util _.range() của Lodash.
Phương thức này trả về mảng và nhận ba đối số: Thứ nhất cho đầu của range, thứ hai cho cuối của range (tới nhưng không bao gồm) và thứ ba cho bước nhảy (step), hoặc giá trị tăng/giảm.
_.range(-2); // => [0, -1] _.range(1, 3); // => [1, 2] _.range(1, 10, 4); // => [1, 5, 9]
Lưu ý nếu chỉ cung cấp một đối số nó sẽ tạo range lên đến số chỉ định. Cũng nhớ Lodash là thư viện JavaScript cần cài đặt riêng!
Tự tạo hàm range()
Nếu muốn tiết kiệm overhead, chúng ta tự tạo hàm range số. Việc tự tạo range khá dễ dàng.
function range(start, end, step = 1){
if(start === end) return [start];
const range = [];
for(let i = start; i <= end; i += step){
range.push(i);
}
return range;
}
range(1, 10, 4) // => [1, 5, 9]
range(1, 10) // => [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Dễ viết và tránh import thư viện như Lodash chỉ cho một hàm!
Tạo hàm Range cho non-number (ký tự)
Bây giờ bạn có thể hỏi, range cho non-number như ký tự thì sao? Có vài lựa chọn triển khai với JavaScript.
Ở đây chúng ta dùng phương thức charCodeAt() để lấy số rồi tăng và push vào mảng dùng String.fromCharCode(), trả về ký tự từ mã ký tự.
function charRange(start, stop) {
const range = [];
const end = stop.charCodeAt(0)
for (let i = start.charCodeAt(0); i <= end; i++){
range.push(String.fromCharCode(i));
}
return range;
};
charRange('A','F') // => [ 'A', 'B', 'C', 'D', 'E', 'F' ]
Dễ hơn bạn nghĩ đúng không?
Kết luận
Bây giờ bạn biết tạo ranges với JavaScript dễ dàng đến đâu. Hãy lưu các hàm tiện ích này, chắc chắn sẽ hữu ích!