ES6——Day3(解构赋值的用途)

    xiaoxiao2021-03-25  102

    (1)交换变量的值

    案例1-1:ES5

    <script type="text/traceur"> //ES5 console.log("ES5:"); var a =100; var b= 200; console.log("交换前:"); console.log("a="+a); console.log("b="+b); var temp; temp=a; a=b; b=temp; console.log("交换后:"); console.log("a="+a); console.log("b="+b); </script> 解析: 交换前:a=100   b=200

                   交换后:a=200   b=100

    案例1-2:ES6

    <script type="text/traceur"> //ES6 console.log("ES6:"); var x=100; var y=200; console.log("交换前:"); console.log(x); console.log(y); //采用解构赋值 [x,y] = [y,x]; console.log("交换后:"); console.log(x); console.log(y); </script> 解析:  交换前:a=100   b=200

                   交换后:a=200   b=100

    (2)从函数返回多个值

    2-1:返回数组.html

    function fun(){ return [1,2,3]; }; var [x,y,z] = fun(); console.log(x); //1 console.log(y); //2 console.log(z); //3 2-2:返回一个对象.html

    function fun(){ return { id:"007", name:"Zhangsan", age:12 }; }; var {id,name,age} = fun(); console.log(id); //007 console.log(name); //Zhangsan console.log(age); //12 var {id:person_id,name:person_name,age:person_age} =fun(); console.log(person_id); //007 console.log(person_name); //Zhangsan console.log(person_age); //12

    (3)函数参数的定义

    //参数是一组有次序的值 function fun([x,y,z]){ //x=100; //y=200; //z=300; } fun([100,200,300]); //参数是一组无次序的值 function fun(){ //id="007", //name="Zhangsan", //age=12; }; fun({id:"007",name:"Zhangsan",age:12});

    (4)提取json数据

    <script type="text/traceur"> var jsonData={ id:"007", name:"Zhangsan", age:12, score:{ Chinese:101, Math:120, English:130 } }; console.log(jsonData); console.log("ES5:"); console.log("Person's name is:" + jsonData.name); console.log("Person's Chiese score is:" + jsonData.score.Chinese); console.log("ES6:"); let {id:number, name, age, score:score} = jsonData; console.log("Person's id is:" + number); //007 console.log("Person's age is:" +age); //12 console.log("Person's Chinese score is:" +score.Chinese); //101 </script> (5)函数参数的默认值

    <script type="text/traceur"> jQuery.ajax({ url:'add.php', type:'POST', dataType:'xml/html/script/json/jsonp', data:{param1:'value'}, complete:function(xhr,textStatus){ // }, success:function(data,textStatus,xhr){ // }, error:function(xhr,testStatus,errorThrown){ // } }); jQuery.ajax = function(url,{ async = true; beforeSend=function(){}, cache=true, complete=funtion(){}, crossDomain=false, global=true, }){ }; </script> 解析:上述方法中,避免了函数体内部再写var foo = config.foo || 'default foo';这样的语句。

    第一种:为直接函数进行方法使用;第二种:更接近于对象的概念进行函数赋值。

    (6)遍历Map[地图]结构

    <script type="text/traceur"> var map=new Map(); map.set("id","007"); map.set("name","Zhangsan"); console.log(map); //Map{"id"=> "007","name"=> "Zhangsan"} //获取键名和键值 for(let [key,value] of map){ console.log(key+"is" + value); }; //id is 007 //name is Zhangsan //获取键值 for(let [key] of map){ console.log(key); } //id //name </script>

    (7)输入模块的指定方法

    <script type="text.traceur"> const {SourceMapConsumer,SourceNode} = require("source-map"); </script>

    转载请注明原文地址: https://ju.6miu.com/read-23717.html

    最新回复(0)