ES6-数组的解构赋值

一. 概念：解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或者常量。

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

二. 数组的解构赋值-解构匹配，索引值相同完成赋值

1.多维数组的解构

const [a, , c] = [1, [2, 3, 4], 5];
        console.log(a, c);//1 5 不取的可以先空着
//-----------------------------------------

const [a, b, c] = [1, [2, 3, 4], 5];
        console.log(a, b, c);//1 [2,3,4] 5
//--------------------------------------

 const [a, [, , b], c] = [1, [2, 3, 4], 5];
        console.log(a, b, c);//1 4 5
//---------------------------------------

const [, a] = [1, [2, 3, 4], 5];
        console.log(a);//[2, 3, 4]

 2.默认值

//生效条件 当数组成员===undefined，它的默认值才会生效
const [a, b] = [];
        // 相当于const [a, b] = [undefined, undefined];
        console.log(a, b);//undefined undefined
//--------------------------------------------------------------

 const [a = 1, b = 2] = [];//a = 1, b = 2 这就是设置默认值
        // 相当于const [a, b] = [undefined, undefined];
        console.log(a, b);//1 2
//-------------------------------------------------------------

//默认值是表达式，惰性求值
function fn() {
            console.log(1);
            return 1;
        }
        const [a = 1, b = fn()] = [1, 2];//因为默认值没生效，fn()这句代码不会执行

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

 

3.应用

①类数组的解构赋值

function fn() {
            console.log(arguments);//[1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
            const [a, b, c] = arguments;
            console.log(a, b, c);//1 2 undefined
        }
        fn(1, 2);

<p>1</p>
<p>2</p>
<p>3</p>
    <script>
        var ps = document.querySelectorAll('p');
        console.log(ps);
        const [a, b, c] = ps;
        console.log(a, b, c);
    <script>

②函数参数的解构赋值

const fn = ([a = 1, b = 2]) => {//这里的形参小括号不能省，因为参数的解构赋值相当于[a=1,b=2]=[3,4]是表达式不是单个参数，形参是[a=1,b=2]这个整体
            console.log(a, b);//3,4
        }
        fn([3, 4]); //传参过程就相当于形参=实参，相当于[a=1,b=2]=[3,4]，可以解构赋值

③交换变量的值

let a = 1;
        let b = 2;
        //赋值等号右边是会求值然后赋值给左边的变量或者常量
        [a, b] = [b, a]//这里a,b已经声明了，不能重复声明a,b了，也就是不能再let[x,y]=[y,x]了；