ES6中的解构赋值

时间: 2020-02-06阅读: 148标签: es6

前言

从前我们对变量赋值时,都是通过赋值运算符,右边赋值给左边这样操作的。

let a = 1;
let b = 2;
let c = 3;

let obj = {};
obj.name = 'mm';
obj.age = 18;

现在我们通过模式匹配的方式来赋值。
左边是解构目标,右边是解构源。
左右结构要保持一致。


一、数组解构赋值:基本方式

1.1 一一对应

数组的解构是有顺序的,是一一对应的。(等号右边直接写数组的变量名也可以。)
let [a,b,c] = [1,2,3];
console.log(a,b,c);

let arr = [4,5,6];
let [x,y,z] = arr;

1.2 可嵌套

只要右边的模式和左边相同,那么左边对应的变量就会被赋予对应的值。
let [a,[b,[c,d]],e] = [1,[2,[3,4]],5];
console.log(a,b,c,d,e);

1.3 不完全解构

如果右边没有给值,就当做undefined处理。
let [a,b,c] = [1,2]; // let [a,b,c] = [1,2,undefined];

1.4 可忽略

let [a, , b] = [1,2,3];


二、数组解构赋值:剩余运算符

2.1 定义

语法:...变量名
作用:可以将右边数组中剩余的值解构到左边,而且是以数组的形式保存。
let [a, ...b] = [1,2,3,4,5,6];
console.log('a为:', a);
console.log('b为:', b);

2.2 注意

剩余运算符只能放在最后一个参数的位置上,否则报错。

let [...b, a] = [1,2,3];
console.log(b);


三、数组解构赋值:默认值

3.1 规则

指定默认值,默认值产生的条件是:右边数组中对应的数据(====)严格等于undefined。

例如下面,y=10就表示,y的默认值为10。

let [x,y=10] = [1]; // let [x,y=10] = [1, undefined];
console.log(x,y);

3.2 特殊情况

let [a=10, b=a] = []; // a=10,b=10
let [a=10, b=a] = [1]; // a=1, b=1
let [a=10, b=a] = [1,2]; // a=1, b=2
let [a=b, b=20] = []; // 报错(在用b之前还没初始化值)

分析:
第一行:a和b匹配到undefined,所以采用默认值,a是10,b的值是a,也就是10;
第二行:a匹配到1,b匹配到undefined,所以b的值就是a,也就是1;
第三行:a和b均匹配到数值,因此a为1,b为2;(这里b不会是默认给到a的值,因为它自己有匹配的值)
第四行:a=b,但是b还没有初始化,因此报错。


四、对象解构赋值:基本方式

4.1 映射对应

只有左边对象的变量名和右边对象的属性名相同时,才会取到值。(等号右边写对象的变量名也可以。)
let {a, b} = {a:'foo', b:'bar'}; // a='foo' b='bar'

let obj = {
    name: 'mm',
    age: 18
}
let {name, age} = obj; // name='mm' age=18

let {say} = {jump:'jump', sing:'sing'}; // say='undefined' (找不到对应的属性名,那就给undefined)

4.2 可嵌套

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj; // x='hello' y='world'

左边:p是一种模式匹配,真正解构的是后面的数组中的x和对象中的y。
因此按照数组解构'hello'赋值给x,按照对象解构'world'赋值给y。
那么要想获取对象中p的属性值呢,直接写p就行。

let {p} = obj; // p=['hello', {y: 'world'}]

4.3 不完全解构

let {a,b,c} = {a:1,b:2}; // a=1 b=2 c=undefined

4.4 可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj; // x='hello'

五、对象解构赋值:剩余运算符

剩下的属性以对象的形式保留。
let {a, b, ...res} = {a:1, b:2, c:3, d:4, e:5}; // a=1 b=2 res={c:3, d:4, e:5}

六、对象解构赋值:默认值

指定默认值,默认值产生的条件是:对象属性名(====)严格等于undefined。
let {a,b=10,c} = {a:1}; // a=1 b=10 c=undefined
let {x=3} = {x:undefined}; // x=3
let {y=4} = {y:null}; // y=null

七、对象解构赋值:易错点

对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

例如,等号左边foo对应右边的同名属性是foo,它的值是'foo',这个值最后赋值给foo对应的变量f而非foo。
简而言之,这个f和b相当于是一个别名

