文/北妈

阅读本文需要 2.3分钟

很久没发技术文,今天北妈在新开一个技术系列:“别自以为是,1分钟走出JS常见误区“,里面我会每期挑选几个常见基础属性,讲一讲里面最容易被人忽略和认知错误的误区。

帮助大家更好的掌握基础,这样在面试和实际项目中可以避免很多低级错误和节省时间,欢迎拍砖甚至投稿。

今天说一下关于ES6 就引入的最常用的关于操作对象的新属性:

Object.assign()、const

1、大家知道 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

MDN官方文档的例子就已经说明一切

const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const returnedTarget = Object.assign(target, source);console.log(target);// expected output: Object { a: 1, b: 4, c: 5 }console.log(returnedTarget);// expected output: Object { a: 1, b: 4, c: 5 }

这个属性在ES6才引入,是一个不错的操作js对象格式的新属性。里面还涉及到深拷贝和浅拷贝,替换对象等众多概念。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

这个属性在ES6才引入,是一个不错的操作js对象格式的新属性。里面还涉及到深拷贝和浅拷贝,替换对象等众多概念。

在ES5里面要实现和Object.assign 相关的功能要用到  Object.defineProperty很复杂的去实现。

而Object.assign 最常用的功能是将新的对象或者json属性 复制和追加到老的对象,然后生成一个新的整合对象。

项目里,很常用的就是请求传参时,追加各种筛选条件了,这个大家应该深有体会。

重要描述:如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

意思是如果原对象利用有j= {a: 1} ,新对象也有{a:2}那么 就会直接覆盖,相当于是 j.a =2.这个在用的过程中是没什么疑问的,正常覆盖就好。

但一定要注意这个误区:比如:json1 = {a:1, b:null } ,那么 直接

Object.assign(json1, {a:2,b:3} );  会发生什么?

大部分人不看文档 会说:直接覆盖被 最后是{a:2,b:3},但结果事与愿违,因为如果是NULL 这个罪魁祸首,assign 属性是不会生效的,这个value 不会生效,因为官方有一句:

注意,Object.assign 不会跳过那些值为 null 或 undefined 的源对象。

所以一定要注意,检查后端返给你的json数据里,有没有属性值为 null 或者 undefined,这个相当重要,不然会引来很多麻烦和bug。

这也是为啥一直强调,null 和undefined 是绝对禁止出现在正常的数据格式中的。这个大家一定要注意,因为前一段我们后端居然就返回了null ,,无语!!!

2、大家知道 const 是类型声明,大家再熟悉不过,也是es6才有的新属性,之前都是万恶的var,随意改变作用于和值。有个const,相当于给变量加了一个锁,但是

const声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的,只是变量标识符不能重新分配。例如,在引用内容是对象的情况下,这意味着可以改变对象的内容(例如,其参数)。

比如:

const  num = 1000;

num = 2000;
//  会报错 ,因为在同一作用于,num的值已经固定,不可改变。

但是:

const  num = {a:1000};

num.a = 2000 ;
//  这个不会报错 ,因为在其属性值是可以被改变的,也就是文档里说的改变对象内容,但你不能改变他在内存中的表示和位置。

-----

这个其实看似很简单,有很多人并不理解,以为看到const 就说明这个变量被锁定了,该改变对象也不行,直接let 就行了,其实不对的,const照样可以被改变,但记住,只是改变他的值。

这些在面试题或者平时开发都会遇到,算是常识的自以为是误区,大家注意,也欢迎大家对平时积累的累死误区,告诉我,我更多的公布出来。

每日金句世界上没有恒久不变的东西,包括爱情和承诺。唯一不变的就是这个世界永远在变

热门阅读

空闲时间不要接私活,要提升自己

月薪5k的国企, 和月薪2万的私企,我选国企...

低学历者生存困难 程序员尤其明显

每天只想听你们说:小北最帅!

长按扫码关注我

一个不一样的帅码农

每天有惊喜

我觉得 「在看」与「转发」

也是对我的认可 

