<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>对象的解构赋值</title>

<script src="../../../vendor/traceur.js"></script>

<script src="../../../vendor/bootstrap.js"></script>

<script type="text/traceur">

    var { name, age } = { name: "Conan", age: 28 };

    console.log(name);    //Conan

    console.log(age);    //28

--------------------------------------------------

    var { name, age, id } = { id: "007", name: "Conan", age: 28 };

    console.log(name);    //Conan

    console.log(age);    //28

    console.log(id);    //007

--------------------------------------------------

    var { person_name, person_age, person_id } = { id: "007", name: "Conan", age: 28 };

    console.log(person_name);    //undefined

    console.log(person_age);    //undefined

    console.log(person_id);        //undefined

    var { name: person_name, age: person_age, id: person_id } = { id: "007", name: "Conan", age: 28 };

    console.log(person_name);    //Conan

    console.log(person_age);    //28

    console.log(person_id);        //007

    let object = { first: "Hello", last: "World" };

    let { first: firstName, last: lastName} = object;

    console.log(firstName);    //Hello

    console.log(lastName);    //World

------------------------------------------------------

    var { x = 3 } = {};

    console.log(x);    //3

    var { x, y = 5 } = { x: 1 };

    console.log(x);    //1

    console.log(y);    //5

    var { x, y } = { x: 1 };

    console.log(x);    //1

    console.log(y);    //undefined

    var { x, y=5 } = { x: 1 ,y:9};

    console.log(x);    //1

    console.log(y);    //9

    var { message: msg = "You Are A Person!" } = {};

    console.log(msg);    //You Are A Person!

    var { x = 3 } = { x: undefined };

    console.log(x);    //3

    var { y = 3 } = { y: null }; //null优先级最高

    console.log(y);    //null

----------------------------------------------------

    var x;

    {x} = { x: 1 };  //报错，需要加上小括号

    console.log(x);    //1

-------

    var x;

    ({x} = { x: 1 });//已声明变量的解构赋值

    console.log(x);    //1

-----------------------------------------------------

    let { sin, cos, tan, log } = Math;

    console.log(sin(Math.PI/6));        //0.49999999999999994

    console.log(Math.sin(Math.PI/6));    //0.49999999999999994

    console.log(cos(Math.PI/6));        //0.8660254037844387

    console.log(Math.cos(Math.PI/6));    //0.8660254037844387

    console.log(tan(Math.PI/6));        //0.5773502691896257

    console.log(Math.tan(Math.PI/6));    //0.5773502691896257

    console.log(log(Math.PI/6));        //-0.6470295833786549

    console.log(Math.log(Math.PI/6));    //-0.6470295833786549

</script>

</head>

<body>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>字符串的解构赋值</title>

<script src="../../../vendor/traceur.js"></script>

<script src="../../../vendor/bootstrap.js"></script>

<script type="text/traceur">

//字符串被转换成了一个类似数组的对象。类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

    const [ a, b, c, d, e ] = "Hello";//转换成数组,根据下标

    console.log(a);    //H

    console.log(b);    //e

    console.log(c);    //l

    console.log(d);    //l

    console.log(e);    //o

    const { length: len } = "Hello";

    console.log(len);    //5

    const { length } = "Hello World!";//转换成对象，寻找字符串对象的length属性

    console.log(length);//12

</script>

</head>

<body>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>函数参数的解构赋值</title>

<script src="../../../vendor/traceur.js"></script>

<script src="../../../vendor/bootstrap.js"></script>

<script type="text/traceur">

    function sum([x, y]) {//传的是数组

        return x + y;

    };

    console.log(sum([1, 2]));    //3

-------------------------------------------

    function fun ({x = 1, y = 2} = {}) {

        return [x, y];//输出数组

    };

    console.log(fun({x: 100, y: 200}));    //[100, 200]

    console.log(fun({x: 100}));            //[100, 2]

    console.log(fun({}));                //[1, 2]

    console.log(fun());                    //[1, 2]

--------------------------------------------

    function fun ({x, y} = { x: 1, y: 2 }) {

        return [x, y];

    };

    console.log(fun({x: 100, y: 200}));    //[100, 200]，{x, y} = { x: 1, y: 2 }没有执行

    console.log(fun({x: 100}));            //[100, undefined]，{x, y} = { x: 1, y: 2 }没有执行

    console.log(fun({}));                //[undefined, undefined]，{x, y} = { x: 1, y: 2 }没有执行

    console.log(fun());                    //[1, 2]，{x, y} = { x: 1, y: 2 }执行了

