首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我在javascript中`Object.assign`到一个基本类型时会发生什么?

当在JavaScript中使用Object.assign将一个基本类型赋值给一个对象时,Object.assign会将基本类型转换为一个包装对象,然后将包装对象的属性复制到目标对象中。基本类型在赋值过程中会被自动转换为对应的包装对象,例如字符串会被转换为String对象,数字会被转换为Number对象,布尔值会被转换为Boolean对象。

下面是一个示例代码:

代码语言:txt
复制
let target = {};
let source = "Hello";

Object.assign(target, source);

console.log(target); // 输出 { "0": "H", "1": "e", "2": "l", "3": "l", "4": "o" }

在上述代码中,source是一个字符串基本类型,通过Object.assign方法将其赋值给target对象。由于字符串是一个基本类型,Object.assign会将其转换为一个String对象,然后将String对象的属性复制到target对象中。最终,target对象会包含字符串的每个字符作为属性。

需要注意的是,基本类型在赋值过程中只是临时转换为包装对象,不会改变原始的基本类型值。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

关于深拷贝与浅拷贝问题的个人理解

根本原因 这个问题的根本原因就是深拷贝和浅拷贝其在内存的储存类型不同。 栈与堆 首先要理解一个概念:栈与堆。 关于这个问题,有篇知乎可以让我们很好的理解这两者的关系以及区别: 什么是堆?什么是栈?...JavaScript 数据类型 当我们理解这堆和栈概念后,再复习一下一个很简单的入门概念:JavaScript 数据类型 我们都知道,ECMAScript 标准定义了 7 种数据类型,其中 6 种为基本类型...显然,根据以上的例子,我们可以得出结论: 基本数据类型赋值操作时是 传值 赋值操作时,基本数据类型的赋值是在内存里开辟了一段新的栈内存,然后再把值赋值新开辟的栈内存。...可能这么看起来有点绕,Show the Code: // 基本数据类型的赋值操作:传值。 let x = 6; let y = x; // 新开辟栈内存,再赋值该栈内存。...Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制目标对象。它将返回目标对象。

62360

【前端芝士树】浅拷贝、深拷贝以及Object.assign()的作用、克隆对象、复制数组

【前端芝士树】浅拷贝、深拷贝以及Object.assign()的作用 首先还是得回到Javascript基本数据类型。...基本类型值是指在栈内存保存的简单数据段,复制基本类型值的时候,会开辟出一个新的内存空间,将值复制新的内存空间,举个栗子: var a = 1; var b = a; a = 2; console.log...用类型值是保存在堆内存的对象,变量保存的只是指向该内存的地址,复制引用类型值的时候,其实只复制了指向该内存的地址,举个栗子: var a={b:1} var a2 = a; a2.b = 2; console.log...例如,当我们构建树状数据结构,其中一个节点引用其父级,而父级又引用其子级。...另外,诸如 Map, Set, RegExp, Date, ArrayBuffer 和其他内置类型进行序列化时会丢失。

1.8K20

JS对象那些事儿

JavaScript几乎所有东西都是一个对象,除了六种基本类型数据 - null,undefined,strings,numbers,boolean和symbols。...JavaScript,将对象视为包含元素项的列表,并且列表的每个项(属性或方法)都由内存的键值对存储。 让我们看一个对象的例子。 ?...对象字面量属性值可以是任何数据类型,包括数组文字,函数,嵌套对象字面量或基本数据类型。...它可以清楚地识别出发生什么,所以使用new Object(),你实际上只是输入更多(理论上,如果没有被JavaScript引擎优化)和进行不必要的函数调用。...javascript的上下文中,所有原始数据类型都是通过值方法分配的内存,对于一个对象,可以进行值或引用传递,根据具体操作情况。 ? 什么是浅层和深层复制/克隆对象?

2.3K10

《你不知道的JavaScript(上)之原型对象》读书笔记

