ECMAScript 6入门读书笔记二

2018-10-21 admin

更加便利的从匿名对象或者数组中,对变量进行赋值;

数组的解构赋值

基本样式,右边数据类型必须是可迭代的类型。

let a = 1,
    b = 2,
    c = 3;
//等价于   
//let [a, b, c] = [1, 2, 3];

对于let [a, b, c] = [1, 2, 3];就是按照[, , ,]这样的模式一一对abc进行赋值 对于数组类型的模式匹配取值还算简单的,比较容易

  • 完全解构

    let [a, [b, [c, d], e]] =[1, [2, [3, 4], 5]];  
    let [a, , b] = [1, ,3];
    let [,,...c] = [1, 2, 3, 4];  
    //...是将数组解构成一串用逗号分割的参数 ; c = [3, 4]
    
  • 不完全解构

    let [c] = [];     //c = undefined
    let [a, b] = [1]; //b = undefined
    
  • 解构报错,要么不能转成对象,要么转了也不可迭代 原生可迭代的类型有:Array,Map,Set,String,TypedArray,函数的arguments对象,NodeList对象

    let [a, b] = "1234"; //a = 1; b = 2
    
    //或者undefined,NaN,false,1,null 这些都不行
    let [a] = {a : 2}; //报错 {a : 2}is not iterable
    

设置默认值 用来对不匹配成功的变量赋初始值

let [a = 123] = [];      //a = 123
let [c, d = 123] = [1]   //d = 123
let [b = 123] = [1];     //a = 1

上面例子说明一点:匹配成功时,不使用默认值,不成功或者值为undefined时使用默认值

let [d = c] = [1];      //d = 1
let [d = c] = [];       //报错

上面例子说明两点:1.不能使用未声明的变量进行默认值设定,2.在匹配成功时,引擎是不管它的,要不然就报错了

对象的解构赋值

个人理解认为,对象解构赋值时,key的模式匹配,对value变量的赋值,其右边对象,可以不是迭代类型(个人猜测,有待商榷) 基本样式:

let {a} = {a : 1};   //a = 1;
let {a : c} = {a : 1};   //c = 1;

实际上它是let {a : a} = {a : 1};key的a是模式匹配,value的a是变量,用于成功后的赋值{a : 1, c : {d : 1}};对于这样想要分别取1,{d:1},1这3个值,怎么写匹配模式

let {a:a,c:c,c:{d:d}} = {a : 1, c : {d : 1}}; //最简单繁琐的

可以简化一下let {a,c,c:{d}} = {a : 1, c : {d : 1}};, 同理let {p, p : [h, ay], p : [, {y}]} = {p: ['Hello',{ y: 'World' }]}; 规则允许左边不存放任何变量名,也就是为空对象,没有意义但又是合法的表达式

({} = [true, false]);
({} = 'abc');
({} = []);

非变量声明的解构必需用括号括起来,不然会报错,如上是表达式,括起来就不会报错

包装类对象的解构

let {1:a} = "zxc";
let {toString: b} = "qwe";
console.log(b === String.prototype.toString);

将"zxc" => new String(“zxc”),再将其解构

函数参数的解构

function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x:3});  //[3, 0]
move();       //[0, 0]

这个参数解构有两个作用:1.x,y的默认值为0,0;2.move()参数默认值为{},所以当未输入时传入的实参为{} 不用于下面的

function move({x, y} = {x: 0,y: 0}) {
  return [x, y];
}
move({x:3})  //[3, undefined]
move();      //[0, 0]

上面例子并没有对x,y进行默认值的设定,只是对move(),传入实参进行了{x: 0,y: 0}的默认值设定

用途

个人理解:从类似数组或者对象的数值集合中快速提取自己想要的值 有趣的应用就是数值之间的交换

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

因为数组的解构必须按顺序来,不像对象的解构,按key模式匹配 其他应用有待自己对解构更加灵活的应用

原文链接:https://segmentfault.com/a/1190000016754026

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-43282.html

文章标题:ECMAScript 6入门读书笔记二

相关文章
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题;分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文。 var resizeTi...
2017-03-29
RxJS 6有哪些新变化?
RxJs 6于2018年4月24日正式发布,为开发人员带来了一些令人兴奋的增补和改进。Ben Lesh, rxJS核心开发成员,强调: RxJS 6在拥有更小API的同时,带来了更整洁的引入方式 提供一个npm包,该package可以处理...
2018-05-22
详解JavaScript ES6中的Generator
今天讨论的新特性让我非常兴奋,因为这个特性是 ES6 中最神奇的特性。 这里的“神奇”意味着什么呢?对于初学者来说,该特性与以往的 JS 完全不同,甚至有些晦涩难懂。从某种意义上说,它完全改变了这门语言的通常行为,这不是“神奇”是什么呢。 ...
2017-03-27
HTML5之WebSocket入门3 -通信模型socket.io
socket.io为什么会诞生呢?请看下面文字说明。 为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服...
2017-03-29
JS简单实现城市二级联动选择插件的方法
本文实例讲述了JS简单实现城市二级联动选择插件的方法。分享给大家供大家参考。具体如下: js实现的城市联动选择菜单,网上经常见到,不多介绍了,本款城市选择菜单原型基于Select,主要使用JavaScript来实现,运用了数组和循环等基础技...
2017-03-29
JavaScript数据类型判定的总结笔记
用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型。 但是如果尝试用typeof 来检测对象类型都一律返回&...
2017-03-27
解析JavaScript的ES6版本中的解构赋值
什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量。这个语法非常简洁,而且比传统的属性访问更加清晰。 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0...
2017-03-27
JavaScript转换二进制编码为ASCII码的方法
本文实例讲述了JavaScript转换二进制编码为ASCII码的方法。分享给大家供大家参考。具体如下: <html> <head> <script type="text/javascript...
2017-03-22
ECMAScript6中Map/WeakMap详解
JS的对象本身就是个键值结构,ES6为什么还需要加Map呢,它与普通的JS对象有何区别? 一、Map 1. Map构造器 先看Map的简单用法 // 字符串作为key, 和JS对象类似 var map = new Map...
2017-03-24
Ant design pro 开发笔记 - 表单和数据绑定
antd支持表单双向绑定,开发过程中无需通过onChange()回调函数去获取组件的值,通过 getFieldDecorator() 可以自动完成数据绑定的功能。 { getFieldDecorator('email&#x...
2018-05-25
回到顶部