ES6变量解构赋值

时间：2024-11-09 20:07:32

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
ES6之前我们申明多个变量需要按照下面的方法：

let l a=1;

let b=2;

let c=3;

let d=4;

//或者

let a=1,b=2,c=3,d=4;

现在我们可以更加简便

let[a,b,c,d]=[1,2,3,4]

这种方法需要连边结构完全对上，左边有多余变量，会给多余变量赋值undefined，右边有多余的值，多余的自动会被忽略

let[a,[b,c,d],[e,[f,g]]]=[1,[2,3,4],[5,[6,7]]]

console.log(a,b,c,d,e,f,g)//1 2 3 4 5 6 7

let[a,b,c,d]=[1,2,3]

console.log(a,b,c,d)//1 2 3 undefined

let[a,b,c]=[1,2,3,4]

console.log(a,b,c)//1 2 3

如果等号右边的对象不是数组，就会无法解析，报错

//下面的全部报错

let [foo] = 1;

let [foo] = false;

let [foo] = NaN;

let [foo] = undefined;

let [foo] = null;

let [foo] = {};

解构赋值允许给变量默认值,如果后面给变量赋值undefined，系统会自动采用默认值

let[a=1,b,c,d]=["abort","bar","cancle","dance"]

console.log(a,b,c,d)//abort bar cancle dance

let[a=1,b,c,d]=[undefined,"bar","cancle","dance"]

console.log(a,b,c,d)//1 "bar" "cancle" "dance"

let[a=1,b]=[null,2]

console.log(a,b)//null 2

let[a=1,b]=[NaN,2]

console.log(a,b)//NaN 2

let[a=undefined,b]=[undefined,undefined]

console.log(a,b)//undefined undefined

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

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

let [x = 1, y = x] = [2];    // x=2; y=2

let [x = 1, y = x] = [1, 2]; // x=1; y=2

let [x = y, y = 1] = [];     // ReferenceError

解构赋值还可以用于对象的属性赋值

let{a,b}={a:1,b:2}

a//

b//

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

foo // "aaa"

bar // "bbb"

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

baz // undefined

我们从上面的例子可以看出对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

如果变量名与属性名不一致，必须写成下面这样。

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

baz // "aaa"

let obj = { first: 'hello', last: 'world' };

let { first: f, last: l } = obj;

f // 'hello'

l // 'world'

上面的例子等价于下面,其实就是个左右一一对应的意思

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

foo//"aaa"

bar//"bbb"

与数组一样，解构也可以用于嵌套结构的对象。

let obj = {

  p: [

    'Hello',

    { y: 'World' }

  ]

};

let { p: [x, { y }] } = obj;

x // "Hello"

y // "World"

一定要看清楚他的左右对应关系

var node = {

  loc: {

    start: {

      line: 1,

      column: 5

    }

  }

};

var { loc, loc: { start }, loc: { start: { line }} } = node;

line //

loc  // Object {start: Object}

start // Object {line: 1, column: 5}

对象解构赋值也可以设置默认值

var {x = 3} = {};

x //

var {x, y = 5} = {x: 1};

x //

y //

var {x: y = 3} = {};

y //

var {x: y = 3} = {x: 5};

y //

var { message: msg = 'Something went wrong' } = {};

msg // "Something went wrong"

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

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

a // "h"

b // "e"

c // "l"

d // "l"

e // "o"

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

let {length : len} = 'hello';

len //
let {toString: s} = 123;

s === Number.prototype.toString // true

let {toString: s} = true;

s === Boolean.prototype.toString // true

let { toString : s } = 123;

// 可以换成两步

let temp = new Number(123);

let { toString : s } = temp;

// temp对象因为有toString属性，所以解构成功，然后将toStirng变量用新的变量s代替

let { a : s } = 123 是因为解构失败，所以是undefined

变量解构赋值的用途
一.交换变量的值

let a=1;

let b=2;

[a,b]=[b,a]

console.log(a,b)//2 1

二.从函数返回多个值，用来接收返回值

function f(a,b){

var num=a+b;

var aver=(a+b)/arguments.length;

return[num,aver,a*b,a*a+b*b]

}

let[x,y,z,p]=f(2,3)

console.log(x,y,z,p)//5 2.5 6 13

function f1(){

return {a:1,b:2}}

let {a,b}=f1()

console.log(a,b)//1 2

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

function f1([x,y,z]){

return x+y+z}

f1([1,2,3])//

参数也可以是无序的

function f2({a,c,d,f,b}){

return a+c+d+f+b}

f2({a:1,b:2,c:3,d:4,f:5})//

解构赋值对提取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]

....

相关文章