2.类型 JavaScript 中一共有六种主要类型:string、boolean、number、null、undefined、object。...null 有时会被当作一种对象类型,但是这其实只是语言本身的一个 bug,即对 null 执行 typeof null 时会返回字符串 "object"。实际上,null 本身是基本类型。...有一种常见的错误说法是“JavaScript 万物皆是对象”,这显然是错误的。实际上,JavaScript 中有许多特殊的对象子类型,我们可以称之为复杂基本类型。...数组也是对象的一种类型,具备一些额外的行为。数组内容的组织方式比一般的对象要 稍微复杂一些。内置对象JavaScript 还有一些对象子类型,通常被称为内置对象。... JavaScript ,它们实际上是一些内置函数。这些内置函数可以当作构造函数 (由 new 产生的函数调用)来使用,从而可以构造一个对应子类型的新对象。

62330

JavaScript 深拷贝性能分析

值传递的场景,函数的形参只是实参的一个副本——a copy——当函数调用完成后,并不改变实参。...但是 JavaScript 这种引用传递的场景,函数的形参和实参指向同一个对象,当参数内部改变形参的时候,函数外面的实参也被改变了。...因此某些情况下,你需要保留原始对象,这时你需要把原始对象的一个拷贝传入函数,以防止函数改变原始对象。...另外,诸如 Map, Set, RegExp, Date, ArrayBuffer 和其他内置类型进行序列化时会丢失。...我的第一次(天真的)尝试,我拿了一个小 JSON 对象,并通过不同的方式克隆对象 1 千次。幸运的是,Mathias Bynens 告诉我,当你添加属性一个对象时,V8有一个缓存。

1.6K130

【JS】676- 1.1w字 | 初中级前端 JavaScript 自测清单 - 2

赋值操作 首先回顾下基本数据类型和引用数据类型基本类型 概念:基本类型值在内存占据固定大小,保存在栈内存(不包含闭包的变量)。...常见包括:Object,Array,Date,Function,RegExp等 1.1 基本数据类型赋值 栈内存的数据发生数据变化的时候,系统会自动为新的变量分配一个新的之值栈内存,两个变量相互独立...「 JavaScript ,原始类型的数据被分配到栈空间中,引用类型的数据会被分配到堆空间中。」 1....当我们想把 this 值绑定一个环境,就可以使用 call / apply / bind 方法实现: var user = { name: 'leo' }; var name = 'pingan'...下面介绍三个类型(hint)转换情况: 1. object to string 对象字符串的转换,当我们对期望一个字符串的对象执行操作时,如 “alert”: // 输出 alert(obj); //

1.1K51

前端面试:浅拷贝和深拷贝的区别是什么_java的浅拷贝和深拷贝

我们面试中经常会被问到浅拷贝和深拷贝的区别,正好群里也有问到这个问题,于是今天就专门写一篇博客来讲解一下哈。 1.浅拷贝 浅拷贝是指,对基本类型的值拷贝,以及对象类型的地址拷贝。...怎么讲,什么基本类型js,我们知道的基本类型有字符串,数字,布尔值。 当我们写这样的代码,就是浅拷贝。...var a = 1; var b = a; //浅拷贝 b = 2; //改变b的值,并不会影响a,因为浅拷贝对基本类型而言就是值拷贝 console.log(a); a还是1,和b没有关系。...这个道理,在对象也一样适用。JavaScript还有对象类型(也叫引用数据类型),对象类型的浅拷贝则只是拷贝了地址。...2.深拷贝 深拷贝是指,除了拷贝基本类型的值,还完全复刻了对象类型一个对象在内存是固定存在的,我们如果要对其进行深拷贝,唯一的办法就是创建一个新的对象,里面的值完全复刻原来的对象。

32630

vue组件引用传值的最佳实践

下述组件传值指引用类型(数组或对象)传值。 准备:单向数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件,但是反过来则不行。...额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。...().toLowerCase() } } 注意在 JavaScript 对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,子组件改变变更这个对象或数组本身将会影响父组件的状态...问题 父子组件间,通过引用类型传值,为什么控制台不会告警(基本类型会告警)?...Object.assign() 或者 JSON.parse(JSON.stringify()) 是子组件传引用值的标准处理方法吗?

1.8K31

JavaScript 数据结构与算法之美 - 栈内存与堆内存 、浅拷贝与深拷贝

