您的位置：首页 > 其它

11、ES6 函数参数的解构赋值

2017-12-05 10:45 483 查看

函数参数的解构赋值

      1、函数的参数也可以使用解构

      2、函数参数的解构也可以使用默认值

函数的参数也可以使用解构赋值。

function add([x,y]){

         return x+y;

      }

      console.log(add([1,2])); //3

上面代码中，函数 add 的参数实际上不是一个数组，而是通过解构得到的变量 x 和 y。

下面是另一个例子。

let obj=[[1,2],[3,4]].map(([a,b]) => a+b);

      let [x,y]=obj;

      console.log(x); //3

      console.log(y); //7

函数参数的解构也可以使用默认值。

function move({x=0,y=0}={}){

         return [x,y];

      }

      console.log(move({x:3,y:4})); //[3, 4]

      console.log(move({x:3})); //[3, 0]

      console.log(move({})); //[0, 0]

      console.log(move()); //[0, 0]

上面代码中，函数 move 的参数是一个对象，通过对这个对象进行解构，得到变量 x 和 y 的值。如果解构失败， x 和 y 等于默认值。

注意，下面的写法会得到不一样的结果。

function move({x,y}={x:0,y:0}){

         return [x,y];

      }

      console.log(move({x:3,y:4})); //[3, 4]

      console.log(move({x:3})); //[3, undefined]

      console.log(move({})); //[undefined, undefined]

      console.log(move()); //[0, 0]

上面代码是为函数 move 的参数指定默认值，而不是为变量 x 和 y 指定默认值，所以会得到与前一种写法不同的结果。

undefined就会触发函数参数的默认值。

let obj=[1,undefined,3].map((x='yes')=>x);

      console.log(obj); //[1, "yes", 3]

---------------------------------------------------------------函数参数的解构赋值--------------------

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>函数参数的解构赋值</title>

    <script src="js/traceur.js"></script>

    <script src="js/bootstrap.js"></script>

    <script type="text/traceur">

       //以前的写法

        /*function sum(x,y){

           return x+y;

        };

         sum(1,2);*/

         //现在的写法

         function sum([x,y]){

            return x+y;

         };

         console.log(sum([1,2])); //3

    </script>

</head>

<body>



</body>

</html>

-------------------------------------------函数参数解构赋值的默认值-------------------

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>函数参数解构赋值的默认值</title>

    <script src="js/traceur.js"></script>

    <script src="js/bootstrap.js"></script>

    <script type="text/traceur">

       function fun({x=0,y=0}={}){

              return [x,y];

       };

       console.log(fun({x:100,y:200})); //[100,200]

       console.log(fun({x:100})); //[100,0]

       console.log(fun({})); //[0,0]

       console.log(fun());    //[0,0]

    </script>

</head>

<body>



</body>

</html>

--------------------------------------------------函数参数解构赋值的默认值---------------------------

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>函数参数解构赋值的默认值undefined</title>

    <script src="js/traceur.js"></script>

    <script src="js/bootstrap.js"></script>

    <script type="text/traceur">

       function fun({x,y}={x:0,y:0}){ //只是做了声明变量而已并没有做解构赋值，它的值多少取决于传进去的参数，如果没有传参，默认undefined

              return [x,y];

       };

       console.log(fun({x:100,y:200})); //[100,200]

       console.log(fun({x:100})); //[100, undefined]

       console.log(fun({})); //[undefined, undefined]

       console.log(fun());    //[0,0] //没传任何参数，它认为没有在函数参数中做解构赋值而是认为在对象中做了解构赋值，即当作函数内部的一条语句运行

    </script>

</head>

<body>



</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航