对象遍历&解构赋值&深拷贝浅拷贝对象遍历&解构赋值&深拷贝浅拷

如何遍历一个对象?
在JS中可以通过高级for循环来遍历对象
一下代码的含义:将制定对象中所有的属性和方法的名称取出来依次的赋值给key这个变量

for(let key in obj){}

function Person(myName,myAge){ this.name=myName; this.age=myAge; this.say=function(){ console.log(this.name,this.age); } let p = new Person("zxw",34); console.log(p); for(let key in p){ if(p[key] instanceof function){ continue; } //console.log(key) // name age say //注意点:一下代码的函数取出p对象中名称叫做当前遍历到的名称的属性或方法的取值 //console.log(p[key]); //p["name"] p["age"] p["say"] } //注意点:以下代码的含义取出p对象中名称叫做key的属性的取值 //console.log(p.key); //undefined

对象的解构赋值

对象的解构赋值和数组的解构赋值除了符号不一样,其他的一模一样
数组的解构使用[]
对象解构使用{}
1.在数组的解构赋值中,等号左边的格式必须和等号右边的格式一模一样,才能完全解构

let [a,b,c]=[1,3,5]; console.log(a,b,c); //1 3 5

2.在数组的解构赋值中,两边的个数可以不一样

let[a,b]=[1,3,5]; console.log(a,b); //1 3

3.在数组的解构赋值中,如果右边少于左边,我们可以给左边指定默认值

let[a,b,c=666]=[1,3]; console.log(a,b,c); //1 3 666

4.在对象的解构赋值中,左边的变量名称必须和对象的属性名称一致,才能解构出数据;

let {a, b} = {name: "zxw",age: 24}; console.log(a, b); // undefined undefined let {age} = {name: "zxw",age: 24}; console.log(age); // 24

对象的解构赋值应用场景

let arr = [1,3]; function sum (a,b){ funvtion sum([a,b]){ return a + b; } //let res =sum(arr[0],arr[1]); let res = sum(arr); console.log(res); }

let obj ={ name:"zxw", age:34 } //function say(name,age){} function say({name,age}){ console.log(name,age) } //say(obj.name,obj.age); say(obj);

深拷贝浅拷贝
深拷贝:修改新变量的值不会影响原有变量的值,默认情况下基本数据类型都是深拷贝

let num1 = 123; let num2 = num1; num2 = 666; // 修改形变量的值 console.log(num1); console.log(num2);

浅拷贝:修改新变量的值会影响原有的变量的值,默认情况下引用类型都是浅拷贝

class Person{ name = "lnj"; age = 34; } let p1 = new Person(); let p2 = p1; p2.name = "zs"; // 修改变量的值 console.log(p1.name); console.log(p2.name);

对象的深拷贝浅拷贝

class Person{ name ="zxw"; age:24; } let p1 = new Person(); //浅拷贝 let p2 = p1; p2.name="zs"; //深拷贝 let p2 =new Object(); p2.name=p1.name; p2.age=p1.age; p2.name="zs"; for(let key in p1){ p2[key]=p1[key]; } console.log(p2); p2.name="zs"; //assign 方法可以将第二个参数的对象的属性和方法拷贝到第一个参数的对象中 Object.assign(p2,p1); //console.log(p2); p2.name="zs"; console.log(p1.name); console.log(p2.name); // 只有被拷贝对象中所有属性都是基本数据类型,以上代码才是深拷贝

【对象遍历&解构赋值&深拷贝浅拷贝】深拷贝函数

class Person{ name = "zxw"; cat = { age : 23 }; scores = [1, 3, 5]; } let p1 = new Person(); let p2 = new Object(); /*// p2.name = p1.name; // p2.name = "zs"; // console.log(p1.name); // console.log(p2.name); p2.cat = p1.cat; p2.cat.age = 666; console.log(p1.cat.age); console.log(p2.cat.age); */depCopy(p2, p1); // console.log(p2); p2.cat.age = 666; console.log(p1.cat.age); console.log(p2.cat.age); function depCopy(target, source) { // 1.通过遍历拿到source中所有的属性 for(let key in source){ // console.log(key); // 2.取出当前遍历到的属性对应的取值 let sourceValue = https://www.it610.com/article/source[key]; // console.log(sourceValue); // 3.判断当前的取值是否是引用数据类型 if(sourceValue instanceof Object){ // console.log(sourceValue.constructor); // console.log(new sourceValue.constructor); let subTarget = new sourceValue.constructor; target[key] = subTarget; depCopy(subTarget, sourceValue); }else{ target[key] = sourceValue; } } }