解构赋值

ES6 允许按照一定模式,从数组或对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

在es6中,允许赋值过程中,等号左边是一个模式(数组或对象)json,只要右边的模式与之对应,就可以一次性做多次赋值。

数组的解构赋值

// let a = 1;
    // let b = 2;
    // let c = 3;
    let [a, b, c] = [1, 2, 3];

    console.log(a, b, c);

数组的解构赋值,原则就是按索引值的顺序,依次赋值

如果左边多余等号右边

let [a, b, c] = [1, 2];
	let a = 1;
	let b = 2;
	let c;

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

没有对应值的变量不会被赋值,默认值及时未定义。

let [a, b, ...c] = [1, 2];

    console.log(a, b, c);//1,2,[]

解构赋值左边可以采用扩展运算符,附加扩展运算符的变量必须时最后一个。

如果变量前加上了扩展运算符,那么得到的值一定是数组,即使没有对应关系,也会得到空数组。

等号右边多于等于左边:

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

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

数组的解构赋值,是按照索引值顺序来赋值的。

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

    console.log(a, b, c);//1,4,5

如果我们将变量放在不同的索引位置,就可以取得对应的值。

let [a, , , b, ...c] = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    console.log(a, b, c);//1,4,[5,6,7,8,9]

对象的解构赋值

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

    console.log(a, b)//1,2
let { a: aa, b: bb } = { a: 1, b: 2 };

    console.log(aa, bb)//1,2

对象的解构赋值:对象没有索引值但是有名称,对象的名称是对应关系,实际赋值的是对象的值。

let { a, f, ...c } = { a: 1, b: 2, c: 3, d: 4 };

    console.log(a, f, c)//1 undefined {b: 2, c: 3, d: 4}

与数组的解构赋值类似,没有匹配到的变量不会赋值,默认值为未定义,也可以使用扩展运算符,结果是对象。

...在对象的解构赋值里,表示除了,对象的属性不区分位置(索引)。

let { a, ...c } = { a: 1 };

    console.log(a, c);//1,{}

对象的扩展运算符要求结果是对象,没有赋值则为空对象。

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

对于解构赋值,等号左边不是真正的数组或对象格式,只是为了赋值而形成的对应模式。

对于上面的例子,拆分开是如下的形式:

let p = [
      'Hello',
      {
        y: 'World'
      }
    ]
    let x = 'Hello'
    let y = 'World'

字符串的解构赋值

js的字符串本质上讲是对象,但同时带有遍历器接口,因此,js的字符串类型既可以使用数组的解构赋值,也可以使用对象的解构赋值。

let s = new String('abc');

    console.log(s);
0: "a"
1: "b"
2: "c"
length: 3

用数组的解构赋值可以读出每个字符:

let [a, b, c, ...d] = 'abcdef';

    console.log(a, b, c, d)//a,b,c,[d,e,f]

	//讲字符串转数组
	let [...arr] = 'abcdef';

用对象的解构赋值:

let s = 'abcd';
    let { '0': x, '1': y, 'length': size } = s;

    console.log(x, y, size)

可以用索引值取得对应的字符,也可以直接读取length属性。

用途

不通过其他变量,直接交换两个变量的值。

let x = 1;
let y = 2;

[x, y] = [y, x];

字符串转数组

let s = 'abcdef';
let [...arr] = s;

解构赋值结合扩展运算符,可以极大的简化语句。经常用在:获取对象或数组中的部分值,函数在获取固定格式的参数时

扩展

在es6中,函数的参数可以设置默认值:

aa(1, false);
    function aa(a, b = 123) {
      console.log(a, b)
    }

如果有对应的值,则默认值失效

如果没有传入对应的值,或传入的值为underfined,则使用默认值

函数被调用时的参数获取,也是赋值的过程,意义可以使用解构赋值

JSON

// JSON.stringify();//将json类型的数据转化为字符串

// JSON.parse();//将字符互传转化为js可以使用的对象+数组的形式