ES中允许按照一定格式从数组,对象值提取值对变量进行赋值,这就是解构(Destructuring)
 let [a,b,c]=[1,10,100]
console.log(a,b,c)//1 10 100
//等式两边"模式"进行匹配,从而进行赋值
let [i,[[[j]],k]]=[1,[[[2]],3]]//这种看看就好,知道这样也可以执行就行
console.log(i,j,k)//1 2 3 let [,,x]=[1,2,3]
console.log(x)//
解构不成功,相应的变量为undefined
 let [i1,i2]=[]
console.log(i1,i2)//undefined undefined
let [i3,i4]=[10]
console.log(i3,i4)//10 undefined
部分解构成功
 let [i5,i6]=[1,2,3]
console.log(i5,i6)//1 2
等式右边不是可遍历的结构,那么将报错
 let [i7,i8]=1 //1 is not iterable
let [i9] =true//true is not iterable
解构赋值允许指定默认值
 let [i10,i11='hi']=[100]
console.log(i10,i11)//100 'hi'
注意这种情况
 // let [i111=i12,i12=10]=[]//报错,i111=i12 此时i12还未申明
// 而:
let [i13=i14,i14]=[1,2]
console.log(i13,i14)
对象的解构赋值
 let {foo,bar}={foo:'name',bar:'age'}
console.log(foo,bar)
//但其实上面解构赋值是下面的缩写
let {foo1:foo1,bar1:bar1}={foo1:'name',bar1:'age'}
console.log(foo1,bar1)
// 如果继续变换
let {foo2:name,bar2:age}={foo2:'name',bar2:'age'}
// console.log(foo2,bar2)//报错
console.log(name,age)//正确写法
// 即foo2是模式,name才是赋值的变量

运行结果:

解构赋值的几大应用:
1.交换变量
 let a10=10,b100=100;
[a10,b100]=[b100,a10]
console.log(a10,b100)//100 10
2.函数返回中取出多个值
 function test10(){
return [1,2,3]
}
function test100(){
return {
nameT:'apple',
ageT:100
}
}
let [j1,j2,j3]=test10()
console.log(j1,j2,j3)//1 2 3
let {nameT,ageT}=test100()
console.log(nameT,ageT) //'apple' 100
3.提取JSON数据
 function getJSON(){
return {
"app1":100,
"blue":"hello blue",
"data": 110
}
}
let {app1,blue,data:number}=getJSON()
console.log(app1,blue,number)//100 "hello blue" 110

参考阮一峰ECMASCript入门

es6(二):解构赋值的更多相关文章

  1. ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?

    本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...

  2. ES6变量解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构ES6之前我们申明多个变量需要按照下面的方法: let l a=1; let b=2; let c=3; let d=4; ...

  3. ES6变量解构赋值的用法

    一.数组赋值(从数组中提取值,按照对应位置,对变量赋值) 1. 完全解构(变量与值数目相等) let arr = [1, 2, 3]; let [a,b,c] = arr; console.log(a ...

  4. es6 -- 与解构赋值默认值结合使用

    参数默认值可以与解构赋值的默认值,结合起来使用. function foo({x, y = 5}) { console.log(x, y) } foo({}) // undefined 5 foo({ ...

  5. ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries...

    2015年6月17日 ECMAScript 6发布正式版本 前面介绍基本语法,  后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法:  1.         定义变 ...

  6. ES6之解构赋值

    截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...

  7. 进军es6(2)---解构赋值

    本该两周之前就该总结的,但最近一直在忙校招实习的事,耽误了很久.目前依然在等待阿里HR面后的结果中...但愿好事多磨!在阿里的某轮面试中面试官问到了es6的掌握情况,说明es6真的是大势所趋,我们更需 ...

  8. ES6-个人学习笔记二--解构赋值

    第二期,解构赋值如果能够熟练应用确实是个十分方便的功能,但是过分的依赖和嵌套只会让代码理解和维护起来十分困难,是个体现高逼格的表达式呢~ 1,解构赋值的基础 //定义:es6运行按照一定模式,从数组或 ...

  9. es6的解构赋值学习(1)

    相对es5的简单的"="赋值来说,es6增加了一种新的赋值模式--解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比 ...

  10. Es6 新增解构赋值

    1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...

随机推荐

  1. MariaDB存储引擎

    MariaDB存储引擎 存储引擎就是指表的类型.数据库的存储引擎决定了表在计算机中的存储方式.存储引擎的概念是MariaDB的特点,而且是一种插入式的存储引擎概念.这决定了MariaDB数据库中的表可 ...

  2. Oracle开发环境搭建

    一.软件准备 地址:oracle官网 安装包:因为个人学习用,所以就安装服务器端就可以了,不需要客户端. 一共两个压缩文件,解压时一起解压到到一个文件夹. 本人使用的:win32_11gR2_data ...

  3. Android用AlarmManager实现后台任务-android学习之旅(63)

    因为Timer不能唤醒cpu,所以会在省电的原因下失效,所以需要唤醒cpu在后台稳定化的执行任务,AlarmManager能够唤醒cpu 这个例子讲解了如何通过Service来在后他每一个小时执行.特 ...

  4. 解决 RtlCreateActivationContext() failed 0xc000000d

    gtest 示例的Debug版启动报错: Debug输出如下: 'sample1_unittest.exe': Loaded 'D:\LibSrc\gtest_1.7.0_build\Debug\sa ...

  5. javascript之BOM编程Screen(屏幕)对象

    这个对象属性相对比较简单.掌握四个方法即可. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  6. javascript之prototype原型属性

    这个地方有点绕,仔细理解代码的意义. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. OC第二天—封装

    /.锁定头文件的方法 1. 打开终端 2. 进入到Xcode的目录, 命令:   cd /Applications/Xcode.app 3. 把系统头文件修改为只读, 命令:   sudo chown ...

  8. 一个不错的扩展:Ext.ux.container.ButtonSegment

    地址:http://www.sencha.com/forum/showthread.php?132048-Ext.ux.container.ButtonSegment

  9. laydate日期空间与时间选择器

     http://laydate.layui.com/

  10. SpriteBuilder中频繁的切换场景层的解决办法

    注意,不像SettingsLayer,CCScrollView实例并没有从场景中删除和重新加载像代码所示的那样. 你只是简单的改变其可视(visible)状态on和off. 改变可视状态比加载CCB或 ...