<!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 2110 二分+暴搜

    题意: 给你一个矩阵 ,你能往各个方向走(不走出去就行),每次只能上下左右走一格,问路径上的点权最大值和最小值的差最小是多少. 思路: 首先 二分最后的答案, 暴力枚举当前的区间是啥. DFS 就OK ...

  2. Spring Boot AutoConfiguration注解@ConditionalXXXX之前生今世

    1.注解@Conditional的定义 @Retention(RetentionPolicy.RUNTIME) @Target({ElementType.TYPE, ElementType.METHO ...

  3. 003.ES2015和ES2016新特性--类.md

    JavaScript使用的是基于原型的OO模型,用对象字面量或者函数来实例化对象,用原型链来实现继承. 这样对于数据传统C++.Java的OO范式的开发者来说,会感到比较困惑,于是从ES2015开始逐 ...

  4. rails 开发随手记 8

    rails上传文件 无需gem 首先是model class DataFile < ActiveRecord::Base def initialize end def name @name en ...

  5. 关联Anaconda和最新Pycharm2018.3.2

    在Anaconda和Pycharm 2018.3.2 x64都安装好之后,进行Anaconda 与Pycharm的关联操作 首先File -->New Project 打开以后切记要把Proje ...

  6. 阿里云主机centos设置虚拟内存

    http://blog.csdn.net/luwei42768/article/details/51241758 https://my.oschina.net/u/2306127/blog/65726 ...

  7. 洛谷 P1754 球迷购票问题

    P1754 球迷购票问题 题目背景 盛况空前的足球赛即将举行.球赛门票售票处排起了球迷购票长龙. 按售票处规定,每位购票者限购一张门票,且每张票售价为50元.在排成长龙的球迷中有N个人手持面值50元的 ...

  8. scala细节

    在高版本中,scala使用了自己的String,而不是java.lang.String 字符串转数字:"33.4".toDouble    "33.4".toF ...

  9. [Python] Boolean Or "Mask" Index Arrays filter with numpy

    NumPy Reference: Indexing Integer array indexing Boolean array indexing Note: The expression a < ...

  10. HDU 4462 Scaring the Birds (暴力枚举DFS)

    题目链接:pid=4462">传送门 题意:一个n*n的区域,有m个位置是能够放稻草人的.其余都是玉米.对于每一个位置(x,y)所放稻草人都有个作用范围ri, 即abs(x-i)+ab ...