es6 --- 解構賦值的簡潔性

設想你有一個工具foo,它可以異步產生兩個值(x和y):

function getY(x) {return new Promise( function(resolve, reject) {setTimeout( function() {resolve( (3*x) -1 );}, 100);});
}function foo(bar, baz) {var x = bar * baz;return getY(x).then( function(y){return [x, y];});
}foo(10, 20)
.then(function (msgs) {var x = msg[0];var y = msg[1];console.log(x, y);
});// getY:延遲0.1秒返回一個Promise對象,值為 3*x-1;
// foo:在等待getY()執行完畢后,返回一個Promise數組

你可能注意到,上述的方法可以用Promise.all來完成:

function foo(bar, baz){var x = bar * baz;return [Promise.resolve(x),getY(X)];
}
Promise.all(foo(10, 20)
)
.then(function (msgs){var x = msgs[0];var y = msgs[1];console.log(x,y);
});// 代碼變得簡潔,邏輯更清晰了..

可以看到Promise.all的then里面有一個var x = msgs[0], var y = msgs[1]…這個操作的開銷有點大…

// by Reginald Braithwaite
function spread(fn) {return Function.apply.bind(fn, null);
}Promise.all(foo(10, 20)
)
.then(spread(function (x, y){console.log(x, y);})
)

可以進一步的將spread放入then中

Promise.all(foo(10, 20)
)
.then( Function.apply.bind(function(x, y){console.log(x, y);},null)
);  

誒,回歸主題,使用ES6的解構

Promise.all(foo(10, 20)
)
.then(function(msgs) {var [x, y] = msgs;console.log(x, y);
});

將解構應用到函數的參數中

Promise.all(foo(10, 20)
)
.then(function ([x, y]){console.log(x, y);
});
// 注:解構賦值,一定要好好學,可以簡化你的代碼,使邏輯更加清晰...

參考《你不知道的JavaScript》(中卷)P223~P225

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/251197.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/251197.shtml
英文地址,請注明出處:http://en.pswp.cn/news/251197.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

redis安裝(linux)

一、redis安裝步驟 1、yum install gcc 如果你機器已經安裝了編譯環境請忽略,否則在使用make編譯源碼時會報錯。 報錯信息:make: *** [adlist.o] 2、使用wget命令下載包  wget http://download.redis.io/releases/redis-4.0.6.tar.gz 3、解壓tar包 tar…

驗證碼何時可以退出歷史舞臺?

驗證碼是有必要存在的,只是不同階段表現形式不同,未來的趨勢是更加智能無感知,用戶體驗更好。 簡而言之, 驗證碼其終極目的,就是區分正常人和機器的操作。區分人機行為是必要的:互聯網上各種行為&#xff0…

ES5-8 閉包高級、對象、構造函數、實例化

1. 對象 對象內定義的函數一般稱之為方法,在外部的函數聲明稱為函數對象刪除屬性使用delete 關鍵字 var obj {a: 1,b: string } console.log(obj, obj) // {a: 1, b: "string"} delete obj.b console.log(obj, obj) // {a: 1}在對象里,this…

es6 --- 使用生成器交替執行

考慮以下場景: var a 1; var b 2;function foo(){a;b b * a;a b 3; }function bar(){b--;a 8 b;b a * 2; }foo(); bar(); console.log(a, b); // 11 22bar(); foo(); console.log(a, b); // 183 180對于上面的兩個函數foo和bar,它們中的任何一個,一旦開始了就會…

oracle-group by -having

1、GROUP BY 語句用于結合合計函數,根據一個或多個列對結果集進行分組。(也就是說group by 和聚合函數結合起來使用,要查詢的結果來沒有聚合函數則報錯:不是group by 表達式) a、where 不能放在group by 后面使用 b、having 要和group by 連在…

【轉載】匯編速查手冊

一、數據傳輸指令 ─────────────────────────────────────── 它們在存貯器和寄存器、寄存器和輸入輸出端口之間傳送數據. 1. 通用數據傳送指令. MOV 傳送字或字節. MOVSX 先符號擴展,再傳送. MOVZX 先零擴展,再傳送. PUSH 把字壓…

ES5-9 【utils】構造函數及實例化原理、包裝類

1. 構造函數 調用構造函數實際會經歷4步 1 創建一個新對象 2 將構造函數的作用域賦值給對象(因此this就指向了這個對象) 3 執行構造函數中的代碼(為這個新對象添加屬性) 4 返回新對象 在構造函數內部,this指向構造函數…

es6 --- 異步迭代生成器 Promise

