您的位置：首页 > 编程语言

ES6新特性：利用解构赋值 (destructuring assignment)， 简化代码

2016-05-07 02:15 771 查看
　　本文的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 ")!=-1) {
vary = vary.substr( vary.indexOf("var ")+4);
}
let key = JSON.parse(vary.replace(/(\w+)/g,"\"$1\""));
let value = JSON.parse(val);
return [key, value];
};
runCode = ( key, value ,callback) => {
let i = 0;
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>


View Code

　　对象的解构

　　每次看代码都要看对应的 右边数组的第一个"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


　　字符串和数字的解构

　　下面代码的abcde其实被转化为了字符串对象， 然后再进行解构；

"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接口，都可以采用数组形式的解构赋值。

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:0,c:22,d:33,b:1111});


　　函数的默认值

　　如果调用函数的时候没有传值， 那么从就用函数自己的默认值：

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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航