博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6:解构赋值
阅读量:6509 次
发布时间:2019-06-24

本文共 1457 字,大约阅读时间需要 4 分钟。

解构赋值

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

基本语法

/* values from arrays */[a, b] = [1, 2]console.log(a) // 1console.log(b) // 2/* properties from objects */{c, d} = {
c: 3, d: 4}console.log(c) // 3console.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) // 10console.log(b) // 2复制代码

交换变量

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

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

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

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

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

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

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

var [a, ...b] = [1, 2, 3]console.log(a) // 1console.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

你可能感兴趣的文章
WINDOWS DNS备份、还原
查看>>
Hive连接?
查看>>
好程序员大数据笔记之:Hadoop集群搭建
查看>>
如何利用分层测试概念设计针对性测试用例
查看>>
路由器的无线桥接(TP-Link)
查看>>
解决CodeIgniter伪静态失效
查看>>
PostgreSQL数据库压力测试工具pgbench简单应用
查看>>
信息系统审计准则(征求意见稿)
查看>>
世界由物质、能量、信息
查看>>
获取IOS设备型号的代码
查看>>
iOS培训教程——TableView(内置刷新)
查看>>
磁盘的5种卷,RAID—5的修复
查看>>
Android ImageButton
查看>>
手写springmvc框架
查看>>
项目中用到Shiro安全配置用于系统的登录和权限认证
查看>>
JBOSS as 7解决 热部署
查看>>
剖析:学思科的未来(一)
查看>>
LNMP全自动安装脚本
查看>>
Hive 部署
查看>>
Java googlecode JSON 解析示例
查看>>