(6)解构赋值的用途
解构赋值的用途
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)解构赋值的用途相关推荐
- json解析 子类和父类同名属性如何赋值_想学变量的解构赋值?看完这一篇就够了...
序言 ES6允许按照一定模式从数组和对象中提取值,然后对变量进行复制,这被称为解构(Destructuring) 数组的解构赋值 基本用法 像上面的例子,可以从数组中提取值,按照对应位置对变量赋值,这 ...
- 第五节:一个令人兴奋的ES6新特性:解构赋值
端午节刚刚过,大家是回家陪家人吃粽子,还是约好朋友一起出去浪了?昨天上了一天班,不知道大家有没有把出去玩耍的心思收回来,准备接下来的学习. 继续学习吧骚年们...... 学完了前4节,今天我给大家带来 ...
- [ES6] 细化ES6之 -- 变量的解构赋值
变量的解构赋值 解构赋值是什么 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值 var/let [变量名称1,变量名称2,...] = 数组或对象 本质上,这种写法属于"模式 ...
- (34)2021-02-24(ES6变量的解构赋值)
ES6变量的解构赋值 一. 变量的解构赋值 1.什么是解构 2.数组解构赋值 不完全解构 3.对象解构赋值 方法解构 注意点 4.字符串解构 5.函数参数的解构赋值 6.用途 6.1 交换变量的值 6 ...
- 2021-02-24let和const,变量的解构赋值,函数扩展
文章目录 let 1.ES6简介 2.let关键字 2.1 不存在变量提升 2.2 暂时性死区 2.3 不允许重复声明 3.块级作用域 3.1 为什么需要块级作用域 缺点1:内部变量可能会覆盖外层的变 ...
- ECMAScript6变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring) ###数组的解构赋值 //ES5 //var a = 1; //var b = 2; //va ...
- es6学习 -- 解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c ...
- ES6的新特性(3)——变量的解构赋值
变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; le ...
- ECMAScript 6入门 - 变量的解构赋值
定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...
最新文章
- 苹果7【】闪存测试软件,不厚道!iPhone7大容量版竟采用TLC闪存
- linux sftp没有读写权限,sftp服务器上的Linux权限问题
- Bootstrap页面布局13 - BS按钮
- curl -O 下载文件
- 作者:​高晨旭(1990-),男,北京系统工程研究所研究实习员。
- ExtJS监听键盘事件:回车键实现登录功能
- cups 设置打印机纸张_惠普打印机打印模糊怎么办 惠普打印机打印模糊解决【方法】...
- 【Clickhouse】Clickhouse PRIMARY KEY, CONSTRAINT, identifier, column declaration, INDEX
- 如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效
- Altium Designer入门与进阶教程系列
- Windows的资源监视器
- Manjaro 个人新装配置
- 数据库基本概念、DBMS、DBS
- lc谐振计算机网络,LC谐振回路解析,LC谐振回路的选频特性
- AR(增强现实)技术是什么,未来发展会怎样
- 百度推广禁推SEO业务,2020年SEO该何去何从?
- 去除IOS升级提示小红点
- Codeforces Round #619 (Div. 2)
- 卡拉兹猜想证明用python_科普:数学领域中的感觉像是“民科”的卡拉兹猜想
- Python+ESP32 快速上手(九、控制1602LCD屏幕显示内容