Hướng dẫn create array in range javascript - tạo mảng trong phạm vi javascript

https://stackoverflow.com/a/49577331/8784402

Với Delta

Cho JavaScript

nhỏ nhất và một lớp lót

[...Array(N)].map((v, i) => from + i * step);

Ví dụ và các lựa chọn thay thế khác

Array.from(Array(10).keys()).map(i => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

[...Array(10).keys()].map(i => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

Array(10).fill(0).map((v, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array(10).fill().map((v, i) => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

[...Array(10)].map((v, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Chức năng phạm vi

const range = (from, to, step) =>
  [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);

range(0, 9, 2);
//=> [0, 2, 4, 6, 8]

// can also assign range function as static method in Array class (but not recommended )
Array.range = (from, to, step) =>
  [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);

Array.range(2, 10, 2);
//=> [2, 4, 6, 8, 10]

Array.range(0, 10, 1);
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.range(2, 10, -1);
//=> []

Array.range(3, 0, -1);
//=> [3, 2, 1, 0]

Là người lặp

class Range {
  constructor(total = 0, step = 1, from = 0) {
    this[Symbol.iterator] = function* () {
      for (let i = 0; i < total; yield from + i++ * step) {}
    };
  }
}

[...new Range(5)]; // Five Elements
//=> [0, 1, 2, 3, 4]
[...new Range(5, 2)]; // Five Elements With Step 2
//=> [0, 2, 4, 6, 8]
[...new Range(5, -2, 10)]; // Five Elements With Step -2 From 10
//=>[10, 8, 6, 4, 2]
[...new Range(5, -2, -10)]; // Five Elements With Step -2 From -10
//=> [-10, -12, -14, -16, -18]

// Also works with for..of loop
for (i of new Range(5, -2, 10)) console.log(i);
// 10 8 6 4 2

Như chỉ máy phát điện

const Range = function* (total = 0, step = 1, from = 0) {
  for (let i = 0; i < total; yield from + i++ * step) {}
};

Array.from(Range(5, -2, -10));
//=> [-10, -12, -14, -16, -18]

[...Range(5, -2, -10)]; // Five Elements With Step -2 From -10
//=> [-10, -12, -14, -16, -18]

// Also works with for..of loop
for (i of Range(5, -2, 10)) console.log(i);
// 10 8 6 4 2

// Lazy loaded way
const number0toInf = Range(Infinity);
number0toInf.next().value;
//=> 0
number0toInf.next().value;
//=> 1
// ...

Từ đến với các bước/đồng bằng

Sử dụng trình lặp

class Range2 {
  constructor(to = 0, step = 1, from = 0) {
    this[Symbol.iterator] = function* () {
      let i = 0,
        length = Math.floor((to - from) / step) + 1;
      while (i < length) yield from + i++ * step;
    };
  }
}
[...new Range2(5)]; // First 5 Whole Numbers
//=> [0, 1, 2, 3, 4, 5]

[...new Range2(5, 2)]; // From 0 to 5 with step 2
//=> [0, 2, 4]

[...new Range2(5, -2, 10)]; // From 10 to 5 with step -2
//=> [10, 8, 6]

Sử dụng máy phát điện

const Range2 = function* (to = 0, step = 1, from = 0) {
  let i = 0,
    length = Math.floor((to - from) / step) + 1;
  while (i < length) yield from + i++ * step;
};

[...Range2(5, -2, 10)]; // From 10 to 5 with step -2
//=> [10, 8, 6]

let even4to10 = Range2(10, 2, 4);
even4to10.next().value;
//=> 4
even4to10.next().value;
//=> 6
even4to10.next().value;
//=> 8
even4to10.next().value;
//=> 10
even4to10.next().value;
//=> undefined

Cho TypeScript

class _Array extends Array {
  static range(from: number, to: number, step: number): number[] {
    return Array.from(Array(Math.floor((to - from) / step) + 1)).map(
      (v, k) => from + k * step
    );
  }
}
_Array.range(0, 9, 1);

Hướng dẫn này bao gồm một số ví dụ nhanh về cách tạo ra một loạt các số (ví dụ: [0, 1, 2, ..., N]) trong một mảng trong JavaScript.

Các ví dụ dưới đây bao gồm tạo một mảng có mười số từ 0 đến chín (____10), một mảng có phạm vi một đến mười (

Array.from(Array(10).keys()).map(i => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

[...Array(10).keys()].map(i => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

Array(10).fill(0).map((v, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array(10).fill().map((v, i) => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

[...Array(10)].map((v, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array.from(Array(10).keys()).map(i => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

[...Array(10).keys()].map(i => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

Array(10).fill(0).map((v, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array(10).fill().map((v, i) => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

[...Array(10)].map((v, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array.from(Array(10).keys()).map(i => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

[...Array(10).keys()].map(i => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

Array(10).fill(0).map((v, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array(10).fill().map((v, i) => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

[...Array(10)].map((v, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Ở đây họ đang hoạt động: (xem trên Stackblitz tại https://stackblitz.com/edit/vanilla-js-create-array-with-mange-of-numbers)(See on StackBlitz at https://stackblitz.com/edit/vanilla-js-create-array-with-range-of-numbers)

JavaScript Tạo mã ví dụ phạm vi

Các đoạn mã sử dụng các công cụ Vanilla JS sau đây để tạo một loạt các số trong một mảng:

• Hàm

  Array.from(Array(10).keys()).map(i => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  [...Array(10).keys()].map(i => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  Array(10).fill(0).map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  Array(10).fill().map((v, i) => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  [...Array(10)].map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  

  4 tạo ra một mảng JavaScript mới với một số lượng trống được chỉ định (ví dụ:

  Array.from(Array(10).keys()).map(i => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  [...Array(10).keys()].map(i => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  Array(10).fill(0).map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  Array(10).fill().map((v, i) => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  [...Array(10)].map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  

  5 tạo ra mảng

  Array.from(Array(10).keys()).map(i => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  [...Array(10).keys()].map(i => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  Array(10).fill(0).map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  Array(10).fill().map((v, i) => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  [...Array(10)].map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  

  6).
• Phương thức

  Array.from(Array(10).keys()).map(i => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  [...Array(10).keys()].map(i => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  Array(10).fill(0).map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  Array(10).fill().map((v, i) => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  [...Array(10)].map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  

  7 trả về một đối tượng lặp mới với khóa/chỉ mục của mỗi khe trong một mảng (ví dụ:

  Array.from(Array(10).keys()).map(i => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  [...Array(10).keys()].map(i => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  Array(10).fill(0).map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  Array(10).fill().map((v, i) => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  [...Array(10)].map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  

  8).
• Toán tử lây lan ES6 (

  Array.from(Array(10).keys()).map(i => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  [...Array(10).keys()].map(i => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  Array(10).fill(0).map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  Array(10).fill().map((v, i) => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  [...Array(10)].map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  

  9) mở rộng/chuyển đổi đối tượng lặp phím thành một danh sách các phần tử có thể được chuyển cho một hàm tạo mảng theo nghĩa đen (

  const range = (from, to, step) =>
    [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);
  
  range(0, 9, 2);
  //=> [0, 2, 4, 6, 8]
  
  // can also assign range function as static method in Array class (but not recommended )
  Array.range = (from, to, step) =>
    [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);
  
  Array.range(2, 10, 2);
  //=> [2, 4, 6, 8, 10]
  
  Array.range(0, 10, 1);
  //=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  
  Array.range(2, 10, -1);
  //=> []
  
  Array.range(3, 0, -1);
  //=> [3, 2, 1, 0]
  

  0).
• Hàm

  const range = (from, to, step) =>
    [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);
  
  range(0, 9, 2);
  //=> [0, 2, 4, 6, 8]
  
  // can also assign range function as static method in Array class (but not recommended )
  Array.range = (from, to, step) =>
    [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);
  
  Array.range(2, 10, 2);
  //=> [2, 4, 6, 8, 10]
  
  Array.range(0, 10, 1);
  //=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  
  Array.range(2, 10, -1);
  //=> []
  
  Array.range(3, 0, -1);
  //=> [3, 2, 1, 0]
  

  1 được sử dụng để tạo một mảng mới với phạm vi số được sửa đổi.
• Hàm

  const range = (from, to, step) =>
    [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);
  
  range(0, 9, 2);
  //=> [0, 2, 4, 6, 8]
  
  // can also assign range function as static method in Array class (but not recommended )
  Array.range = (from, to, step) =>
    [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);
  
  Array.range(2, 10, 2);
  //=> [2, 4, 6, 8, 10]
  
  Array.range(0, 10, 1);
  //=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  
  Array.range(2, 10, -1);
  //=> []
  
  Array.range(3, 0, -1);
  //=> [3, 2, 1, 0]
  

  2 làm tròn một số xuống số nguyên gần nhất, nó được sử dụng trong ví dụ cuối cùng để đảm bảo toàn bộ số được chuyển đến hàm

  Array.from(Array(10).keys()).map(i => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  [...Array(10).keys()].map(i => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  Array(10).fill(0).map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  
  Array(10).fill().map((v, i) => 4 + i * -2);
  //=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]
  
  [...Array(10)].map((v, i) => 4 + i * 2);
  //=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
  

  4 bất kể kích thước bước.

(function() {
    // 0 to 9
    const range = [...Array(10).keys()];
    document.getElementById('rangeOne').innerHTML = JSON.stringify(range);
})();

(function() {
    // 1 to 10
    const start = 1;
    const end = 10;
    const range = [...Array(end - start + 1).keys()].map(x => x + start);
    document.getElementById('rangeTwo').innerHTML = JSON.stringify(range);
})();

(function() {
    // 5 to 20
    const start = 5;
    const end = 20;
    const range = [...Array(end - start + 1).keys()].map(x => x + start);
    document.getElementById('rangeThree').innerHTML = JSON.stringify(range);
})();

(function() {
    // 0 to 100 step 10
    const start = 0;
    const end = 100;
    const step = 10;
    const arrayLength = Math.floor(((end - start) / step)) + 1;
    const range = [...Array(arrayLength).keys()].map(x => (x * step) + start);
    document.getElementById('rangeFour').innerHTML = JSON.stringify(range);
})();

Thông tin thêm về các chức năng JavaScript được sử dụng

Để biết thêm thông tin về các chức năng và toán tử vani JS được sử dụng trong ví dụ, xem các liên kết bên dưới:

• Hàm mảng - https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/array
• Chức năng khóa mảng - https://developer.mozilla.org/en-us/docs/web/javascript
• Nhà điều hành lây lan ES6 - https://developer.mozilla.org/en-us/docs/web/javascript
• Chức năng bản đồ mảng - https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/map
• Hàm sàn toán học - https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/math/floor

Đăng ký hoặc theo dõi tôi để cập nhật

Đăng ký kênh YouTube của tôi hoặc theo dõi tôi trên Twitter, Facebook hoặc GitHub để được thông báo khi tôi đăng nội dung mới.

• Đăng ký trên YouTube tại https://www.youtube.com/jasonwatmore
• Theo dõi tôi trên Twitter tại https://twitter.com/jason_watmore
• Theo dõi tôi trên Facebook tại https://www.facebook.com/jasonwatmoreblog
• Theo dõi tôi trên GitHub tại https://github.com/cornflourblue
• Định dạng nguồn cấp dữ liệu có sẵn: RSS, Atom, JSON

Ngoài việc mã hóa ...

Tôi hiện đang cố gắng đi du lịch khắp nước Úc bằng xe máy với vợ tôi Tina trên một cặp Hoàng gia Enfield Himalayans. Bạn có thể theo dõi cuộc phiêu lưu của chúng tôi trên YouTube, Instagram và Facebook.

• Đăng ký trên YouTube tại https://www.youtube.com/tinaandjason
• Theo dõi chúng tôi trên Instagram tại https://www.instagram.com/tinaandjason
• Theo dõi chúng tôi trên Facebook tại https://www.facebook.com/tinaandjasonvlog
• Truy cập trang web của chúng tôi tại https://tinaandjason.com.au

Cần một số giúp đỡ vani JS?

Tìm kiếm Fiverr để tìm sự giúp đỡ nhanh chóng từ các nhà phát triển Vanilla JS có kinh nghiệm. to find help quickly from experienced Vanilla JS developers.

Làm thế nào để bạn tạo một phạm vi trong JavaScript?

Làm thế nào để bạn tạo một mảng trong JavaScript?

Làm thế nào để bạn tạo ra một mảng số?

Làm thế nào để bạn điền một mảng trong JavaScript?