参考书《ECMAScript 6入门》
http://es6.ruanyifeng.com/

变量的解构和赋值

本质上:只要模式匹配,左边的变量就能被赋予右边对应的值

原则: 解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null不能转化为对象,所以如果右边是undefined或者null,则会解构报错

数组类型 :数组类型按照顺序匹配

let [x,y,z] = [1,2,3]
x = 1
y = 2
z = 3

对象类型 :对象类型按照属性名匹配

let {key1 : value1,key2 : value2} = {key2 : "v2",key1 : "v1"}
value1 = "v1"
value2 = "v2"

字符串||数字||布尔类型

let [a,b,c,d,e] = "admin"
a = 'a'
b = 'd'
c = 'm'
d = 'i'
e = 'n'

let {toLowerCase : method} = 'admin'
method = String.prototype.toLowerCase

let {toFixed : method1} = 3
method1 = Number.prototype.toFixed

let {toString : method2} = true
method2 = Boolean.prototype.toString

默认值
a.只有当右边对应的赋值严格等于undefined时,左边变量才能取默认值
b.惰性求值
c.默认值可以引用其他已经解构的变量的值

let [x = 1,y = 2] = [] //此时x的默认值是1,y的默认值是2  []等同于 [][0] = undefined,[][1] = undefined .....
let [x = 1,y = 2] = [null,null] //只有当x,y的值是undefined的时候,才能把默认值给x,y,此处null 不等于 undefined ,所以x = null, y = null
let {x = 3} = {x : undefined} // x = 3
let {x = 3} = {x : null} //x = null

function f(){
  return "abc";
}
let [x = f()] = [1]
//此时x = 1,而不是会输出"abc",因为右边对应x变量的值是可以正常赋值的,所以不执行x =f()语句

let [x = 1, y = x] = [3] //x = 3,y = 3

不完全解构 : 等号左边的模式只匹配一部分等号右边的值

let [x,y] = [3] // x = 3 , y = undefined
let {k1 : a, k2 : b} = {k2 : "123"} // a = undefined, b = "123"

圆括号
    允许使用 : 赋值语句的非模式部分
    不允许使用
    a.变量声明
    b.函数参数
    c.赋值语句模式

嵌套解构
    数组
    let [x, ...rest] = [1, 2, 3, 4];//x = 1 rest = [2,3,4]
    let [x,[y,z]] = [1,[2,3]] // x = 1, y = 2, z = 3
    对象
    let obj = {
        obj2: {
          k1 : 'v1',
          k2: 'v2'
        }
    };
    let { obj2, obj2: {k1 : x, k2 : y} } = obj;
    x // "v1"
    y // "v2"
    obj2 // {k1 : 'v1', k2 : 'v2'}

ES6学习笔记(2)----变量的解构和赋值的更多相关文章

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

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  2. ES6学习 第二章 变量的解构赋值

    前言 该篇笔记是第二篇 变量的解构赋值. 这一章原文链接: 变量的解构赋值 解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构 ...

  3. ES6 学习笔记(二)解构赋值

    一.数组的解构赋值 1.基本用法 ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,该操作即为解构 如: let [a,b,c]=[1,2,3]; console.log(a,b,c) ...

  4. es6学习2:变量的解构赋值

    一:数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo bar ba ...

  5. ES6学习笔记(4)- 解构

    一.解构的意义 二.对象解构 三.数组解构

  6. ES6学习笔记(二)变量的解构与赋值

    1.数组的解构赋值 1.1基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1 ...

  7. ES6学习----let、const、解构赋值、新增字符串、模板字符串、Symbol类型、Proxy、Set

    这篇es6的学习笔记来自于表哥 表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 ES6就是JS6,JS的第 ...

  8. ES6第三节:变量的解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.下面我们看实际的例子: 一.数组解构: let [a,b,c] = [1,2,3]; console.log(a); //a ...

  9. ES6系列_3之变量的解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 解构有三种类型: 1.数组的解构赋值 (1)简单的数组解构 以前,我们给变量赋值是直接单个指定值,比如: let a=0; ...

随机推荐

  1. Android中View窗口getWidth和getMeasuredWidth的差别

    今天在研究自己定义listview的下拉刷新的效果.想移植到项目需求中,再看自己定义源代码时发现了一个问题就是getWidth和getMeasuredWidth两个方法有什么差别,求教万能的百度,经调 ...

  2. 【iOS系列】- 通知NSNotification的使用

    [iOS系列]- 通知NSNotification的使用 1:属性 通知属性: - (NSString *)name; // 通知的名称 - (id)object; // 通知发布者(是谁要发布通知) ...

  3. extends && implements

     final声明的类不能被继承 方法的重写(@Override):  两同两小一大原则: 方法名相同,参数类型相同 子类返回类型小于等于父类方法返回类型(java里无论怎样都对) 子类抛出异常小于等于 ...

  4. 注册中心Eureka页面添加用户认证

    我们需要登录即可访问到Eureka服务,这样其实是不安全的 为Eureka添加用户认证. 第一步,为itcast-microservice-eureka添加安全认证依赖: 第二步,增加applicat ...

  5. jquery中的工具函数 Utilities

    noConflict(deep) 释放$和Jquery的控制权 isFunction(obj) isArray(obj) isWindow(obj) isNumeric(obj) type(obj) ...

  6. YTU 2904: B--Faultfinding

    2904: B--Faultfinding 时间限制: 1 Sec  内存限制: 128 MB 提交: 64  解决: 33 题目描述 Do you remember the game in whic ...

  7. Evernote相关技术介绍——mysql+lucene+tomcat

    Evernote服务 我们的服务由以下几个组件组成. 分片(NoteStore)   分片是Evernote服务的核心单元,用于存储用户的笔记.每个分片最多可以支撑30万个Evernote用户,并包含 ...

  8. 实现静默安装APK的方法

    需要满足的条件: 内置到ROM.即APK包的安装位置是/system/app下. 下面以 test.apk 为例,演示这个操作.需要准备一台已经获得 Root 权限的手机. 1.通过 USB 连接手机 ...

  9. 性能测试工具curl-loader(linux)

    curl-loader介绍 curl-loader(也被称为“omes-NIK”和“davilka”)是一个开源的C语言编写的工具,模拟应用负载和成千上万的几十万人的HTTP / HTTPS和FTP/ ...

  10. 修改 Appdelegate 文件名为添加项目前缀的方法

    本文假设你的项目是 Test, 那么为了给你的 Appdelegate 文件保持按照项目名为前缀 ,就需要对 Appdelegate 文件进行修改前缀名. 技巧分享:将开发中的 Appdelegate ...