变量的结构赋值用户很多

1、交换变量的值

let x = 1;
let y = 2;
[x,y] = [y,x]

上面的代码交换变量x和变量y的值,这样的写法不仅简洁,易读,语义非常清晰

2、从函数返回多个值

函数只能返回一个值,如果要返回多个值,只能讲他们放在数组或者对象里返回。了解解构赋值,取值这些值非常方便

//返回一个数组
function example(){
return [1,2,3];
}
let [a,b,c] = example();
[a,b,c]; //[1,2,3]
//返回一个对象
function example(){
return {
foo:1,
bar:2
};
}
let {foo,bar} = example();
foo; //1
bar; //2

3、函数参数的定义

解构赋值可以方便的讲一组参数与变量名对应起来。

//参数是一组有次序的值
function f([x,y,z]){
console.log(x,y,z);
}
f([1,2,3]); //1,2,3
//参数是一组无次序的值
function func({x,y,z}){
console.log(x,y,z);
}
func({z:3,y:2,x:1}); //1,2,3

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" (2) [123, 456]

5、函数参数的默认值

、、、

6、遍历Map结构

任何部署了Iterator接口的对象都可以使用for... of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值获取名和键值就非常方便。

var map = new Map();
map.set('first','hello');
map.set('second','world'); for(let [key,value] of map){
console.log(key,value);
}

//first hello
//second world


如果只想获取键名,或者只想获取键值,可以这样写。

//获取键名
for(let [key] of map){
console.log(key);
}

//first
//second

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

7、输入模块的指定方法

加载模块时,往往需要指定输入的方法。解构赋值使得输入语句非常清晰。

const {a,b} = require('source-map');

JS ES6的变量的结构赋值的更多相关文章

  1. ES6—— 变量的结构赋值

    变量的结构赋值.基本概念: 本质上就是一中匹配模式,只要等号两边的模式相同,那么左边的变量就可以被赋予对应的值: 1.数组的结构赋值. 2.对象的结构赋值. 3.基本类型的结构赋值. let [a,b ...

  2. 【ES6基础】let、const命令和变量的结构赋值

    ES5声明变量(2):var .function ES6声明变量(6):var.function.let.const.import和class 1.let命令和const命令 (1)let和const ...

  3. ES6的变量解构赋值

      前  言 ES6 解构赋值: ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构. 1.1 数组的结构赋值 1.1.1基本用法 JS中,为变量赋值直接指定.例如下面代码: ...

  4. ES6 变量的结构赋值

    1.数组的解构赋值 a.基本用法:(‘模糊匹配’) let [a, b, c] = [1, 2, 3]; a b c b.嵌套数组结构例子: let [x, , y] = [1, 2, 3]; x y ...

  5. ES6 变量的结构赋值用途(实用技巧)

    1.交换变量的值 let x=1; let y=2; [x,y]=[y,x];//x=2,y=1 2.从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或者对象里返回,有了解构 ...

  6. ES6必知,变量的结构赋值。

    对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重要的一部分. 在编码过程中,我们经常定义许多对象和数组,然后 ...

  7. ES6 对象增强和结构赋值

    The enhanced Object literals: ES6 has added some new syntax-based extensions to {} object literal fo ...

  8. ES6中变量的解析赋值的用途

    变量的解构赋值用途很多. (1)交换变量的值 let x = 1; let y = 2; [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰. ( ...

  9. 【es6】变量解构赋值

    1.数组解构赋值 let [a,b,c]=[1,2,3];//数组解构赋值,注意:左右两边格式需一致 let [a,b]=[1,2,3];//不完全解构,取位置靠前的值 let [a=1,b]=[un ...

随机推荐

  1. HTML5 CSS3 专题 : 拖放 (Drag and Drop)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31413767 本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍 ...

  2. Javascript 进阶 继承

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/29194261 1.基于类的继承 下面看下面的代码: <script typ ...

  3. Hibernate Annotation 生成数据库表(UUId)

    User.java实体类 package com.tao.pojo; import javax.persistence.Column; //用注解的方式生成表 import javax.persist ...

  4. BZOJ_2661_[BeiJing wc2012]连连看_费用流

    BZOJ_2661_[BeiJing wc2012]连连看_费用流 Description 凡是考智商的题里面总会有这么一种消除游戏.不过现在面对的这关连连看可不是QQ游戏里那种考眼力的游戏.我们的规 ...

  5. Python数据结构应用6——树

    数据结构中的树的结点和机器学习中决策树的结点有一个很大的不同就是,数据结构中的树的每个叶结点都是独立的. 树的高度(Height)指叶结点的最大层树(不包含根结点) 一.树的建立 树可以这样定义:一棵 ...

  6. Django基础三(form和template)

    上一篇博文学习了Django的View和urls,接下来是对django form 和 template的学习. 1 django form django form为我们提供了便捷的方式来创建一些HT ...

  7. Java Servlet 2.5 设置 cookie httponly

    Servlet 3.0 有 cookie.setHttpOnly(true); 多么人性化, Servlet 2.5 是没有这个方法的要这个曲线救国:cookie.setPath("; Ht ...

  8. 记一次产品需求:图片等比缩放和CSS自适应布局16:9

    前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...

  9. 【转】超酷的 mip-infinitescroll 无限滚动(无限下拉)

    写在前面 无限滚动技术(又叫做无限下拉技术)被广泛应用于新闻类,图片预览类网站.对用户来讲,使用无限滚动的页面有源源不断的信息可以预览,增加用户在页面的停留时长.技术上原理也很简单,在页面加载时加载一 ...

  10. vue.js框架原理浅析

    vue.js是一个非常优秀的前端开发框架,不是我说的,大家都知道. 首先我现在的能力,独立阅读源码还是有很大压力的,所幸vue写的很规范,通过方法名基本可以略知一二,里面的原理不懂的地方多方面查找资料 ...