$.extend(true,{},a,b)解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 原文:$.extend(true,{},a,b)解析 版权声明: https://blog.csdn.net/bsfz_2018/article/details/81738437 什么是$.extend jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
原文: $.extend(true,{},a,b)解析

版权声明: https://blog.csdn.net/bsfz_2018/article/details/81738437

什么是$.extend

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
$.extend(true,{},a,b)
true:是否深度拷贝,不加为false,浅拷贝,加了深拷贝
{}:将合并结果保存到新对象,这样原对象将不会发生改变
a:第一个合并的对象
b:第二个合并的对象

浅拷贝

var defaults = {name:"张三",age:18,sex:"true",scores:{chinese:70,science:100}};
var options = {name:"李四",age:20,scores:{chinese:98,math:99,english:100}};
var settings = $.extend(defaults,options);
console.log(defaults);
console.log(options);
console.log(settings);

结果:
这里写图片描述
可以发现原对象发生改变,规则:a对象和b对象相同的部分,b覆盖a,不同的部分,a保留,b追加到a中

深拷贝

var defaults = {name:"张三",age:18,sex:"true",scores:{chinese:70,science:100}};
var options = {name:"李四",age:20,scores:{chinese:98,math:99,english:100}};
var settings = $.extend(true,defaults,options);
console.log(defaults);
console.log(options);
console.log(settings);

这里写图片描述
结果可以发现b不是像浅拷贝一样属性中的对象分数完全被覆盖,而是分数对象中的属性b覆盖a中相同的,b不同的追加,a中的保留

保存到新对象,不改变a对象的值

var defaults = {name:"张三",age:18,sex:"true",scores:{chinese:70,science:100}};
var options = {name:"李四",age:20,scores:{chinese:98,math:99,english:100}};
var settings = $.extend(true,{},defaults,options);
console.log(defaults);
console.log(options);
console.log(settings);

这里写图片描述
可以看出a对象没有发生改变,不同于上面第二个例子,即单纯的深度拷贝。这个例子的结果即使新对象{}被填充数据的结果

目录
相关文章
|
7月前
|
Web App开发 前端开发 JavaScript
大厂面试题分享:如何让(a===1&&a===2&&a===3)的值为true?
大厂面试题分享:如何让(a===1&&a===2&&a===3)的值为true?
|
7月前
|
JavaScript
Vue报错 Invalid default value for prop “list“: Props with type Object/Array must use a factory
Vue报错 Invalid default value for prop “list“: Props with type Object/Array must use a factory
339 0
TypeError: Cannot set properties of undefined (setting ‘resdata‘),res定义数据出现的问题,定义的方法用this换成that
TypeError: Cannot set properties of undefined (setting ‘resdata‘),res定义数据出现的问题,定义的方法用this换成that
|
前端开发 JavaScript
前端vue:解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
前端vue:解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
1358 0
前端vue:解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
|
JavaScript
vue 渲染列表报错Avoid using non-primitive value as key, use string/number value instead. found in
vue 渲染列表报错Avoid using non-primitive value as key, use string/number value instead. found in
86 0
|
JavaScript 前端开发
JavaScript:return、return true、return false
JavaScript:return、return true、return false
110 0
|
缓存 算法 JavaScript
为什么[null] === [null]输出为false❓
有人问,为什么null === null 输出值true,但是[ null ] === [ null ]输出值却是false?
166 0
|
JavaScript
Object.assign(this.$data, this.$options.data())-vue清空数据
Object.assign(target,...source)是es6新增的方法,可以合并对象,用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,它将返回目标对象,target:目标对象,source:源对象,通过Object.assign方法,把source合并给target,如果目标对象中的属性名与源对象中的属性名相同时,则属性将被源对象中的属性覆盖,然后返回target对象;
226 0
|
JavaScript
JS中字串转参数用的false/true
JS中字串转参数用的false/true
78 0
|
JavaScript 数据安全/隐私保护 前端开发
js中return,return true,return false三者的用法及区别
return其实就是return undefined; 1.语法及返回方式 ①返回控制与函数结果         语法为:return 表达式;         语句结果函数的执行,返回调用函数,而且把表达式的值作为函数结果返回出去 ②返回控制无函数结果         语法为:return;         在大多数情况下,为事件处理函数如果让其返回false,可以防止默认的事件行为.
1645 0