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;
})
},
持续更新
这里只是解构赋值的认识与了解,后面若有相关的继续更新。