let {foo:f, bar:b} = {foo:'foo', bar:'bar'}; // f='foo' b='bar'

八、解构赋值的应用

8.1 交换变量

let x=1, y=2;
[x, y] = [y, x];
console.log(x,y); // 2 1

8.2 接收返回值

function foo() {
      return [1,2,3];
}
let [a,b,c] = foo();
console.log(a,b,c); // 1 2 3

function bar() {
      return {
            b1: 'bar1',
            b2: 'bar2'
      }
}
let {b1, b2} = bar();
console.log(b1, b2); // 'bar1' 'bar2'

8.3 获取jsON数据

var json = {
      name: 'mm',
      age: 18
}
let {name, age, say='暂无数据'} = json;
console.log(name, age); // 'mm' 18 '暂无数据'

8.4 获取模块数据

导出模块时用export,导入模块时用import。

模块导出:(文件名为:module.js

let [a,b,c] = [1,'second',true];
export {
    a,b,c
}

模块导入:

import {a,b,c} from './module.js';
console.log(a,b,c); // 1,'second',true

总结

  1. 等号左右结构和形式要对应;
  2. 数组解构赋值时,左边变量的顺序和右边变量值的顺序是一一对应的;对象结构赋值时,左右两侧的顺序不重要,只要找到就行;
  3. 如果左边没有匹配到右边的值,那么当做undefined处理,把undefined赋值给左边;
  4. 剩余运算符要放在参数末尾的位置上,如果是数组,那么会以数组的形式赋值给左边的变量,如果是对象,则以对象形式赋值。
  5. 默认值生效的前提是,右边对应数组位置或者对象属性名的数据严格等于undefined。(===)
  6. 用途:ajax后台大量的json数据传递到浏览器客户端,用解构赋值可以方便地获取数据
  7. 用途:功能模块导入。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8890

es6中const定义的属性是否可以改变_为什么有人说const并非一定为常量

const是用来定义常量的,而且定义的时候必须初始化,且定义后不可以修改。const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。

ES6新的变量声明方式

在ES6之前,JavaScript是没有块级作用域的,如果在块内使用var声明一个变量,它在代码块外面仍旧是可见的。ES6规范给开发者带来了块级作用域,let和const都添加了块级作用域,使得JS更严谨和规范。

详解JavaScript模块化开发require.js

js模块化的开发并不是随心所欲的,为了便于他人的使用和交流,需要遵循一定的规范。目前,通行的js模块规范主要有两种:CommonJS和AMD

对ES6的yield示例分析

这里主要是对yield关键字的,yield实际上可以看作是一种新的中断机制,大家都知道javascript函数执行是顺序的,中途没有暂停,等待消息只能通过回调或者settimeout等延迟检查来完成。

ES6箭头函数(Arrow Functions)

箭头函数中的 this 指向的是定义时的对象,而不是使用时的对象;由于 箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数,他们的第一个参数会被忽略

es6 Reflect对象

Reflect是ES6为操作对象而提供的新API,而这个API设计的目的只要有:将Object对象的一些属于语言内部的方法放到Reflect对象上,从Reflect上能拿到语言内部的方法。如:Object.defineProperty,修改某些object方法返回的结果。让Object的操作都变成函数行为。

node可以用es6语法吗?

Node本身已经支持大部分ES6语法,但是import export,以及async await(Node 8 已经支持)等一些语法,我们还是无法使用。为了能使用这些新特性,我们就需要使用babel把ES6转成ES5语法。

ES6 动态计算属性名

在ES5之前,如果属性名是个变量或者需要动态计算,则只能通过 对象.[变量名] 的方式去访问,而且这种动态计算属性名的方式 在字面量中 是无法使用的

ES5和ES6对象导出和导入

如果模块中使用 export default {},只能通过 import 对象名称 from 模块路径 ,不能通过 import {对象名称} from 模块路径。如果使用 import {对象名称} from 模块路径 导出具体某个对象或者方法名称

ES6新特性:JavaScript中Set和WeakSet类型的数据结构

ES6提供了新的数据结构Set,Set对象不是数组, 可以用来保存对象或者基本类型, 所有保存的值都是唯一的, chrome浏览器>38和FF>13,以及nodeJS,对Set支持良好, 以下的一些代码,都可以拷贝到控制台直接运行哦;

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广