ES6——Day3（解构赋值的用途）

太过爱你忘了你带给我的痛 2022-09-28 11:45 123阅读 0赞

（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>

发表评论取消回复

表情：

评论列表（有 0 条评论，123人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6解构赋值

ES6 解构赋值概述解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明

迷南。/ 2022年11月01日 15:50/ 0 赞/ 269 阅读

相关 ES6——Day3（解构赋值的用途）

（1）交换变量的值案例1-1：ES5 <script type="text/traceur"> //ES5 console.log("ES5:"); var a

太过爱你忘了你带给我的痛/ 2022年09月28日 11:45/ 0 赞/ 124 阅读

相关 ES6——Day3（字符串的解构赋值+函数参数解构赋值）

1、字符串也可以进行解构赋值形成一个类似于“数组”的对象。案例1-1：简单的字符串（类似于“数组”） <script type="text/traceur">

旧城等待，/ 2022年09月28日 11:44/ 0 赞/ 171 阅读

相关 ES6——Day3（对象的解构赋值）

解构不仅可以用于数组，也可以用于对象。对象解构赋值与数组解构赋值有什么异同呢？（1）对象的属性没有次序，变量必须与属性同名，才能渠道正确的值；（2）指定默认值时，对象默

布满荆棘的人生/ 2022年09月28日 05:53/ 0 赞/ 208 阅读

相关 ES6～解构赋值

解构赋值：定义： ES6按照统一模式，从数组和对象中提取值，对变量进行赋值，这样被称为解构．注意： \\1.\\node.js目前還不支持解构赋值，所以

刺骨的言语ヽ痛彻心扉/ 2022年06月05日 01:53/ 0 赞/ 318 阅读

相关 ES6解构赋值

原文转自[https://www.cnblogs.com/xiaohuochai/p/7243166.html][https_www.cnblogs.com_xiaohuoch

﹏ヽ暗。殇╰゛Y/ 2022年05月11日 16:24/ 0 赞/ 331 阅读

相关 es6 解构赋值

ES6解构赋值传统的变量赋值：变量的解构赋值：数组的解构赋值: 对象的解构赋值:\`(和数组解构赋值类似)\`

短命女/ 2022年02月05日 11:13/ 0 赞/ 393 阅读

相关 es6解构赋值

解构赋值如对象解构 // es6 const electron = require('electron') const { app, Br

Myth丶恋晨/ 2021年12月23日 16:33/ 0 赞/ 380 阅读

相关 ES6——解构赋值

原文链接：[小邵教你玩转ES6][ES6] 解构赋值解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们赋值是这样的 let arr = [0

迷南。/ 2021年11月04日 21:46/ 0 赞/ 507 阅读

相关 ES6解构赋值

ES6解构赋值一、什么是解构赋值二、语法 1.数组解构 2.对象解构三、注意点一、什么是解构赋值允许从数组中

客官°小女子只卖身不卖艺/ 2021年09月07日 06:10/ 0 赞/ 470 阅读