堆,一个混沌,杂乱无章,方便存储和开辟内存空间。 栈内存与堆内存 JavaScript 的变量分为基本类型和引用类型。...JavaScript 的 Boolean、Null、Undefined、Number、String、Symbol 都是基本类型。...栈/堆内存空间 当我们要访问堆内存的引用数据类型时 从栈获取该对象的地址引用 再从堆内存取得我们需要的数据 基本类型发生复制 let a = 20; let b = a; b = 30;...基本类型发生复制过程 栈内存的数据发生复制行为时,系统会自动为新的变量分配一个新值,最后这些变量都是 相互独立,互不影响的。...他们两个指向同一个值,也就是地址指针相同,堆内存访问到的具体对象实际上是同一个。 因此改变 b.x 时,a.x 也发生了变化,这就是引用类型的特性。 结合下图理解 ?

63830

再看JavaScript,那些遗漏或易混淆的知识点(1)

对象 对象进行遍历的时候,如果所有的属性都是字符串类型的 let user = { name: "John", surname: "Smith" }; user.age = 25; // 增加一个...Symbol.iterator Symbol.toPrimitive ...等等 对象 — 原始值转换 思考一下这样的情况: 当对象相加 obj1 + obj2,相减 obj1 - obj2,或者使用 alert(obj) 打印时会发生什么...在前面的类型转换,提到了数字,字符串,布尔值的类型转换,但是没有涉及对象的转换规则。 所有的对象布尔上下文(context)均为 true。...下面是三个类型转换的变体,被称为 “hint”, 规范 中有详细介绍(译注:当一个对象被用在需要原始值的上下文中时,例如, alert 或数学运算,对象会被转换为原始值): string 对象字符串的转换...,当我们对期望一个字符串的对象执行操作时 number 对象数字的转换 default 少数情况下发生,当运算符“不确定”期望值的类型时。

68700

【一文秒懂】带你彻底搞懂范式与反范式数据库设计

JavaScript的数据类型 一般我们说到JS的数据类型指的是它的原始(Primitive types)数据类型(共有6种): String Number Boolean Symbol(ES6新增)...此外,JS还有引用数据类型:对象(Object)、数组(Array)、函数(Function)。JS除了基本数据类型以外的都是对象,数组是对象,函数是对象,正则表达式是对象,日期也是对象......引用类型是存放在堆内存的对象,变量其实是保存的栈内存一个指针(保存的是堆内存的引用地址),这个指针指向堆内存。...浅拷贝 当我们想要拷贝一个对象时,如果它的属性是对象或数组时,这时候我们传递的也只是一个地址。...因此子对象访问该属性时,会根据地址回溯父对象指向的堆内存,即父子对象发生了关联,两者的属性值会指向同一内存空间。

47030

再看JavaScript,那些遗漏或易混淆的知识点(1)

对象 对象进行遍历的时候,如果所有的属性都是字符串类型的 let user = { name: "John", surname: "Smith" }; user.age = 25; // 增加一个...Symbol.iterator Symbol.toPrimitive …等等 对象 — 原始值转换 思考一下这样的情况: 当对象相加 obj1 + obj2,相减 obj1 - obj2,或者使用 alert(obj) 打印时会发生什么...在前面的类型转换,提到了数字,字符串,布尔值的类型转换,但是没有涉及对象的转换规则。 所有的对象布尔上下文(context)均为 true。...下面是三个类型转换的变体,被称为 “hint”, 规范 中有详细介绍(译注:当一个对象被用在需要原始值的上下文中时,例如, alert 或数学运算,对象会被转换为原始值): string 对象字符串的转换...,当我们对期望一个字符串的对象执行操作时 number 对象数字的转换 default 少数情况下发生,当运算符“不确定”期望值的类型时。

66421

一年前端面试打怪升级之路

服务器返回资源的时候,头信息添加了 Etag 属性,这个属性是资源生成的唯一标识符,当资源发生改变的时候,这个值也会发生改变。...当我们使用构造函数新建一个对象后,在这个对象的内部将包含一个指针,这个指针指向构造函数的 prototype 属性对应的值, ES5 这个指针被称为对象的原型。... Firefox 和 Chrome ,每个JavaScript对象中都包含一个__proto__(非标准)的属性指向它爹(该对象的原型),可obj.__proto__进行访问。...如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象;但如果属性是引用数据类型,复制的就是内存的地址,如果其中一个对象改变了这个内存的地址,肯定会影响一个对象方法一:object.assignobject.assign...深拷贝的原理和实现浅拷贝只是创建了一个新的对象,复制了原有对象的基本类型的值,而引用数据类型只拷贝了一层属性,再深层的还是无法进行拷贝。

