1.数组的解构赋值

简单用法

{
// 旧
let a=1,b=3; //新
let [a,b]=[1,3]; console.log(a,b);// 1 3
}

只要等号两边的模式相同,左边的变量就会被赋予对应的值。

{
let a,b,c;
[a,b,c]=[1,2]
console.log(a,b,c);// 1 2 undifined
} {
let [a,b,c]=[1,,3];
a,b,c;//1 undefined 3
} {
let [a,b]=[1,[2,3]];
a;//1
b;//[2,3]
} {
let [a,...b]=[1,2,3];
a;//1
b;//[2,3]
} {
let [a, b, ...c] = [1];
a;//1
b;//undefined
c;//[]
} {
let [a,[b],c]=[1,[2,3],4]
a;//1
b;//2
c;//4
}

设置默认值

let [a='hello']=[];
a;//hello let [b='world']=['yes'];
b;//yes // ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。
let [c=13]=[undefined];
c;//13 let [d=12]=[null];
d;//null

实例

  • 交换两个变量的值
    let [a, b]=[2,3];
[a,b]=[b,a];
console.log(a);//3

对象的解构

常规用法

    let a,b;
({ a, b } = { a: 2, b: 3 })
console.log(a,b);//2,3; //变量名与属性名一致
let {name}={name:'小明',age:18};
console.log(name);//小明 // 变量名与属性名不一致
let {a:name,b:age}={a:'小明',b:18};
console.log(name,age);//小明 18

如果解构失败,变量的值等于undefined。

let {a}={b:2};
a;//undefined

多层嵌套

function fn() {
return {
name: '小明',
userList: [
{ name: '小红' }
]
}
} let res = fn();
let { name: person, userList: [{ name: otherPerson }] } = res; console.log(person, otherPerson);//小明 小红

如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。

let {a: {b}} = {b: 666};

设置默认值

let {a=1}={a:3};

ES6学习笔记之解构赋值的更多相关文章

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

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

  2. 石川es6课程---6、解构赋值

    石川es6课程---6.解构赋值 一.总结 一句话总结: 结构相同一一对应的方式赋值:let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8 ...

  3. ES6基础-变量的解构赋值

    作者 | Jeskson 来源 | 达达前端小酒馆 解构赋值: 数组的解构赋值,对象的解构赋值,字符串的解构赋值,数值与布尔值的解构赋值,函数参数的解构赋值. 开发环境准备: 编辑器,VS Code, ...

  4. es6之变量的解构赋值

    es5中通常我们声明变量都是以下的方式: var a = 10; var b = 20; var c = 30; //或者 var a = 10,b = 20,c = 30; //或者 var arr ...

  5. es6分享——变量的解构赋值

    变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法 ...

  6. ES6 继续 变量的解构赋值

    春节放假这几天,感觉跟梦一样,瞬间就过去了.现在上班的前几天,都感觉有点不真实,不过看到口袋里的钱,就知道,是真真实实的度过了这个假期. 现在得开始重新工作了: 变量的解构赋值 ES6 允许按照一定模 ...

  7. es6入门2--对象解构赋值

    解构赋值:ES6允许按照一定规则从数组或对象中提取值,并对变量进行赋值.说直白点,等号两边的结构相同,右边的值会赋给左边的变量. 一.数组的解构赋值: 1.基本用法 let [a, b, c] = [ ...

  8. ES6入门——变量的解构赋值

    1.数组的解构赋值 以前为变量复制,只能直接指定值.现在ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 本质上,这种写法属于模式匹配,只要等 ...

  9. ES6中变量的解构赋值

    1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 输出: 上面代码表示,可以从数组中提取值,按照对应位置,对变 ...

随机推荐

  1. 【珍惜时间】vuepro

    老规矩放上大大的github开源地址:https://github.com/goodheart222/vuepro 我们再来看看项目的效果,初步根据效果做到心中有数 看到效果的话,我们会发现,肯定是有 ...

  2. 今天给各位介绍Linux touch命令详述

    触摸命令 touch命令有两个功能:一个是将现有文件的时间戳更新为系统的当前时间(默认模式),它们的数据将保持不变;第二个是创建一个新的空文件. 语法 触摸(可选) 最常见的用法:touch file ...

  3. TableView之表头、表尾,区头、区尾!

    一.UITableView的UITableViewStyle 样式分为UITableViewStylePlain和UITableViewStyleGrouped两种: plain样式下区头和区尾是悬浮 ...

  4. day 42 03--CSS布局设置

      03--CSS布局设置   本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 ...

  5. PAT甲级——A1075 PAT Judge

    The ranklist of PAT is generated from the status list, which shows the scores of the submissions. Th ...

  6. diskpart

    比如格式化成fat32 format fs=fat32 quick 比鼠标方便 如何使用: 打开cmd输入diskpart进入命令 首先 list disk 然后 然后 clean 然后 create ...

  7. UVA--624 CD(01背包+路径输出)

    题目http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  8. 阿里云服务器(一)——Nodejs环境配置

    最近在阿里云上买了一个轻量应用服务器,想着用来学习一下Nodejs. 64位 配置Nodejs环境: 参考:https://www.runoob.com/nodejs/nodejs-install-s ...

  9. ES6之主要知识点(七)对象

    1.属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. function f(x, y) { return {x, y}; } // 等同于 function ...

  10. CentOS使用rpm离线安装mariadb

    本文不再更新,可能存在内容过时的情况,实时更新请移步原文地址:CentOS使用rpm离线安装mariadb: 环境: CentOS Linux release 7.6.1810 (Core) mari ...