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
2 hoặc phương thứcjs
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àojs
4 hoặcjs
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 2020js
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
9, vì chúng tôi cần hiển thị các biểu thức trong JSXjs
Tiện ích
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àyjs
Liên kết đến tiêu đề này
Cách sử dụngTiệ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.
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ư slicejs
Liên kết đến tiêu đề này
Giải trìnhLặ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
9 được thiết kế để giải quyết. Hàmjs
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àyjs
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
2 với một giá trị duy nhất, nhưjs
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 sangjsx
4 và đặtjsx
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útTại sao lại quá cổ điển?jsx
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
6 hoặc trình tạo để giải quyết vấn đề nàyjsx
{''}
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
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ơnjs
{''}
Trong trường hợp này, vòng lặp
9 có tính khai báo cao hơn nhiều so với vòng lặpjs
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ộtjsx
9 mô tả chính xác điều đó. Trong khi cách tiếp cận củajs
6 tập trung nhiều hơn vào cách làm một việc gì đójsx
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