ES6允许按照一定的模式,从数组和对象中提取值,这被称为结构,即解开数据的结构

1、数组的解构赋值

  1. let [a,b] = [1,2]
  2. let [a,b,c=100] = [1,2] //c的默认值为100

2、对象的解构赋值

  1. let {monika,keniva} = {monika:1,keniva:2}
  2. let {monika=100,keniva} = {keniva:2} //默认值
  3. let {monika:lnov,keniva} = {keniva:2} //别名

vue中的引入组件库,以及按需引入的写法就类似于对象的解构赋值  import  {toast, messageBox} from 'mint-ui'

3、字符串解构赋值

  字符串有下标,也可以解构赋值

4、函数参数的解构赋值

  1. //d设置默认值
  2. function fn({a,b,c,d='get'}){
  3. console.log(a);
  4. console.log(b);
  5. console.log(c);
  6. console.log(d);
  7. }
  8.  
  9. fn({
  10. a:1,
  11. b:2,
  12. c:3
  13. })

5、模板字符串

  es5是拼接字符串

  es6提供的模板字符串(template string)是增强的字符串,用反引号(`)标识。在占位符${ }中写入表达式(可以求出值),类似于模板引擎等

  push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

  1. let linenv = 6;
  2. let str = `
  3. <ul>
  4. <li>${linenv}</li>
  5. </ul>
  6. `

2、ES6结构赋值和模板字符串的更多相关文章

  1. ES6新特性之模板字符串

    ES6新特性概览  http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串   http://www.infoq.c ...

  2. es6的新特性--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

  3. ES6 - 基础学习(4): 模板字符串和字符串新增方法

    模板字符串 模板字符串:我理解为将字符串格式化.模板化,将字符串加强处理,此处的模板有动词的意思. 字符串模板基本格式: `xxxxxx`(前后都用反引号[tab键上面按键]引起来).除了作为普通字符 ...

  4. ES6结构赋值

    解构赋值 从ES6开始,JavaScript引入了解构赋值,可以同时对一组变量进行赋值. 什么是解构赋值?我们先看看传统的做法,如何把一个数组的元素分别赋值给几个变量: var array = ['h ...

  5. ES6与ES5对比 模板字符串

    var title = '你好' ES5 var tpl1 = '<div>' + '<span>' + title + '</span>' '</div&g ...

  6. ES6 Template String 模板字符串

    模板字符串(Template String)是增强版的字符串,用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量. 大家可以先看下面一段代码: $(&quo ...

  7. ES6学习----let、const、解构赋值、新增字符串、模板字符串、Symbol类型、Proxy、Set

    这篇es6的学习笔记来自于表哥 表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 ES6就是JS6,JS的第 ...

  8. ES6 模板字符串Template String

    1. 模板字符串简介: 顾名思义,模板字符串是用来定义一个模板是使用的,就像Vue,React中的template语法. 首先,先来了解一下template string的基本用法: 在ES5中,我们 ...

  9. 一个令人兴奋的ES6星特性-结构赋值

    学完了前4节,今天我给大家带来的是一个令人兴奋的特性:解构赋值.这个章节代码片段有点偏多,不过可以放心,一点都不烧脑,还是老样子:简单易懂. 什么是解构赋值 按照一贯的套路,接下来的内容是解释:什么是 ...

随机推荐

  1. 【openshift】在Openshift上通过yaml部署应用

    在Openshift上通过yaml部署应用 1.通过直接执行yaml 通过如下命令直接执行 oc create -f nginx.yml nginx.yml apiVersion: v1 items: ...

  2. JavaScript的深浅复制

    JavaScript的深浅复制 为什么有深复制.浅复制? JavaScript中有两种数据类型,基本数据类型如undefined.null.boolean.number.string,另一类是Obje ...

  3. python爬虫 urllib模块url编码处理

    案例:爬取使用搜狗根据指定词条搜索到的页面数据(例如爬取词条为‘周杰伦'的页面数据) import urllib.request # 1.指定url url = 'https://www.sogou. ...

  4. HTTP协议复习二--代理

    代理(Proxy)是HTTP协议中请求方和应答方中间的一个环节,作为“中转站”,既可以转发客 户端的请求,也可以转发服务器的应答.代理有很多的种类,常见的有:1.匿名代理:完全“隐匿”了被代理的机器, ...

  5. php验证码案例

    <?php header('Content-type:image/jpeg'); $img=imagecreatetruecolor(120,40); // 背景颜色 $bg_color=ima ...

  6. 基于Java的支持可变QPS的http负载生成器,提供交互界面和RMI接口

    Load generator The load generator is a Java maven project which is implemented using httpclient+thre ...

  7. 访问stackoverflow非常慢

    其实GFW并没有限制访问stackoverflow,但是打开stackoverflow会非常慢. 解决方法是 打开host文件加入下面这句  127.0.0.1 ajax.googleapis.com ...

  8. Btrace打印自定义引用类方法参数

    简介 BTrace是sun公司推出的一款Java 动态.安全追踪(监控)工具,可以在不用重启的情况下监控系统运行情况,方便的获取程序运行时的数据信息,如方法参数.返回值.全局变量和堆栈信息等,并且做到 ...

  9. test20190829 神大校赛模拟

    100+100+0=200,聪明搬题人题面又出锅了. 最短路径(path) 给定有向图,包含 n 个节点和 m 条有向边. 一条A 到 B 的路径是最短路径当且仅当不存在另一条从A 到 B 的路径比它 ...

  10. 使用Jackson的@JsonFormat注解时出现少了 8 个小时

    比如数据库存的日期是2018-01-05,转成json则变成了2018-01-04 解决办法: @JsonFormat(pattern="yyyy-MM-dd") public D ...