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 ...
随机推荐
- 我所理解的monad(1):半群(semigroup)与幺半群(monoid)
google到数学里定义的群(group): G为非空集合,如果在G上定义的二元运算 *,满足 (1)封闭性(Closure):对于任意a,b∈G,有a*b∈G (2)结合律(Associativit ...
- UI Framework-1: UI Development Practices
UI Development Practices Guidelines Principles for developing for Chrome. These best practices cente ...
- SSD-2(代码部分介绍)
single shot multibox detectior tensorflow 代码 一.SSD重要参数设置 在ssd_vgg_300.py文件中初始化重要的网络参数,主要有用于生成默认框的特征层 ...
- laravel模板机制
@extends('layouts.master') @section('title', 'Page Title') @section('sidebar') @parent <p>This ...
- 紫书 习题 10-2 UVa 808(建立坐标+找规律)
这次是我遇见过最迷的一次 我写的程序uDebug全过 和ac程序对拍也过,求出来的坐标是一模一样的,最后结果输出的方式也是一样的 交上去就是错的 迷 第一次遇到这种情况 大佬在哪里 #include& ...
- 题解 CF1027D 【Mouse Hunt】
这道题原本写了一个很复杂的DFS,然后陷入绝望的调试. 看了一下题解发现自己完全想复杂了. 这里大概就是补充一些题解没有详细解释的代码吧... (小声BB)现在最优解rank4(话说$O2$负优化什么 ...
- ECNUOJ 2573 Hub Connection plan
Hub Connection plan Time Limit:1000MS Memory Limit:65536KB Total Submit:743 Accepted:180 Description ...
- Python 调用snmp自定义OID实现监控
http://kkkkkk.blog.51cto.com/468162/1172726 http://blog.csdn.net/mirahs/article/details/49619729
- 使用Opencv2遇到error C2061: 语法错误: 标识符dest
在写代码是遇到了这样一个问题,error C2061: 语法错误: 标识符"dest": 1>d:\opencv\opencv\build\include\opencv2\f ...
- 数据库中的Convert
https://docs.microsoft.com/en-us/sql/t-sql/functions/cast-and-convert-transact-sql Conversion failed ...