</script>

</head>

<body>

</body>

</html>

es68对象的解构赋值的更多相关文章

  1. ES6 对象的解构赋值

    对象的解构赋值 解构不仅可以用于数组,还可以用于对象. let {foo,bar} = {foo:"aaa",bar:"bbb"}; console.log(f ...

  2. ES6变量的解构赋值（二）对象的解构赋值

    前面我们知道,数组的结构赋值需要按顺序进行赋值, let [a,,c] = [,,] console.log(a); console.log(c);//3 let [a,b] = [1];consol ...

  3. es6☞对象的解构赋值

    变量必须与属性同名 let {name, age} = {name: 'wang', age: 22}; console.log(name, age); //wang 22 let {name} = ...

  4. ES6学习-5 解构赋值（2）对象的解构赋值

    啥也不说,先举个栗子: 1 let { myname, myage } = { myage: 18, myname: "郭郭" }; 2 console.log(myname) / ...

  5. (3)ES6解构赋值-对象篇

    对象的解构赋值(可以不按顺序,但是key必须一样否则为undefined) //demo1 var {name,age} = { name: "Jewave", age:26 }; ...

  6. 关于ES6 的对象解构赋值

    之 前写了关于ES6数组的解构 现在 go on ; 解构不仅可以用于数组,还可以用于对象: 对象的解构和数组有一个重要的不同.数组的元素是按次序排列的,变量的取值是由他的位置决定的:而对象的属性没有 ...

  7. es6之变量的解构赋值

    es5中通常我们声明变量都是以下的方式: var a = 10; var b = 20; var c = 30; //或者 var a = 10,b = 20,c = 30; //或者 var arr ...

  8. ES6 - Note2：解构赋值

    ES6的解构赋值就是利用模式匹配从按照一定模式的数组或者对象中提取值赋值给变量. 1.数组的解构赋值 在ES6以前,变量的赋值是直接指定的,以后可以这么来写,如下所示 let [a,b,c] = [1 ...

  9. ES6（二）解构赋值详解

    详解一下之前的解构赋值 ①解构赋值中的"..." let [a,...b]= [1]; b // [] ...代表变量b去匹配剩余的所有元素返回一个数组 ,匹配不到时返回[] // ...

随机推荐

  1. POJ 3273 二分答案

    思路:二分答案经典题吧....注意边界就OK了 //By SiriusRen #include <cstdio> #include <algorithm> using name ...

  2. 启动hadoop遇到的datanode启动不了

    从截图上看是datanode的clusterID 和 namenode的clusterID 不匹配. 解决办法: 根据日志中的路径,cd /hadoop/data/dfs/ 能看到 data和name ...

  3. PostgreSQL Replication之第六章 监控您的设置（2）

    6.2 检查pg_stat_replication 检查归档以及 archive_command主要用于即时恢复( PITR,Point-In-Time- Recovery).如果您想监控一个基于流的 ...

  4. bzoj1604 牛的邻居 STL

    Description 了解奶牛们的人都知道,奶牛喜欢成群结队．观察约翰的N(1≤N≤100000)只奶牛,你会发现她们已经结成了几个“群”．每只奶牛在吃草的时候有一个独一无二的位置坐标Xi,Yi(l ...

  5. CF732F Tourist Reform（边双联通）

    题意 在一张有向图中,设 ri 为从点 i 出发能够到达的点的数量. 定义有向图的“改良值”为 ri 的最小值. 现给出一张无向图,要求给每条边定一个方向,使产生的有向图“改良值”最大. 输出 最大改 ...

  6. python常用函数库收集。

    学习过Python都知道python中有很多库.python本身就是万能胶水,众多强大的库/模块正是它的优势. 收集一些Python常用的函数库,方便大家选择要学习的库,也方便自己学习收集,熟悉运用好 ...

  7. ConEmu windows上的终端工具

    ConEmu Windows terminal   官网: http://conemu.github.io/        

  8. ubutun lunix 64安装neo4j 图形数据库

    借鉴链接: https://my.oschina.net/zlb1992/blog/915038

  9. CMDB学习之六 --客户端请求测试,服务端api优化

    客户端使用agent 请求测试,agent使用的POST 请求,使用requests模块 本地采集,汇报服务端 #!/usr/bin/env python # -*- coding:utf-8 -*- ...

  10. [HNOI2012]矿场搭建（割点）

    [HNOI2012]矿场搭建 题目描述 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤点设立救援出 ...