JS解构赋值实例详解

JS的解构赋值是ES6新增的一种赋值方法，一般分为对象解构与数组解构两种形式,在开发使用非常方便赋值传参，下面用实例介绍下怎么在js中解构赋值。

一、解构赋值理解

解构赋值： 
let [a,b,c] = [1,2,3]
   解构的目标 = 解构的源
  先把目标解构  再把源赋值到目标

总结：解构赋值 - 就是把数组或对象一一解构，再把源的值赋值到解构后的数组或对象中即可。

二、不同类型解构赋值

// 不完全解构
let [a = 1, b] = []; // a = 1, b = undefined

// 剩余运算符
let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

// 字符串解构
let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

// 解构默认值
let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

// 对象模型的解构
// - 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
// foo = "aaa"
// bar = "bbb"

let {a = 10, b = 5} = {a: 3};   // a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};  // aa = 3; bb = 5;

// 不完全解构
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

三、用法

// 1.交换变量
	let x = 1;
	let y = 2;
	[x, y] = [y, x];// 2.从函数返回多个值
	// - 返回一个数组
	function example() {
	  return [1, 2, 3];
	}
	let [a, b, c] = example();

	// - 返回一个对象
	function example() {
	  return {
	    foo: 1,
	    bar: 2
	  };
	}
	let { foo, bar } = example();// 3.函数参数的定义// 解构赋值可以方便地将一组参数与变量名对应起来。

	// - 参数是一组有次序的值（数组）
	function f([x, y, z]) { ... }
	f([1, 2, 3]);

	// - 参数是一组无次序的值(对象)
	function f({x, y, z}) { ... }
	f({z: 3, y: 2, x: 1});// 4.提取 JSON 数据
	let jsonData = {
	  id: 42,
	  status: "OK",
	  data: [867, 5309]
	};
	let { id, status, data: number } = jsonData;
	console.log(id, status, number); // 42, "OK", [867, 5309]// 5.遍历 Map 结构
	const map = new Map();
	map.set('first', 'hello');
	map.set('second', 'world');
	
	for (let [key, value] of map) {
	  console.log(key + " is " + value);
	}
	// first is hello
	// second is world

四、vue实例

getForm() {
     getExpertApi(this.id).then(res => {
         console.log(res.data,":data");
         // alarmRules: null
         // content: "3333"
         // description: "2021"
         // methodInform: "1,2,3"
         // name: "测试2021"
         // number: "20210420145640257656"
         // planId: 20
         // rulesId: null
         // type: 1
         // typeName: "消防监控"
         // user: null
         
         let {methodInform, user, ...form} = res.data;  // 解构赋值
         
         let strArr = methodInform.split(',');  // 字符串拆分成数组
         console.log(strArr);  // ["1", "2", "3"]
         
         form.methodInform = strArr.map(item => Number(item));  //  对象新增属性 = 对象.属性；map()用法；字符串强制转换成Number型
         
         console.log(form.methodInform);  // [1, 2, 3]
         
         form.users = JSON.parse(user);
         this.form = form;
     })
 },