ES6 深拷贝_你别自以为是:ES6误区 之 Object.assign()、const相关推荐

  1. assign深拷贝_经典前端面试题: Object.assign 是浅拷贝还是深拷贝?实现深拷贝的方法有哪些?...

    Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖.后面的源对象的属性将类 ...

  2. ES6之Object.assign()用法,Object.assign()到底是浅拷贝还是深拷贝?

    基本用法 Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). const target = { a: 1 }; const sou ...

  3. ES6深拷贝与浅拷贝

    小感在前 React学习与开发过程要经历一个相当长的准备阶段,此前看阮一峰老师的文章中,他就特别提到这一点.但是,由于React框架或者说是一种优秀的前端架构实在太诱人,所以,掌握这项技术所涉及的技术 ...

  4. ES6 深拷贝_JS基本数据类型和引用数据类型的区别及深浅拷贝

    1.栈(stack)和堆(heap) stack为自动分配的内存空间,它由系统自动释放:而heap则是动态分配的内存,大小也不一定会自动释放 2.数据类型 JS分两种数据类型: 基本数据类型:Numb ...

  5. ES6之object.assign()是深拷贝还是浅拷贝

    ES6之object.assign()是深拷贝还是浅拷贝 1.概念 浅拷贝--只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存. 深拷贝--会另外创造一个一模一样的对象,新对象跟 ...

  6. ES5、ES6深拷贝、浅拷贝

    看这个文章之前,看一下这个作者的文档,讲了一下堆和栈.基本数据和引用数据,比较基础的一些东西:https://www.cnblogs.com/echolun/p/7889848.html 如何区分深拷 ...

  7. 最详细ES6教程_变量的解构赋值

    最详细ES6教程_变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定 ...

  8. es6 迭代器_揭秘ES6迭代器和迭代器

    es6 迭代器 by Tiago Lopes Ferreira 由Tiago Lopes Ferreira 揭秘ES6迭代器和迭代器 (Demystifying ES6 Iterables & ...

  9. es6 数组排序_重读《学习JS数据结构与算法-第三版》- 第3章 数组 二

    定场诗 守法朝朝忧闷,强梁夜夜欢歌:损人利己骑马骡,正值公平挨饿:修桥补路瞎眼,杀人放火儿多:我到西天问我佛,佛说:我也没辙! 前言 读<学习JavaScript数据结构与算法>- 第3章 ...

最新文章

  1. ethercard php_使用Arduino和ENC28J60以太网LAN网络模块发送HTTP POST请求
  2. linux shell awk 单引号分割
  3. 【错误记录】Android Studio 编译报错 ( SDK location not found )
  4. 蓝桥杯java最小公倍数_蓝桥杯算法训练 最大最小公倍数
  5. perl正则表达式-1
  6. 元气骑士没有手柄怎么解锁机器人_机器人怎么解锁(元气骑士机器人)
  7. Maven 系统环境变量配置
  8. C# 将多个图片合并成TIFF文件的两种方法
  9. Spread基本知识(一)
  10. 物理学基石 —— 电
  11. 局部线性嵌入(LLE,Locally Linear Embedding)
  12. 安装软件提示计算机管理员权限,win10安装软件需要管理员权限的处理办法|win10装软件提示error launching installer如何处理?...
  13. bootcamp空间不足_Bootcamp安装WinXP补丁时C盘空间不足怎么办?教程一览
  14. Netflix混沌工程手册Part 1:混沌工程简介
  15. 虚幻4 手持式AR应用 模板认识
  16. 核方法概述----正定核以及核技巧(Gram矩阵推导正定核)
  17. 如何关闭笔记本自带键盘
  18. FinalShell使用教程:SSH链接Linux服务器
  19. 看完这篇人工智能的文章,能帮你超越90%的人
  20. Java语言 CRC-16/MODBUS..16+x15+x2+1校验码生成

热门文章

  1. ThreadLocal内存溢出代码演示和原因分析!
  2. 万字详解Lambda、Stream和日期
  3. C# Winform 窗体美化(四、镂空窗体)
  4. Android下 布局加边框 指定背景色 半透明
  5. pyqt5中的lineEdit中只输入数字和字母
  6. 计算机中隐藏的文件找不到了怎么办,隐藏文件夹找不到了怎么办【图解】
  7. 宽带和流量是分开的吗_为什么现在的手机套餐与宽带越来越贵,只是因为建设5G吗?...
  8. java怎么让1的数据2可以拥有,【如何让代码变“高级”(二)】-这样操作值得一波666(Java Stream)(这么有趣)...
  9. elementui分页组件按钮样式修改_Vue使用Elementui修改默认最快方法!
  10. oracle获取登录名,oracle如何获取当前登录的用户名