如何创建包含 1…N 的数组

技术背景

在 JavaScript 编程中，经常会遇到需要创建一个包含从 1 到 N 的连续整数数组的需求。不同的方法在代码简洁性、性能和兼容性上有所差异。

实现步骤

ES6 之前的方法

• 使用 Array.apply 和 map 方法：

var N = 10; 
var arr = Array.apply(null, {length: N}).map(Number.call, Number);
// 结果: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

解释：Array.apply(null, {length: N}) 会创建一个长度为 N 的数组，每个元素初始化为 undefined。map 方法会遍历数组，将每个元素映射为其索引值。

ES6 方法

使用扩展运算符 (...) 和 keys 方法

var N = 10;
var arr = [...Array(N).keys()].map(i => i + 1);
// 结果: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

fill 和 map 方法

var N = 10;
var arr = Array(N).fill().map((_, i) => i + 1);
// 结果: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.from 方法

var N = 10;
var arr = Array.from({ length: N }, (_, i) => i + 1);
// 结果: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

其他库的方法

Underscore.js 的 _.range 方法

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

D3.js 的 d3.range 方法

d3.range(1, 5 + 1); // [1, 2, 3, 4, 5]

自定义函数方法

function range(start, end) {
    var foo = [];
    for (var i = start; i <= end; i++) {
        foo.push(i);
    }
    return foo;
}

var foo = range(1, 5); // [1, 2, 3, 4, 5]

核心代码

以下是各种方法的汇总代码：

function A(N) {
    return Array.from({length: N}, (_, i) => i + 1)
}

function B(N) {
    return Array(N).fill().map((_, i) => i + 1);
}

function C(N) {
    return Array(N).join().split(',').map((_, i) => i + 1 );
}

function D(N) {
    return Array.from(Array(N), (_, i) => i + 1)
}

function E(N) {
    return Array.from({ length: N }, (_, i) => i + 1)
}

function F(N) {
    return Array.from({length:N}, Number.call, i => i + 1)
}

function G(N) {
    return (Array(N)+'').split(',').map((_,i) => i + 1)
}

function H(N) {
    return [ ...Array(N).keys() ].map( i => i + 1);
}

function I(N) {
    return [...Array(N).keys()].map(x => x + 1);
}

function J(N) {
    return [...Array(N + 1).keys()].slice(1)
}

function K(N) {
    return [...Array(N).keys()].map(x => ++x);
}

function L(N) {
    let arr; (arr=[ ...Array(N + 1).keys() ]).shift();
    return arr;
}

function M(N) {
    var arr = [];
    var i = 0;

    while (N--) arr.push(++i);

    return arr; 
}

function N(N) {
    var a=[],b=N;while(b--)a[b]=b + 1;
    return a;
}

function O(N) {
    var a=Array(N),b=0;
    while(b < N) a[b++]=b;
    return a;
}

function P(N) {
    var foo = [];
    for (var i = 1; i <= N; i++) foo.push(i);
    return foo;
}

function Q(N) {
    for(var a=[],b=N;b--;a[b]=b + 1);
    return a;
}

function R(N) {
    for(var i,a=[i=0];i < N;a[i++]=i);
    return a;
}

function S(N) {
    let foo,x;
    for(foo=[x=N]; x; foo[x - 1]=x--);
    return foo;
}

function T(N) {
    return new Uint8Array(N).map((item, i) => i + 1);
}

function U(N) {
    return '_'.repeat(5).split('').map((_, i) => i + 1);
}

function V(N) {
    return _.range(1, N + 1);
}

function W(N) {
    return [...(function*(){let i = 0;while(i < N)yield ++i})()]
}

function X(N) {
    function sequence(max, step = 1) {
        return {
            [Symbol.iterator]: function* () {
                for (let i = 1; i <= max; i += step) yield i
            }
        }
    }

    return [...sequence(N)];
}


[A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X].forEach(f => {
    console.log(`${f.name} ${f(5)}`);
})

最佳实践

• 代码简洁性：如果使用 ES6 环境，推荐使用 Array.from 或扩展运算符结合 keys 方法，代码简洁易懂。

var N = 10;
var arr = Array.from({ length: N }, (_, i) => i + 1);

• 性能优先：对于性能敏感的场景，经过测试，基于 while 循环的方法通常是最快的。

function M(N) {
    var arr = [];
    var i = 0;
    while (N--) arr.push(++i);
    return arr; 
}

常见问题

Array(N).map 不生效

Array(N) 创建的数组元素未被初始化，map 方法只会对有赋值的索引调用回调函数。因此，Array(N).map(Number.call, Number) 会得到一个未初始化的数组。可以使用 Array.apply(null, {length: N}) 或 Array(N).fill() 来解决这个问题。

兼容性问题

使用 ES6 方法时，需要考虑浏览器的兼容性。如果需要支持旧版本浏览器，可以使用 ES5 的方法或引入 polyfill。