看一個經典ajax回調的例子: function foo(x, y, cb) {ajax("http://some.url.1/?x" x "&y" y,cb); }foo(11, 31, function(err, text) {if(err) {console.error(err);}else {console.log(text);} });// 異步請求some.url.1參數為x 11, y31的數據.…

Mysql5.7.20使用group by查詢(select *)時出現錯誤--修改sql mode

使用select * from 表 group by 字段 時報錯錯誤信息說明: 1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column haha_db.staff.id which is not    functionally dependent on columns in GROUP BY clause; this…

【心情隨筆】03

一、 越是學習越是感到自己的無知。以往總有不求甚解的做法,稍微看了一下就囫圇吞棗算懂了,其實這是逃避,不僅面試問的時候答不上來,而且內部可以用來擴展的思想也沒有領悟到。連該問題都說不清楚更不要說舉一反三了。近來&#x…

ES5-10 原型、原型鏈、閉包立即執行函數、插件開發

重學第六章 1. 原型 實例內屬性和原型上屬性重名時(屏蔽) function Test(name) {this.name name } Test.prototype.name hhh let tObj new Test(yyy) console.log(tObj.name) // yyy tObj.name null console.log(tObj.name) // null delete tObj.…

javascript --- 使用run函數,讓100條ajax依次執行

使用如下: function *foo(len,urlArray) {let r [];for(let i 0; i< len; i){r[i] yield request(urlArray[i]);} } // len:是長度,urlArray,是請求的url數組..下面附上run函數的代碼,以及證明以上是成立的 // Benjamin Gruenbaum(benjamingr on Github) function run(g…

[轉]IIS 允許/禁止 目錄瀏覽

<?xml version"1.0" encoding"utf-8"?> <configuration><system.webServer><directoryBrowse enabled"true" /></system.webServer> </configuration> enabled true -> 允許目錄瀏覽&#xff0c;子目…

C++編程基礎一 06-布爾類型

1 // 06-布爾類型.cpp: 定義控制臺應用程序的入口點。2 //3 4 #include "stdafx.h"5 #include <iostream>6 using namespace std;7 8 int main()9 { 10 bool a true; //真 存在的 非零 1 11 bool b false;//假 不存在 零 0 12 cout << …

性能優化雜記

webpack 開發、生產環境配置不同的webpack配置文件 生產環境刪除devServer&#xff08;不需要啟webpack devServer&#xff09; 告訴webpack&#xff0c;生產、開發分別要對應哪個配置文件 開發環境下也能看到打包的結果 npm run dev:build npm run dev 只會把打包生產…

算法 --- 冒泡排序、選擇排序、插入排序的js實現

冒泡排序: function bubbleSort(arr){let i arr.length;while(i >0){for(let j 0; j< i; j) {let pos 0;if(arr[j] > arr[j1]) {pos j;let temp arr[j];arr[j] arr[j1];arr[j1] temp;}}i pos;}return arr; } var arr [3,44,38,5,47,15,36,26,27,2,46,4,19,5…

appium--每次啟動會重新安裝的問題(沒試過)

有人說加這個 最后 大神說 在appium哪里就可以設置了 對&#xff0c;第一個不勾選就不會安裝了【經理】[Java]大連●Messi_Z(726862194) 15:54:10把這些東西全去掉就好了轉載于:https://www.cnblogs.com/kaibindirver/p/8205031.html

爬蟲從入門到放棄 - 純新手學習-爬蟲基本原理

1.什么是爬蟲&#xff1f; 請求網站并提取數據的自動化程序 請求&#xff1a;客戶端向服務端發送請求獲得網頁資源&#xff0c;是一段html代碼&#xff0c;包含html標簽和一段信息。 提取&#xff1a;提取出想要的信息&#xff0c;然后將結構化的數據存儲到文本 自動化&#xf…

ES5-11原型與原型鏈深入、對象繼承

原型 誰調用&#xff0c;this就指向誰&#xff0c;當實例對象有該屬性時&#xff0c;不會去原型上查找 創建對象的兩種方法&#xff1a;字面量、new Object&#xff08;&#xff09;一般不用后面的二者創建出來的對象沒有差異 Object.create() var 實例 Object.create(對象…

算法 --- 希爾排序、歸并排序、快速排序的js實現

希爾排序: function shellSort(arr) {let len arr.length;let temp, gap 1;while(gap < len/3) {gap gap*3 1}while(gap >1) {for(let i gap;i< len; i) {temp arr[i];for( var j i-gap; j> 0 && arr[j] > temp; j - gap) {arr[j gap] arr[j];}…