js解构赋值

js解构赋值

用法1
交换变量，在没有使用解构前，我们如果要交换两个变量的值，是需要借用第三个变量的，使用解构之后，可以不用通过第三个变量。看下面例子：

        var x = 10,
            y = 20;
        [x, y] = [y, x]
        alert("x:" + x + " y:" + y)

解构：

用法2：
函数可以返回多个值，在传统的函数中，函数一般只能返回一个值，但是通过解构赋值，函数可以返回多个值。看下面例子：

        function show() {
            return ["结果1", "结果2", "结果3"];
        }

        var [a, b, c] = show();
        alert(a + "," + b + "," + c);

结果：

用法3：
函数定义参数，传入的参数的顺序可以改变。在传统函数中，我们定义了函数形参，在传入实参的时候，需要根据传入的形参顺序传入。解构赋值可以改变传入参数顺序。看下面例子。（注意形参和实参有大括号包裹着）

        function showSelf({name,age,sex}) {
            alert("我叫" + name + ",今年" + age + ",是一位" + sex + "性");
        }
        showSelf({sex: "男",name: "小明",age: 18})

结果：

用法4
参数可以带默认值。如果函数对参数设置默认值，我们不传入对应的实参的话，函数会输入我们设置的默认值。看下面例子：

        function showSelf({name,age,sex="男"}) {
            alert("我叫" + name + ",今年" + age + ",是一位" + sex + "性");
        }
        showSelf({,name: "小明",age: 18})

结果：

用法5：
快速取出数组中某个元素。

        var arr = [10, 20, 30, 40, 50];
        var {
            0: first,
            4: last
        } = arr;
        console.log(first);
        console.log(last == arr[4]);

结果：