ECMAScript 6入门读书笔记二

wawor4827 发布于2019-08-23 12:27 / 3252人阅读

摘要：变量的解构赋值更加便利的从匿名对象或者数组中，对变量进行赋值数组的解构赋值基本样式，右边数据类型必须是可迭代的类型。

变量的解构赋值

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

数组的解构赋值

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

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://www.ucloud.cn/yun/98530.html

《ECMAScript 6 入门》读书笔记

摘要：阮一峰老师开源作品。书上的示例代码可以通过在线网站代码调试工具调试。阮一峰老师开源作品。书上的示例代码可以通过在线网站代码调试工具 JS Bin 调试。作用域作用域链每个变量或函数通过执行环境 (execution context) 定义了其有权访问的其他数据，决定了他们各自的行为；全局执行环境是最顶层的执行环境，根据宿主环境的不同，表示全局执行环境的对象也不同：在浏览...

qieangel2013 2019-08-20 15:21 评论0 收藏0
ECMAScript 6入门读书笔记一

摘要：与也是用来声明变量，但是不同于，个人理解是它是用来修复的一些神奇效果，似的变量更加规范，简单来说定义的变量就是私有变量，有以下几点作用声明的变量只在它所在的代码块中生效即它的块级作用域中生效对于循环的块级作用域，当声明循环体时，有两个特点声 let与const let 也是用来声明变量，但是不同于var，个人理解是它是用来修复var的一些神奇效果，似的变量更加规范，简单来说let定义的...

ShowerSun 2019-08-23 12:27 评论0 收藏0
python基础（《Python编程：从入门到实践》读书笔记）

摘要：注本文的大部分代码示例来自书籍编程从入门到实践。一变量命名变量名只能包含字母数字和下划线。要在遍历列表的同时对其进行修改，可使用循环。四用户输入函数让程序暂停运行，等待用户输入一些文本。注：本文的大部分代码示例来自书籍《Python编程：从入门到实践》。一、变量：命名：（1）变量名只能包含字母、数字和下划线。变量名可以字母或下划线打头，但不能以数字打头（2）变量名不能包含空格，...

springDevBird 2019-07-30 16:29 评论0 收藏0
前端补集 - 收藏集 - 掘金

摘要：原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目，代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章，恰好今天专栏开通，迁移过来。破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金修订说明：发布《80% 应聘者都不及格的 JS 面试题》之后，全网阅读量超过 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 评论0 收藏0
前端补集 - 收藏集 - 掘金

摘要：原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目，代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章，恰好今天专栏开通，迁移过来。破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金修订说明：发布《80% 应聘者都不及格的 JS 面试题》之后，全网阅读量超过 6W，在知乎、掘金、cnodejs ...

AbnerMing 2019-08-20 16:57 评论0 收藏0