网站原创内容,wordpress 使用ip访问不了,教育类网站开发需求说明书,做网站编程在程序ES6中提出的对象展开运算符“…”就是用来展开元素的。有了它就不用代码循环遍历了#xff0c;偷懒专用。
1. 合并数组
展开原有数组中的所有元素#xff0c;可以合并成一个新的数组。
var a[1,2,3];
var b[4,5,6];
var c[...a,...b];
console.log(c) // 输出#xff1a;…ES6中提出的对象展开运算符“…”就是用来展开元素的。有了它就不用代码循环遍历了偷懒专用。
1. 合并数组
展开原有数组中的所有元素可以合并成一个新的数组。
var a[1,2,3];
var b[4,5,6];
var c[...a,...b];
console.log(c) // 输出[1, 2, 3, 4, 5, 6]
console.log(a) // 输出[1, 2, 3]
console.log(b) // 输出[4, 5, 6]
2. 合并对象
展开对象中的所有属性可以合并成一个新的对象。
var person {name: 小明,age: 18,sex: 男,
};
var hobby {play: 篮球,like: 吃饭、睡觉、打游戏,
};
var xiaoMing {...person,...hobby};
console.log(xiaoMing); // { name: 小明, age: 18, sex: 男, play: 篮球, like: 吃饭、睡觉、打游戏 }
当对象中包含同名参数时后面的会把前面的同名属性覆盖掉。
// 接上面的代码
var xiaoGang {...person,...hobby,...{name:小刚,play:足球},
};
console.log(xiaoGang); // { name: 小刚, age: 18, sex: 男, play: 足球, like: 吃饭、睡觉、打游戏 }3. 对象展开运算符是浅拷贝还是深拷贝
先来了解下浅拷贝和深拷贝各自的含义。
数据可以分为两大类一类是基本数据一类是引用数据而数据存储位置又可分为栈和堆。
基本数据存储在栈中
引用数据栈中存储了一个地址这个地址指向堆中的真实数据。
由此
浅拷贝在栈中新开辟了一个空间复制的是栈中的地址改地址指向的依旧是原来堆的数据。
深拷贝在栈和堆中均重新开辟了空间新的地址指向的是新的数据老地址指向的是老数据所以无论新旧数据哪个发生变化都不会影响另一个。
下面看一个浅拷贝的例子
var person {name: 小明,age: 18,sex: 男,
}var xiaoHong person; // 这里只是将引用变量person1给了xiaoHong
xiaoHong.name 小红;console.log(person) // 输出{name: 小红, age: 18, sex: 男}
console.log(xiaoHong)// 输出{name: 小红, age: 18, sex: 男}
由上面的例子很清楚的看到当xiaoHong的name属性值变化了之后person的name属性值也发生变化了所以两个对象指向的是同一个数据区域是浅拷贝。
那么对象展开运算符是浅拷贝还是深拷贝呢?看下面例子
var person {name: 小明,age: 18,sex: 男,
}var xiaoHong {...person}
xiaoHong.name 小红;console.log(person) // 输出 {name: 小明, age: 18, sex: 男}
console.log(xiaoHong)// 输出 {name: 小红, age: 18, sex: 男}
诶用对象展开符的xiaoHong的name属性变化了之后person的name属性没有变化呀难道对象扩展符是深拷贝别急往下看。
再看下面的例子对象中包含着第二层数据对象。
var person {name: 小明,age: 18,sex: 男,hobby: {play: 篮球,like: 吃饭、睡觉、打游戏,}
}var xiaoHong {...person}
xiaoHong.name 小红;
xiaoHong.hobby.play 羽毛球;console.log(person); // 输出 {name: 小明, age: 18, sex: 男, hobby: {music: 羽毛球,like: 吃饭、睡觉、打游戏}}
console.log(xiaoHong); // 输出 {name: 小红, age: 18, sex: 男, hobby: {music: 羽毛球,like: 吃饭、睡觉、打游戏}}
对比新旧两个对象的输出 针对name属性 旧对象没受到影响针对hobby.play属性旧对象跟随变化了。
由此可证明对象展开运算符并不是深拷贝也是浅拷贝但第一层又不是浅拷贝。
我感觉可以这么理解
对象展开预算符相当于展开遍历了对象的第一层数据第一层数据如果是基本数据就是简单的值第一层数据若是引用数据就是浅拷贝。
