ES6新特性：利用解构赋值 (destructuring assignment)， 简化代码
本文的Demo的运行环境为nodeJS， 参考：让nodeJS支持ES6的词法----babel的安装和使用 ；
解构赋值是一种表达式， 利用这种新语法， 可以直接从数组或者对象中快速提取值 赋值给不同的变量， 利用这种写法的好处是减少了代码量， 一定程度优化了代码， 也有一点缺点就是阅读代码不再那么直观了。
解构赋值最简单的例子
<script>
"use strict";
let [a,b,c] = [1,2,3];
console.log( a +"|"+ b +"|"+ c); //输出 1|2|3
</script>
解构只是新的语法， 学一学应该就好了，甚至可以自己去实现哦：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
{
//加入要在node中执行 ： var [a,b,c] = [1,2,3,4]；
//别打我，只是偷偷实现了一下....没有去考虑： var [a,b,...args] = [1,2,3,4]， 或者let JSString = "var [a,b,c,d] = [1,2,3,[1,2,3,4]]";
let JSString = "var [a,b,c] = [1,2,3,4]";
let parseFn = (str) => {
let [vary, val] = str.split("=");
if(vary.indexOf("var ")!=-) {
vary = vary.substr( vary.indexOf("var ")+);
}
let key = JSON.parse(vary.replace(/(\w+)/g,"\"$1\""));
let value = JSON.parse(val);
return [key, value];
};
runCode = ( key, value ,callback) => {
let i = ;
do{
if(i>key.length)break;
key[i] = value[i];
}while(i++);
callback();
};
let [key, value] = parseFn(JSString);
runCode(key, value, function() { console.log("done") });
}
</script>
</body>
</html>
对象的解构
每次看代码都要看对应的 右边数组的第一个"1"对应的是左边数组的第一个a, 右边数组的第一个"2"对应的是左边数组的第一个b...., 这个是数组的解构赋值， 对象的解构赋值就解决了这个问题;
"use strict";
let {o, b, j } = {
j:2,
b:1,
o:0
};
console.log(o+b+j); //3
let obj = {o:1, b:2, j:3};
let {o,b,j} = obj;
console.log(o, b, j); //1，2，3
字符串和数字的解构
"use strict";
let [a,b,c,d,e ] = "abcde";
console.log(a+b+c+d+e); //abcde let {valueOf} = "s";
console.log(valueOf); //[Function: valueOf]
null对象和undefined无法被解构， 因为null和undefined没有构造函数；
解构赋值支持多层嵌套
解构赋值支持多层嵌套， 主要在等号两边的结构是一样的即可， 但是不要套太深， 套路太深， 把自己给套了就挂了：
<script>
var [prehead, [head, ...sub],tail] = [0000,[1,2,3,4,5],6];
console.log(prehead, head, sub, tail);
</script>
...arg这种写法只能作为最后的参数， 如果在...arg后面加别的参数会报错：
let [a,...arg,b] = [1,2,3,4,5,6]; //运行到这边直接报错了
console.log(a);
console.log(arg);
console.log(b);
解构的结构要对应， 否者编译的时候会报错：
"use strict";
let [a,b] = 1;
console.log(a + "————"+ b);
只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值， iterator参考：生成器。
function* run() {
let a = 0;
while (true) {
yield a;
a++;
}
}
var [first, second, third, fourth, fifth, sixth] = run();
console.log(first+"_"+second+"_"+third+"_"+fourth+"_"+fifth+"_"+sixth);
函数的解构赋值
"use strict";
let fn = ( {a, b, c} ) => {
console.log(a+"_"+b+"_"+c); //输出：0_1111_22
};
fn({a:,c:,d:,b:});
函数的默认值
如果调用函数的时候没有传值， 那么从就用函数自己的默认值：
let fn = ({a ,b,c, d = "dddd"}) => {
console.log(a + b + c + d);
}
fn({c:"ccccc",b:"BBBBB",a:"AAAA"}); //把d这个变量给输出了....
实际编程中的使用：
实际使用的时候可能可能是这样的：
let fn = ( [a,b,c] ) => {
console.log(a, b, c);
};
fn([1,2,3,4]);
把两个元素交换：
let [x, y] = [1, 2];
[x, y] = [y, x];
console.log(x, y);
//tip:基本类型的转换可以这样：x = [y, y=x][0];
遍历JSON数据：
let json = {j:[0,1],s:[2,3],o:[4,5],n:[6,7]};
for(let name in json) {
let [key, value] = json[name];
console.log(key + "_" + value);
}
还有一个感觉挺好使的，提取json数据, 假设Json是从服务器返回的数据;
let Json = {responseText: "xxxx", responseXML : "XMLXML", responseHeader : "Header"};
let {responseText, responseXML} = Json;
console.log( responseText); //输出 xxxx
可以利用解构 ， 快速取值， 比如服务器返回了json数据，快速获取对应结构的值等处理数据的情况下使用：
function userId({id}) {
return id;
}
function whois({displayName: displayName, fullName: {firstName: name}}) {
console.log(displayName + " is " + name);
}
var user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};
console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"
作者： NONO
出处：http://www.cnblogs.com/diligenceday/
QQ：287101329
微信：18101055830
ES6新特性：利用解构赋值 (destructuring assignment)， 简化代码的更多相关文章
- 解构赋值 Destructuring Assignment
解构赋值 Destructuring Assignment ES6中可以通过一定的模式将数组或对象中的值直接赋值给外部变量,称为解构 对象的解构赋值 // 在ES5中,当需要获取一个对象中的变量值的时 ...
- ECMA Script 6新特性之解构赋值
1.基本概念用法 1.1解构赋值:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值. var a = 1; var b = 2; var c = 3; /*上述赋值语句用解构赋值为*/ v ...
- javascript ES6 新特性之 解构
解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值 var arr = [1, 2, 3]; //传统方式 var a = arr[0], ...
- ECMAscript6新特性之解构赋值
在以前,我们要对变量赋值,只能直接指定值.比如:var a = 1;var b = 2;但是发现这种写法写起来有点麻烦,一点都不简洁,而在ECMAScript6中引入了一种新的概念,那就是" ...
- ES6新特性之解构使用细节
ES6的解构说白了就是能够让我们一次性取到多个值,大致可分为一下几个方面 1.数组解构 普通的一维数组解构,如下one = array[0],two=array[1],three=array[2] v ...
- ECMAScript 6的解构赋值 ( destructuring assignment)
var provinceValues=["010","020","028","0755","023" ...
- es6入门2--对象解构赋值
解构赋值:ES6允许按照一定规则从数组或对象中提取值,并对变量进行赋值.说直白点,等号两边的结构相同,右边的值会赋给左边的变量. 一.数组的解构赋值: 1.基本用法 let [a, b, c] = [ ...
- 石川es6课程---6、解构赋值
石川es6课程---6.解构赋值 一.总结 一句话总结: 结构相同一一对应的方式赋值:let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8 ...
- 【ES6】对象的新功能与解构赋值
ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始 ...
随机推荐
- 第63课 C语言异常处理
1. 异常的概念 (1)程序在运行过程中可能产生异常 (2)异常(Exception)与Bug的区别 ①异常是程序运行时可预料的执行分支 ②Bug是程序是的错误,是不被预期的运行方式 2. 异常和Bu ...
- Linux系统资源使用情况
概述: 用 'top -i' 看看有多少进程处于 Running 状态,可能系统存在内存或 I/O 瓶颈,用 free 看看系统内存使用情况,swap 是否被占用很多,用 iostat 看看 I/O ...
- 协议的分用以及wireshark对协议的识别
在TCP/IP详解一书中谈到了协议的分用,书中的图1-8如上.图1-8可以很好地解释在互联网的分层结构中,底层的协议头是如何承载上层的不同的协议的.对于链路层而言,以太网首部中有不同帧类型用于表示以太 ...
- APIO2015泛做
可以在UOJ上提交也可以在bzoj上提交(权限) A. Bali Sculptures 对于前72%的数据,按位考虑,然后跑一点沙茶dp就行了. dp:用f[x][y]表示前x位分为y段是否满足条件. ...
- Distribute numbers to two “containers” and minimize their difference of sum
it can be solved by Dynamical Programming.Here are some useful link: Tutorial and Code: http://www.c ...
- 精通jQuery选择器
虽然jQuery上手简单,相比于其他库学习起来较为简单,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的方法和内部变化有上千种之多.初学者常常感到,入门很方便,提高很困难.本文的目标是 ...
- SQL SERVER函数——表值函数的处理
有些情况可能用下表值函数,表值函数主要用于数据计算出来返回结果集,可以带参数(和视图的一个大的区别),如果函数中没有过多的逻辑处理,如变量的定义,判断等,表值函数返回结果集可以简单向下面这么写: )) ...
- 在nodeJs的Express框架下用TypeScript编写router路由出现import关键字错误的解决方案
问题出现场景 在项目中采用nodejs做中间层,做页面的首屏渲染,同时采用express作为主web框架,其中express的router页面路由我采用ts语言来编写.如下: //page.ts 文件 ...
- 深入理解计算机系统（2.2）---布尔代数以及C语言上的位运算
布尔代数上的位运算 布尔代数是一个数学知识体系,它在0和1的二进制值上演化而来的. 我们不需要去彻底的了解这个知识体系,但是里面定义了几种二进制的运算,却是我们在平时的编程过程当中也会遇到的.这四种运 ...
- sql server 事务处理
事物处理 事务是SQL Server中的单个逻辑单元,一个事务内的所有SQL语句作为一个整体执行,要么全部执行,要么都不执行. 事务有4个属性,称为ACID(原子性.一致性.隔离性和持久性) ...