JavaScript解构赋值 const/let与node require

发现const和let有个特别的用法,可以将Object里面的元素展开, 使用花括号包住Object中的key即可:

x={a:1,b:2}
const {a,b} = x //a=1,b=2

y={c:1,d:2}
const {c,d} = y //c=1,d=2

这样在require中可以将下一级的元素直接用于上一级

const {readFile, writeFile} = require('fs') //readFile和writeFile可以直接使用

原来,这个叫做解构赋值
除了能使用Object解构赋值, Array也可以.
使用Array解构赋值,某种程度上实现了函数多返回值

function f() {
  return [1, 2];
}

var a, b; 
[a, b] = f(); 
console.log(a); // 1
console.log(b); // 2

这里面用于正则表达式提取匹配值也是很有意思的用法, 正则表达式需要用括号组合出不同的匹配组

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"

对于Object的结构,除了基本的:

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

还可以对其值进行解构,相当于重命名了变量

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42 
console.log(bar); // true 

Array和Object的结构还都有默认值

var {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

最后是看起来很晕的用于函数参数的解构, 相当于默认值

function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) 
{
  console.log(size, cords, radius);
  // do some chart drawing
}

drawES2015Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

还TMD可以结构嵌套的Array和Object!!!,并且还能用在For循环里面!!