数据解构

No tag

Publish Date: 2023-01-11

ES6—数据解构

来同质化的代码解构赋值表达式的值与表达式右侧(也就是=右侧)的值相等，如此一来，在任何可以使用值的地方都可以使用解构赋值表达式
–对应，有就有没有就不存在

对象解构

let  myObj = {
    type:'name',
    value:'yongge'
}
let { type, value, name} = myObj
console.log(type)  //
console.log(value) //
console.log(name)  // undefined

如果使用var、let、const解构声明变量，必须要提供初始化程序（也就是等号右侧的值），否则会导致程序抛出语法错误

解构出来的变量一定要是对象中能够查找到的属性名当指定的属性不存在时，可以随意定义一个默认值，在属性名称后添加一个等号(=)和相应的默认值即可 (直接定义个默认值)
如果解构出来的属性在对象中查找不到，值为undefined

let  myObj = {
    type:'name',
    value:'yongge'
}
let { type, value, name='姓名'} = myObj
console.log(type)  //
console.log(value) //
console.log(name)  //  姓名

解构出来的变量虽然是跟属性名称相同，但是他不再是属性，而是外部的变量，这个变量名也可以被修改，不一定要跟属性同名
上面的都是同名的变量为非同名局部变量赋值
假如想要换个变量右边大括号里面重新申明下 xx:oo 旧的名称 : 新的名称

let  myObj = {
    type:'name',
    value:'yongge'
}
let { type:localType, value:localTValue} = myObj
console.log(localType)  //
console.log(localTValue) //

嵌套对象解构

let myObj = {
    type:'name',
    value:'yongge',
    child:{
        firstObj:{
            childType:'sex',
            childValue:'nan'
        },
        secondObj:{
            childType:'sex',
            childValue:'nv'
        }
    }
}
let {child:{firstObj:newObj}} = myObj
console.log(newObj)  //

先找一层在进一层找可以点属性获取值

数组解构

为需要的元素提供变量名

let colors = ['red','green','blue']
let [firstColor,secondColor] = colors;
console.log(firstColor);//"red"
console.log(secondColor);//"green"

对于不需要的解构的值

let [ , ,thirdColor] = colors
console.log(thirdColor);

如果我们先声明了变量，之后也可以直接通过解构赋值修改变量的值。

let colors = ['red','green','blue'],firstColor = 'black',secondColor = 'yellow';
[firstColor,secondColor] = colors;

console.log(firstColor);//"red"
console.log(secondColor);//"green"

可以在数组解构赋值表达式中为任意变量添加默认值。注意：：：：只有当该位置在右侧数组中的值不存在时或值为undefined时，默认值才会生效。

let colors = ['red','green','blue'];
[firstColor,secondColor,thirdColor='orange'] = colors;

console.log(firstColor);//""
console.log(secondColor);//""
console.log(thirdColor);//""

嵌套数组解构赋值

let arr = [ 10, [ 20, 30 ], 40 ];
console.log( arr[1][1] ); //30

let [ one, two, three, four ] = arr;
console.log( one, two, three, four ); //

[ one, [ two, three ], four ] = arr; //
console.log( one, two, three, four ); //10 20 30 40

字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

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

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

1 2	let {length : len} = 'hello'; len // 5

数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
1
2
3
4
5
let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

解构赋值的规则是，只要等号右边的值不是对象，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

1 2	let { prop: x } = undefined; // TypeError let { prop: y } = null; // TypeError

解构交换变量值

1
2
3

let a =10 , b = 8;
[a,b]=[b,a]
console.log(a,b)

解构中的不定参数(…)

1
2
3

let arr =[10,20,30]
let [first,...others ] = arr
console.log(first,others)

复制数组

ES5

1
2
3

let arr = [ 10, 20, 30 ];
let newArr = arr.concat();
console.log( newArr );

用解构与不定参数结合复制数组

ES6

1
2
3

let arr = [ 10, 20, 30 ];
let [...newArr] = arr;
console.log( newArr );

解构表达式传参

方法可以接受解构表达式

function show ({name,age}){
    console.log(name,age)
}
let obj = {
    name:'yongge',
    age:'28'
}
show (obj)    //函数里面可以写成表达式 {name，age} = obj

function add([x, y]){
return x + y;
}

add([1, 2]); // 3