<!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. jzoj3454 表白(love)解题报告(01分数规划+DP)

    题目链接:https://jzoj.net/senior/#contest/show/2414/2 题目描述: 鸡腿是CZYZ的著名DS,但是不想追妹子的DS不是好GFS,所以鸡腿想通过表白来达到他追 ...

  2. js实现观察者模式风格替换

    如下图,我们看到两种风格:在选择男士时,页面颜色为黑色:在选择女士时,页面颜色为粉红色. 主要可以分为两类: 下拉框 ---> 被观察者 div ---> 观察者 面向过程实现风格替换: ...

  3. javascript实现多线程 Concurrent.Thread.js

    在这次我的项目中,因为前端要检测硬件加载并识别,再向后台请求发送数据,然后再返回的相应的配置文件!在这过程,要好时好几秒钟,严重影响体验效果,所以在网上靠看的方案,运用多线程去处理,这效果明显改善! ...

  4. Timestamp 转 date

    Timestamp startTime = new Timestamp(new Date().getTime());

  5. md5sum---文件校验和

    md5sum命令采用MD5报文摘要算法(128位)计算和检查文件的校验和.一般来说,安装了Linux后,就会有md5sum这个工具,直接在命令行终端直接运行. MD5算法常常被用来验证网络文件传输的完 ...

  6. free---显示内存

    free命令可以显示当前系统未使用的和已使用的内存数目,还可以显示被内核使用的内存缓冲区. 语法 free(选项) 选项 -b:以Byte为单位显示内存使用情况: -k:以KB为单位显示内存使用情况: ...

  7. 删除小脚本 srm

    提示:只能删除当前路径下的目录或文件 #!/bin/bash #将测试好的脚本,拷贝到 $PATH 能够搜索到目录下.并且改名 例如: /usr/local/bin cp /test/srm.sh / ...

  8. spring data jpa实体类映射配置

    @Entity:用来标志实体类,知名这是一个和数据库表映射的实体类 @Id注解指明这个属性映射为数据库的主键 @GeneratedValue注解默认使用主键生成方式为自增,hibernate会自动生成 ...

  9. python中的装饰器decorator

    python中的装饰器 装饰器是为了解决以下描述的问题而产生的方法 我们在已有的函数代码的基础上,想要动态的为这个函数增加功能而又不改变原函数的代码 例如有三个函数: def f1(x): retur ...

  10. 【转】C#中RSA加密解密和签名与验证的实现

    [转]C#中RSA加密解密和签名与验证的实现 RSA加密算法是一种非对称加密算法.在公钥加密标准和电子商业中RSA被广泛使用.RSA是1977年由罗纳德•李维斯特(Ron Rivest).阿迪•萨莫尔 ...