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)
示例
此示例演示了 JavaScript 中 Lodash 的 _.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 }
