javascript 引用类型console.log调试技巧

最新推荐文章于 2022-05-19 17:54:57 发布

原创最新推荐文章于 2022-05-19 17:54:57 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript面向对象编程实践专栏收录该内容

0 篇文章

订阅专栏

本文通过两个示例对比了JavaScript中对象赋值时浅拷贝与深拷贝的区别，展示了当对象属性发生变化时，浅拷贝如何导致原始对象与副本对象之间的属性同步变化，并介绍了使用JSON.parse和JSON.stringify实现深拷贝的方法。

存在以下两种情况：

example 1:
let obj = {a:1};
console.log(obj); //{a:2}
obj['a'] = 2;

example 2:
let num = 1;
console.log(num); //1
num = 2;

解决方案 1：

let obj = {a:1};
console.log(JSON.parse(JSON.stringify(obj))); //{a:1}
obj['a'] = 2;

总结：引用类型浅拷贝是共享一个内存地址，通过深拷贝解决。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dly667

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript调试之console.log调试的一个小技巧分享

10-19

日常开发中经常会需要console来查看当前对象的值。当然用debugger会更全面的查看，但是...下面这篇文章主要给大家分享了关于JavaScript调试之console.log调试的一个小技巧，需要的朋友可以参考借鉴，下面来一起看看吧。

JavaScript调试技巧之console.log()详解

11-30

一、什么是console.log()？除了一些很老版本的浏览器，现今大多数浏览器都自带调试功能；即使没有调试功能，也可以通过安装插件来进行补充。比如，老版本的Firefox没有自带调试工具，在这种情况下可以通过安装...

参与评论您还未登录，请先登录后发表或查看评论

console.log-对象引用

weixin_30340353的博客

11-19

206

现象现象1 利用简单的例子描述下打印出的结果为很明显可以看出，对象在打印之后改变，但最终结果还是改变后的值，因此console.log保存的事对象的引用。现象2 但是，在debugger的过程中我发现，如果在对象改变之前去控制台展开对象看，结果就不太一样了发现这时候即使后面执行了a.b.c = 2，控制台的输出也没有变化了现象3 而如果第一次展开时不全部展开，像这样 ...

console.log()打印引用类型，出现神奇事件

luoteen的博客

06-04

793

举个栗子???????????????????? var obj = { age: 1 } console.log(obj) obj.age = 2 按正常的是输出为 { age: 1 } 但：外层为1，展开却为2。 consloe.log()一开始，在没有展开的时候是一个快照，在展开后，因为是引用类型，会再去根据指针找到对应地址，也就是最新的值。 ...

关于console.log() 打印得引用类型得数据得相关问题

weixin_30706691的博客

06-09

436

console.log()打印出来得是这个引用类型最终得结果，而不是在打印得时候当前得值 var json = {a:1,b:2} console.log(json) json.a = 3; 如上，打印得将是 {a:3,b:2},而不是 {a:1,b:2} 解决方法，要么打断点，要么将需要输出得内容变成值类型输出转载于:https://www.cnblogs.com/...

js基础-引用类型-console对象 ★☆

front_end_fan

09-21

555

console对象console对象是JavaScript的原生对象，可以将信息输出在控制台。1、打开控制台不同系统平台打开浏览器的控制台可能有些不一样，下面以chrome浏览器为例，可以使用下列方式打开：按F12鼠标右键里选择“检查”在右上角的菜单中点击“更多工具/开发者工具”打开控制台以后，你可以看到下列不同的面板：Elements：查看网页的HTML源码和CSS代码。 Resources：查

console.log 打印引用类型变量问题

小扣柴扉久

06-10

2216

console.log 打印引用类型变量问题一、现象 1. 在浏览器环境中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init

javascript代码调试之console.log 用法图文详解

11-23

