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'

转载于:https://www.cnblogs.com/garfieldzhong/p/8046626.html

es6 函数解构的用途相关推荐

es6学习 -- 解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c ...
ES6 的解构赋值前每次都创建一个对象吗？会加重 GC 的负担吗？
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
ES6常用解构赋值有哪几种？
ES6常用解构赋值有哪几种? a.数组的解构赋值 //数组解析赋值,模式匹配 {let [a, b, c] = [1, 2, 3];console.log("模式匹配");cons ...
ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
ES6中解构赋值深入解读
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 1.数组的解构赋值 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail ...
ES6语法---解构赋值
解构赋值概念按照一定的模式,从数组和对象中提取值,对变量进行赋值,就被称为解构. 目的是为了提高效率,使用起来更加方便. 以下的各个说明,我会类比着ES5去解释,希望能帮到小伙伴们. 数组解构正常 ...
ES6：解构赋值及对象方法
解构赋值对象解构起别名:通过:来进行取名 //对象解构赋值 var obj = { uname: "张三", age: 21, sex: "男" } // ...
前端面试不用怕！一分钟带你了解es6的解构赋值
解构赋值(★★★)!!!!! ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构 <script>var stus=['李钟硕','刘诗诗','易烊千玺']//访问数 ...
ES6精华: 解构运算符扩展运算符剩余运算符
http://www.tuicool.com/articles/26bAzmm 转载于:https://www.cnblogs.com/xuezizhenchengxuyuan/p/6378382.h ...

es6 函数解构的用途

es6 函数解构的用途相关推荐

最新文章

热门文章