Làm cách nào để bạn tạo một dãy số trong javascript?

Bạn đã bao giờ giải quyết một vấn đề mà bạn cần tạo một danh sách tất cả các số giữa hai đầu vào và thao tác chúng theo một cách nào đó chưa? . Tôi đã rất ngạc nhiên khi thấy rằng không có gì giống với phương thức Ruby Range đơn giản được tích hợp sẵn và có khá nhiều cách khác nhau để thực hiện điều này trong JavaScript

Trong Ruby, bạn có thể tạo một mảng mới từ các phạm vi bằng cách sử dụng phương thức tích hợp sẵn

js

2 hoặc phương thức

js

3. Nếu chúng ta cần tạo một dãy năm từ 2010 đến 2020, bạn sẽ làm như thế nào

js

4 hoặc

js

5. Bên trong dấu ngoặc đơn, chúng tôi cung cấp cho Ruby hai số và hai dấu chấm, mà Ruby diễn giải là tạo ra một phạm vi bao gồm từ 2010 đến 2020

Có lẽ thậm chí phổ biến hơn, bạn muốn kết xuất thứ gì đó trong một vài lần. Có thể bạn muốn tạo 5 hạt hoặc một loạt các đường nền cho biểu đồ

Trong React, vấn đề này hơi phức tạp một chút, vì chúng ta cần một mảng mà chúng ta có thể ánh xạ. Về cơ bản, tôi muốn có thể làm một cái gì đó như thế này

jsx

Tôi không thể sử dụng vòng lặp

js

9, vì chúng tôi cần hiển thị các biểu thức trong JSX

Tiện ích

js

2 này cung cấp cho tôi một cách ngắn gọn, đầy đủ chức năng để giải quyết các loại vấn đề này

Liên kết đến tiêu đề nàyCách sử dụng

Tiện ích này có thể được sử dụng theo nhiều cách

Bạn có thể chuyển một số duy nhất để tạo phạm vi từ 0 đến số đó

js

Bạn có thể chuyển hai số để tạo một phạm vi từ đầu đến cuối

js

Cuối cùng, bạn có thể chuyển đối số "bước" thứ ba, nếu bạn muốn thay đổi khoảng cách giữa các số

js

Bạn sẽ nhận thấy rằng mảng được tạo bao gồm số bắt đầu nhưng không bao gồm số kết thúc.

js

3 bao gồm 10, nhưng không bao gồm 20. Điều này được thực hiện có chủ ý, để phù hợp với hành vi của các phương thức JavaScript như slice

Liên kết đến tiêu đề nàyGiải trình

Lặp lại từ giá trị bắt đầu đến giá trị kết thúc, với một bước nhất định, chính xác là vấn đề mà vòng lặp

js

9 được thiết kế để giải quyết. Hàm

js

2 của chúng tôi thực sự chỉ là một lớp bọc mỏng xung quanh mẫu "vani" phổ biến này

Một chút có thể đáng ngạc nhiên là điều này

js

Kiểm tra này tồn tại để chúng tôi có thể gọi

js

2 với một giá trị duy nhất, như

jsx

2. Thay vì được sử dụng làm giá trị

jsx

3, chúng tôi đang sao chép giá trị này sang

jsx

4 và đặt

jsx

3 thành 0. Đây là một thứ chất lượng cuộc sống, để làm cho nó dễ sử dụng hơn một chút

Tại sao lại quá cổ điển?

Khi bạn tìm kiếm trên StackOverflow, bạn sẽ tìm thấy nhiều giải pháp hiện đại sử dụng

jsx

6 hoặc trình tạo để giải quyết vấn đề này

{''}

Hóa ra các giải pháp sử dụng các phương pháp này thực sự phức tạp hơn một chút. Đây là một ví dụ từ chủ đề đó, thực hiện bắt đầu/kết thúc/bước

{''}

js

{''}

Có những phiên bản đơn giản hơn của mã này, nhưng kết quả là như nhau. mã khó theo dõi hơn

{''}

Vì các nhà phát triển JS đã chấp nhận các nguyên tắc chức năng, chúng tôi đã loại bỏ các API bắt buộc như vòng lặp

js

9. Nói chung, đây là một điều tốt. Nhưng chúng ta không nên đánh mất mục tiêu, đó là tạo mã dễ hiểu hơn

{''}

Trong trường hợp này, vòng lặp

js

9 có tính khai báo cao hơn nhiều so với vòng lặp

jsx

6. Ý tưởng với mã khai báo là nó mô tả những gì bạn muốn, không phải cách thực hiện. Trong trường hợp của chúng tôi, chúng tôi muốn một mảng từ đầu đến cuối, bỏ qua dựa trên một bước. Tình cờ là một

js

9 mô tả chính xác điều đó. Trong khi cách tiếp cận của

jsx

6 tập trung nhiều hơn vào cách làm một việc gì đó

Ngoài ra, giải pháp "cổ điển" của chúng tôi hoạt động trên IE 10/11 mà không cần điền vào, điều này không thể nói cho các giải pháp thay thế hiện đại

Có phương pháp phạm vi nào trong JavaScript không?

Phương thức nào trong JavaScript trả về một loạt các phần tử của một mảng?

Phạm vi của một mảng là gì?