不用循环创建一个长度为100的数组,并且每个元素的值等于它的下标

先来说一下最直接的解法…

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99];

接下来转入正题。。。

传统for循环

来说一下传统的for循环:

var arr = new Array(100)
for (var i = 0; i < arr.length; i++) {
  arr[i] = i;
}
arr; // [0, 1, ..., 99]

想必大家都没什么问题👍

不用for循环

但是如何不用for循环实现呢?

ES5的实现

Object.keys(Array.from({ length: 100 }));  
// ["0", "1", "2", ..., "98", "99"]

什么?Array.from是ES6的?没事,我们可以换成ES5的😄

Object.keys(
Array.apply(null,{ length: 100 }));

这样似乎的确完成了功能,但是还有一个问题,此时值是字符串类型,所以我们可以用ES5的map方法进行处理一下:

Object.keys(Array.from({ length: 100 })).map(function(item) {
    return +item;
});

这里用了一个小技巧,字符串前面加一个 “+” 就可以转成数字。如果你不喜欢这样,可以使用parseInt,也是一样的效果。

ES6的实现

普通实现

ES6中数组实例有keysvaluesentries方法,分别用于遍历数组的索引、键值、键值对,它们都返回遍历器对象(详细👉Iterator和for…of循环

因此我们可以用ES6的Array.from转成数组:

Array.from(new Array(100).keys());

Array.from其实还有一个回调函数,可以很方便遍历处理每一个数据

Array.from({ length: 100 }, (v, i) => i);
Array.from(Array(100), (v, i) => i);
// [0, 1, 2, ..., 98, 99]

优雅进阶 - 扩展运算符

ES6新增 ... 扩展运算符,极大方便了相关操作(详见👉函数的扩展里面的扩展运算符)

因此我们可以更加优雅地实现:

[...Array(100).keys()]

或者

[...Array.from({ length: 100 }).keys()]

思路就是这样,当然我们还可以混合搭配出各种解法,甚至ES5、ES6混合😂有可能还有各种奇妙解法,每个人去细细专研吧😊