当前位置: 首页 > 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优化
  • 〔开发系列〕一次关于小程序开发的深度总结
  • CSS 专业技巧
  • gulp 教程
  • java8-模拟hadoop
  • js继承的实现方法
  • Mybatis初体验
  • October CMS - 快速入门 9 Images And Galleries
  • Python3爬取英雄联盟英雄皮肤大图
  • Python十分钟制作属于你自己的个性logo
  • SpiderData 2019年2月16日 DApp数据排行榜
  • Spring Security中异常上抛机制及对于转型处理的一些感悟
  • 从PHP迁移至Golang - 基础篇
  • 当SetTimeout遇到了字符串
  • 使用common-codec进行md5加密
  • 数据结构java版之冒泡排序及优化
  • 一些css基础学习笔记
  • 正则与JS中的正则
  • HanLP分词命名实体提取详解
  • 阿里云API、SDK和CLI应用实践方案
  • ​批处理文件中的errorlevel用法
  • ​人工智能书单(数学基础篇)
  • ​如何防止网络攻击?
  • # Apache SeaTunnel 究竟是什么?
  • #1014 : Trie树
  • #AngularJS#$sce.trustAsResourceUrl
  • #传输# #传输数据判断#
  • #我与Java虚拟机的故事#连载19:等我技术变强了,我会去看你的 ​
  • (14)学习笔记:动手深度学习(Pytorch神经网络基础)
  • (html转换)StringEscapeUtils类的转义与反转义方法
  • (二)fiber的基本认识
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (四)docker:为mysql和java jar运行环境创建同一网络,容器互联
  • (未解决)jmeter报错之“请在微信客户端打开链接”
  • (一)为什么要选择C++
  • (转)Linux下编译安装log4cxx
  • (转)用.Net的File控件上传文件的解决方案
  • .Net 应用中使用dot trace进行性能诊断
  • .NET/C# 中设置当发生某个特定异常时进入断点(不借助 Visual Studio 的纯代码实现)
  • .NET程序员迈向卓越的必由之路
  • .NET国产化改造探索(一)、VMware安装银河麒麟