数组合并

concat 方法

js 的 Array 对象提供了一个叫 concat() 方法，连接两个或更多的数组，并返回结果。

  1. var a = [1, 2, 3]
  2. var b = [4, 5, 6]
  3. var c = a.concat(b)
  4. console.log(c) // 1, 2, 3, 4, 5, 6
  5. console.log(a) // 1, 2, 3 不改变本身

这里有一个问题，concat 方法连接a、b两个数组后，a、b两个数组的数据不变，同时会返回一个新的数组。这样当我们需要进行多次的数组合并时，会造成很大的内存浪费，所以这个方法肯定不是最好的。

循环遍历

大概的思路是：遍历其中一个数组，把该数组中的所有元素依次添加到另外一个数组中。直接上代码：

  1. var a = [0, 1]
  2. var b = [2, 3, 4]
  3. for (var i = 0; i < b.length; i++) {
  4.   a.push(b[i])
  5. }
  6. console.log(a); // [0, 1, 2, 3, 4]

这样的写法可以解决第一种方案中对内存的浪费，但是会有另一个问题：丑！这么说不是没有道理，如果能只用一行代码就搞定，岂不快哉~

apply 方法

函数的apply方法有一个特性，那就是 func.apply(obj,argv) ，argv 是一个数组。所以我们可以利用这点，合并数组a和数组b，使用 Array.prototype.push.apply(a, b) 或者 a.push.apply(a, b)

  1. // ES5 的写法
  2. var a = [0, 1, 2]
  3. var b = [3, 4, 5]
  4. Array.prototype.push.apply(a, b)

或者

  1. a.push.apply(a, b)
  2. // console.log(a); // [0, 1, 2, 3, 4, 5]

a.push.apply(a, b) 调用 a.push 这个函数实例的apply方法，同时把，b当作参数传入，这样 a.push 这个方法就会遍历 b 数组的所有元素，达到合并的效果。
这里可能有点绕，我们可以把b看成 [4, 5, 6] ，变成这样：a.push.apply(a,[4,5,6])
然后上面的操作就等同于：a.push(4, 5, 6)

ES6写法 扩展运算

  1. // ES6 的写法
  2. var a = [0, 1, 2]
  3. var b = [3, 4, 5]
  4. a.push(...b)
  5. console.log(a) // [0, 1, 2, 3, 4, 5]
  1. // ES6 的写法
  2. var a = [0, 1, 2]
  3. var b = [3, 4, 5]
  4. var c = [...a, ...b]
  5. console.log(c) // [0, 1, 2, 3, 4, 5]

ES6写法 使用 map()

  1. var arr1 = [1, 2, 3]
  2. var arr2 = ["a", "b", "c", "d", "e", "f"]
  3. arr1.map(item => {
  4.   arr2.push(item)
  5. })
  6. console.log(arr2) // [1, 2, 3, "a", "b", "c", "d", "e", "f"]

注意：
  1. 以上合并方法并没有考虑过a、b两个数组谁的长度更小。所以好的做法是预先判断a、b两个数组哪个更大，然后使用大数组合并小数组，这样就减少了数组元素操作的次数！
  2. 有时候我们不希望原数组（a、b）改变，这时就只能使用 concat 了。

对象合并

jQuery.extend()

注意：

  1. 如果只为 $.extend() 指定了一个参数，则意味着参数 target 被省略。此时，target就是 jQuery 对象本身。通过这种方式，我们可以为全局对象 jQuery 添加新的函数。
  2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。
  1. var obj1 = { 'a': 1 }
  2. var obj2 = { 'b': 1 }
  3. var c = $.extend(obj1, obj2)
  4. console.log(obj1) // { a: 1, b: 1 } obj1 已被修改
  5. // 或者
  6. var obj3 = $.extend({}, obj1, obj2)
  7. console.log(obj3) // { a: 1, b: 1 } 不会改变 obj1, obj2

遍历赋值

  1. var obj1 = { 'a': 1 }
  2. var obj2 = { 'b': 2, 'c': 3 }
  3. for (var key in obj2) {
  4.   if (obj2.hasOwnProperty(key) === true) { // 此处 hasOwnProperty 是判断自有属性，用 for in 循环遍历对象的属性时，原型链上的所有属性都将被访问会避免原型对象扩展带来的干扰
  5.     obj1[key] = obj2[key]
  6.   }
  7. }
  8. console.log(obj1) //{ 'a': 1, 'b': 2, 'c': 3 }

Obj.assign()

可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。
Object.assign(target, …sources)

  1. // a. 复制一个对象
  2. var obj = { a: 1, b: 2 }
  3. var copyObj = Object.assign({}, obj)
  4. console.log(copyObj); // { a: 1, b: 2 }
  6. // b. 合并多个对象
  7. var o1 = { a: 1 }
  8. var o2 = { b: 2 }
  9. var o3 = { c: 3 }
  10. var obj = Object.assign(o1, o2, o3)
  11. console.log(obj) // { a: 1, b: 2, c: 3 }
  12. console.log(o1)  // { a: 1, b: 2, c: 3 } , 且目标对象自身也会改变。

对象的深拷贝和浅拷贝

浅拷贝
  1. var obj1 = { 'a': 1 }
  2. var obj2 = { 'b': { 'b1': 22, 'b2': 33 } }
  4. $.extend(obj1, obj2)   // obj1 拷贝了 obj2 的属性
  6. console.log(obj1)  // { 'a': 1, 'b': { 'b1': 22, 'b2': 33 } }
  7. console.log(obj1.b.b1)  // 22
  9. obj2.b.b1 = 44   // obj2 重新赋值
  10. console.log(obj1.b.b1)  // 44 obj1.b 仅拷贝了对象的指引，所以受原 obj2 的影响

深拷贝
  1. var obj1 = { 'a': 1 }
  2. var obj2 = { 'b': { 'b1': 22, 'b2': 33 } }
  3. $.extend(true, obj1, obj2)   //第一个参数设为true表示深复制
  5. console.log(obj1)  // {'a': 1, 'b': { 'b1': 22, 'b2': 33 } }
  6. console.log(obj1.b.b1)  // 22
  8. obj2.b.b1 = 44   // obj2 重新赋值
  10. console.log(obj1.b.b1)  // 22 obj1 拷贝了 obj2 的所有属性以及值，并不受 obj2 的影响