如何使用AngularJS合并两个对象？附目标数据格式需求

嘿，在AngularJS里合并两个对象其实很方便，主要有两个官方提供的工具方法，你可以根据自己的需求选：

1. 深合并：angular.merge() #

如果你要合并的对象有嵌套结构，而且希望嵌套里的属性也能被合并（而不是直接覆盖），那一定要用这个方法——它会递归遍历所有层级的属性，把源对象的属性合并到目标对象里，同时不会修改原对象（只要你传一个空对象当目标）。

举个实际的例子：
假设你的两个对象是这样的：

// 第一个对象
var userBasic = {
  name: "Selvakumar",
  contact: {
    email: "selva@example.com"
  }
};

// 第二个对象
var userDetails = {
  age: 28,
  contact: {
    phone: "+91-1234567890"
  }
};

用angular.merge()合并的代码：

// 第一个参数是空对象，避免修改原有的userBasic和userDetails
var mergedUser = angular.merge({}, userBasic, userDetails);

合并后的结果会是：

{
  name: "Selvakumar",
  age: 28,
  contact: {
    email: "selva@example.com",
    phone: "+91-1234567890"
  }
}

看到没？嵌套的contact对象里的两个属性都保留了，这就是深合并的好处。

2. 浅合并：angular.extend() #

如果你的对象没有嵌套结构，或者你就是想直接覆盖第一层属性，那可以用这个方法——它只会合并第一层的属性，嵌套的对象会被源对象的属性直接覆盖。

还是用上面的例子，用angular.extend()合并：

var mergedUser = angular.extend({}, userBasic, userDetails);

结果就会变成：

{
  name: "Selvakumar",
  age: 28,
  contact: {
    phone: "+91-1234567890" // 这里userDetails的contact直接覆盖了userBasic的
  }
}

这个时候原来的email属性就没了，所以用这个方法的时候要注意嵌套结构的问题。

在控制器里使用的示例 #

如果是在AngularJS的控制器中，你可以直接调用这些全局方法，比如：

angular.module('myApp', [])
.controller('UserController', function($scope) {
  $scope.userBasic = { name: "Selvakumar", contact: { email: "selva@example.com" } };
  $scope.userDetails = { age: 28, contact: { phone: "+91-1234567890" } };
  
  // 深合并结果
  $scope.fullUserDeep = angular.merge({}, $scope.userBasic, $scope.userDetails);
  // 浅合并结果
  $scope.fullUserShallow = angular.extend({}, $scope.userBasic, $scope.userDetails);
});

自定义合并逻辑（可选） #

如果官方的方法满足不了你的特殊需求（比如某些属性需要自定义规则合并），那你可以自己写一个递归合并函数，不过一般来说angular.merge()已经能解决大部分场景啦。

内容的提问来源于stack exchange，提问作者selvakumar