本文的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

　　字符串和数字的解构

　　下面代码的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接口，都可以采用数组形式的解构赋值， 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)， 简化代码的更多相关文章

  1. 解构赋值 Destructuring Assignment

    解构赋值 Destructuring Assignment ES6中可以通过一定的模式将数组或对象中的值直接赋值给外部变量,称为解构 对象的解构赋值 // 在ES5中,当需要获取一个对象中的变量值的时 ...

  2. ECMA Script 6新特性之解构赋值

    1.基本概念用法 1.1解构赋值:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值. var a = 1; var b = 2; var c = 3; /*上述赋值语句用解构赋值为*/ v ...

  3. javascript ES6 新特性之 解构

    解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值 var arr = [1, 2, 3]; //传统方式 var a = arr[0], ...

  4. ECMAscript6新特性之解构赋值

    在以前,我们要对变量赋值,只能直接指定值.比如:var a = 1;var b = 2;但是发现这种写法写起来有点麻烦,一点都不简洁,而在ECMAScript6中引入了一种新的概念,那就是" ...

  5. ES6新特性之解构使用细节

    ES6的解构说白了就是能够让我们一次性取到多个值,大致可分为一下几个方面 1.数组解构 普通的一维数组解构,如下one = array[0],two=array[1],three=array[2] v ...

  6. ECMAScript 6的解构赋值 ( destructuring assignment)

    var provinceValues=["010","020","028","0755","023" ...

  7. es6入门2--对象解构赋值

    解构赋值:ES6允许按照一定规则从数组或对象中提取值,并对变量进行赋值.说直白点,等号两边的结构相同,右边的值会赋给左边的变量. 一.数组的解构赋值: 1.基本用法 let [a, b, c] = [ ...

  8. 石川es6课程---6、解构赋值

    石川es6课程---6.解构赋值 一.总结 一句话总结: 结构相同一一对应的方式赋值:let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8 ...

  9. 【ES6】对象的新功能与解构赋值

    ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始 ...

随机推荐

  1. android代码优化----ListView中自定义adapter的封装（ListView的模板写法）

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  2. lock关键字只不过是C#提供的语法糖

    lock关键字只不过是C#提供的语法糖, 最终使用的还是Monitor类. Monitor类的Enter方法要求传入的参数不为null, 否则会有ArgumentNullException excep ...

  3. [转]MVC整合Ajax

    MVC教程第五篇:MVC整合Ajax   2010-02-01 作者:张洋 来源:张洋的BLOG   摘要 本文将从完成“输入数据验证”这个功能出发,逐渐展开ASP.NET MVC与Ajax结合的方法 ...

  4. [No000052]大蒜怎么吃最美容？吃大蒜的功效及禁忌

    大蒜是最常见的香辛调味料,它被称为天然抗生素,富含大蒜素等多种营养物质和抗氧化剂,具有多种美肤美容作用. 大蒜的5种美容功效 1.除皱.大蒜里的某些成分,有类似维生素E与维生素C的抗氧化.防衰老特性, ...

  5. java 22 - 3 多线程的概述以及其它所涉及的东西（看）

    1:要想了解多线程,必须先了解线程,而要想了解线程,必须先了解进程,因为线程是依赖于进程而存在. 2:什么是进程? 通过任务管理器我们就看到了进程的存在. 而通过观察,就可以发现只有运行的程序才会出现 ...

  6. bzoj4034: [HAOI2015]T2

    4034: [HAOI2015]T2 Time Limit: 10 Sec  Memory Limit: 256 MB Submit: 2684  Solved: 843 Description 有一 ...

  7. android之android.intent.category.DEFAULT的用途和使用

    1.要弄清楚这个问题,首先需要弄明白什么是implicit(隐藏) intent什么是explicit(明确) intent. Explicit Intent明确的指定了要启动的Acitivity , ...

  8. 为什么那么多人想开发一元夺宝类app？

    别拿你的无知和愚蠢,来证明主观的判断! 国人对一切事物具有怀疑的本性是好的, 但是若不建立于科学的分析方法, 那就是愚昧! 身边有朋友玩夺宝投入较多,产出较少,于是向我求助.想从数据分析的角度知道到底 ...

  9. 关闭tomcat, 部署并启动tomcat的脚本

    /opt/tomcat/bin/shutdown.sh rm -f /opt/tomcat/webapps/ibank.war rm -rf /opt/tomcat/webapps/ibank cp ...

  10. SQL SERVER的连接方式

    最近在做项目的时候,遇到了SQLSERVER的连接,以前是很模糊的,现在做一个简单的总结. 针对SQL_SERVER,连接指定的方式有两种,一种是Where条件指定方式,另外一种是采用On连指定连接条 ...