你不知道的js系列(33)-对象复制(代码片段)

Zina Zina     2022-12-24     491

关键词:

JS 初学者最常见的问题之一就是如何复制一个对象。看起来应该有一个内置的 copy() 方法,实际上比想象中的更复杂,我们无法选择一个默认的复制算法
function anotherFunction()/** ... */;
var anotherObject =  c: true ;
var anotherArray = [];
var myObject = 
  a: 2,
  b: anotherObject, // 引用,不是复本!
  c: anotherArray, // 另一个引用
  d: anotherFunction

anotherArray.push(anotherObject, myObject);

如何准确的表示 myObject 的复制呢?

 

对于深复制来说,除了复制 myObject 以外还会复制 anotherObject 和 anotherArray。这时问题来了,anotherArray 引用了 anotherObject 和 myObject,所以又要复制 myObject,这时就会由于循环引用导致死循环。

 

对于 JSON 安全的对象来说(很明显上面的 demo 是不安全的),有一种巧妙的复制方法
var newObj = JSON.parse( JSON.stringify( someObj ) );
这种方法需要保证对象是 JSON 安全的,所以只适用于部分情况。

 

相比深复制,浅复制非常易懂并且问题很少。ES6 定义了 Object.assign(..) 方法来实现浅复制。第一个参数是目标对象,之后可以跟一个或多个源对象。它会遍历一个或多个源对象的所有可枚举的自有键,并把它们复制到目标对象,最后返回目标对象,就像这样:
var newObj = Object.assign(, myObject);
newObj.a; // 2
newObj.b === anotherObject; // true
newObj.c === anotherArray; // true
newObj.d === anotherFunction; // true

Object.assign(..) 就是使用 = 操作符复制,所以对源对象属性对一些特性不会被复制到目标对象

 

你不知道的js系列(39)-对象遍历(代码片段)

for循环可以遍历数组varmyArray=[1,2,3];for(vari=0;i<myArray.length;i++)  console.log(myArray[i])//123ES5增加了数组的辅助迭代器,包括forEach(...)、every(...)、some(...)forEach(...)会遍历数组中的所有值并忽略回调函数的返回值every(...)会一直运行直... 查看详情

你不知道的js系列(29)-对象属性(代码片段)

存储在对象容器内部的是这些属性的名称,它们就像指针(从技术角度来说是引用)一样,指向这些值真正的存储位置。 varmyObject=  a:2myObject.a;//2myObject[‘a‘];//2.语法通常被称为‘属性访问’,[]语法通常被称为&lsqu... 查看详情

你不知道的js系列(30)-对象属性(可计算属性名)(代码片段)

如果你需要通过表达式来计算属性名,[]操作符就派上用场了。ES6中使用[]包裹一个表达式来当作属性名varprefix=‘foo‘;varmyObject=  [prefix+‘bar‘]:‘hello‘,  [prefix+‘baz‘]:‘world‘,myObject[‘foobar‘];//hellomyObject[‘foobaz‘];//world... 查看详情

你不知道的js系列上(45)-隐式混入(代码片段)

varSomething=  cool:function()    this.greeting=‘HelloWorld‘;    this.count=this.count?this.count+1:1;  Something.cool();Something.greeting;//‘HelloWorld‘Something.count;//1varAnother=  cool:func 查看详情

你不知道的js系列(13)-什么是闭包(代码片段)

当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行functionfoo()  vara=2;  functionbar()    console.log(a);    returnbarvarbaz=foo();baz();//2——朋友,这就是闭包的效果在foo... 查看详情

你不知道的js系列(14)-闭包无处不在(代码片段)

上一节的闭包是为了解释如何使用闭包而人为地在结构上进行修饰,在昨天的闭包基础上,我们可以更加灵活的使用闭包functionwait(message)  setTimeout(functiontimer()    console.log(message)  ,1000)wait(‘hello,consure‘);内部函数timer... 查看详情

你不知道的js系列(12)-声明提升(代码片段)

