共计 1946 个字符，预计需要花费 5 分钟才能阅读完成。
当然，浅拷贝针对的是嵌套对象能力实现，单层对象实现的是深拷贝
第一种 Object.assign()
| let target = {}; | |
| let source = { | |
| a:'123', | |
| b:{name:'zhang'} | |
| } | |
| Object.assign(target,source) | |
| console.log(target); //{a: '123', b: { name: 'zhang'} } | |
| // 批改嵌套对象 b 外面的属性 | |
| target.b.name = 'lisi'; | |
| console.log(source); //{a: '123', b: { name: 'lisi'} } |
第二种 Array.prototype.slice()
| let array = [{a:1},{b:2}] | |
| //slice() 办法抉择从给定的 start 参数开始的元素，并在给定的 end 参数处完结，但不包含 | |
| let newArr = array.slice(0,2) | |
| console.log(newArr); //[{ a: 1}, {b: 2} ] | |
| newArr[1].b = '222222' | |
| console.log(array); //[{ a: 1}, {b: '222222'} ] |
第三种 Array.prototype.concat()
| let arrThird = [{c:1},{d:2}]; | |
| //concat() 办法用于连贯两个或多个数组，而是返回一个新数组，其中蕴含已连贯数组的值 | |
| let newThird = [].concat(arrThird); | |
| console.log(newThird); //[{ c: 1}, {d: 2} ] | |
| // 批改新数组中 newThird 的 c 属性 | |
| newThird[0].c = '巴啦啦能量' | |
| console.log(arrThird); //[{ c: '巴啦啦能量'}, {d: 2} ] |
第四种 拓展运算符 …
| let obj1 = {j:1,k:{i:2}} | |
| // 解构 | |
| let newObj = {...obj1} | |
| console.log(newObj); //{j: 1, k: { i: 2} } | |
| newObj.j = '奥特曼' | |
| console.log(obj1); //{j: 1, k: { i: 2} } | |
| newObj.k.i = '小怪兽' | |
| console.log(obj1); //{j: 1, k: { i: '小怪兽'} } | |
| // 由此可知 浅拷贝是针对于嵌套对象来实现的 |
第五种 间接用 = 赋值
| let a = [2,32,13,4] | |
| let b = a; // 赋值操作 | |
| console.log(b); //[2, 32, 13, 4] | |
| // 批改 b 数组 | |
| b[1] = 'hell javaScript' | |
| console.log(a); //[2, 'hell javaScript', 13, 4] |
第六种 for..in.. 循环
| let obj = {a:{name:'小蓝',age:18}} | |
| let copy = (obj) =>{let newObj = {} | |
| for(var key in obj){newObj[key] = obj[key] | |
| } | |
| return newObj | |
| } | |
| let objSix = copy(obj) | |
| console.log(objSix); //{a: { name: '小蓝', age: 18} } | |
| // 批改 objSix 的属性 | |
| objSix.a.name = '游乐娃子' | |
| console.log(obj); //{a: { name: '游乐娃子', age: 18} } |
第七种 $.extend()
| <!-- | |
| * @Author: [you name] | |
| * @Date: 2021-10-29 10:25:55 | |
| * @LastEditors: [you name] | |
| * @LastEditTime: 2021-10-29 10:59:14 | |
| * @Description: | |
| --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <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>Document</title> | |
| <script src="./1-jquery.3.6.0.js"></script> | |
| <script> | |
| console.log($); | |
| // 第七种 $.extend() | |
| let jObj1 = {a: { name: '泡芙', age: 18} } | |
| let jObj2 = {b: { name: '可乐', age: 28} } | |
| let jqObj = $.extend({},jObj1, jObj2) | |
| console.log(jqObj); | |
| jqObj.a.age = '33' | |
| console.log(jObj1); | |
| console.log(jObj2); | |
| </script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
正文完
发表至： javascript
2021-10-29
