12、ES6 解构赋值的7个用途

来源：互联网发布：网络用语otp是什么意思编辑：程序博客网时间：2024/06/05 11:16

解构赋值的用途：

1、交换变量的值

2、从函数返回多个值

3、函数参数的定义

4、提取json数据

5、函数参数的默认值

6、遍历Map解构

7、输入模块的指定方法

------------------------------------------------------1、交换变量的值-------------------------

<!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">
       //ES5
       console.log("ES5");
       var a=100;
       var b=200;
       console.log("交换前：");
       console.log("a="+a); //100
       console.log("b="+b); //200

       var temp=a;
       a=b;
       b=temp;

       console.log("交换后：");
       console.log("a="+a); //200
       console.log("b="+b); //100

       //ES6
       console.log("ES6:");
       var x=100;
       var y=200;
       console.log("交换前：");
       console.log("x="+x); //100
       console.log("y="+y); //200

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

       console.log("交换后：");
       console.log("x="+x); //200
       console.log("y="+y); //100

       //好处：1更直观的代码；2、方便，而且不用声明多一个中间变量temp去占用内存，因为后面我们并没有释放temp的内存，即提升了性能
    </script>
</head>
<body>

</body>
</html>

-----------------------------------------2、从函数返回多个值:返回一个数组---------------------------

<!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(){
           return [1,2,3]; //函数内一般只能返回一个值，如果要返回多个值我们一般使用数组或者对象
        };
        console.log(fun()); //[1, 2, 3]
        //如果要取数组下标为2的一个值就比较麻烦了

        //可采用如下方法
        var [x,y,z]=fun();
        console.log(x); //1
        console.log(y); //2
        console.log(z); //3

        var [x]=fun();
        console.log(x); //1

        //用数组解构，用哪个取哪个非常的方便
        //使用的条件是：函数里面返回的是一个数组，所以我们用数组来接收
    </script>
</head>
<body>

</body>
</html>

------------------------------------------2、从函数返回多个值:返回一个对象--------------------------------

<!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(){
          return {
              id:"007",
              name:"lyf",
              age:22
          };
       };

       var {id,name,age}=fun(); //也可定义为其它的名字如var {id:personid,name:personname,age:personage}然后调用的时候用该名字调用即可
       console.log(id); //007
       console.log(name); //lyf
       console.log(age);   //22
    </script>
</head>
<body>

</body>
</html>

------------------------------------------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 fun([x,y,z]){
             //x=100,
             //y=200,
             //z=300
       };
       fun([100,200,300]);

       //参数是一组无次序的值
       function fun({id,name,age}){
           //id="13",
           //name="lyf",
           //age=22
       };
       fun({id:"13",age:22,name:"lyf"});
    </script>
</head>
<body>

</body>
</html>

------------------------------------4、提取json数据----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提取json数据</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
       var jsonData={
          id:"13",
          name:"lyf",
          age:22,
          score:[98,148,107]
       };
       console.log(jsonData);

       console.log("ES5:");
       console.log("my name is:"+jsonData.name); //my name is:lyf
       console.log("my age is:"+jsonData.age); //my age is:22
       console.log("my chinese score is:"+jsonData.score[0]); //my chinese score is:98
        console.log("my math score is:"+jsonData.score[1]); //my math score is:148
         console.log("my english score is:"+jsonData.score[2]); //my english score is:107

         console.log("ES6:");
         let {id:number,name,age,score}=jsonData;
         console.log(number); //13
         console.log(name);    //lyf
         console.log(score[0]); //98
    </script>
</head>
<body>

</body>
</html>

-------------------------------------------5、函数参数的默认值-----------------------------

<!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">
       jQuery.ajax({               //需引入jquery.js才有效
         url: '/path/to/file',
         type: 'POST',
         dataType: 'xml/html/script/json/jsonp',
         data: {param1: 'value1'},
         complete: function(xhr, textStatus) {
           //called when complete
         },
         success: function(data, textStatus, xhr) {
           //called when successful
         },
         error: function(xhr, textStatus, errorThrown) {
           //called when there is an error
         }
       });

       jQuery.ajax=function (url,{
          async=true,
          beforeSend=function(){
              cache=true,
              complete=function(){
                  crossDomain=false,
                  global=true,
                  //...more config
              }
          }

       });

       //避免了在函数体内部再写var foo=config.foo ||'default foo';这样的语句


    </script>
</head>
<body>

</body>
</html>

---------------------------------------6、遍历Map解构----------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历Map解构</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
       var map=new Map();
       map.set("id","007");
       map.set("name","lyf");

       console.log(map);
       console.log(typeof map);

       //获取键名和键值
       for(let [key,value] of map){
          console.log(key + " is " +value);
          //id is 007
          //name is lyf
       }

       //获取键名
       for(let [key] of map){
          console.log(key);
          //id
        //name
       }

       //获取键值
       for(let [,value] of map){
          console.log(value);
          //007
          //lyf
       }
    </script>
</head>
<body>

</body>
</html>

------------------------------------------------------------7、输入模块的指定方法----------------------

<!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">
       const {SourceMapConsumer,SourceNode}=require("source-map"); //需引入require.js,才会正常运行
    </script>
</head>
<body>

</body>
</html>

阅读全文

0 0