解构赋值的用途
1.交换变量的值

var a = 100;
var b = 200;
var t;
t = a;
a = b;
b = t;
//解构赋值的写法完成【ES6交换变量的值】
var x = 100;
var y = 200;
[x, y] = [y, x];
console.log(x);
console.log(y);
优点1:直观
优点2:一一对应
优点3:节省内存空间(不用多申请变量)

2.从函数返回多个值

//从函数返回多个值_返回一个数组
function fun () {return [1, 2, 3];
};
console.log(fun()[1]); //2function 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 : 'jewave',age     : 26};
};var { id, name, age} = fun();
console.log(id);//7
console.log(name);//jewave
console.log(age);//26var { id: person_id, name: person_name, age: person_age} = fun();
console.log(person_id);
console.log(person_name);
console.log(person_age);

3.函数参数的定义

(1)参数是一组有次序的值(通常用其他函数将参数封装成“数组的解构赋值”来解构)
fun([100, 200, 300]);
function fun ([x, y, z]) {//x = 100;  y = 200; z = 300;
};(2)参数是一组无次序的值(通常用其他函数将参数封装成“对象的解构赋值”来解构,例如ajax)
fun({id: '007', name: 'jewave', age: 26});
function fun ({id, name, age}) {//id =  '007'; name = 'jewave';  age= 26;
};

4.提取json数据

var jsonData = {id: '007', name: 'jewave', age: 26,score:{chinese: 98}
};
//console.log(jsonData);
console.log('name is' + jsonData.name);
console.log('age is' + jsonData.age);
console.log('chinese score is' + jsonData.score.chinese);//98

console.log('ES6');
let { id: number, name, age, score: score } = jsonData;
console.log(number);
console.log(age);
console.log(score.chinese);

5.函数参数的默认值

//之前的写法,以jQ中的ajax为例
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';

6.遍历Map结构

var map = new Map();
map.set('id','007');
map.set('name','jewave');consle.log(map);
for(let [key, value] of map) {console.log(key + 'is' + value);
}
//{'id'=>'007','name'=>'jewave'}
//id is 007
//name is jewave//获取键名
for(let [key] of map) {console.log(key);
}
//id
//name
//

//获取键值
for(let [,value] of map) {console.log(value);
};

7.输入模块的指定方法

输入模块的指定方法(RequireJS.js框架为例)
const { SoureMapConsumer, SourceNode } = require('source-map');

转载于:https://www.cnblogs.com/jewave/p/6238607.html

(6)解构赋值的用途相关推荐

  1. json解析 子类和父类同名属性如何赋值_想学变量的解构赋值?看完这一篇就够了...

    序言 ES6允许按照一定模式从数组和对象中提取值,然后对变量进行复制,这被称为解构(Destructuring) 数组的解构赋值 基本用法 像上面的例子,可以从数组中提取值,按照对应位置对变量赋值,这 ...

  2. 第五节:一个令人兴奋的ES6新特性:解构赋值

    端午节刚刚过,大家是回家陪家人吃粽子,还是约好朋友一起出去浪了?昨天上了一天班,不知道大家有没有把出去玩耍的心思收回来,准备接下来的学习. 继续学习吧骚年们...... 学完了前4节,今天我给大家带来 ...

  3. [ES6] 细化ES6之 -- 变量的解构赋值

    变量的解构赋值 解构赋值是什么 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值 var/let [变量名称1,变量名称2,...] = 数组或对象 本质上,这种写法属于"模式 ...

  4. (34)2021-02-24(ES6变量的解构赋值)

    ES6变量的解构赋值 一. 变量的解构赋值 1.什么是解构 2.数组解构赋值 不完全解构 3.对象解构赋值 方法解构 注意点 4.字符串解构 5.函数参数的解构赋值 6.用途 6.1 交换变量的值 6 ...

  5. 2021-02-24let和const,变量的解构赋值,函数扩展

    文章目录 let 1.ES6简介 2.let关键字 2.1 不存在变量提升 2.2 暂时性死区 2.3 不允许重复声明 3.块级作用域 3.1 为什么需要块级作用域 缺点1:内部变量可能会覆盖外层的变 ...

  6. ECMAScript6变量的解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring) ###数组的解构赋值 //ES5 //var a = 1; //var b = 2; //va ...

  7. es6学习 -- 解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c ...

  8. ES6的新特性(3)——变量的解构赋值

    变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; le ...

  9. ECMAScript 6入门 - 变量的解构赋值

    定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...

最新文章

  1. 苹果7【】闪存测试软件,不厚道!iPhone7大容量版竟采用TLC闪存
  2. linux sftp没有读写权限,sftp服务器上的Linux权限问题
  3. Bootstrap页面布局13 - BS按钮
  4. curl -O 下载文件
  5. 作者:​高晨旭(1990-),男,北京系统工程研究所研究实习员。
  6. ExtJS监听键盘事件:回车键实现登录功能
  7. cups 设置打印机纸张_惠普打印机打印模糊怎么办 惠普打印机打印模糊解决【方法】...
  8. 【Clickhouse】Clickhouse PRIMARY KEY, CONSTRAINT, identifier, column declaration, INDEX
  9. 如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效
  10. Altium Designer入门与进阶教程系列
  11. Windows的资源监视器
  12. Manjaro 个人新装配置
  13. 数据库基本概念、DBMS、DBS
  14. lc谐振计算机网络,LC谐振回路解析,LC谐振回路的选频特性
  15. AR(增强现实)技术是什么,未来发展会怎样
  16. 百度推广禁推SEO业务,2020年SEO该何去何从?
  17. 去除IOS升级提示小红点
  18. Codeforces Round #619 (Div. 2)
  19. 卡拉兹猜想证明用python_科普:数学领域中的感觉像是“民科”的卡拉兹猜想
  20. Python+ESP32 快速上手(九、控制1602LCD屏幕显示内容

热门文章

  1. 交流一点CCNP学习经验
  2. Android的API与差异化之路
  3. [ZZ]Map/Reduce hadoop 细节
  4. 比特币和以太坊本质有什么区别?
  5. r语言 编辑 d3.js_d3.js的语言介绍
  6. linux 端口 流量统计,Linux下如何对端口流量进行统计
  7. 1069 The Black Hole of Numbers
  8. python和idl_有前辈对比过IDL和Python的速度吗,哪个会快点?
  9. 零基础java培训如何规划学习路线
  10. 如何挑选靠谱的Java培训机构