JavaScript中Object.assign() 的使用方法

一、JavaScript中Object.assign() 的使用方法

JavaScript中Object.assign()的使用方法及注意事项

JavaScript的Object.assign()函数是一个强大的工具，用于将一个或多个源对象的可枚举属性合并到目标对象。它的主要特性包括:

1.属性复制：只复制源对象自身的属性，不包含原型链上的方法，如在p1和p2对象例子中，sayHello方法由于在原型链上，不会被复制到p2对象。

2.同名属性覆盖：按照源对象顺序，后定义的属性会覆盖之前的，如obj3的b属性覆盖了obj1的值。

3.参数限制：目标对象必须是可转化对象，如undefined或null会引发TypeError。为避免此问题，可设置默认值或使用逻辑运算符处理。

4.原始值处理：非对象源会忽略，但字符串会转化为对象数组属性，如字符变为单独属性复制到目标对象。

5.深浅拷贝：Object.assign进行浅拷贝，这意味着源对象和目标对象共享引用，修改一个会同步影响另一个。若需深拷贝，需采用其他方法如JSON.parse或递归遍历。

了解这些特性有助于更有效地使用Object.assign()，在实际开发中避免潜在问题。

二、JavaScript合并对象

1、JavaScript合并对象，常用的两种方法是使用Object.assign()和三点操作符。

2、Object.assign()方法可以合并两个或多个对象，例如：

3、这方法合并对象时，如果存在同名属性，则后边的对象属性值会覆盖前面的属性值。

4、三点操作符作为一种语法糖，也可以用于合并对象：

5、这种方法提供了一种简洁的方式来合并对象。

6、需特别说明的是，无论使用Object.assign()，还是使用三点运算符，只推荐在源对象不包括嵌套属性，且属性值为原始值的情况下使用。此时新对象对于源对象是独立的，不存在深浅拷贝的问题。然而，如果源对象包括嵌套属性，或者属性值存在非原始值（嵌套属性本身即意味着非原始值），那么新对象的某些属性可能还会引用着源对象。在这个场景中，可能存在一些“语法陷阱”。建议在合并前先将对象打平，以避免这类问题。

三、有哪些经典的 Web 前端或者 JavaScript 面试笔试题

一、不定项选择题（每题3分，共30分）

1.声明一个对象，给它加上name属性和show方法显示其name值，以下代码中正确的是（ D）

A. var obj= [name:"zhangsan",show:function(){alert(name);}];

B. var obj={name:”zhangsan”,show:”alert(this.name)”};

C. var obj={name:”zhangsan”,show:function(){alert(name);}};

D. var obj={name:”zhangsan”,show:function(){alert(this.name);}};

2.以下关于Array数组对象的说法不正确的是（ CD）

A.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序函数的参数

B. reverse用于对数组数据的倒序排列

C.向数组的最后位置加一个新元素，可以用pop方法

D. unshift方法用于向数组删除第一个元素

3.要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（ A）

A. window.status=”已经选中该文本框”

B. document.status=”已经选中该文本框”

C. window.screen=”已经选中该文本框”

D. document.screen=”已经选中该文本框”

4.点击页面的按钮，使之打开一个新窗口，加载一个网页，以下JavaScript代码中可行的是（ AD）

A.<input type=”button” value=”new”

onclick=”open(‘new.html’,‘_blank’)”/>

B.<input type=”button” value=”new”

onclick=”window.location=’new.html’;”/>

C.<input type=”button” value=”new”

onclick=”location.assign(‘new.html’);”/>

D.<form target=”_blank”action=”new.html”>

<inputtype=”submit” value=”new”/>