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

来源：互联网发布：java listfiles 过滤编辑：程序博客网时间：2024/06/07 11:46

函数参数的解构赋值

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

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

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

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

上面代码是为函数‘‡ 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>

阅读全文

0 0