Web前端高级编程学习笔记2：解构赋值

解构赋值

解构赋值：按照一定模式从数组或者对象中提取值，并给变量赋值
string 类型既可以数组解构又可以对象解构。

扩展/展开运算符 ： …

默认值

解构赋值中允许给左边变量设置默认值，以免右边不能匹配时不至于为undefined。

let [foo = true] = [ ];
let [x,y = 'b'] = [ 'a' ];
let [m, n = 'b' ] = [ 'a' ,undefined];

对象解构赋值

对象进行解构赋值与数组不一样，它没有索引所以只能用键值来一一对应匹配。

let obj={};let arr=[];
({p1:obj.data,p2:arr[0]}={p1:123,p2:true});

obj={data: 123};
arr=[true]

let{toUpperCase:upper}="hello";         //upper返回一个方法 函数
upper.call("abc")          //ABC

function m2({x=0,y=0}){return [x,y];}
m2({x:10})       //[10,0]
m2({})          //[0,0]
m2()           //报错

数组的元素是按次序排列的，变量的取值是由它的位置决定。
对象的属性没有次序，变量必须与属性同名才能取到正确的值。

let { bar, foo } = { foo: "aaa" , bar: "bbb"};
let { bar } = { foo: "aaa" , bar: "bbb" };

如果变量名属性名不一致，必须明确对应关系 。

let {baz}={ foo:"aaa", bar:"bbb"};
let {foo: baz} = {foo : 'aaa ' , bar : 'bbb ' };

字符串解构赋值

字符串的解构赋值，将字符串看作一个类似于数组的对象。

const [a , b, c, d] = 'hello ' ;//h,e,l,l

类似数组的对象都有一个length 属性，因此还可以对这个属性进行解构。

let { length: len } = 'hello ' ;

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [ 1，2，3];
let { 0: first, [arr.length - 1]: last }=arr;

数值和布尔值的解构赋值

解构赋值的原则是，如果等号右边不是对象，则先转换为对象。

let { toString: s }= 123;
console.log( s.call (100) ) ;      //100
//s===Number.prototype.toString为true

如果等号右边无法转换为对象，则会报错，如 null 和 undefined 。

函数参数的解构赋值

函数调用时，会将实参传递给形参，其过程就是实参赋值给形参。因此,也可以使用解构赋值。
其规则与数组﹑对象的解构赋值一致，关键看参数是采用哪种解构赋值方式。

解构赋值的用途

交换变量的值

let x = 1,y = 3;
[x,y] = [y, x];

从函数返回多个值

function func( ) {
	return [ 1,2,3];
}
let [a, b, c] = func( );

function func( ) {
	return {
		foo: 1,bar: 2};
}
let { foo, bar } = func( );

函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

function f( [x, y，z])
{
	//一组有序参数
}
f( [1，2，3]);

function f({ x,y，z })
{
	//一组无序参数
}
f( { z: 3,x: 1, y: 2 });

提取JSON数据

前端会使用很多这种方式。

const json = 'i "id" : 42, "status" : "OK" , "d" :[867，5309]} ';
let data = JSON. parse( json) ;
let { id, status, d: numbers } = data;console.log (id, status, numbers ) ;