Javascript 扩展空对象以在事件发出时填充它

从我的服务中，我使用

$rootScope.$emit

发出事件。然后在控制器

$on

中，我将传递的数据存储在数组中。此时，我能够在

ng repeat

指令中显示该值

在消防功能中，它将两个新值存储到控制器中的我的数组中。这个解决方案很好，但现在我需要在许多不同的地方显示它，所以我想保存它不是一个数组，而是一个数组对象。不幸的是，这对我来说是有问题的，我不知道如何在javascript中创建空数组对象，以便在每次发射时都能对其进行扩展

空数组对象的架构如下所示：

arrayObject = [
    {
        firstValue: value,
        secondValue: value
    }
];

我需要用事件控制器中的数据来扩展它，现在，我保存到简单数组的代码如下所示：

$rootScope.$on('colorChanged', function(event, data) {
  console.log('colorChanged event emitted');
  console.log(data);
  if(data) {
      vm.convertedColors.push(data);
  }
});

数据是从服务传递的字符串

当我从服务中激发函数时，它会执行2个方法并发出两次事件，一个是在finish第一个方法中使用firstValue，另一个是在第二个方法之后使用secondValue。如果它是一个对象数组而不是简单数组，那么使用它会更好

可能吗

编辑 虽然我传递给这个

$on

函数，例如这个值

{colorInHEX:#ff0000“}

和

{colorinhl:“hsl（0,1%，0.5%）”}

但我得到了一个错误

TypeError:无法读取未定义的属性“firstValue”

编辑2 所以现在的问题是，这是取代而不是添加新的，我创建了plunker演示问题。来自服务的数据在这一个中是硬编码的，所以每当我单击按钮时，值都是相同的，但它仍然应该创建一个新的，值相同

---

链接到plunker:

如果ECMAScript 6没有问题，您可以使用Object.assign设置firstValue和secondValue属性的值：

// In your controller:
vm.convertedColors = [{}];

$rootScope.$on('colorChanged', function(event, data) {
    if(data) {
        var lastObj = vm.convertedColors[vm.convertedColors.length - 1];
        if (!lastObj.colorInHSL || !lastObj.colorInHex) {
            vm.convertedColors[vm.convertedColors.length - 1] = Object.assign(lastObj, data);
        } else {
            vm.convertedColors.push(Object.assign({}, data));  // Push a new object
        }
        $timeout(function() {});     // Force a new $digest cycle so view is updated.
        console.log("Array: ", vm.convertedColors);
    }
});

// Emitting in your service:

var colorInHSL = 'hsl(' + 1 + ', ' + 100 + '%, ' + 100 + '%)';
$rootScope.$emit('colorChanged', {colorInHSL: colorInHSL});
setTimeout(function() {
    $rootScope.$emit('colorChanged', {colorInHex: "#ff0000"});  
}, 3000);  // Wait 3 seconds before emiting the second value (just to see how things works)

---

您可以将任何内容推送到数组中，对象的数组是完全正常的，但准备好使用filter/map/reduce/find。只需声明空数组arr=[]，然后执行arr.push（yourobject）我编辑了我的问题，因为使用您的解决方案时出现了小错误，请查看。尝试使用空对象对数组进行初始化：vm.convertedColors=[{}]；在emit中，它应该是$rootScope。$emit（'colorChanged'，{colorinsl:#ff0000”“}）；我还需要做的一件事是在

lastObj

之前添加

var

，现在我认为它工作正常。您也可以编辑此项，以前没有

var

它不起作用。因为您已将属性colorInHex重命名为colorInHex。您必须将代码更改为：if（！lastObj.colorinsl | | |！lastObj.colorInHEX）

// In your controller:
vm.convertedColors = [{}];

$rootScope.$on('colorChanged', function(event, data) {
    if(data) {
        var lastObj = vm.convertedColors[vm.convertedColors.length - 1];
        if (!lastObj.colorInHSL || !lastObj.colorInHex) {
            vm.convertedColors[vm.convertedColors.length - 1] = Object.assign(lastObj, data);
        } else {
            vm.convertedColors.push(Object.assign({}, data));  // Push a new object
        }
        $timeout(function() {});     // Force a new $digest cycle so view is updated.
        console.log("Array: ", vm.convertedColors);
    }
});

// Emitting in your service:

var colorInHSL = 'hsl(' + 1 + ', ' + 100 + '%, ' + 100 + '%)';
$rootScope.$emit('colorChanged', {colorInHSL: colorInHSL});
setTimeout(function() {
    $rootScope.$emit('colorChanged', {colorInHex: "#ff0000"});  
}, 3000);  // Wait 3 seconds before emiting the second value (just to see how things works)