一周 “新姿势”

前言

这里解释一下为什么“新姿势”加了引号，这里的“新姿势”是指，我这一周内根据新的项目需求，分析需求到实现需求的知识、方法；通过阅读文章，而学到的新知识。也是对这一周的总结，我也希望借此分享出来。可能你现在遇到了同样的需求，或许这篇文章可以帮到你。也可能你现在没遇到这样的需求，也可以看看混个眼熟，说不定哪天碰到了，或许这篇文章可以帮到你。在此声明一下，以后的文章中我都会使用新姿势代替新知识，希望大家可以理解。“新姿势”这个栏目一周一篇，会在每周一更新上一周的“新姿势”，喜欢的老铁可以点个赞，分享一下，你的认可是我最大的动力~

1 赋值

将某一数值赋给某个变量的过程，称为赋值。

例如：

1、let a = 10; b = a; a = 11;

console.log(a); // 11

console.log(b); // 10

2、let a = [1, 2, 3]; b = a; a = [4, 5, 6];

console.log(a); // [4, 5, 6]

console.log(b); // [1, 2, 3]

3、let a = [1, 2, 3]; b = a; a.pop();

console.log(a); // [1, 2]

console.log(b); // [1, 2]

4、let a = {a: 1, b: 2}; b = a; a = {a: 3, b: 4};

console.log(a); // {a: 3, b: 4}

console.log(b); // {a: 1, b: 2}

5、let a = {a: 1, b: 2}; b = a; a.b = 3;

console.log(a); // {a: 1, b: 3}

console.log(b); // {a: 1, b: 3}

仔细考虑2、3、4、5两个例子。有助于对赋值这个概念和定义的理解。

浅拷贝

浅拷贝是拷贝引用，拷贝后的引用都是指向同一个对象的实例，彼此之间的操作会互相影响。

浅拷贝分两种情况，拷贝直接拷贝源对象的引用和源对象拷贝实例，但其属性（类型为Object，Array的属性）拷贝引用。

拷贝原对象的引用

这是最简单的浅拷贝。例如：

var a = {c:1};
var b = a;
console.log(a === b); // 输出true。
a.c = 2;
console.log(b.c); // 输出 2

源对象拷贝实例，其属性对象拷贝引用

这种情况，外层源对象是拷贝实例，如果其属性元素为复杂杂数据类型时，内层元素拷贝引用。对源对象直接操作，不影响另外一个对象，但是对其属性操作时候，会改变另外一个对象的属性的值。
常用方法为：Array.prototype.slice(), Array.prototype.concat(), jQury的$.extend({},obj)等。例如：

var a = [{c:1}, {d:2}];
var b = a.slice();
console.log(a === b); // 输出false，说明外层数组拷贝的是实例
a[0].c = 3;
console.log(b[0].c); // 输出 3，说明其元素拷贝的是引用

深拷贝

在堆中重新分配内存，并且把源对象所有属性都进行新建拷贝，以保证深拷贝的对象的引用图不包含任何原有对象或对象图上的任何对象，拷贝后的对象与原来的对象是完全隔离，互不影响。

深拷贝后，两个对象，包括其内部的元素互不干扰。常见方法有递归，JSON.parse()、JSON.stringify()，jQury的$.extend(true,{},obj)，lodash的_.cloneDeep和_.clone(value, true)等。例如：

var a = {c: {d: 1}};
var b = $.extend(true, {}, a);
console.log(a === b); // 输出false
a.c.d = 3;
console.log(b.c.d); // 输出 1，没有改变。

温馨提示

本周的新姿势就到这儿了，喜欢的朋友可以关注一下，分享一下，咱们下周见~