前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一周 “新姿势”

一周 “新姿势”

作者头像
grain先森
发布2019-03-28 18:06:53
3350
发布2019-03-28 18:06:53
举报
文章被收录于专栏:grain先森grain先森

前言

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

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的属性)拷贝引用。

拷贝原对象的引用

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

12345

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)等。例如:

12345

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)等。例如:

12345

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.08.20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 拷贝原对象的引用
  • 源对象拷贝实例,其属性对象拷贝引用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档