ES6系列_3之变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。
解构有三种类型:

1.数组的解构赋值
(1)简单的数组解构
以前,我们给变量赋值是直接单个指定值,比如:
let a=0;
let b=1;
let c=2;
数组解构的方式来进行赋值,如下:
let [a,b,c]=[1,2,3];
总结:从数组中提取值,按照位置的对象关系(次序)对变量赋值。
(2)数组模式和赋值模式统一
可以简单的理解为等号左边和等号右边的形式要统一,如果不统一解构将失败。相关代码如下:
let [a,[b,c],d]=[1,[2,3],4];
如果等号两边形式不一样,很可能获得undefined或者直接报错。
(3)解构的默认值
解构赋值是允许你使用默认值的,相关代码如下:
let [foo = true] =[];
console.log(foo); //控制台打印出true
undefined和null的区别:
*undefined相当于什么都没有。
*null相当于有值,但值为null。
2.对象的解构赋值
对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
(1)圆括号的使用
如果在解构之前就定义了变量,这时候再解构会出现问题,而且编译就会报错。
let foo;
{foo} ={foo:'i love you'};
console.log(foo);
要解决报错,使程序正常,我们这时候只要在解构的语句外边加一个圆括号就可以了。
let foo;
({foo} ={foo:'i love you'});
console.log(foo); //控制台输出i love you
3.字符串解构
字符串解构,此时字符串被转换成了一个类似数组的对象。
const [a,b,c,d,]="love";
console.log(a);//l
console.log(b);//o
console.log(c);//v
console.log(d);//e
学习参考链接为:http://jspang.com/post/es6.html#toc-696 。
ES6系列_3之变量的解构赋值的更多相关文章
- ES6学习笔记之变量的解构赋值
变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...
- ES6学习 第二章 变量的解构赋值
前言 该篇笔记是第二篇 变量的解构赋值. 这一章原文链接: 变量的解构赋值 解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构 ...
- ES6标准入门之变量的解构赋值简单解说
首先我们来看一看解构的概念,在ES6标准下,允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称作解构,简而言之粗糙的理解就是变相赋值. 解构赋值的规则是,只要等号右边的值不是对象或者数组 ...
- ES6第三节:变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.下面我们看实际的例子: 一.数组解构: let [a,b,c] = [1,2,3]; console.log(a); //a ...
- es6学习2:变量的解构赋值
一:数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo bar ba ...
- ES6 - 基础学习(3): 变量的解构赋值
解构赋值概述 1.解构赋值是对赋值运算符的扩展. 2.它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值. 3.代码书写上显得简洁且易读,语义更加清晰明了:而且还方便获取复杂对象中的数据字 ...
- ES6 第三章 变量的解构赋值 具体参照http://es6.ruanyifeng.com
1.基本用法 let [a, b, c] = [1, 2, 3];左右两边解构格式要保持一致. 2.默认值 let [x, y = 'b'] = ['a']; // x='a', y='b' let ...
- es6系列-变量的解构赋值
git地址: https://github.com/rainnaZR/es6-study/tree/master/src/destructuring 变量的解构赋值 变量的解构赋值: 数组, 对象, ...
- es6之变量的解构赋值
es5中通常我们声明变量都是以下的方式: var a = 10; var b = 20; var c = 30; //或者 var a = 10,b = 20,c = 30; //或者 var arr ...
随机推荐
- Java Spring-事务管理概述
2017-11-11 23:05:39 事务(Transaction):是逻辑上一组操作,要么全都成功,要么全都失败. 一.事务的特性 原子性:事务不可分割 一致性:事务执行的前后,数据完整性保持一致 ...
- JavaScript--练习1--99乘法表
JavaScript--练习1--99乘法表 一.心得 二.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...
- jquery性能优化的十种方法
jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运 ...
- 使用POI导入小数变成浮点数异常
例如 我在Excel中的数据为17.2, 导入到表中就变成了17.1999999或者17.20000001 原因是我用double接收了17.2,然后直接用了String去转换,精度就丢失了. 代 ...
- 用setTimeout实现setInterval函数
最近get一个新知识,也不算是新知识,可能是以前自己没有认真对待(对自己无语ing,si不si傻). 废话不多说,直接来看代码吧 function setInterval(func, t){ var ...
- SPOJ VLATTICE Visible Lattice Points 莫比乌斯反演 难度:3
http://www.spoj.com/problems/VLATTICE/ 明显,当gcd(x,y,z)=k,k!=1时,(x,y,z)被(x/k,y/k,z/k)遮挡,所以这道题要求的是gcd(x ...
- L172 K-kilogram
In a historic vote, nations on Friday unanimously approved a groundbreaking overhaul to the internat ...
- JS中的phototype详解
作者:轩脉刃 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A. 2 ...
- URL 生成带文字二维码
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- python3 tkinter 桌面软件教程
效果图 """"brid布局""" from tkinter import * import tkinter.filedialog ...