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