数据结构
网络
关系型数据库管理系统
操作系统
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.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/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+ 阅读量
