Question

我真的无法理解那里发生的事情，我真的认为我应该和你们分享这个：

我打电话给我的api＆＃39; / products＆＃39;并且邮递员的反应看起来像这样：

[
  {
    "id": 2,
    "name": "some_product_name",
    "description": "description",
    "price": "$120.00",
    "firmware_version": "1.0",
    "quantity_in_stock": 50,
    "selling": true,
    "build_version": "1.2",
    "category_id": 1,
    "available_colors": [
      {
        "name": "blue",
        "in_stock": true,
        "picture": {
          "type": "Buffer",
          "data": []
        }
      },
      {
        "name": "black",
        "in_stock": true,
        "picture": null
      },
      {
        "name": "silver",
        "in_stock": true,
        "picture": {
          "type": "Buffer",
          "data": []
        }
      }
    ]
  }
]

现在我要做的是创建一个名为products_showcase的新对象，每个产品颜色都有一个条目，除了available_colors属性之外的相同信息，由颜色对象替换：

$scope.initModel = function() {
    $http({
      method: 'GET',
      url: '/products'
    }).then(function(resp) {
      console.log(resp.data);
      $scope.products = resp.data;
      $scope.products.forEach((item, index, array) => {
        item.available_colors.forEach((color, index, array) => {              
          var product = item;
          product.color = {};
          product.color = color;
          delete product['available_colors'];
          $scope.products_showcase.push(product);
        });
      });
    }, function(error) {
      $scope.error = error;
    });
  };

然而，发生了一件非常奇怪的事情：

在响应对象中也删除了available_colors属性，我没有以任何方式触及代码。
color属性也会添加到响应对象中。
products_showcase是一个包含相同对象3次的数组，其color属性等于我正在迭代的$ scope.products.available_colors对象的第一个颜色

Answer 1

将JID分配给变量时，Javascript不会创建新对象。您可以使用Object.create函数来创建新对象来自现有的。

$scope.initModel = function() {
    $http({
            method: 'GET',
            url: '/products'
    }).then(function(resp) {
        console.log(resp.data);
        $scope.products = Object.create(resp.data);
        $scope.products.forEach((item, index, array) => {
                item.available_colors.forEach((color, index, array) => {              
                        var product = Object.create(item);
                        product.color = {};
                        product.color = color;
                        delete product['available_colors'];
                        $scope.products_showcase.push(product);
                });
        });
    }, function(error) {
        $scope.error = error;
    });
};

Answer 2

Javascript赋值运算符显然没有为新变量创建对象的新实例，它只是创建一个指向“父”对象的内存地址的指针。

示例代码：

var object = {property: 'myProp'};
console.log(object);

{property：'myProp'}

var newObj = object;
newObj.newProperty = 'myNewProp';
console.log(object);

{property：'myProp'，newProperty：'myNewProp'}

要创建对象的新实例，我们必须使用Object.create（）方法。

Json对象操作中的Javascript奇怪行为

2 个答案: