1、对象合并
- Object.assign({}, obj1, obj)
const obj = { a: 1, b: 2, c: 3, d: { e: 5 } };
const obj1 = { d: '' };
const obj2 = Object.assign({}, obj1, obj); //{ ...obj };
obj2.a = 4;
console.log(obj2); //{d: {…}, a: 4, b: 2, c: 3}
// 注意：Object.assign({}, obj1, obj) 参数顺序不同结果不同
const obj = { a: 1, b: 2, c: 3, d: { e: 5 } };
const obj1 = { d: '' };
const obj2 = Object.assign({}, obj, obj1); //{ ...obj };
obj2.a = 4;
console.log(obj2); //{a: 4, b: 2, c: 3, d: ""}
如果两个对象中有重复数据，合并结果以第三个参数为主；
应用场景分析：在筛选条件对象合并，就会导致已选和默认数据合并出现丢失的情况。这种情况下就得单独赋值，来解决这一问题。
- “...”扩展运算符
const obj = { a: 1, b: 2, c: 3, d: { e: 5 } };
const obj1 = { ...obj, d: '' };
console.log(obj1); // {a: 1, b: 2, c: 3, d: ""}
// 位置不同：
const obj = { a: 1, b: 2, c: 3, d: { e: 5 } };
const obj1 = { d: '', ...obj };
console.log(obj1); // {d: {…}, a: 1, b: 2, c: 3}
2、浅拷贝
- “=” 赋值
实现浅拷贝方法 “=”，等号赋值就是浅拷贝。
// 实例：
// 基本数据类型
let a = 1;
const b = a;
a = 3;
console.log(b);//1
// 引用数据类型
let a = [1, 2, 3, 4];
const b = a;
a[0] = 0;
console.log(b); //[0, 2, 3, 4]
注意：“=”
基本数据类型，实现复制不受原数据改变的影响。
引用数据类型，受原数据改变的影响。（原因：引用数据存放堆内存，赋值后只是存储的指针赋值给变量）
拓展：
基本数据类型： Null、Undefined、Boolean、Number、String
引用数据类型：Object 例如： Object 、Function、Array
- Object.assign({}, obj)
// 对象为普通类型数据 深拷贝
const obj = { a: 1, b: 2, c: 3 };
const obj1 = Object.assign({}, obj);
obj1.b = 4;
console.log(obj); // {a: 1, b: 2, c: 3 }
// 对象含有引用类型数据 浅拷贝
const obj = { a: 1, b: 2, c: 3, d: { e: 5 } };
const obj1 = Object.assign({}, obj);
obj1['d'].e = 4;
console.log(obj); //{a: 1, b: 2, c: 3, d: {e: 4}}
- Object.assign([], Arr)
// 普通类型数据
const arr = [0, 1, 2, 3, 4];
const arr1 = Object.assign([], arr);
arr1[0] = 5;
console.log(arr); //[0, 1, 2, 3, 4]
// 二维数组中存在引用
const arr = [0, 1, 2, 3, 4, [5, 6, 7]];
const arr1 = Object.assign([], arr);
arr1[5][3] = 8;
console.log(arr); //[0, 1, 2, 3, 4, [5, 6, 8]]
// [{}]
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
const arr1 = Object.assign([], arr);
arr1[1].id = 0;
console.log(arr); //[{ id: 1 }, { id: 0 }, { id: 3 }, { id: 4 }]
- Array.concat()
// 基本数据类型
const arr = [1, 2, 3, 4];
const arr1 = arr.concat();
arr1[0] = 0;
console.log(arr); //[1, 2, 3, 4]
// 引用数据类型
// 修改数组中单独一项的值，深拷贝失效
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
const arr1 = arr.concat();
arr1[1].id = 0;
console.log(arr); //[{ id: 1 }, { id: 0 }, { id: 3 }, { id: 4 }]
// 只修改数组每一项，不对每一项的引用类型数据修改，深拷贝生效
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
const arr1 = arr.concat();
arr1.push({ id: 5 });
console.log(arr); //[{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
3、深拷贝
- 对象
for遍历、JSON.parse(JSON.stringify(obj1))、"..." 运算符、Object.assign()
let obj1={count:1,name:'grace',age:1};
let obj2 = copyObj(obj){
let res = {};
for(let key in obj){
res[key]=obj[key];
}
let obj1={count:1,name:'grace',age:1};
let obj2 = JSON.parse(JSON.stringify(obj1));
const arr = { id: 2, name: 2 };
const arr1 = { ...arr };
arr1.id = 0;
console.log(arr); // { id: 2, name: 2 }
const obj = { a: 1, b: 2, c: 3 };
const obj1 = Object.assign({}, obj);
obj1.b = 4;
console.log(obj); // {a: 1, b: 2, c: 3 }
注意 Object.assign、“...”运算符 对于含有引用类型值的对象无法深拷贝
const arr = { id: 2, name: 2, arr3: { id: 3, name: 3 } };
const arr1 = { ...arr };
arr1['arr3'].id = 0;
console.log(arr); // { id: 2, name: 2, arr3: { id: 0, name: 3 } }
- Array
循环遍历、arr.slice(0) 、 arr.concat()、arr1 = [...arr]
const arr = [1, 2, 3, 4];
const arr1 = arr.slice(0);
arr1[0] = 0;
console.log(arr); //[1, 2, 3, 4]
// .concat()
const arr = [1, 2, 3, 4];
const arr1 = arr.concat();
arr1[0] = 0;
console.log(arr); //[1, 2, 3, 4]
// ...扩展运算符
const arr = [1, 2, 3, 4];
const arr1 = [...arr];
arr1[0] = 0;
console.log(arr); //[1, 2, 3, 4]
注意 arr.concat() 、“...”运算符对于含有引用类型值的对象无法深拷贝
网友评论