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

  本文的Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 

  解构赋值是一种表达式, 利用这种新语法, 可以直接从数组或者对象中快速提取值 赋值给不同的变量, 利用这种写法的好处是减少了代码量, 一定程度优化了代码, 也有一点缺点就是阅读代码不再那么直观了。

  解构赋值最简单的例子  

  

  解构只是新的语法, 学一学应该就好了,甚至可以自己去实现哦:




    




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没有构造函数;

  解构赋值支持多层嵌套

  解构赋值支持多层嵌套, 主要在等号两边的结构是一样的即可, 但是不要套太深, 套路太深, 把自己给套了就挂了:

   ...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: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 

你可能感兴趣的:(ES6新特性:利用解构赋值 (destructuring assignment), 简化代码)