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 ...
随机推荐
- Oracle 创建 Schema
-- 查看当前已有的用户 SELECT Username FROM dba_users; -- 创建临时 CREATE USER gzmpc IDENTIFIED BY PASSWORD; -- 授权 ...
- Bitwise Equations
Problem Description You are given two positive integers X and K. Return the K-th smallest positive i ...
- Arachni web扫描工具
扫描工具-Arachni from:https://blog.csdn.net/zixuanfy/article/details/52818527 ./arachni_console ...
- css实现心形图案
用1个标签实现心形图案,show you the code; <!DOCTYPE html> <html lang="en"> <head> & ...
- 055——VUE中vue-router之路由参数的随意设置与伪静态链接地址处理:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 转:Android-apt
转自http://blog.csdn.net/zjbpku/article/details/22976291 What is this? The Android-apt plugin assists ...
- 使用eclipse启动系统时报错“ java.lang.OutOfMemoryError: PermGen space”问题的解决
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/76571611 本文出自[我是干勾鱼的博客] 有的时候,使用eclipse启动系统 ...
- 从开发者的角度分析iOS应如何省电
从开发者的角度分析iOS应如何省电 说明 网上关于iPhone如何省电的文章很多.但是基本没有讲原理.而在生活中,很多人在使用iPhone中有着明显的错误的省电习惯. 本文从iOS开发者的角度,对iO ...
- I.MX6 PWM buzzer driver hacking with Demo test
/***************************************************************************** * I.MX6 PWM buzzer dr ...
- Yii用AJAX注册验证
<script type="text/javascript"> $(document).ready(function(){ $('#RegisterForm_usern ...