给定一个数字快速的构造数组

需求：从后端接口取到总页数，快速生成下面代码

<select class="selectOption">
  <option value="1" selected>第1页</option>
  <option value="2">第2页</option>
  <option value="3">第3页</option>
  <option value="4">第4页</option>
  <option value="5">第5页</option>
  <option value="6">第6页</option>
</select>

方法一：

const str = Array(6).join().split(',').map( (_, index) => {

          index++;

          return `<option value="${index}" ${index == page ? "selected" : ''}>第${index}页</option>`;

    }).join("");

ele.innerHTML = `<select class="selectOption">${str}</select>`;

因为Array(6)生成6项每项默认值为undefined的数组，map会过滤掉undefined项，所以先join转字符串再转回数组。

方法二：

const str = Array(6).fill().map( (_, index) => {

            index++;

            return `<option value="${index}" ${index == page ? "selected" : ''}>第${index}页</option>`;

        }).join("");

ele.innerHTML = `<select class="selectOption">${str}</select>`;

ES6之Array.prototype.fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

语法

arr.fill(value) 

arr.fill(value, start) 

arr.fill(value, start, end)

参数

value

用来填充数组元素的值。

start（可选）

起始索引，默认值为0。

end （可选）

终止索引，默认值为 this.length。

返回值

修改后的数组。

Polyfill

if (!Array.prototype.fill) {
  Object.defineProperty(Array.prototype, 'fill', {
    value: function(value) {

      // Steps 1-2.
      if (this == null) {
        throw new TypeError('this is null or not defined');
      }

      var O = Object(this);

      // Steps 3-5.
      var len = O.length >>> 0;

      // Steps 6-7.
      var start = arguments[1];
      var relativeStart = start >> 0;

      // Step 8.
      var k = relativeStart < 0 ?
        Math.max(len + relativeStart, 0) :
        Math.min(relativeStart, len);

      // Steps 9-10.
      var end = arguments[2];
      var relativeEnd = end === undefined ?
        len : end >> 0;

      // Step 11.
      var final = relativeEnd < 0 ?
        Math.max(len + relativeEnd, 0) :
        Math.min(relativeEnd, len);

      // Step 12.
      while (k < final) {
        O[k] = value;
        k++;
      }

      // Step 13.
      return O;
    }
  });
}