快捷導(dǎo)航

javaScript合并對象的多種方式及知識擴展

更新時間：2023年02月14日 11:31:14 作者：猿小張

眾所周知JavaScript中有多種方法可以合并對象,下面這篇文章主要給大家介紹了關(guān)于javaScript合并對象的多種方式及知識擴展,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、方式一：Object.assign(obj1, obj2, …)

參數(shù)1：obj1 是目標(biāo)對象
參數(shù)2：obj2 是源對象

注意：對象與對象之間，同名屬性，會被后面對象的屬性值所覆蓋

const obj1 = {
	a: 1,
	b: 2,
}
const obj2 = {
	b: 3,
	c: 4,
}
const result = Object.assign(obj1, obj2)
console.log(result) // {a: 1, b: 3, c: 4}

2、方式二：es6 新增語法，擴展運算符 … 【三點】

{…obj1, …obj2}
注意：對象與對象之間，同名屬性，會被后面對象的屬性值所覆蓋

const obj1 = {
	a: 1,
	b: 2,
}
const obj2 = {
	b: 3,
	c: 4,
}
const result = {...obj1, ...obj2}  // 返回一個新的對象。
console.log(result) // {a: 1, b: 3, c: 4}

// 順帶一提， 數(shù)組之間的合并，也可以使用 擴展運算符 .
// 如： [...arr1, ...arr2]

知識擴展：

擴展運算符 … 【三點】，也可以用于數(shù)組與數(shù)組之間的合并。

不同的是：
數(shù)組之間只會合并，就算是相同的值，也不會覆蓋。（這是不同于對象的地方。）

let arr1 = [1,2,4]
let arr2 = [4,5,6]
let arr3 = [...arr1, ...arr2]
console.log(arr3)  // [1, 2, 4, 4, 5, 6]

最后需要提醒的是，在合并對象時如果鍵值相同的對象屬性類型不同，例如一個為字符串類型，一個為數(shù)值類型，會覆蓋之前的屬性，因此需要根據(jù)項目需求做出相應(yīng)的處理。

此外，如果需要對合并對象的屬性進(jìn)行特殊處理，例如合并對象的屬性值是一個數(shù)組，需要合并成一個新數(shù)組，可以使用 Array.concat() 方法。

const obj1 = { a: [1, 2] };
const obj2 = { a: [3, 4] };
const obj3 = Object.assign({}, obj1, {
  a: obj1.a.concat(obj2.a)
});
console.log(obj3); // { a: [1, 2, 3, 4] }

或者使用擴展運算符

const obj1 = { a: [1, 2] };
const obj2 = { a: [3, 4] };
const obj3 = {...obj1, a: [...obj1.a, ...obj2.a]}
console.log(obj3); // { a: [1, 2, 3, 4] }

此外，如果需要對合并對象的屬性值進(jìn)行進(jìn)一步的處理，如去重、排序等，可以使用 Array.filter()、Array.sort() 等方法。

總結(jié)：

到此這篇關(guān)于javaScript合并對象的多種方式及知識擴展的文章就介紹到這了,更多相關(guān)js合并對象方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javaScript合并對象的多種方式及知識擴展

目錄

1、方式一：Object.assign(obj1, obj2, …)

2、方式二：es6 新增語法，擴展運算符 … 【三點】

知識擴展：

總結(jié)：

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javaScript合并對象的多種方式及知識擴展

目錄

1、方式一：Object.assign(obj1, obj2, …)

2、方式二：es6 新增語法，擴展運算符 … 【三點】

知識擴展：

總結(jié)：

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

2、方式二：es6 新增語法，擴展運算符 … 【三點】