展开运算符(…)
展开运算符(…),将一个数组进行展开,不会修改原数组
<body>
<script>
/*
展开运算符(…),将一个数组进行展开,不会修改原数组
*/
let arr = [1, 3, 3, 7, 91];
console.log(...arr); //[1, 3, 3, 7, 91]
console.log(Math.max(...[1, 7, 91])); //91 求最大值
console.log(Math.min(...[1, 7, 91])); //1 求最小值
// 可以用于合并数组
let arr1 = [2, 6, 8, 9];
console.log(...arr, ...arr1); //合并数组[1, 3, 3, 7, 91,2, 6, 8, 9]
</script>
</body>
解构赋值 - 重点(熟悉)
概念: ES6 允许 按照一个模式, 从目标结构 (数组/对象) 中提取值, 赋予给变量, **解构的目的方便取值.**
目的: 优化取值的过程
let [person1, person2] = ['张飞', '关羽']
let { name, age } = { name: 'zs', age: 18 }
let { name: username, age } = { name: 'zs', age: 18 }
let { name: username = 'ls', age } = { name: 'zs', age: 18 }
### 14.0 数组的解构
数组的解构
* 完全解构
* 不完全解构赋值
```jsx
// 什么是解构赋值: ES6 允许 按照一个模式, 从数组/对象中提取值, 赋予给变量
// 数组的解构
let arr = ["春天", "夏天", "秋天", "冬天"]
// let winOne = arr[0]
// let winTwo = arr[1]
// let winThree = arr[2]
// let winFour = arr[3]
// 写起来很麻烦, 解构赋值怎么写呢?
// 模式(数组/对象), 两边的模式要对应, 数组的模式: 会按照下标
let [winOne, winTwo, winThree, winFour] = arr // 完全解构
console.log(winThree)
let [winOne, , winFour] = arr // 不完全解构
console.log(winOne, winFour)
对象的解构
基本解构 解构重命名
// 例2: 对象解构举例
let obj = {
name: 'zs',
age: 18,
desc: '不错'
}
// let name = obj.name
// let age = obj.age
// let desc = obj.desc
// 1. 基本解构
let { name, age, desc } = obj
console.log(name, age, desc)
// 2. 解构重命名
let { name: myname, age: myage, desc: mydesc } = obj
console.log(myname, myage, mydesc)
// 3. 解构默认值
let { name, age, desc, girl = '小花' } = obj
console.log(name, age, desc, girl)
// 4. 重命名+默认值
let { name, age, desc, girl: myGirl = '小花' } = obj
console.log(name, age, desc, myGirl)
数组解构
<body> <script> // 数组解构 赋值 // const arr = [100, 60, 80]; // let [a, b, c] = arr; // console.log(a);//100 // console.log(b);//60 // console.log(c);//80 </script> </body>
必须加分号的两种情况
<body>
<script>
// 1. 立即执行函数要加
// (function () { })();
// (function () { })();
// 2. 使用数组的时候
// 交换值时一定要加结束符
let apple = "青苹果";
let apple1 = "红苹果";
[apple, apple1] = [apple1, apple];
console.log(apple, apple1);
</script>
</body>
数组解构细节
<body>
<script>
// const pc = ["海尔", "联想", "小米", "方正"];
// 变量个数比原数组多 不匹配时 没有匹配到的返回值为undefined
// let [a, b, c, d, e, f] = pc;
// console.log(a, b, c, d, e, f); //海尔 联想 小米 方正 undefined undefined
// // 变量个数比原数组少
// let [g, r, t] = pc;
// console.log(g, r, t); //海尔 联想 小米
// 后面多个数据用一个变量名接收 ...变量名
const pc = ["海尔", "联想", "小米", "方正"];
// let [a, b, ...c] = pc
// console.log(a, b, c) // 海尔 联想 ['小米', '方正']
// 防止undefined
// const arr = [0, 1]
// let [a = 0, b = 0, c = 0] = arr
// console.log(a, b, c) //; 0 1 0
// 不要谁 用,号站位
// let [a, b, , c] = pc;
// console.log(a, b, c); //海尔 联想 方正
// let arr = [1, 3, 4, [7, 8, [9]]];
// console.log(arr[0]); //1
// console.log(arr[1]); //3
// console.log(arr[2]); //4
// console.log(arr[3]); //7 8 [9]
// console.log(arr[4]); //undefined
let [a, b, c, [d, e, f]] = [1, 3, 5, [7, 8, [9]]];
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
</script>
</body>
对象解构
<body>
<script>
// 对象解构 把某一个属性值取出来
// const obj = {
// name: "la",
// age: 17,
// };
// const { name, age } = obj;
// console.log(name, age);
// 重新命名
// const { name, age: newName } = obj;
// console.log(newName);
// const obj = {
// name: "la",
// age: 17,
// family: {
// sonAge: 1,
// sonName: "小豆豆",
// },
// };
// const { name, age, family } = obj;
// console.log(name);
// console.log(age);
// console.log(family); //{sonAge: 1, sonName: '小豆豆'}
// console.log(sonAge);
// console.log(sonName);
const arr = [
{
uname: "张三",
age: 18,
family: {
matherUname: "王六",
matherAge: 28,
},
},
];
const [
{
uname,
age,
family: { matherUname, matherAge },
},
] = arr;
console.log(uname);
console.log(age);
// console.log(family);
console.log(matherUname);
console.log(matherAge);
</script>
</body>
多级对象解，<body>
<script>
// 对象多级解构
// const obj = {
// uname: "老子",
// family: {
// son: "儿子",
// sister: "女儿",
// },
// };
// const {
// uname,
// family: { sister, son },
// } = obj;
// console.log(uname);
// console.log(sister);
// console.log(son);
// 深层解构
const [ {uname,age,family,family: { matherAge, matherUname }}] = [ uname: "张三",age: 18,family: {
matherUname: "王六",
matherAge: 28 }}];
console.log(uname);
console.log(age);
console.log(family); //{matherUname: '王六', matherAge: 28}（深层解构 解构出整个对象 不影响里面的）
console.log(matherUname);
console.log(matherAge);
</script>
</body>
