关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

JS解构赋值实例详解

发布2022-05-30 浏览747次

详情内容

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;
     })
 },
点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载