什么是解构、展开?

展开与解构作用相反,简单来说:

解构:解构赋值允许你使用数组或对象字面量的语法,将数组和对象的属性付给各种变量。

展开:允许你讲一个数组展开为另一个数组,或一个对象展开为另一个对象。

    1. 数组解构

      // 1.数组元素的赋值-JavaScript语法
      var first=someArray[0];
      var second=someArray[1];
      var third=someArray[2]; // 2.对比一下TypeScript、ES6提供简介、高效、可读的解构语法
      var [first,second,third]=someArray; // 3. 对任意深度的嵌套数组进行解构
      var [foo,[[bar],baz]]=[1,[[2],3]];
      console.log(foo);//
      console.log(bar);//
      console.log(baz);// // 4.忽略尾随元素
      let [first]=[1,2,3,4];
      console.log(first);// // 5 .忽略部分元素
      let [,second,,forth]=[1,2,3,4];
      console.log(second);//
      console.log(forth);//
    2. 对象解构 

      // 1. 解构对象
      let o={
      a:'foo',
      b:12,
      c:'bar'
      };
      let {a,b}=o; // 2. 没有声明的赋值
      ({a,b}={a:'foo',b:12,c:'bar'});//注意此处,需要用括号括起来,因为javascript通常会以{起始的语句作为一个代码块。 // 3.对象里面可以使用 ... 语法创建剩余变量
      let {a,...passthrough}=o;
      let total=passthrough.b+passthrough.c.length; // 4. 属性重命名
      let {a:newName1,b:newName2}=o; //a:newName1读作“a作为newName1”,等价于一下写法:
      let newName1=o.a;
      let newName2=o.b; // 5. 指定类型
      let {a,b}:{a:string,b:number}=o; // 6 .指定默认值(即使b为udefined,obj的属性a,b也都会有值)
      function keepWhole(obj:{a:string,b?:number}{
      let {a,b=1001}=obj;
      });
    3. 展开 

      // 1. 数组展开
      let first=[1,2];
      let second=[3,4];
      let all=[0,...first,...second,5];
      console.log(all);//0,1,2,3,4,5 // 2. 对象展开(属性值覆盖)
      let default={ food:'spicy',price:'$',drink:'coko'};
      let search={...default,food:'rich'};
      console.log(search);//{food:'rich',price:'$',drink:'coko'} // 3.对象展开:它只包含自身的可枚举的属性。 并且会丢失展开对象的方法:
      class C={p:12,m(){}};
      let c=new C();
      let clone={...c};
      console.log(clone.p);//
      console.log(clone.m);//error!

      ___end

Typescript 解构 、展开的更多相关文章

  1. TypeScript 解构和展开

    解构数组 解构数组元素 let input = [1, 2]; let [first, second] = input; console.log(first,second); 交换值 [first, ...

  2. TypeScript 解构

    ⒈解构数组 最简单的解构莫过于数组的解构赋值了: let input = [1, 2]; let [first, second] = input; console.log(first); // out ...

  3. TypeScript笔记 5--变量声明(解构和展开)

    解构是什么 解构(destructuring assignment)是一种表达式,将数组或者对象中的数据赋给另一变量. 在开发过程中,我们经常遇到这样问题,需要将对象某个属性的值赋给其它两个变量.代码 ...

  4. Typescript中一些不理解的概念解释(泛型、断言、解构、枚举)

    新的项目想使用typescript,因此又对其概念及使用过一遍,本文主要记录下对之前一些概念不太理解的地方. 1.泛型 定义: 在定义函数.接口或者类的时候,不预先指定具体的类型,而是在使用的时候再指 ...

  5. TS学习之解构与展开

    一.解构 1.解构数组 let input = [1, 2]; let [first, second] = input; console.log(first); // outputs 1 consol ...

  6. 变量声明---let,const,解构

    let在很多方面与var是相似的,但是可以帮助大家避免在JavaScript里常见一些问题. const是对let的一个增强,它能阻止对一个变量再次赋值. 块作用域 当用let声明一个变量,它使用的是 ...

  7. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

  8. ES6新特性-------解构、参数、模块和记号(续)

    六.解构 解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: //ES6 let [x,y]=[1,2];//x=1,y=2 //ES5 var arr=[1,2]; var x=a ...

  9. 前端笔记之ES678&Webpack&Babel(上)初识ES678&Babel&let和const&解构&语法

    一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...

随机推荐

  1. mac+phpstorm增加xdebug调试

    一.版本信息 mac 10.10.5 phpstorm 10.0.3 xdebug   版本需要与phpstorm匹配,匹配地址 点我匹配  点我查看所有版本 提示:不确定xdebug版本的,把php ...

  2. 用awk写递归

    看到自己很多年前写的一篇帖子,觉得有些意义,转录过来,稍加修改. awk是一种脚本语言,语法接近C语言,我比较喜欢用,gawk甚至可以支持tcp/ip,用起来非常方便. awk也支持递归,只是awk不 ...

  3. Linux常用操作命令(三)

    查看linux日志某几行 用逆序显示命令tail查看 命令格式:tail [  -r ] [  -n Number ] [ File ] [一]从第3000行开始,显示1000行.即显示3000~39 ...

  4. 百度统计API的使用

    百度统计API的使用 在搭建自己博客的时候,希望自己能有个日志系统,能够看到PV.UV等信息,同时自己也搭建了个ELK系统,可惜服务器配置太低(1GHZ+1G内存),根本运行不起来.只能使用第三方的日 ...

  5. 【LeetCode】144. Binary Tree Preorder Traversal

    题目: Given a binary tree, return the preorder traversal of its nodes' values. For example:Given binar ...

  6. 3.ubuntu如何安装搜狗输入法

    1.http://blog.csdn.net/qq_21792169/article/details/53152700 2.http://jingyan.baidu.com/article/54b6b ...

  7. 3.Smarty的基本语法

    一.注释的方法是 {* 这里填注释 *} 二.在Smarty的输出赋值进来的变量 1.变量是字符串的时候 1)关联数组 $arr = array('a'=>'cai','b'=>'muqi ...

  8. 什么是VPN,VPN有什么用,怎么获得VPN

    什么是VPN? VPN英文全称是“Virtual Private Network”,翻译过来就是“虚拟专用网络”.vpn被定义为通过一个公用网络(通常是因特网)建立一个临时的.安全的连接,是一条穿过混 ...

  9. JUnit【1】断言用法之assertEquals/True/False/ArrayEquals

    前段时间去亚信面试,被问到写一个冒泡排序,心想这多新鲜,刷刷几下写好.面试官突然问,你怎么对这个程序进行单元测试?    单元测试?!    懵圈...      单元测试      代码是为了什么, ...

  10. Python3.5学习笔记-文件操作

    在Python中,操作文件对象使用open函数来创建,下表列出了常用的操作file的函数: 序号 方法及描述 1.file.close() 关闭文件.关闭后文件不能再进行读写操作. 2.file.fl ...