第二期,解构赋值如果能够熟练应用确实是个十分方便的功能,但是过分的依赖和嵌套只会让代码理解和维护起来十分困难,是个体现高逼格的表达式呢~

1,解构赋值的基础

//定义:es6运行按照一定模式,从数组或对象中提取值,并对变量进行赋值,如
var [a,b,c] = [1,2,3];
//一些其他方式
let [ , , a1] = [1,2,3];
//a1:3
let [a2,...b2] = [1,2,3,4];
//a2:1,b2:[2,3,4]
let [a3,b3,...c3] = [1];
//a3:1 b3:undefined c3:[]
let [a4,[b4],c4] = [1,[2,3],4];
//a4:1 b4:2 c4:4
function* fibs(){
var a=0;
var b=1;
while (true){
yield a;
[a,b] = [b,a+b];
}
}
var [a5,b5,c5,d5,e5,f5] = fibs();
//f5:5(这个是为什么暂时还不懂,以后在解读,官方解释:fibs是一个Generator函数,原生具有iterator接口,解构赋值时会依次从接口获取值)
//默认值与惰性求值
//在解构赋值时可以指定默认值
var [a6,b6 = 3] = [1];
//a6:1,b6:3 注意:只有在值严格等于(===)undefined时才会使用默认值,null是不行的
//如果默认值是一个表达式,则该表达式是惰性求值的,如
function f(){
console.log("lvyi")
}
let [a7=f()]=[1];
//不会执行f表达式,只在需要时执行内部指令
//ps:默认值是可以引用解构赋值中的其他变量的,但是该变量必须先有赋值
//对象也是可以解构赋值的,原理和数组差不多,但是需要指定模式和变量,并且对象和数组可以嵌套赋值,深入研究比较绕

2,其他形式的解构赋值

//对象解构赋值
var {p:x} = {p:1};
//p是模式,x才是需要赋值的变量,虽然模式可以省如({x}={1}),但复杂的解构中最好不要省如
var node={
loc : {
start:{
line:1
}
}
};
//loc和start都是模式,line才是变量 //字符串的解构赋值
const [a1,b2,c3,d4,e5] = 'hello';
let {length : len} = 'hello';
//len :5 因为字符串是可以转为数组的,而字符串又有length这个同名的属性,因此这两个赋值都是成功的 //数值和布尔值的解构
let {toString : s} =123;
let {toString : s1} = true;
//解构的规则是只要右边的值不是对象就先转为对象在赋值,因此这个两个都有toString这个属性,那么S就可以取到值
//但是undefined和null是没有的,因此如果右边是这两个会报错 //函数参数的解构赋值
function kk([x=0,y=0]){
return x+y
}
kk([1,2]);
//3,0为默认值
//看看下面的值是多少?
console.log([[1,2],[3,4]].map(([d,e]) => d+e));

3,解构赋值的应用

 //变换变量的值
[x,y]=[y,x];
//获取无序的参数或一组参数的值,(最主要方便的用途,以后再也不用遍历json去拿数据了)
var returnData={
id:42,
status : 'ok',
data: [521,214]
};
let {id,status,data:number} = returnData;
//简单明了
//为函数参数设定默认值,上一节有提到,挺好理解的,不用再函数内部写一堆var了