JavaScript是Web开发中不可或缺的一部分，而在JavaScript的调试过程中，`console.log`是一个极其重要的工具，它可以帮助开发者在浏览器控制台输出信息，以便于理解和检查代码的执行情况。本文将详细介绍`console.log...

JS中捕获console.log()输出的方法

10-24

在JavaScript开发中，console.log()是一个常用的调试工具，它能够帮助开发者在控制台输出日志信息。然而，在某些特殊场景下，我们可能需要捕获这些输出信息，比如为了进行自动化测试、记录日志或是监控程序执行情况...

使用conlose.log()打印引用数据类型（对象）时遇到的现象

qq_42490671的博客

05-19

711

一、定义名为obj的对象，把对象赋值给newObj，在更改obj对象内容之前打印newObj let obj = {a:1,b:2} let newObj = obj console.log(newObj,'newObj') obj.c = 3 结果：被赋值的newObj跟着改变二、设置setTimeout查看 let obj = {a:1,b:2} let newObj = obj console.log(newObj,'newObj') setTimeout(function(){.

Javascript中var num = 0.7 * 180 console.log(num)

想去旅行的静静的博客

08-02

637

首先要说的是，0.1+0.2不等于0.3 JS中采用的IEEE 754的双精度标准，计算机内部存储数据的编码的时候，0.1在计算机内部根本就不是精确的0.1，而是一个有舍入误差的0.1。当代码被编译或解释后，0.1已经被四舍五入成一个与之很接近的计算机内部数字，以至于计算还没开始，一个很小的舍入错误就已经产生了。这也就是 0.1 + 0.2 不等于0.3 的原因。这个属于运算中精度缺失问题，通常这个时候，我做的时候会把数字放大100倍乃至更多，计算完整后再除以100，再根据规定进行四舍五入等。..

Chrome中console输出引用类型的特殊点

LoveLiPing1314的博客

03-14

202

var b = {a:1} var a = [b, 2, 3] console.log(a) b.a = 2 上面代码的实际输出是在调试时输出的结果是第一幅图片中的实际输出在console中显示全部变量的值（处于不折叠状态）的输出，这种情况只是在引用类型的时候出现。不知道这是一个chrome的特性还是BUG。转载于:https://www.cnblogs.com/zzx1...

console.log详解

qq_29007709的博客

01-10

3万+

console.log方法用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。 console.log('Hello World') // Hello World console.log('a', 'b', 'c') // a b c console.log方法会自动在每次输出的结尾，添加换行符。 console.log(1); console.log(2); conso...

console.log()详解

weixin_43730646的博客

07-20

2209

https://jingyan.baidu.com/article/6dad507505f714a123e36e8a.html

你所不知道的console.log()（console.log详解）

最新发布

08-22

在JavaScript开发中，`console.log()` 是一个非常常用的调试工具，用于将信息输出到浏览器的控制台。虽然它简单易用，但合理使用 `console.log()` 可以提高调试效率，同时避免潜在的问题。以下是一些使用 `console.log()` 进行调试的技巧和注意事项。 ### 使用 `console.log()` 输出不同类型的数据 `console.log()` 可以输出各种类型的数据，包括基本类型和引用类型。对于基本类型（如 `number`、`string`、`boolean`、`null`、`undefined`），输出是直接且可信的。例如： ```javascript console.log(42); // 输出数字 console.log("Hello, world!"); // 输出字符串 console.log(true); // 输出布尔值 ``` 对于引用类型（如对象和数组），输出的是对它们的引用，而不是实际值的快照。这意味着如果对象在稍后被修改，控制台中显示的值可能会发生变化。例如： ```javascript let obj = { name: "Alice" }; console.log(obj); // 输出对象的引用 obj.name = "Bob"; ``` 在这种情况下，控制台中显示的 `obj` 可能会显示为 `{ name: "Bob" }`，而不是 `console.log()` 调用时的状态。[^2] ### 使用其他 `console` 方法进行更精确的调试除了 `console.log()`，还有其他一些方法可以帮助区分不同类型的输出： - `console.info()` 用于输出信息性消息。 - `console.warn()` 用于输出警告信息。 - `console.error()` 用于输出错误信息。 - `console.debug()` 用于输出调试信息（在某些浏览器中与 `console.log()` 相同）。这些方法的使用方式与 `console.log()` 类似，但它们可以帮助开发者更容易地区分不同类型的输出。例如： ```javascript console.info("This is an info message"); console.warn("This is a warning"); console.error("This is an error"); console.debug("This is a debug message"); ``` ### 使用 `console.table()` 格式化输出当需要以更清晰的方式查看数组或对象的内容时，可以使用 `console.table()`。它会以表格的形式展示数据，便于阅读。例如： ```javascript let users = [ { id: 1, name: "Alice" }, { id: 2, name: "Bob" }, { id: 3, name: "Charlie" } ]; console.table(users); ``` ### 使用 `console.group()` 和 `console.groupEnd()` 组织输出如果希望将相关的日志信息组织在一起，可以使用 `console.group()` 和 `console.groupEnd()` 来创建一个日志组。例如： ```javascript console.group("User Data"); console.log("User 1: Alice"); console.log("User 2: Bob"); console.groupEnd(); ``` ### 避免在生产代码中使用过多的 `console.log()` 虽然 `console.log()` 是一个有用的调试工具，但在生产环境中，过多的日志输出可能会影响性能，并且可能暴露敏感信息。因此，建议在代码部署到生产环境之前移除或禁用不必要的 `console.log()` 调用。一种常见的做法是通过一个简单的封装函数来控制日志输出，例如： ```javascript const debug = false; function log(message) { if (debug) { console.log(message); } } log("This is a debug message"); ``` 通过这种方式，可以在部署时将 `debug` 设置为 `false`，从而禁用所有调试日志输出。 ###

javascript 引用类型console.log调试 技巧

javascript 引用类型console.log调试技巧