<!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. matplotlib 可视化 —— 绘制常见图形

    0. 饼状图 plt.pie():Python数据可视化:饼状图 1. 三角形 描点连线,起点和终点相同 triangle1 = ((0, sqrt(3)/2), (1, 3*sqrt(3)/2), ...

  2. struts2 validate验证

    转自:https://blog.csdn.net/houpengfei111/article/details/9038233 自定义拦截器 要自定义拦截器需要实现com.opensymphony.xw ...

  3. Automation testing tool comparison - UFT & CodedUITest

    Ease of Use - Recording and Playback Functionality UFT provides 4 models to record a new test. Norma ...

  4. NestedScrollView嵌套ListView可行性总结

    由于公司项目遗留代码仍然使用PullToRefreshListView(后文简称PTRLV),且存在复用,更换RecyclerView成本太大,同时又想使用CoordinatorLayout来实现一些 ...

  5. Boom

    紧急事件!战场内被敌军埋放了n枚炸弹! 我军情报部门通过技术手段,掌握了这些炸弹的信息.这些炸弹很特殊,每枚炸弹的波及区域是一个矩形.第i枚炸弹的波及区域是以点(xi1,yi1)为左下角,点(xi2, ...

  6. struts2中标签库访问静态成员

    struts2中是可以访问静态成员的,需要以下设置: 1.设置配置文件 struts.xml 中如下: <!-- 设置运行通过ONGL访问静态方法 --> <constant nam ...

  7. 移动和PC的适配

    <script> //mode 移动端的适配方式 按需 传参 目前只有两种 px和rem (function(win, doc, mode) { var std = 750; if(/(i ...

  8. Python安装（一）

    Python的安装 打开python的官网 进入下载界面 选择下载 安装步骤如下所示: 安装完成进入到dos界面,输入python -V,如下图展示及成功 打开Python工具 1:: print() ...

  9. Linux学习总结（9）——Linux 新手必知必会的 10 条 Linux 基本命令

    Linux 对我们的生活产生了巨大的冲击.至少你的安卓手机使用的就是 Linux 核心.尽管如此,在第一次开始使用 Linux 时你还是会感到难以下手.因为在 Linux 中,通常需要使用终端命令来取 ...

  10. Ubuntu常见报错及解决方式汇总

    作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells Github:https://github.co ...