ES6-个人学习笔记二--解构赋值的更多相关文章

  1. ES6学习笔记之解构赋值

    1.数组的解构赋值 简单用法 { // 旧 let a=1,b=3; //新 let [a,b]=[1,3]; console.log(a,b);// 1 3 } 只要等号两边的模式相同,左边的变量就 ...

  2. ES6入门之变量的解构赋值(二)

    前言 在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解,上一章中我们主要学习了三大部分的内容,let命令的使用,块级作用域,const命令的使用,那么从本篇博客将进 ...

  3. 【系统学习ES6】第二节:解构赋值

    [系统学习ES6] 本专题旨在对ES6的常用技术点进行系统性梳理,帮助大家对其有更好的掌握,希望大家有所收获. ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.解构是一种打 ...

  4. ES6中的变量的解构赋值, 解放我们的双手,实现变量的批量赋值

    ES6--变量的解构赋值 引言 正文 一.数组的解构赋值 解构失败 不完全解构 默认值 二.对象的解构赋值 三.字符串的解构赋值 结束语 引言 变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量 ...

  5. ES6新特性:利用解构赋值 (destructuring assignment), 简化代码

    本文的Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 解构赋值是一种表达式, 利用这种新语法, 可以直接从数组或者对象中快速提取值 赋值给不 ...

  6. es6基础系列三:解构赋值

    解构就是ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值(只能用于数组,对象或迭代器).如果解构不成功,则等于undefined,但不能赋值为undefined和null,因为undefi ...

  7. EC++学习笔记(二) 构造/析构/赋值

    条款05:了解c++默默编写并调用了哪些函数 编译器可以暗自为 class 创建default构造函数,copy构造函数,copy assignment操作和析构函数所有这些函数都是 public 并 ...

  8. es6基础入门变量的解构赋值

    let [a, b, c] = [1, 2, 3]; let [foo, [[bar], baz]] = [1, [[2], 3]]; foo bar baz let [ , , third] = [ ...

  9. ES6笔记(3)-- 解构赋值

    系列文章 -- ES6笔记系列 解构赋值,即对某种结构进行解析,然后将解析出来的值赋值给相关的变量,常见的有数组.对象.字符串的解构赋值等 一.数组的解构赋值 function ids() { ret ...

随机推荐

  1. openSuSE12.1 zypper LAMP

    LAMP是由Apache MySQL PHP组成的,是在Linux下最受欢迎的软件组合之一,目前互联网上有很多网站运行在LAMP服务器上. Linux - 是富有情味的开源操作系统:Apache -  ...

  2. MySQL外键约束On Delete、On Update各取值的含义

    主键.外键和索引的区别?   主键 外键 索引 定义: 唯一标识一条记录,不能有重复的,不允许为空 表的外键是另一表的主键, 外键可以有重复的, 可以是空值 主索引(由关键字PRIMARY定义的索引) ...

  3. Yii2 自定义Gii生成代码模板

    我们使用一个例子来介绍如何定制代码模板.假设我们想要定制由 model 生成器生成的代码. 我们首先创建一个名为 protected/gii/model/templates/customer 的目录. ...

  4. js去除空格

    function trim(str){ return str.replace(/(^\s*) | ( \s*$ )/g,"" ); }

  5. inline-block元素之间出现间隙

    一.问题 这里部分的组成是一个input框和一个a按钮,然后a标签为了设置它的width和height我让他display:inline-block(行内元素以块级元素显示内容).神奇的一幕出现了,两 ...

  6. tar linux 打包 压缩 gzip 命令说明

    参数:-c  :建立一个压缩档案的参数指令(create 的意思):-x  :解开一个压缩档案的参数指令!-t  :查看 tarfile 里面的档案!      特别注意,在参数的下达中, c/x/t ...

  7. NSString、NSMutableString基本使用

    郝萌主倾心贡献.尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助.欢迎给作者捐赠,支持郝萌主.捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...

  8. 64位开源处理器Rocket该人士介绍

    最近大概读一点UCB发布时间Rocket处理器的源代码,的每个文件的源代码的功能有一定的一般理解,Mark一点点. Rocket是一家64bit标量处理器,5第一阶段管道,用途risc-v指令集.综合 ...

  9. 【JavaScript设计模式系列---开篇预览】

    转:http://www.cnblogs.com/Darren_code/archive/2011/08/31/JavascripDesignPatterns.html 2011-08-31 23:5 ...

  10. android 59 LinearLayout 线性布局

    ##常见的布局* LinearLayout 线性布局线性布局往左右拉是拉不动的,> 线性布局的朝向 vertical|horizontal> 线性布局的权重 weight 和 0dip一起 ...