ES6 解构赋值的常见用途,很强大
字符串
var [a,b,c,d,e] = "hello";
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o
函数
function move({x = 0, y = 0} = {}) {
console.log([x, y]);
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
从函数返回多个值
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
函数参数的定义
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
提取 JSON 数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
};
遍历 Map 结构
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
如果只想获取键名,或者只想获取键值,可以写成下面这样。
// 获取键名
for (let [key] of map) {
// ...
}
// 获取键值
for (let [,value] of map) {
// ...
}
ES6 解构赋值的常见用途,很强大的更多相关文章
- ES6解构赋值
前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...
- ES6解构赋值常见用法
解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b 问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量 ...
- es6 解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...
- es6 解构赋值 新认知/新习惯
es6 的解构赋值其实很早就学习了,但一直纠结于习惯和可读性问题,所以没有大规模使用.最近被 react调教一番之后.已经完全融入认知和习惯中去了.总结一下三个常用的技巧: 对象取值 取值并重命名 剩 ...
- 简单看看es6解构赋值
哎,我真的是太难了,今天就被这个解构赋值(也可以叫做析构,貌似析构是在c++中的,所以我这里叫做解构赋值吧)弄的我很烦,本来以为很容易的,结果还是弄了好久...就总结一下解构吧! 1.解构的基本使用 ...
- ES6—解构赋值
1.什么是解构赋值 ES6允许按照预定的模式,从数组.对象中提取值,对变量进行赋值. 我们直接用例子说明. 2. 数组的解构赋值 数组传统的变量赋值: var arr=[1,2,3]; ...
- ES6解构赋值详解
文章转载自:http://www.zhufengpeixun.cn/article/167 解构赋值(destructuring assignment)语法是一个 Javascript 表达式,这种语 ...
- (2)ES6解构赋值-数组篇
1.解构赋值-数组篇 //Destrcturing(解构) //ES5 /* var a = 1; var b = 2; var c = 3; */ //ES6 var [a,b,c] = [1,2, ...
- ES6 解构赋值详解
解构赋值是对赋值运算符的扩展,可以将属性/值从对象/数组中取出,赋值给其他变量. 一.数组的解构赋值 1.基本用法 只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [a, [[b], ...
随机推荐
- JavaScript 的时间消耗--摘抄
JavaScript 的时间消耗 2017-12-24 dwqs 前端那些事儿 随着我们的网站越来越依赖 JavaScript, 我们有时会(无意)用一些不易追踪的方式来传输一些(耗时的)东西. 在这 ...
- PHP 之命名空间
文件A.php namesspace a\b; Class User{ function get_user(){ echo 'this is A Class'; } } 文件B.php namessp ...
- android控件-images
1.imageButton 图片按钮 <ImageButton android:id="@+id/imageButton" android:layout_width=&quo ...
- 2018 ICPC 沈阳网络预赛 Fantastic Graph (优先队列)
[传送门]https://nanti.jisuanke.com/t/31447 [题目大意]:有一个二分图,问能不能找到它的一个子图,使得这个子图中所有点的度数在区间[L,R]之内. [题解]首先我们 ...
- Maven学习使用Nexus搭建Maven私服
原文:http://www.cnblogs.com/quanyongan/archive/2013/04/24/3037589.html 为什么要搭建nexus私服,原因很简单,有些公司都不提供外网给 ...
- 自动调整文字高度With what should I replace the deprecated sizeWithFont:contrainedToSize:lineBreakMode method?
自动调整文字的高度: ios 2.0 ~ 7.0以下: UILabel *orgnizationLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, ...
- SolidEdge 工程图中如何控制是否显示爆炸图组装线
右击视图,点击性质,取消勾选"显示流线" 即可取消爆炸视图的装配线
- Cocos2d-x 3.0 简捷的物理引擎
Cocos2d-x 3.0 开发(九)使用Physicals取代Box2D和chipmunk http://www.cocos2d-x.org/docs/manual/framework/native ...
- Android中怎样自己制作su
本文原博客:http://hubingforever.blog.163.com/blog/static/171040579201372915716149/ 在Android源代码的system\ext ...
- C语言之基本算法34—分解质因数(方法一)
//矩阵基础 /* ================================================================== 题目:输入一个正整数.将其分解为质因式,如:6 ...