ES6-解构赋值的用途

交换变量的值:

 #ES5
console.log("ES5:");
var a = 100;
var b = 200;
console.log("交换前:");
console.log("a = " + a);    //a = 100
console.log("b = " + b);    //b = 200
var temp;
temp = a;
a = b;
b = temp;
console.log("交换后:");
console.log("a = " + a);    //a = 200
console.log("b = " + b);    //b = 100

#ES6
console.log("ES6:");
var x = 100;
var y = 200;
console.log("交换前:");
console.log("x = " + x);    //x = 100
console.log("y = " + y);    //y = 200
[x, y] = [y, x];
console.log("交换后:");
console.log("x = " + x);    //x = 200
console.log("y = " + y);    //y = 100

从函数返回多个值:

      function fun () {
    return [1, 2, 3];
};

var [x, y, z] = fun();
console.log(x); //1
console.log(y); //2
console.log(z); //3

案例二:

 function fun () {
    return {
        id  : "007",
        name: "Conan",
        age : 28
    };
};

var { id, name, age } = fun();
console.log(id);    //007
console.log(name);  //Conan
console.log(age);   //28

var { id: person_id, name: person_name, age: person_age } = fun();
console.log(person_id);     //007
console.log(person_name);   //Conan
console.log(person_age);    //28

函数参数的定义:

 // 参数是一组有次序的值
function fun ([x, y, z]) {
    //x = 100;
    //y = 200;
    //z = 300;
};
fun([100, 200, 300]);

// 参数是一组无次序的值
function fun ({id, name, age}) {
    //id   = "007";
    //name = "Conan";
    //age  = 28;
};
fun({id: "007", name: "Conan", age: 28});

提取Json数据:

  var jsonData = {
    id: "007",
    name: "Conan",
    age: 28,
    score: {
        Chinese: 98,
        Math: 148,
        English: 107
    }
};
console.log(jsonData);

console.log("ES5:");
console.log("Person's Number is:" + jsonData.id); 
console.log("Person's Name is:" + jsonData.name);
console.log("Person's age is:" + jsonData.age);
console.log("Person's Chinese score is:" + jsonData.score.Chinese);
console.log("Person's Math score is:" + jsonData.score.Math);
console.log("Person's English score is:" + jsonData.score.English);

console.log("ES6:");
let { id: number, name, age, score: score } = jsonData;
console.log("Person's Number is:" + number);
console.log("Person's Name is:" + name);
console.log("Person's age is:" + age);
console.log("Person's Chinese score is:" + score.Chinese);
console.log("Person's Math score is:" + score.Math);
console.log("Person's English score is:" + score.English);

函数参数的默认值:

  jQuery.ajax({
  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
}) {
    // ... do stuff
};
//  避免了在函数体内部再写 var foo = config.foo || 'default foo'; 这样的语句

遍历Map结构:

var map = new Map();
map.set("id", "007");
map.set("name", "Conan");

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

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

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

for (let [, value] of map) {
    console.log(value);
};
// 007

输入模块的指定方法:

const { SourceMapConsumer, SourceNode } = require("source-map");
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前言 解构赋值是ES6引入的新特性,这个特性可以方便我们从对象取值,那么有哪些用途呢? 这里小编推荐一个福利,更多...
    小猿_Luck_Boy阅读 917评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,786评论 19 139

友情链接更多精彩内容