前端技术 成长之路程序员首页投稿(暂停使用,暂停投稿)

javascript 向数组添加n个空字符串

2017-12-07  本文已影响18人  寻找自我的兔茽

书写文章起因

在最近的抽奖活动开发里,有这么个需求:
接口返回不定数量(length<=9)的奖品数组,前端这边要循环展示长度为9的奖品数组。
so,开始我们今天的正题,添加空字符串数组。

方案1、splice + while
const a = [ 1, 2, 3 ];
while( a.length < 9 ){ a.splice(0, 0, ''); } 

// a结果是: [ '', '', '', '', '', '', 1, 2, 3 ]
方案2、for + push
const a = [ 1, 2, 3 ];
const n = 9 - a.length;
for( let i = 0; i < n; i++  ){ a.push( '' ); }

// a的结果:[ 1, 2, 3, '', '', '', '', '', '' ]
方案3、Array.prototype.fill()

Array.fill是 ES6 新增的方法,它可以帮助你填充数组。
定义:用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

将原数组的每一个元素填充成 fill 传入的值。
[1,2,3,4].fill(6)  
// => [6,6,6,6]

它支持传入三个参数: fill(value, start, end)
value:用来填充数组元素的值。
start:可选 起始索引,默认值为0。
end:可选 终止索引,默认值为 this.length。

[1, 2, 3].fill(4)            // [4, 4, 4]
[1, 2, 3].fill(4, 1)         // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2)      // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1)      // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2)    // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN)  // [1, 2, 3]
Array(3).fill(4);            // [4, 4, 4]

所以第三种方案是:

const a = [ 1, 2, 3 ];
a.concat( Array( 9-a.length ).fill( '' ) );  

// a 的结果为:[1, 3, 9, "", "", "", "", "", ""]
上一篇下一篇

猜你喜欢

热点阅读