关于javascript:js中的赋值浅拷贝例如数组中from方法深拷贝

48次阅读

共计 1759 个字符,预计需要花费 5 分钟才能阅读完成。

赋值 (简略数据类型和援用对象不同)

简略数据类型赋值和援用数据赋值

let a = 1;
let b = a;
a = 2;
console.log(a);//2
console.log(b);//1
console.log(a===b);//false

let arr = [1,2,3];
let arr2 = arr;
arr[0] = 3;
console.log(arr);//[3,2,3]
console.log(arr2);//[3,2,3]
console.log(arr===arr2);//true

根本数据类型保留在栈内存,援用数据保留在堆内存


复制援用对象不能简略的赋值,赋值后的数据指向同一个地址,会相互影响,所以须要浅复制或深复制

浅复制

/* 数组 */
// 办法 1 应用 from 数组办法
let arr = [1,2,3];
let arr2 = Array.from(arr);
arr[0] = 3;
console.log(arr);//[3,2,3]
console.log(arr2);//[1,2,3]
console.log(arr===arr2);//false

// 办法 2 应用遍历(for,foreach)
let arr2 = [];
for(let i=0; i<arr.length; i++){arr2[i] = arr[i];
}

// 办法 3 slice
let arr2 = arr.slice(); 

// 办法 4 concat
let arr2 = arr.concat();

/* 对象 */
//for..in 遍历
for (let key in obj) {obj2[key] = obj[key];
}

/* 数组和对象通用 */
// 残余参数
let arr2 = [...arr];
let obj2 = {...obj};

// assign
let arr2 = Object.assign([], arr);
let obj2 = Object.assign({}, obj);
// assign 应用办法————MDN
/*const target = [1,2];
const source = [3,4];
const returnedTarget = Object.assign(target, source);
console.log(target);//{a: 1, b: 4, c: 5}
console.log(returnedTarget);//{a: 1, b: 4, c: 5}*/

浅复制只能复制援用对象元素里的简略数据,援用对象元素里的援用对象还是会相互影响

let obj = {
  name: 'cidy',
  age: {
    a: 18,
    b: 19
  }
}
let obj2 = {...obj}
obj.age.a = 15;
console.log(obj);
/*{name: "cidy", age: {…}}
age: {a: 15, b: 19}
name: "cidy"
__proto__: Object*/
console.log(obj2);
/*{name: "cidy", age: {…}}
age: {a: 15, b: 19}
name: "cidy"
__proto__: Object*/

深复制

深拷贝:在计算机中开拓了一块新的内存地址用于寄存复制的对象。(对属性中所有援用类型的值,遍历到是根本类型的值为止。)

function deepCopy(obj1) {var obj2 = Array.isArray(obj1) ? [] : {};
  if (obj1 && typeof obj1 === "object") {for (var i in obj1) {
    //hasOwnPropert 返回值是一个布尔值,批示对象本身属性中是否具备指定的属性,会疏忽从原型链上继承到的属性
      if (obj1.hasOwnProperty(i)) {
        // 如果子属性为援用数据类型,递归复制
        if (obj1[i] && typeof obj1[i] === "object") {obj2[i] = deepCopy(obj1[i]);
        } else {
          // 如果是根本数据类型,只是简略的复制
          obj2[i] = obj1[i];
        }
      }
    }
  }
  return obj2;
}
var obj1 = {
  a: 1,
  b: 2,
  c: {d: 3}
}
var obj2 = deepCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 3
alert(obj2.c.d); // 4

正文完
 0