为ES2015解构干杯
我认为ES2015解构语法相当酷炫。他虽然没有像Promises,Generators以及Class语法那么上镜头，但是我发现它非常有用。你也可以阅读这里里面非常详细讲解了它。
唯一的遗憾是,大部分的例子我发现仅仅关注语法层面,而不是实际应用当中。像这个从MDN文档中的取的例子:
var a, b;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
幸运的是我有一些真实场景使用解构语法案例给你们分享！
保持Promises化
一个我最喜欢使用解构的是当使用Promise.all等待一系列异步任务全部完成时候。Promise.all返回值是以数组形式返回，而我们一般迭代数组取出里面的值，根据自己的需要才能操作这些值。
但是如果你知道使用解构获取你期望的对象，会让你的生活变得轻松和代码变得更漂亮，更多的描述性的命名参数。请看一个例子
啤酒比较
比方说你要比较两个brewDog的美味啤酒什么的，有时候我发现在现实生活中一直做这种事情。我们可以从sam Mason的美妙的Punk API获取关于啤酒信息。我们通过fetchAPI从上面API获取不同啤酒数据。我们比较啤酒℃之前，我们需要先发起这两个请求。
让我们一起先看下代码:
const punkAPIUrl = "https://api.punkapi.com/v2/beers/106";
const deadPonyClubUrl = "https://api.punkapi.com/v2/beers/91";
const punkAPIPromise = fetch(punkAPIUrl)
.then(res => res.json())
.then(data => data[0]);
const deadPonyClubPromise = fetch(deadPonyClubUrl)
.then(res => res.json())
.then(data => data[0]);
Promise.all([punkAPIPromise, deadPonyClubPromise])
.then(beers => {
const punkIPA = beers[0];
const deadPonyClub = beers[1];
const stronger = (punkIPA.abv < deadPonyClub.abv ? deadPonyClub.name : punkIPA.name) + " is stronger";
console.log(stronger);
});
我们使用参数解构整理一下Promise
Promise.all([punkAPIPromise, deadPonyClubPromise])
.then(([punkIPA, deadPonyClub]) => {
const stronger = (punkIPA.abv < deadPonyClub.abv ? deadPonyClub.name : punkIPA.name) + " is stronger";
console.log(stronger);
});
我们知道我们获取两个啤酒的结果，这个例子的结构让我知道那个啤酒的结果是那个啤酒的，所以我们可以使用解构参数来命名，而不是通过数组来提取他们。
更多例子
好吧，这可能仍然是一个弥补的例子，但它肯定更接近现实生活。第一次，我发现自己使用这种技术是在写Service Workers for 12 Devs of Christmas这篇文章的时候。它写得很方便，当returnFromCacheOrFetch使用caches和fetchAPI 实现“stale while revalidate”缓存方法。
该方法执行缓存方法，并尝试将当前请求与缓存匹配。在返回之前，它然后启动对fetch请求的资源的请求，缓存结果。最后，如果在缓存中找到请求，则返回缓存的响应，否则返回新的获取请求。你可以在原始的博客文章中阅读更多。
最终代码如下：
function returnFromCacheOrFetch(request, cacheName) {
const cachePromise = caches.open(cacheName);
const matchPromise = cachePromise
.then((cache) => cache.match(request));
// Use the result of both the above Promises to return the Response. Promise.all returns an array, but we destructure that in the callback.
return Promise.all([cachePromise, matchPromise])
.then(([cache, cacheResponse]) => {
// Kick off the update request
const fetchPromise = fetch(request)
.then((fetchResponse) => {
// Cache the updated file and then return the response
cache.put(request, fetchResponse.clone());
return fetchResponse;
});
// return the cached response if we have it, otherwise the result of the fetch.
return cacheResponse || fetchPromise;
});
}
在这种情况下，我需要caches.open和cache.match(request)的结果为了执行背景提取和返回缓存的响应。我使用Promise.all和绘制结果数组保持代码整齐和描述性一起绘制他们。
命名这件事
在这些示例中，参数解构允许我们在Promise.all命名我们期望从解决的Promise传递给我们的结果。事实上，在任何地方我们使用参数解构，特别是数组，它允许我们早期和更具描述性地命名对象。这反过来使得代码更可读性和更长久的可维护性。
