美文网首页
ES6-解构赋值的用途

ES6-解构赋值的用途

作者: 东邪_黄药师 | 来源:发表于2018-10-31 21:11 被阅读2次

交换变量的值:

 #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");

相关文章

  • ES6-解构赋值的用途

    交换变量的值: 从函数返回多个值: 案例二: 函数参数的定义: 提取Json数据: 函数参数的默认值: 遍历Map...

  • 什么是解构赋值?解构赋值的用途有哪些?

    什么是解构赋值?解构赋值的用途有哪些? 1.什么是解构赋值? ①定义: 解构赋值语法是一种 Javascript ...

  • 2.变量的解构赋值

    数组的解构赋值对象的解构赋值字符串的解构赋值数值和布尔值的解构赋值函数参数的解构赋值圆括号问题用途

  • ES6 变量的解构赋值

    数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 用途

  • 变量的解构赋值

    数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 用途 数...

  • ES6变量的解构赋值

    目录 1、数组的解构赋值 2、对象的解构赋值 3、字符串的解构赋值 4、函数参数的解构赋值 5、用途 1、数组的解...

  • es6-解构赋值

    什么是解构赋值 左右一一对应进行赋值。 解构赋值的分类 数组解构赋值,左右都是数组 对象解构赋值,左右都是对象 字...

  • ES6-解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 要点: 1、左右两边结构必须一样;2...

  • ES6-解构赋值

    语法 可以将值从数组或属性从对象提取到不同的变量中。 表达式左边定义了要从原变量中取出什么变量。 解构数组 数组解...

  • ES6-解构赋值

    ES6为对象和数组提供了解构功能,允许按照一定模式从对象和数组中提取值,并对变量进行赋值。 对象解构对象解构的语法...

网友评论

      本文标题:ES6-解构赋值的用途

      本文链接:https://www.haomeiwen.com/subject/vthztqtx.html