Question

我在下面的代码中包含3个数组，有时绿色数组将完全empty我该怎么做，以便当我组合所有数组并遍历我的foreach时，它不会显示未定义的值？任何帮助将不胜感激。

var blue = job['blue-color'];
var red = job['red-color'];
var green = job['green-color']; 
var colors = blue .concat(red,green);


var colorbooks = '<div">';
$.each(colors, function (index) {
  colorbooks += '<div">' + colors[index] + '</div>';
});
colorbooks+= '</div>';

Answer 1

您可以在打印之前检查您的值是否为 truthy ：

var blue = job['blue-color'] || [];
var red = job['red-color'] || [];
var green = job['green-color'] || [];
var colors = blue.concat(red, green);


var colorbooks = '<div">';
$.each(colors, function(index) {
                            //If it's undefined, it will print an empty String instead
  colorbooks += '<div">' + (colors[index] || '') + '</div>';
});
colorbooks += '</div>';

根据注释中的 @Margon 的建议，如果未定义job['XXX-color']，则还可以为变量分配一个空数组：var blue = job['blue-color'] || [];

Answer 2

您可以首先使用filter()仅获取定义的值，然后使用forEach()到console.log所有这些值：

var blue = [''];
var red = ['red1'];
var green = ['', 'blue1']
var colors = blue .concat(red,green);
console.log(colors);
colors.filter(item => item).forEach(x => console.log(x));

Answer 3

这可能有帮助

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick='setCursor()'>set cursor</button>
<canvas id="c" width="400" height="400"></canvas>

Javascript数组不显示空值

3 个答案: