<!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. [AGC018 B] Sports Festival 解题报告

    题目链接:https://agc018.contest.atcoder.jp/tasks/agc018_b 题目: 题目大意: 有N个人参加M个体育项目,每个人对体育项目的喜爱程度有一个排名,A[i] ...

  2. c# 结构 struct

    结构是使用 struct 关键字定义的,与类相似,都表示可以包含数据成员和函数成员的数据结构. 一般情况下,我们很少使用结构,而且很多人也并不建议使用结构,但作为.NET Framework 一般型別 ...

  3. 栈 <stack> F - 宋飞正传

    I’m out of stories. For years I’ve been writing stories, some rather silly, just to make simple prob ...

  4. iOS开发——导入c文件引起的 Unknown type name 'NSString' 错误

    一般情况下出现“Unknown type name”是头文件互相引用出现的,这里不是这个,由于源码使用是c\c++与oc混编,下面三种可以解决问题方案. 解决方案一: 选择所有.c文件,将属性的 id ...

  5. 转载 ：Linux有问必答：如何在Debian或Ubuntu上安装完整的内核源码

    http://linux.cn/article-5015-1.html 问题:我需要为我的Debian或Ubuntu下载并安装完整树结构的内核源码以供编译一个定制的内核.那么在Debian或Ubunt ...

  6. C# 从需要登录的网站上抓取数据

    [转] C# 从需要登录的网站上抓取数据 背景:昨天一个学金融的同学让我帮她从一个网站上抓取数据,然后导出到excel,粗略看了下有1000+条记录,人工统计的话确实不可能.虽说不会,但作为一个学计算 ...

  7. Liquibase+spring 初步使用

    现在的工作的项目中用了liquibase,感觉挺爽的,可以跟踪.管理数据库的重构.这对于很多需求变更较大的项目是非常不错的,特别是互联网的项目.(虽然互联网Nosql已经非常流行,不过俺觉得传统关系型 ...

  8. 做一个萌萌哒的button之box-shadow

    接上篇:http://blog.csdn.net/u010037043/article/details/47035077 一.box-shadow box-shadow是给元素块加入周边阴影效果. b ...

  9. OC便利方法

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { #if //    从面向对象的角度 ...

  10. 关于android studio几种常见的错误解决

    我也是从ec转到as的,没办法,大势所趋嘛,然而,在使用as的过程中遇到了非常多匪夷所思的错误,如今就说一下今天我遇到的这个错误. 美工妹子给了我一张图片,用来当做button的背景图,当然,这个图也 ...