使用map时使用spread运算符扩展数组

时间:2016-02-29 17:04:51

标签: javascript arrays dictionary spread-syntax

我不确定这是否是正确的做法,但我很好奇是否可以做到。我有一个对象,我需要创建一个数组,键是项目,值id是它在数组中重复的次数。

const arrayInstructions = {
  'm': 5,
  's': 5,
  'p': 5
}

哪个应该['m','m','m','m','m','s','s' ... ]

这是工作方法:

var array = []
Object.keys(arrayInstructions).forEach(function (agenda) {
  array = array.concat( _.fill(Array(arrayInstructions[agenda]), agenda) )
})

可以这样做:

var deck = Object.keys(streamDeck).map(function (agenda) {
  var partial = _.fill(Array(streamDeck[agenda]), agenda)
  return ...partial // I know this is wrong
})

3 个答案:

答案 0 :(得分:1)

您可以在Array.prototype.concat上使用spread来构建最终数组:



const arrayInstructions = { 'm': 5, 's': 5, 'p': 5 };

// This works because Array.prototype behaves like an empty list here
const deck = Array.prototype.concat(
  ..._.map(arrayInstructions, (times,agenda) => _.times(times, _=>agenda)) 
);

log(JSON.stringify(deck));

function log(x) { document.getElementsByTagName('pre')[0].appendChild(document.createTextNode(x)); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.1/lodash.js"></script>
<pre></pre>
&#13;
&#13;
&#13;

<强>更新

考虑到Bergi的建议,这个版本更短,不依赖于Array.prototype在数组上下文中的行为:

const deck = [].concat(..._.map(arrayInstructions,
    (times,agenda) => _.times(times, _=>agenda)
));

答案 1 :(得分:0)

没有充分的理由在这里使用点差运营商吗?

在最简单的形式中,扩展运算符允许您使用一个数组,其中包含多个“元素”或参数,例如

var part = [2, 3];
var arr  = [1, ...part, 4]; // [1,2,3,4]

这看起来很有用,但是您正在填充数组并将它们连接在一起,并且使用concat似乎更合适,但如果您使用{concat,则可以将此限制为apply。 1}}并返回地图

"use strict"

const arrayInstructions = {
  'm': 5,
  's': 1,
  'p': 2
}

var deck = [].concat.apply([], Object.keys(arrayInstructions).map(function(k) { 
    return new Array(arrayInstructions[k]).fill(k) 
}));


//output
document.body.innerHTML = '<pre>' + JSON.stringify(deck, 0, 4) + '</pre>';

答案 2 :(得分:0)

由于Bergi said JS没有concatMap,但您可以手动定义此功能:

function concatMap(array, func, thisArg) {
  return [].concat.apply([], [].map.call(array, func, thisArg));
}
concatMap(
  Object.keys(arrayInstructions),
  k => new Array(arrayInstructions[k]).fill(k)
);