解构 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(五)的更多相关文章

  1. Deep learning:五十一(CNN的反向求导及练习)

    前言: CNN作为DL中最成功的模型之一,有必要对其更进一步研究它.虽然在前面的博文Stacked CNN简单介绍中有大概介绍过CNN的使用,不过那是有个前提的:CNN中的参数必须已提前学习好.而本文 ...

  2. ES6(五) 数组扩展

    Array.of方法用于将一组值,转换为数组.  Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES ...

  3. Deep learning:五十(Deconvolution Network简单理解)

    深度网络结构是由多个单层网络叠加而成的,而常见的单层网络按照编码解码情况可以分为下面3类: 既有encoder部分也有decoder部分:比如常见的RBM系列(由RBM可构成的DBM, DBN等),a ...

  4. es6五种遍历对象属性的方法 - 表格整理

    ES6 一共有5种方法可以遍历对象的属性. (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性). (2)Object.keys(obj) Obje ...

  5. 转载 Deep learning:五(regularized线性回归练习)

    前言: 本节主要是练习regularization项的使用原则.因为在机器学习的一些模型中,如果模型的参数太多,而训练样本又太少的话,这样训练出来的模型很容易产生过拟合现象.因此在模型的损失函数中,需 ...

  6. deep learning (五)线性回归中L2范数的应用

    cost function 加一个正则项的原因是防止产生过拟合现象.正则项有L1,L2 等范数,我看过讲的最好的是这个博客上的:机器学习中的范数规则化之(一)L0.L1与L2范数.看完应该就答题明白了 ...

  7. Deep Learning 19_深度学习UFLDL教程:Convolutional Neural Network_Exercise(斯坦福大学深度学习教程)

    理论知识:Optimization: Stochastic Gradient Descent和Convolutional Neural Network CNN卷积神经网络推导和实现.Deep lear ...

  8. 转载 Deep learning:六(regularized logistic回归练习)

    前言: 在上一讲Deep learning:五(regularized线性回归练习)中已经介绍了regularization项在线性回归问题中的应用,这节主要是练习regularization项在lo ...

  9. 助你上手Vue3全家桶之Vue3教程

    目录 前言 1,setup 1.1,返回值 1.2,注意点 1.3,语法 1.4,setup的参数 2,ref 创建响应式数据 3,reactive 创建响应式数据 4,computed 计算属性 5 ...

  10. vue3快速上手

    前言 虽然Vue3肯定是未来的趋势,但还不是很成熟,实际开发中用的也不多,建议学Vue3之前先掌握Vue2,将Vue3作为未来的知识储备. Vue3快速上手 Vue3简介 2020年9月18日,Vue ...

随机推荐

  1. C++笔试专题一:运算符重载

    一:下面重载乘法运算符的函数原型声明中正确的是:(网易2016校招) A:MyClass operator *(double ,MyClass); B:MyClass operator *(MyCla ...

  2. php时间戳转化成时间相差8小时问题

    php时间戳 转化成时间的时候 $mytime=time(); echo $mytime.'<br />'; echo date('Y-m-d H:i:s',$mytime); 会产生8个 ...

  3. javascript ---(常用工具类的封装)

    1. type 类型判断 isString(o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String ...

  4. [洛谷P2085]最小函数值

    题目大意:有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,要求出所有函数的所有函数值中最小的m个(如有重复的要输出多个 ...

  5. free---显示内存

    free命令可以显示当前系统未使用的和已使用的内存数目,还可以显示被内核使用的内存缓冲区. 语法 free(选项) 选项 -b:以Byte为单位显示内存使用情况: -k:以KB为单位显示内存使用情况: ...

  6. 【转】30分钟掌握 C#6

    [转]30分钟掌握 C#6 1. 只读自动属性(Read-only auto-properties) C# 6之前我们构建只读自动属性: public string FirstName { get; ...

  7. Ubuntu下安装git工具

    环境:Ubuntu 9.10 git-1.8.2.3.tar.bz2 1.将安装包下载到所选文件夹下,如:/tmp 2.tar -xjf git-1.8.2.3.tar.bz2 3.cd git-1. ...

  8. hdu 3547 DIY Cube (Ploya定理)

    DIY Cube Time Limit: 2000/2000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total S ...

  9. POJ 3450--Corporate Identity【KMP &amp;&amp; 枚举】

    Corporate Identity Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 5696   Accepted: 207 ...

  10. tp5框架知识点

    项目包含的关键点,后台,前台. 入口文件. 通用配置文件. 数据库配置文件. 共有文件,css,images,js. 控制器,模型,视图. 共有类. 共有函数. 属性,方法. 命名规范. 命名空间. ...