Object.assign() 详解

今天，我们来看看 Object.assign() 方法
 
如果你已经知道此方法，可以看看下面的题，想想 v5 的输出结果

 
如果你不知道这个方法，可以跳过，先看看下面关于 Object.assign() 方法的介绍
 

const v1 = 123;
const v2 = '123';
const v3 = true;
const v4 = function test() {};
const v5 = Object.assign({},v1,v2,v3,v4);
console.log(v5);

 
输出结果为：

你做对了嘛 ？下面我们就来看看Object.assign方法吧
 
 

01 方法介绍

 
 
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

语法：

Object.assign(target, …sources)
 

参数：

target：目标对象

sources：源对象
 

返回值：

目标对象

 

注：
 
传入的target对象与方法的返回值是同一个对象

是将可枚举属性的值分配到目标对象

 
 

02 何为可枚举属性

 
 
什么是对象的可枚举属性？

能够使用for…in , 输出的属性名，即为可枚举的属性名。

 
 
代码如下：

for (var key in obj){ 
 //key 即为可枚举的属性名

}

 
 

03 题目解析

 
 
再来看看题目：

const v1 = 123;
const v2 = '123';
const v3 = true;
const v4 = function test() {};
const v5 = Object.assign({},v1,v2,v3,v4);
console.log(v5);

 
分析：题目即是将v1,v2,v3,v4对象的可枚举属性分配到v5上

 
下面，我们来看看v1,v2,v3,v4的可枚举属性有哪些？
 

运行下面的代码

 for(var key in v1){
      console.log(key,v1[key]);
  }
  for(var key in v2){
      console.log(key,v2[key]);
  }
  for(var key in v3){
      console.log(key,v3[key]);
  }
  for(var key in v4){
      console.log(key,v4[key]);
  }

 
输出结果：
 

可以看出，v1,v2,v3,v4四个对象，只有0,1,2三个可枚举属性；

 

其实，就是 v2 = ‘123’ 对应的可枚举属性，其它三个对象都没有可枚举的属性
 

所以：最终v5的属性有 0, 1, 2；

 
如下图：

今日面试题：

Object.assign 是浅拷贝还是深拷贝？
查看答案
 

写文章不容易，请给一个 赞、在看 吧； 你的支持，是我写下去的动力

 

欢迎添加下面的 “公众号” ，可以第一时间获到文章推送 @_@