35530

v-model 绑定对象不实时更新

最近参与的一个项目中,前端用到了 vue.js 框架,期间有个功能需要动态的向一个被绑定的对象添加属性。...但是实际应用问题出现了:向对象添加属性后,与对象绑定的组件内容却未发生变化,必须要再次刷新组件,其内容才会变为更改后的内容 起初我以为是属性没有添加成功,因为我的印象 v-model 是双向绑定的...我查看 Devtools 的监控后,发现对应的对象确实添加了指定的属性。...同时对于数组等情况,可查看 余下官方文档 为什么会这样呢? 如官方所说 “由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。” ,但是为什么会这样呢?...当我们使用new Vue(obj),其内部发生了大体如下代码的转换,即,将数据属性转换为了访问器属性 function Vue(obj){ obj.data.keys().forEach((prop

2.3K10

读书笔记-你不知道的JavaScript(上)

什么是作用域 作用域是一套规则,用于确定在何处以及如何查找变量。 编译原理 JavaScript是一门编译语言。传统编译语言的流程,程序中一段源代码执行之前会经历三个步骤,统称为“编译”。...为什么区分 LHS 和 RHS 是一件重要的事情? 非严格模式下,LHS 调用查找不到变量时会创建一个全局变量,RHS 查找不到变量时会抛出 ReferenceError。...self 只是一个可以通过词法作用域和闭包进行引用的标识符,不关心 this 绑定的过程中发生什么。...函数是否某个上下文对象调用(隐式绑定)?如果是的话,this 绑定的是那个上下文对象。 如果都不是的话,使用默认绑定。严格模式下,绑定 undefined,否则绑定全局对象。...它会遍历一个或多个源对象的所有可枚举的自由键并把它们复制目标对象,最后返回目标对象,就像这样: var newObj = Object.assign( {}, myObject ); newObj.a

974100

【译】巧用 JavaScript Mixins

JavaScript 已经成为众人关注的开发语言,JavaScript已经有了相当大的进步--一个真实意义上的自助开发。但是有一种基于 Mixin 的增强模式日常开发很少被使用的。...表面看来,mixins 就像是把目标(mixin)插入源对象的混合层。目标会被插入源对象并且产生一个新的对象返回。 一个更加准确的描述是--一个 mixin 就像一个新建子类对象并返回的工厂。...一个多 mixin 的例子如下所示: alligator = Object.assign(alligator, swim, crawl); 现在我们来看下在 ES6 classes 是怎么使用 mixins...我们使用 mixins 的时候要牢记下面所提到的东西: Object.assign(无论 object 还是 class 实现)只是对于这些 mixin 的属性进行浅拷贝。...使用从不同 mixin 的属性时会存在潜在的命名冲突的问题(多重继承的命名空间问题) 在这些 mixin 属性被拷贝源对象之后,我们基本没有办法去区分出这些属性究竟是从哪里来的。

41760

每日前端夜话(No.0x01)——ECMAScript 2016,2017和2018所有新功能的示例(上)

我们很难及时得知JavaScript(ECMAScript)的最新功能,同时找到相关的示例代码更加困难。...所以会发生什么事情,JS使用'\ u2764 \ uFE0F'来填充两颗心并产生❤️❤️。 对于最后一个,它只使用第一个码点\ u2764产生❤字符。...添加它的主要目的是允许浅层拷贝/克隆对象一个对象,该对象也复制getter和setter函数而不是Object.assign。...(ECMAScript 2017 (ES8) — Object.getOwnPropertyDescriptors) 5.函数参数添加尾随逗号 这是一个次要更新,允许我们最后一个函数参数后面有逗号...(ECMAScript 2017 (ES 8) — Async Await 基本示例) 6.1异步函数本身返回一个Promise。

78840
领券