deep-in-es6(五)
解构 Destructuring:
解构赋值允许使用类似数组或对象字面量的语法将数组和对象的属性赋值给给中变量。
一般情况访问数组中的前三个元素:
var first = arr[0];
var second = arr[1];
var third = arr[2];
使用解构:
var [first,second,third] = arr;
1.数组与迭代器的解构:
语法形式:var/let/const [variablel1,variablel2,variablel3,...,variablelN] = array;
var [foo,[[bar],baz] = [1,[[2],3]];
console.log(foo);//
var [,,third] = ["foo","bar","baz"];
console.log(third);//baz
//也可以通过不定参数模式获取数组中所有尾随的元素,依然数个数组。
var [head,...tail] = [1,2,3,4,5,6];
console.log(tail);//2,3,4,5,6
当访问空数组或者越界访问数组时,解构与索引的行为一致,最终得到的结果是undefined;
数组解构赋值的模式适用于任意的迭代器:
function* fibs() {
var a = 0;
var b = 1;
while(true) {
yield a;
[a,b] =[b,a+b];
}
}
var [first,second,third,fourth,fifth,sixth] = fibs();
console.log(fifth);//
2.对象的解构:
通过解构对象可以把对象的每个属性与不同的变量绑定,首先指定被绑定的属性,然后紧跟一个要解构的变量。
var robotA = { name: "alphago" };
var robotB = {name: "master"}
var {name: nameA} = robotA;
var {name: nameB} = robotB;
console.log(nameA+" "+nameB);
属性名与变量名一致时,可以简写
var {foo,bar} = {foo: "alphago",bar: "master"};
console.log(foo+" "+bar);
解构:
var obj = {
arrayProp: ["Zapp",{second: "Assassin" }]
};
var {arrayProp: [first,{ second }]} = obj;
console.log(first);//Zapp
console.log(second);//Assassin
解构一个未定义的属性时,得到的值为undefined:
var {missing} = {};
console.log(missing);//undefined
注意:解构对象并赋值给变量时,如果没有声明会出现一个语法错误:Syntax error
{blowUp} = {blowUp:10}
//Syntax error 这是因为解析引擎解析到{开始的语句会认为这是一个代码块是一个语句块,解决的办法是将整个表达式用一对小括号包裹起来。
( {blowUp} = {blowUp:10} );
//显示未定义的提示错误而非语法错误
解构值不是对象,数组或迭代器。
var {blowUp} = null;//TypeError: Cannot destructure property `blowUp` of 'undefined' or 'null'.(null 没有属性)
当然可以解构其他原始的类型,如:布尔值,数值,字符串,但是你将会得到的是undefined:
var { whf } = NaN;
console.log(whf);//undefined
默认值:
当你要解构的属性未定义时可以提供一个默认值;
var [missing = true] = [];
console.log(missing);//true
var {message: msg = "Something went wrong"} = {};
console.log(msg);//Something went wrong
var {x=3} = {};
console,log(x)//
解构的实际应用:
函数参数定义:
为了设计良好的API,通常的做法是为函数世界一个对象作为参数,然后将不同的实际参数作为对象属性,以避免让API使用者记住多个参数的使用顺序。我们可以用解构特性来避免这种问题,当我们想要引用它的其中一个属性时,大可不必反复使用这一单以参数对象。
function removeBreakpoint({url,line,column}) {
//...
}
配置对象参数:
eg:
jQuery.ajax = function(url,{
async = true,
beforeSend = noop,
cache = true,
complete = noop,
crossDomain = false,
global = true,
//...
}) {
//...
}
这样我们可以避免对配置对象的每一个属性都重复 var foo = config.foo || theDefaultFoo;这样的操作。
与es6迭代器协议协同使用:
当我们迭代Maps(es6新加的对象),可以得到一些列如[key,value]的键值对,我们可以对这些键值对解构,跟轻松的访问键和值:
var map = new Map();
map.set(window,"the global");
map.set(document,"the document");
for(var [key,value] of map) {
console.log(key+"is "+value);
}
//[object Window]is the global
//[object HTMLDocument]is the document
只遍历键:
for(var [key] of map) {//...}
只遍历值:
for(var [,value] of map) {//...}
多重返回值:
JavaScript 语言中尚未整合多重返回值的特性,但是无须多此一举,因为我们可以返回一个数组并将结果解构:
function returnMultipleValues() {
return [1,2];
}
var [foo,bar] = returnMultipleValues();
console.log(foo+" "+bar);//1 2;
或者可以使用一个对象作为容器并为返回值命名:
function returnMultipleValues1() {
return {
foo1 : 1,
bar1 : 2
}
}
var {foo1,bar1} = returnMultipleValues();
console.log(foo1+" "+bar1);
这两个模式都比额外保存一个临时变量要好得多。
function returnMultipleValues3() {
return {
foo2 : 1,
bar2 : 2
}
}
var temp = returnMultipleValues3();
var fo = temp.foo2;
var ba = temp.bar2;
console.log(fo+" "+ba);
使用解构导入部分CommonJS模块
我们导入CommonJS模块X时,很可能在模块X中道出了许多我们根本没打算用的函数。通过解构,可以显示定义模块的一部分来拆分使用,同时还不会污染我们的命名空间:
const { SourceMapConsumer, SourceNode } = require("source-map");
deep-in-es6(五)的更多相关文章
- Deep learning:五十一(CNN的反向求导及练习)
前言: CNN作为DL中最成功的模型之一,有必要对其更进一步研究它.虽然在前面的博文Stacked CNN简单介绍中有大概介绍过CNN的使用,不过那是有个前提的:CNN中的参数必须已提前学习好.而本文 ...
- ES6(五) 数组扩展
Array.of方法用于将一组值,转换为数组. Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES ...
- Deep learning:五十(Deconvolution Network简单理解)
深度网络结构是由多个单层网络叠加而成的,而常见的单层网络按照编码解码情况可以分为下面3类: 既有encoder部分也有decoder部分:比如常见的RBM系列(由RBM可构成的DBM, DBN等),a ...
- es6五种遍历对象属性的方法 - 表格整理
ES6 一共有5种方法可以遍历对象的属性. (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性). (2)Object.keys(obj) Obje ...
- 转载 Deep learning:五(regularized线性回归练习)
前言: 本节主要是练习regularization项的使用原则.因为在机器学习的一些模型中,如果模型的参数太多,而训练样本又太少的话,这样训练出来的模型很容易产生过拟合现象.因此在模型的损失函数中,需 ...
- deep learning (五)线性回归中L2范数的应用
cost function 加一个正则项的原因是防止产生过拟合现象.正则项有L1,L2 等范数,我看过讲的最好的是这个博客上的:机器学习中的范数规则化之(一)L0.L1与L2范数.看完应该就答题明白了 ...
- Deep Learning 19_深度学习UFLDL教程:Convolutional Neural Network_Exercise(斯坦福大学深度学习教程)
理论知识:Optimization: Stochastic Gradient Descent和Convolutional Neural Network CNN卷积神经网络推导和实现.Deep lear ...
- 转载 Deep learning:六(regularized logistic回归练习)
前言: 在上一讲Deep learning:五(regularized线性回归练习)中已经介绍了regularization项在线性回归问题中的应用,这节主要是练习regularization项在lo ...
- 助你上手Vue3全家桶之Vue3教程
目录 前言 1,setup 1.1,返回值 1.2,注意点 1.3,语法 1.4,setup的参数 2,ref 创建响应式数据 3,reactive 创建响应式数据 4,computed 计算属性 5 ...
- vue3快速上手
前言 虽然Vue3肯定是未来的趋势,但还不是很成熟,实际开发中用的也不多,建议学Vue3之前先掌握Vue2,将Vue3作为未来的知识储备. Vue3快速上手 Vue3简介 2020年9月18日,Vue ...
随机推荐
- NodeJS学习笔记 (24)本地路径处理-path(ok)
模块概览 在nodejs中,path是个使用频率很高,但却让人又爱又恨的模块.部分因为文档说的不够清晰,部分因为接口的平台差异性. 将path的接口按照用途归类,仔细琢磨琢磨,也就没那么费解了. 获取 ...
- ES6学习笔记(十四)Generator函数
清明时节雨纷纷,路上行人欲断魂. 借问酒家何处有,牧童遥指杏花村. 二零一九年农历三月初一,清明节. 1.简介 1.1.基本概念 Generator 函数也是 ES6 提供的一种异步编程解决方案,据说 ...
- ES6学习4 变量的解构赋值
变量的解构赋值 一.数组结构赋值 1.数组结构赋值 let [a, b, c] = [1, 2, 3]; ES6 可以从数组中提取值,按照对应位置,对变量赋值. 1) 本质上,这种写法属于“模式匹配 ...
- HDU-4310 Hero 贪心问题
题目链接:https://cn.vjudge.net/problem/HDU-4310 题意 打dota,队友太菜,局势变成1vN.还好你开了挂,hp无限大(攻击却只有一点每秒-_-). 但是你并不想 ...
- updatedb---创建或更新slocate命令所必需的数据库文件
updatedb命令用来创建或更新slocate命令所必需的数据库文件.updatedb命令的执行过程较长,因为在执行时它会遍历整个系统的目录树,并将所有的文件信息写入slocate数据库文件中. 补 ...
- vue使用axios中 this 指向问题
1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决.如下: methods: { lo ...
- ECNUOJ 2147 字符环
字符环 Time Limit:1000MS Memory Limit:65536KBTotal Submit:562 Accepted:146 Description 字符环:就是将给定的一个字符串 ...
- python的开发工具UliPad安装篇
之前文章里写过一个搭建windows下搭建Selenium+Eclipse+Python环境,如今认为这个Eclipse太大了,太笨重了,重新启动又慢,像Python脚本轻级语言,不是必需用那么大的工 ...
- Thrift 基础教程(一)安装篇
1.Thrift简单介绍 Thrift是一款由Fackbook开发的可伸缩.跨语言的服务开发框架,该框架已经开源而且增加的Apache项目.Thrift主要功能是:通过自己定义的Interface D ...
- C++语言笔记系列之十——静态成员
1.静态成员 (1)由keywordstatic修饰 静态变量定义语句在编译阶段就运行,运行过程中不再运行. (2)分类:静态数据成员.静态成员函数. (3)静态成员时类的全部对象共享的成员,而不是某 ...