object.assign

本文目录一览：

• 1、object.assign和直接赋值的区别
• 2、object.assign()的用法
• 3、移动端树形组件的实现
• 4、深拷贝与浅拷贝的实现(一)

object.assign和直接赋值的区别

Object.is与===比较 === NaN和NaN不等，-0与+0相等，但是Object.is就认为NaN和NaN是相等，而-0和+0是不相等的。 所以总的来说这两个的相似程度比== 运算符更相近。

Object.assign方法拷贝的属性是有限制的，只会拷贝源对象自身的并且可枚举的属性到目标对象，继承的和不可枚举的属性不会拷贝。

说明：赋值操作是在两个已经存在的对象间进行的，而初始化是要创建一个新的对象，并且其初值来源于另一个已存在的对象。编译器会区别这两种情况，赋值的时候调用重载的赋值运算符，初始化的时候调用拷贝构造函数。

object.assign()的用法

object.assign()：用于将源对象（source）中可枚举的属性复制到目标属性（target）中，并返回目标对象。

Object.assign() 在MDN上介绍Object.assign()：”Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Object.keys()返回一个 名称（键）的数组 Object.values()返回可枚举属性值得数组 Object.setPrototypeOf(obj， prototype) 为对象obj设置新的原型对象。

移动端树形组件的实现

项目原型：此树形结构分为三级：根节点，一级节点，二级节点，每个节点都可以选中或取消选中，父级节点选中，下级的所有节点也可全部选中。

其次将菜单数组组装成一个二维数组，以待循环树选择组件作展示数据使用，循环树选择组件，实现树选择菜单功能。读取某条用户信息的菜单权限，将返回字符串菜单编码处理成与菜单数据相同的二维数组。

首先进行异步加载。其次进入手风琴模式。然后保存已加载的选中的节点keys，未加载的子节点不保存，页面初始化时设置选中的keys。最后匹配时根据节点的绝对路径进行匹配即可。

可以使用Vue的指令和组件来实现tree高亮切换图标。例如，可以使用组件来创建树形结构，并使用组件来切换图标。还可以使用CSS动画效果来增强用户体验。

这个功能需求难度不大。实现步骤：通过按钮触发对象文件接口 动作是上传文件夹，并将下拉的上传的文件.结果(对象数组) 赋值到前台的对象数组上。页面下加树形容器 数据来源绑定对象数组。

我这边直接用querySelector获取一个dom， 传入{ $el： dom }也能用。再然后就是找这个dom，发现当树某一节点被点击时，其class会多一个is-current，那么就可以这样写：ps： 只针对单选做的，多选还需按照情况改。

深拷贝与浅拷贝的实现(一)

1、主要看下关于深拷贝的部分，取第一个参数，如果是boolean类型的，就赋值给deep，下面如果deep为true（也就是进行深拷贝），就递归调用extend()，这样就将对象的所有属性都添加到了target中实现了深拷贝。

2、差异： 其区别在于深拷贝是对原数据进行递归复制，并存到一个新地址，从而使新老数据互不影响。 而浅拷贝只是对原数据的地址进行拷贝，从而会使新老数据相互影响。

3、但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

4、背景介绍 javascript分原始类型与引用类型。Array是引用类型，直接用“=”号赋值的话，只是把源数组的地址(或叫指针)赋值给目的数组，并没有实现数组的数据的拷贝。这种方式的实现属于浅拷贝。

5、而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。

6、可以看到在拷贝构造函数中为成员变量申请了新的内存空间，这就使得两个对象的成员变量不指向同一个内存空间，除非你的确需要这样做，用于实现一些其他的用途。