打印对象的"精心骗局"-js中object对象的输出出现很诡异的错误

  • 时间:2019-08-22 03:04 作者:全栈弄潮儿 来源:全栈弄潮儿 阅读:655
  • 扫一扫,手机访问
摘要:console.log()打印诡异骗局let arr = [{id:1, name:'张飞'}, {id:2, name:'赵云'}, {id:3, name:'刘备'}];console.log(arr)开展前image.png开展后image.png提前打印,但是后续改变属性值,打印 [{id:

console.log()打印诡异骗局

let arr = [{id:1, name:'张飞'}, {id:2, name:'赵云'}, {id:3, name:'刘备'}];console.log(arr)

开展前

image.png

开展后

image.png

提前打印,但是后续改变属性值,打印 [{id: 1, name: "张飞"}, {id: 2, name: "赵云"}, {id: 3, name: "刘备"}],但是开展后就变成 [{id: 1, name: "妲己"}, {id: 2, name: "赵云"}, {id: 3, name: "刘备"}],有人说这还有开展?是的每一个对象左边都有一个顶点朝右的灰色等边三角形,点击顶点朝下。

起因分析

Array、Object都是引用类型,是对象引用而不是值引用。

如何打印及时值

JSON.stringify转为json字符串

let arr = [{id:1, name:'张飞'}, {id:2, name:'赵云'}, {id:3, name:'刘备'}];

JSON.stringify(arr);

image.png

经典前台面试题每日升级,欢迎参加探讨,地址: daily-interview/fe-interview。


更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目,请关注微信公众号——全栈弄潮儿

image
  • 全部评论(0)
最新发布的资讯信息
【系统环境|】通义万相wan2.2本地部署要求有哪些?通义万相wan2.2怎么本地部署(2025-10-21 04:05)
【系统环境|】Vue3 页面卡顿严重?7 个实战技巧让渲染速度飙升 80%!(2025-10-21 04:01)
【系统环境|】前端小白 2 周 Vue3+TS+NaiveUI 学习计划大纲(2025-10-21 04:00)
【系统环境|】Vue3 入门指南: 深入理解 Setup 函数(2025-10-21 03:59)
【系统环境|】2024前端面试真题之—VUE篇(2025-10-21 03:58)
【系统环境|】搞懂Vue3的toRefs与toRef:响应式对象的解构(2025-10-21 03:55)
【系统环境|】三.不定词副词的用法(2025-10-21 03:53)
【系统环境|】歌曲中汉字的信息量真的是吊打英语(2025-10-21 03:52)
【系统环境|】跟着《肖申克的救赎》学英语(002)--安迪法庭受审(2025-10-21 03:52)
【系统环境|】词根词缀-前缀1-27: de-(2025-10-21 03:50)
手机二维码手机访问领取大礼包
返回顶部