我们直觉上会认为JavaScript代码在执行时是由上到下一行一行执行的。但实际这并不完全正确 a=2;vara;console.log(a);这里可能会认为是undefined,因为vara声明在a=2之后。实际输出了2。 console.log(a);vara=2;鉴于上面的代码可能会是2... 查看详情

《你不知道的js(中卷)》对象(代码片段)

三、对象:一)、语法:对象有两种形式定义:声明(文字)形式:varmyObj=key:value//...;构造形式:varmyObj=newObject();myObj.key=value;在声明形式中可以添加多个键/值对,但是在构造形式中必须逐个添加属性。1、类型:? 对象是JS的基... 查看详情

你不知道的js系列(22)-thisnew绑定(代码片段)

在传统的面向类的语言中,“构造函数“是类中的一些特殊方法,使用new初始化类时会调用类中的构造函数。通常的形式是这样的something=newMyClass(..);然而JavaScript中new的机制实际上和面向类的语言不同。它们只是被new操作... 查看详情

你不知道的js系列(7)-欺骗词法作用域(代码片段)

如果词法作用域完全由写代码期间函数所声明的位置来定义,怎样才能在运行时来“修改”词法作用域呢?有些人喜欢特殊的办法来解决遇到的问题。我们规定词法作用域是代码写在哪里决定的,一旦决定了无法更改,因... 查看详情

你不知道的js系列-引擎怎么查找变量(代码片段)

对代码进行处理的三个角色引擎:从头到尾负责整个JavaScript程序的编译和执行过程编译器:负责语法分析及代码生成等作用域:负责收集并维护所有变量的查询 vara=2;编译器首先会将这段程序分解成词法单元,然后将词法单... 查看详情

你不知道的js系列(19)-this调用位置(代码片段)

我们排除了一些对于this对错误理解并且明白了每个函数的this是在调用时被绑定的,完全取决于函数的调用位置。寻找调用位置就是寻找“函数被调用的位置”,但是做起来并没有这么简单,因为某些编程模式可能会隐藏... 查看详情

你不知道的js系列(5)-词法作用域(代码片段)

作用域分为两种,一种是词法作用域,一种是动态作用域,我们先看第一种,词法作用域 词法作用域就是定义在词法阶段的作用域(编译器的第一个工作阶段叫做词法化,词法化的过程会对源代码中的字符进行检查)。换句... 查看详情

你不知道的js系列(23)-this绑定优先级(代码片段)

我们首先来看下隐式绑定和显示绑定哪个优先级更高functionfoo()  console.log(this.a)varobj1=  a:2,  foo:foovarobj2=  a:3,  foo:fooobj1.foo();//2obj2.foo();//3obj1.foo.call(obj2);//3obj2.foo.call(obj1);//2这个例子可以看到,显示绑定优先级比 查看详情

《你不知道的js(中卷)》混合对象“类”(代码片段)

四、混合对象“类”:? 在研究类的具体机制之前,首先介绍面向类的设计模式:实例化(instantiation)、继承(inheritance)和(相对)多态(polymorphism)。一)、类理论:? 面向对象编程强调的是数据和操作数据的行为本质上是... 查看详情

你不知道的js-混合对象-类

1、类是一种设计模式,许多语言提供了对于面向类软件设计的原生语法,js中也有类似的语法,但是和其他语言中的类完全不同。2、类意味着复制3、js并不会像类那样自动创建对象的副本。4、在继承或者实例化时,js的对象机... 查看详情

你不知道的sring(系列三)(代码片段)

AbstractStringBuilderStringBuffer和StringBuilder都继承了AbstractStringBuilder,很多方法都是直接super的父类AbstractStringBuilder的方法,所以我们分析下AbstractStringBuilder的源码.1.成员变量AbstractStringBuilder和String一样,在其内部都是以字符数组的形... 查看详情

《你不知道的js》——this全面解析(代码片段)

默认绑定//全局对象用于默认绑定functionfoo()console.log(this.a)vara=2;foo();//2//严格模式下,不能将全局对象用于默认绑定functionfoo()‘usestrict‘;console.log(this.a)vara=2;foo();//TypeError:thisisundefined//在严格模式下调用foo()则不影响默认绑定func 查看详情