专栏首页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,没有改变。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • console 让 js 调试更简单

    Web开发最常用的就是 console.log ,虽然 console.log 占有一席之地,但很多人并没有意识到 console 本身除了基本 log 方法之...

    grain先森
  • 面试官想要的 JS 基本类型

    作者曾经也是这样回答的,并且一直觉得没有什么问题。那么面试官问你 JS 数据类型时,他想知道什么呢?接着往下看???

    grain先森
  • 前端-Generator:JS执行权的真实操作者

    ES6提供了一种新型的异步编程解决方案: Generator函数(以下简称G函数)。它不是使用JS现有能力按照一定标准制定出来的东西( Promise是如此出生...

    grain先森
  • 9.python 浅拷贝和深拷贝

    何谓浅拷贝/深拷贝,说得直白一点,其实就是数据拷贝,两者到底有什么区别呢?听着就挺迷糊的,python开发项目的时候说不定你就能碰上这样的坑~~

    猿说编程[Python和C]
  • HR必备的88个关键知识及管理工具

    用户1756920
  • Convex set and convex function

    给定一个集合\(C \subseteq {R^n}\),满足下列条件则称为凸集 \(x,y \in C \Rightarrow tx + (1 - t)y \i...

    Natalia_ljq
  • LeetCode 1006. 笨阶乘

    通常,正整数 n 的阶乘是所有小于或等于 n 的正整数的乘积。例如,factorial(10) = 10 * 9 * 8 * 7 * 6 * 5 * 4 * 3...

    Michael阿明
  • javascript函数

    JavaScript中的函数可以分为两类:有名函数与匿名函数。而定义函数的方式有两种:函数声明与函数表达式。

    踏浪
  • js中的函数

    console.log(fn instanceof Object) // 是Object类型的实例

    李才哥
  • js中的函数

    console.log(fn instanceof Object) // 是Object类型的实例

    李才哥

扫码关注云+社区

领取腾讯云代金券