資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究Lodash 庫中 .extend() / .assign() 和 .merge() 的區別。
Lodash 庫是 JavaScript 庫，它基於 ‘_.js’。它可以用於處理陣列、字串、物件、數字等。
assign() 方法
此函式用於將原始物件複製到一個新物件中。它與擴充套件運算子的區別在於，當存在巢狀物件時，如果使用 assign() 複製物件，則巢狀物件不會發生變化，而物件的其它變數可以更改。
assign() 函式有兩個引數。第一個引數是花括號 {}，用於確保新物件不會修改原始物件。第二個引數是要複製到新物件中的原始物件的名稱。
語法
上述方法的語法如下：
Object.assign({},originalObjectName)
示例
現在，讓我們來看一個 JavaScript 中 assign() 方法的示例：
var employee = { emp_name: "Abdul Rawoof", company: "Tutorials Point", salary: 18000, job: "Software Engineer-Intern" } console.log("The original object employee is:", employee) var cpyEmployee = Object.assign({},employee) console.log("The copied object cpyEmployee is:",cpyEmployee); cpyEmployee.emp_name="Jason" cpyEmployee.job="Content writer-Intern" console.log("The copied object with some different name and role is:",cpyEmployee)
_.extend() 方法
_.extend() 和 assign() 方法類似，但 _.extend() 會迭代其自身和繼承的源屬性。
語法
_.extend() 方法的語法如下：
.extend(obj,source)
extend() 方法將接收兩個引數。第一個引數是目標物件，第二個引數是源物件。
extend 方法將返回該物件。
示例
以下是 JavaScript 中 _.extend() 方法的一個示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lodash - Extend Method</title> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <div id="l"></div> <script> var obj1 = { content_writing: 18000, UI_editor : 20000, marketing: 15000 }; var obj2 = { UI_editor: 20000, tech_support: 10000 }; $.extend( obj1, obj2 ); $( "#l" ).append( JSON.stringify( obj1 ) ); </script> </body> </html>
_.merge() 方法
_.merge() 方法用於合併兩個物件以建立一個父對映物件。它接受兩個引數。第一個引數是目標物件，第二個引數是源物件。以下是此方法的語法：
_.merge(obj, source)
示例
此示例演示了 Lodash 在 JavaScript 中 _.merge() 方法的使用。
<!DOCTYPE html> <html> <head> <title>Lodash - Extend Method</title> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <div id="l"></div> <script> let obj1 = { 'apple': [{ 'ball': 20 }, { 'doll': 40 }] }; let obj2 = { 'apple': [{ 'cat': 30 }, { 'egg': 50 }] }; $.merge(obj1, obj2); $( "#l" ).append(JSON.stringify( obj1 )); </script> </body> </html>
_.extend()、assign() 和 _.merge() 之間的區別
JavaScript 中 _.extend()、assign() 和 _.merge() 方法的主要區別在於：
assign()/_.extend() 獲取源中的每個屬性，將其值按原樣複製到目標中。如果屬性值本身是物件，則不會對其屬性進行遞迴遍歷。這也被稱為淺複製/克隆。整個物件將從源中獲取並設定到目標中。
而 _.merge() 方法獲取源中的每個屬性，檢查該屬性是否為物件本身。如果是，則遞歸向下並嘗試將子物件屬性從源對映到目標。
示例 1
在以下示例中，我們嘗試使用 _.extend() 和 _.merge() 方法合併兩個物件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lodash - Extend Method</title> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <div id="l"></div> <script> let destination = { a: { b: 1, c: 2}, }; let source = { a: { d: 2, c: 3}, }; //Using the merge method $.merge(destination, source); $( "#l" ).append("Result of merge: "); $( "#l" ).append(JSON.stringify( destination )); $( "#l" ).append("<br>"); //Using the extend method $( "#l" ).append("Result of extend: "); $.extend(destination, source); $( "#l" ).append( JSON.stringify( destination ) ); </script> </body> </html>
執行以上程式碼後，它將列印使用 merge() 和 extend() 方法合併兩個物件的結果。
示例 2
以下是另一個演示這兩種方法之間差異的示例：
let _ = require('lodash'); let destination = { a: { b: 1, c: 2 }, }; let source = { a: { d: 2, c: 3 }, }; console.log(_.merge(destination, source)); console.log(_.extend(destination, source));
輸出
這將給出以下輸出：
{ a: 1, b: 4, c: 5 }
{ a: 1, b: 4, c: 5 }
1K+ 閱讀量
