ES6 对象解构 数组解构 参数解构

对象的解构

什么是解构

使用ES6的一种语法规则，将一个对象或数组的某个属性提取到某个变量中

解构不会对被解构的目标造成任何影响

	const user = {
		name: 'abc',
		age: '14',
		sex: '男',
		address: {
			province: '河北',
			city: '沧州'
		}
	}

	//当我们需要调用其中的属性的时候
	let name, age, sex, address;
	name = user.name;
	age = user.age;
	sex = user.sex;
	address = user.address;

	//相对来说比较麻烦
	//所以ES6诞生了一个语法糖能够相对轻松的调用
	
	({name, age, sex, address} = user);
	let {name, age, sex, address} = user;
	
	//用这种方式调用跟上面是完全一样的
	//调用方式是先声明四个变量再在对象中读取同名属性
	//如果没有对应的属性则声明完变量之后读取时返回undefined
	

在解构中使用默认值

	{同名变量 = 默认值}

	let {name, age, sex, address, abc = 123} = user;

非同名属性解构

	{属性名: 变量名}
	
	//此时是先定义4个变量: name、 age、 gender、 address
	//再从对象user中读取同名属性赋值（其中gender读取的是sex属性） 
	let {name, age, sex: gender, address} = user;
	console.log(name, age, gender, address)

进一步结构

	//解构定义出user中的name、province
	//定义两个变量name、province
	//再解构
	const { name, address: { province } } = user;
	//此时address是作为进一步结构的存在而并非参数
	

数组解构

//我们要知道数组其实就是一个对象
//所以我们可以将数组当成对象来解构

	const numbers = ['a','b','c','d']
	
	const {
		0: n1,
		1: n2,
		2: n3,
		3: n4,
		4: n5
	}
	
	console.log(n1, n2);
	//这样其实也可以输出，但是ES6觉得这样还是太过麻烦
	
	const [n1, n2] = numbers;
	
	//或者说
	
	const [n1,,,, n5] = numbers;

得到numbers下标为4的数组中的下标为2的数据，放到n变量中

	const numbers = ['a','b','c','d',[1, 2, 3, 4]]
	const [,,,,[,,n]] = numbers;
	console.log(n)
	//数组也是同理
	//其变形方法是
	const [ a:A ] = bumbers[5]//读出其位置上的对象
	

解构剩余项

解构出name然后，剩余的所有参数，放到一个新的对象中，变量名为obj
数组同理

	//name: test
	//obj: {name, ...obj} = user;
	//此时可以用展开运算符
	console.log(name,obj) 

实现两个变量之间的交换

	let a = 1, b = 2;
	[a, b] = [b, a]
	console.log(a, b)
	//这样的话两个变量之间就可以进行交换了
	

参数解构

	// function print(user) {
	//     console.log(`姓名：${user.name}`)
	//     console.log(`年龄：${user.age}`)
	//     console.log(`性别：${user.sex}`)
	//     console.log(`身份：${user.address.province}`)
	//     console.log(`城市：${user.address.city}`)
	// }
	//在我们进行操作时会比较麻烦
	
	function print({ name, age, sex, address: {//这种方法是完全一样的
	    province,
	    city
	} }) {
	    console.log(`姓名：${name}`)
	    console.log(`年龄：${age}`)
	    console.log(`性别：${sex}`)
	    console.log(`身份：${province}`)
	    console.log(`城市：${city}`)
	}
	
	const user = {
	    name: "kevin",
	    age: 11,
	    sex: "男",
	    address: {
	        province: "四川",
	        city: "成都"
	    }
	}
	print(user)

当我们不传递参数时，就会报错，因为无法从undefined或null中进行解构
我们可以将参数附给一个空对象来以此避免报错

	// function ajax(options) {
	//     const defaultOptions = {
	//         method: "get",
	//         url: "/"
	//     }
	//     const opt = {
	//         ...defaultOptions,
	//         ...options
	//     }
	//     console.log(opt)
	// }
	
	function ajax({
	    method = "get",
	    url = "/"
	} = {}) {
	    console.log(method, url)
	}
	
	ajax()