es6 函数解构的用途
es6的变量解构赋值很方便,那具体有哪些用途呢?
1、变换变量的值
let n = 10;
let m = 20; [n, m] = [m, n]
这样n , m 的值 会互换, 即:n = 20, m = 10, 这种写法简洁,易读,语义清晰。
2、从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或者对象里返回,有了解构赋值,取出这些值就非常方便。
// 返回一个数组
function example() {
return [1, 2, 3]
} let [a, b, c] = example() // 返回一个对象
function example() {
return {
foo: 1,
bar: 2
}
} let {foo, bar} = example()
3、函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来
// 参数是一组有次序的值
function f([x, y, z]) {
return x + y + z;
}
f([1, 2, 3]) // 参数是一组无次序的值
function f({x, y, z}) {
return x + y + z;
}
f(z: 3, x: 1, y: 2)
4、提取JSON数据
解构赋值对提取JSON对象的数据,尤其有用
let jsonData = {
id: 42,
status: 'OK',
data: [123, 456]
} let {id, status, data: number} = jsonData; console.log(id, status, number)
// 42, 'OK', [123, 456]
可以快速提取JSON数据的值
5、函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function() {},
cache = true,
complete = function() {},
crossDomain = false,
global = true
}) { }
6、遍历Map 结构
const map = new Map()
map.set('first', 'hello')
map.set('second', 'world')
for (let [key, value] of map) {
console.log(key + ' is ' + value;
} // 只获取键名
for (let [key] of map) {} // 只获取值
for (let [,value] of map) {}
7、 输入模块的指定方法
加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰
const {SourceMapConsumer, SourceNode} = require('source-map') // vue中使用解构赋值取vuex的方法
import {mapActions, mapState} from 'vuex'
es6 函数解构的用途的更多相关文章
- es6的解构赋值用途
(1)交换变量的值 let x = 1; let y = 2; [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰. (2)从函数返回多个值 函数 ...
- ES6 -箭头函数 ,对象的函数解构
ES6 -箭头函数: //es6 中的箭头函数和扩展 //es5的写法 // function add(a,b){ // return a + b; // } // add(1,2); //3 fun ...
- Es6 新增解构赋值
1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...
- ES6 之 解构赋值
本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这 ...
- ES6 变量解构用法
1.数组解构,可以设置默认值 'use strict'; let [x, y = 'b'] = ['a']; //控制台输出b console.log(y); 2.对象解构 'use strict'; ...
- ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
- 深入理解ES6之解构
变量赋值的痛 对象 let o = {a:23,b:34}; let a = o.a; let b = o.b; 如上文代码,我们经常会遇到在各种场合需要获取对象中的值的场景,舒服一点的是获取单个属性 ...
- ES6 对象解构
ES6 对象解构 第一眼看到,什么鬼? const { body } = document `` 其实等于: const body = document.body ``` http://es6.rua ...
- es6变量解构赋值的用途
这里是我觉得es6解构赋值,在平时我们写js的时候非常有用,而且经常用到的地方,能简化我们的代码,让写代码简介优雅易读; 用途 1.交换变量的值,太方便了这逼,写法不仅简介而且一看就明白 let [x ...
随机推荐
- Java学习:数据类型转换注意事项
数据类型的转换 当数据类型不一样时,将会发生数据类型转换. 自动类型转换(隐式) 1.特点 :代码不需要进行特殊处理,自动完成. 2.规则 :数据范围从小到大. //左边是long类型,右边是默认的i ...
- 系统压测结果对比:tomcat/thinkphp/swoole/php-fpm/apache
[测试所用服务器8核,16G内存]压测接口:很简单,从一张表里根据主键随机查询出一条数据[数据库服务器和WEB服务器分开的].表数据量大概:910000+条. 这个测试结果很有趣:tp5.0和3.2性 ...
- TCP和UDP的差异
TCP建立连接 如果有人问TCP如何建立连接?大部分的回答都是三次握手成功,就建立连接了. 那么握手的目的是什么呢? 1)告知对方自己的序号 2)初始化资源 例如以下握手案例,握手两次由客户端主动发起 ...
- 《PHP7底层设计与源码实现》学习笔记1——PHP7的新特性和源码结构
<PHP7底层设计与源码实现>一书的作者陈雷亲自给我们授课,大佬现身!但也因此深感自己基础薄弱,遂买了此书.希望看完这本书后,能让我对PHP7底层的认识更上一层楼.好了,言归正传,本书共1 ...
- WPF矢量字体图标(iconfont)
原文:WPF矢量字体图标(iconfont) 转载:点击打开链接 步骤: 一.下载添加iconfont文件 二.添加到资源文件夹,并设置不复制,且为资源文件 三.增加FIcon.xaml文件 < ...
- C#读写设置修改调整UVC摄像头画面-焦点
有时,我们需要在C#代码中对摄像头的焦点进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...
- C#里面如何判断一个Object是否是某种类型
第一种方法 var isA = oldObject.GetType() == typeof(Dictionary<string, string>) 第二种方法 var isB = oldO ...
- Geany——Python配置
Geany是一个很不错的编辑器,操作很简单,这里记录一下Geany的入手设置(在下是一个Python程序猿,就以Python为例): 1:新建:选择 下拉菜单中的 main.py ,然后就能生成P ...
- React 的setState 理解
我们都知道在React中,setState() 方法是用来改变组件状态的,在项目中也一直用,也没有出现什么问题(使用方法太简单了),但今天看了一篇文章,提到了setState 使用时的两个注意点,加深 ...
- jquery获取元素各种宽高及页面宽高
如何使用jquery来获取网页里各种高度? 示例如下: $(document).ready(function(){ var divWidth = $("#div").width( ...