当前位置: 首页 > news >正文

ES6:解构赋值

解构赋值

解构赋值语法是一种 JavaScript 表达式,它使得将值从数组,属性从对象,提取到不同变量中成为可能。

基本语法

/* values from arrays */
[a, b] = [1, 2]
console.log(a) // 1
console.log(b) // 2

/* properties from objects */
{c, d} = {c: 3, d: 4}
console.log(c) // 3
console.log(d) // 4

/* with Spread */
{e, f, ...g} = {e: 5, f: 6, g: 7, h: 8}
conso.log(g) // {g: 7, h: 8}
复制代码

结构数组

设置默认值

为了防止从数组中取出一个为 undefined 的对象,可以在表达式左边的数组中为任意对象预设默认值。

[a = 1, b = 2] = [10]
console.log(a) // 10
console.log(b) // 2
复制代码

交换变量

在一个解构赋值表达式中可以交换两个变量的值。

var a = 1
var b = 2
[b, a] = [a, b]
console.log(a) // 2
console.log(b) // 1
复制代码

解析从函数返回的数组,以及忽略某些返回值

从一个函数返回一个数组是十分常见的,使用解构赋值语法让处理返回值更加方便。

function fn() {
  return [1, 2, 3]
}
[a, , b] = fn()
console.log(a) // 1
console.log(b) // 3
复制代码

将剩余数组赋值给一个变量

当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量。

var [a, ...b] = [1, 2, 3]
console.log(a) // 1
console.log(b) // [2, 3]
复制代码

注意: 剩余元素必须是左边数组的最后一个元素,否则会抛出 SyntaxError

用正则表达式匹配提取值

用正则表达式 exec() 方法匹配字符串会返回一个数组,该数组第一个值是完全匹配正则表达式的的字符串,然后的值是匹配正则表达式括号内内容部分。

function parseProtocol(url) { 
  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
  if (!parsedURL) {
    return false;
  }
  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
  var [, protocol, fullhost, fullpath] = parsedURL;
  return protocol;
}

console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
复制代码

未完待续,结构对象编写中。

转载于:https://juejin.im/post/5cee4870e51d4556dc2935b9

相关文章:

  • 百度,内容质量部面试(一面+二面)面经
  • 浅谈Redis五种数据结构的底层原理
  • 程序清单4.2_praise1.c程序_《C Primer Plus》P62
  • ES6进阶——01新版变量声明let和const
  • hbase(二)hfile结构
  • 第五天,复习第四天内容,购物车小程序作业.元组
  • Nginx访问日志、日志切割、静态文件不记录日志和过期时间
  • 十七、编辑头像(带参数)
  • 完全检查点 (normal checkpoint)
  • name 'admin' is not defined第一个问题,新建Django项目,运行时报错
  • zxing 扫一扫 实用工具效率很高
  • Wireshark抓包工具使用
  • Android性能优化之APK瘦身详解(瘦身73%)
  • php课程 6-22 字符串格式化函数有哪些(精问)
  • java程序员进阶:618大战前夕,一条SQL引发的深思—MySQL优化
  • 【技术性】Search知识
  • 【刷算法】求1+2+3+...+n
  • 2018天猫双11|这就是阿里云!不止有新技术,更有温暖的社会力量
  • android图片蒙层
  • CentOS从零开始部署Nodejs项目
  • CSS 专业技巧
  • HTML5新特性总结
  • NLPIR语义挖掘平台推动行业大数据应用服务
  • springMvc学习笔记(2)
  • TCP拥塞控制
  • Unix命令
  • Vim Clutch | 面向脚踏板编程……
  • Vue2.x学习三:事件处理生命周期钩子
  • web标准化(下)
  • 分布式熔断降级平台aegis
  • 机器学习学习笔记一
  • 前端_面试
  • 如何合理的规划jvm性能调优
  • 事件委托的小应用
  • 首页查询功能的一次实现过程
  • 小程序button引导用户授权
  • 3月27日云栖精选夜读 | 从 “城市大脑”实践,瞭望未来城市源起 ...
  • Spark2.4.0源码分析之WorldCount 默认shuffling并行度为200(九) ...
  • 好程序员大数据教程Hadoop全分布安装(非HA)
  • ​第20课 在Android Native开发中加入新的C++类
  • (22)C#传智:复习,多态虚方法抽象类接口,静态类,String与StringBuilder,集合泛型List与Dictionary,文件类,结构与类的区别
  • (done) NLP “bag-of-words“ 方法 (带有二元分类和多元分类两个例子)词袋模型、BoW
  • (Redis使用系列) Springboot 实现Redis消息的订阅与分布 四
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (附源码)spring boot车辆管理系统 毕业设计 031034
  • (附源码)spring boot公选课在线选课系统 毕业设计 142011
  • (附源码)springboot优课在线教学系统 毕业设计 081251
  • (附源码)springboot助农电商系统 毕业设计 081919
  • (南京观海微电子)——I3C协议介绍
  • (三)mysql_MYSQL(三)
  • (数位dp) 算法竞赛入门到进阶 书本题集
  • (轉貼) UML中文FAQ (OO) (UML)
  • (轉貼) VS2005 快捷键 (初級) (.NET) (Visual Studio)
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .aanva