✨ js-💕解构赋值

👉本知识来源于 现代js技术 ，本文章来自于一个前端小白的总结与归纳，致敬每一位在前端正在努力的人🍻

👀本文可以学到的：变量交换、数组解构赋值、对象解构赋值、嵌套解构、智能函数参数。
解构赋值 是一种特殊的语法，它使我们可以将数组或对象“拆包”为到一系列变量中，因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。

		// 解构赋值
		let arr = ["I","love"];
		let [f,s] = arr;
		console.log(f); //I
		console.log(s); // love
		
		// 字符串切割解构赋值
		let [f1,s1] = "I Love".split(" ");
		console.log(f1); // I
		console.log(s1); // Love
		
		// 解构 使用都逗号忽略元素
		let [a,,c] = ["L","Z","C"]
		console.log(c);  // C
		
		// 任何可迭代对象,不仅限于数组
		let [a1,b1,c1] = "abc";
		let [one, two, three] = new Set([1,2,3]);  // 1, 2, 3
		
		
		// 赋值到对象属性
		let user = {};
		[user.name, user.surname] = "I ZE".split(" ");
		
		console.log(user.name);
		
		// 相对于Object.entries(obj) 会返回一个实体, 即键——值(key, value)
		// .entries() 与解构赋值一同使用遍历
		let user1 = {
			name: "LaiZeChang",
			sex: "男"
		};
		// 循环遍历键值对
		for (let [key, value]  of Object.entries(user1)) {
			console.log(`${key}:${value}`)
		}
		
		let map = new Map();
		map.set("name","小张");
		map.set("age","20");
		
		for (let [key, value] of map) {
			console.log(`${key}:${value}`)
		}
		
		
		// 变量交换
		let guest = "Jane";
		let admin = "Pete";
		
		[guest, admin] = [admin, guest];
		console.log(`${guest}  ${admin}`)

		
		// 取前面的值, 收集后面元素 用 (...数组名)
		let [a3,b3,...rest] = ["Lai","Ze","Change","hhh","xiaolaiji"];
		console.log(`${a3} ${b3} ${rest[0]} ${rest.length}`)
		
		
		// 解构赋值 默认值
		let [a4 = "DU", b4 = "DC"] = ["luck"];
		console.log(`${a4} ${b4}`);
		
		// 默认值还可以赋值 函数或表达式
		
		function aa(){
			return "执行函数";
		}
		
		// let [a5 = aa(), b5 = aa(), c5 = alert("c5执行函数")] = ['我不执行函数'];
		// console.log(`${a5} ${b5}`);
		
		
		
		// 对象解构赋值
		let options = {
			title: "hhh",
			width: 100,
			height: 200
		}
		// 左边的变量名如果存在对象中，就会直接对应对象的属性中，可以不按顺序
		// let {title, width, height} = options;  // title = hhh
		
		
		// 对象解构赋值 可以将属性名指定其他名字  使用冒号 指定
		let {title : t, height: h, width: w} = options;
		
		
		// 对象解构赋值 设置 默认值
		// let {width = 100, height = 200 , title} = options;
		// 设置默认值也可以是函数 或 表达式  当对象没有该属性时 如 无属性width 
		let {width = prompt("width?"), title = prompt("title?")} = options;
		
		// alert(width)
		
		// 冒号和等号可以共同使用  ：  =
		// 对于对象多属性 可以单独获取所需内容
		// let { title } = options;
		
		
		// 对象属性 剩余模式（...） 
		// let {title, ...rest} = options;
		// alert(rest.height)
		
		
		
		// 嵌套解构  对象中存在的对象和数组，提取对象里面的值，也要对应对象结构提取
		let op1 = {
			size: {
				wid: 100,
				heitht: 200
			},
			itmes: ["A","B"],
			extar: true
		};
		
		// let {
		// 	size: {
		// 		wid,
		// 		heitht
		// 	},
		// 	items: [i1,i2],
		// 	titl = "Menu" //对象不存在就使用默认值
		// } = op1;
		
		
		

智能函数参数

一个函数有很多参数，大部分参数是可选的，也是按顺序的，如果没有传入值就会undefined。
如果还要不传入参数采用默认值的情况下，又要不考虑顺序。
可以使用对象解构赋值 ，它可以不按照顺序，但是解构的变量名必须存在对象的属性名当中。

		
		
	// 不好的例子
	function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
	 // ...
	};

	// 在采用默认值就可以的位置设置 undefined
	showMenu("My Menu", undefined, undefined, ["Item1", "Item2"]);
		
	// 合理的方法： 传递一个函数给对象
	let options = {
		title: "menu",
		item : ["C","V"]
	};
		
	// 对象属性值长的时候可以用冒号指定变量名
	function showMent1({title = "默认值", width: w = 200, height = 300, item = []}) {
			// title, item 提取 op2
			// width, height - 提前默认值
			alert(`${title} ${w} ${height}`);
			alert(item)
	}
		
	// 想所有参数都是用默认值，就要必须传一个空对象，否则会报错
	 showMent1({});


        // 另一种解决方法   赋一个空对象 {} 为默认值 就不需要取全部默认值时传个空对象 {}
        function showMent({title = "默认值", width: w = 200, height = 300, item = []} = {}) {
                    …………
        }
      
         // 函数参数给予默认值就不需要传 {}
         showMent()