摘要:的兩個特性數組是否包含某元素它的作用類似于都可以用來查詢數組或字符串是否包含指定元素。基本規則表示這是一個函數,只能用在這個函數里面。表示在這里等待返回結果了,再繼續執行。
ECMAScript 2016(ES7) 的兩個特性
Array.prototype.includes(數組是否包含某元素)
它的作用類似于indexOf(),都可以用來查詢數組或字符串是否包含指定元素。indexOf()會返回相應元素的位置,下標從0開始;includes()會返回布爾值。
let arr = ["react", "angular", "vue"] let str = "hello world" console.log(str.indexOf("l")); //2 console.log(str.lastIndexOf("l")); //9 console.log(arr.indexOf("vue")); //2 console.log(arr.lastIndexOf("vue"));//2 console.log(arr.indexOf("v")); //-1 console.log(arr.includes("v")); //false console.log(arr.includes("vue")); //true
includes第二可選參數fromIndex,允許從特定位置開始尋找匹配.
console.log(str.includes("l", 3)); //true
Exponentiation Operator(求冥運算)
ES5的求冪運算使用方法Math.pow(),ES7的求冪運算直接用**:
console.log(7 ** 2); //49 console.log(Math.pow(7, 2)); //49
它還可以操縱結果。
let a = 5 a **= 3 // a = a ** 3 console.log(a === Math.pow(5, 3)) // true console.log(a ) // 125 console.log(Math.pow(5, 3)) // 125Async/Await 異步方案——ES8
這里我們要實現一個暫停功能,輸入N毫秒,則停頓N毫秒后才繼續往下執行。
var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, time); }) }; var start = async function () { // 在這里使用起來就像同步代碼那樣直觀 console.log("start"); await sleep(3000); console.log("end"); }; start();
控制臺先輸出start,稍等3秒后,輸出了end。
基本規則async 表示這是一個async函數,await只能用在這個函數里面。
await 表示在這里等待promise返回結果了,再繼續執行。
await 后面跟著的應該是一個promise對象(當然,其他返回值也沒關系,只是會立即執行,不過那樣就沒有意義了…)
獲得返回值await等待的雖然是promise對象,但不必寫.then(..),直接可以得到返回值。
var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { // 返回 ‘ok’ resolve("ok"); }, time); }) }; var start = async function () { let result = await sleep(3000); console.log(result); // 收到 ‘ok’ };捕捉錯誤
既然.then(..)不用寫了,那么.catch(..)也不用寫,可以直接用標準的try catch語法捕捉錯誤。
var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { // 模擬出錯了,返回 ‘error’ reject("error"); }, time); }) }; var start = async function () { try { console.log("start"); await sleep(3000); // 這里得到了一個返回錯誤 // 所以以下代碼不會被執行了 console.log("end"); } catch (err) { console.log(err); // 這里捕捉到錯誤 `error` } };循環多個await
await看起來就像是同步代碼,所以可以理所當然的寫在for循環里,不必擔心以往需要閉包才能解決的問題。
..省略以上代碼 var start = async function () { for (var i = 1; i <= 10; i++) { console.log(`當前是第${i}次等待..`); await sleep(1000); } };
值得注意的是,await必須在async函數的上下文中的。
..省略以上代碼 let 一到十 = [1,2,3,4,5,6,7,8,9,10]; // 錯誤示范 一到十.forEach(function (v) { console.log(`當前是第${v}次等待..`); await sleep(1000); // 錯誤!! await只能在async函數中運行 }); // 正確示范 for(var v of 一到十) { console.log(`當前是第${v}次等待..`); await sleep(1000); // 正確, for循環的上下文還在async函數中 }
這個例子是一個小應用,根據電影文件名,自動下載對應的海報
import fs from "fs"; import path from "path"; import request from "request"; var movieDir = __dirname + "/movies", exts = [".mkv", ".avi", ".mp4", ".rm", ".rmvb", ".wmv"]; // 讀取文件列表 var readFiles = function () { return new Promise(function (resolve, reject) { fs.readdir(movieDir, function (err, files) { resolve(files.filter((v) => exts.includes(path.parse(v).ext))); }); }); }; // 獲取海報 var getPoster = function (movieName) { let url = `https://api.douban.com/v2/movie/search?q=${encodeURI(movieName)}`; return new Promise(function (resolve, reject) { request({url: url, json: true}, function (error, response, body) { if (error) return reject(error); resolve(body.subjects[0].images.large); }) }); }; // 保存海報 var savePoster = function (movieName, url) { request.get(url).pipe(fs.createWriteStream(path.join(movieDir, movieName + ".jpg"))); }; (async () => { let files = await readFiles(); // await只能使用在原生語法 for (var file of files) { let name = path.parse(file).name; console.log(`正在獲取【${name}】的海報`); savePoster(name, await getPoster(name)); } console.log("=== 獲取海報完成 ==="); })();字符填充函數padStart 和 padEnd(原文)
String.prototype.padStart 和 String.prototype.padEnd在javascript字符操作是一個不錯的體驗,幫助避免依賴而外的庫。
padStart()在開始部位填充,返回一個給出長度的字符串,填充物給定字符串,把字符串填充到期望的長度。從字符串的左邊開始(至少大部分西方語言),一個經典例子是使用空格創建列:
console.log("react".padStart(10).length) // " react" is 10 console.log("backbone".padStart(10).length) // " backbone" is 10
它對于財務方面非常有用:
console.log("0.00".padStart(20)) console.log("10,000.00".padStart(20)) console.log("250,000.00".padStart(20))
這結果作為一個會計總賬格式非常漂亮:
0.00 10,000.00 250,000.00
第二個參數,讓我們放一些其他的填充字符替代空字符串,一個字符串填充:
console.log("react".padStart(10, "_")) // "_____react" console.log("backbone".padStart(10, "*")) // "**backbone"
padEnd顧名思義就是從字符串的尾端右邊開始填充。第二個參數,你能實際上用一個任何長度的字符串。例如:
console.log("react".padEnd(10, ":-)")) // "react:-):-" is 10 console.log("backbone".padEnd(10, "*")) // "backbone**" is 10
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89297.html
摘要:我曾寫過一篇關于博客個最佳特性,這次我打算聊聊和特性。自從年雙十一正式上線,累計處理了億錯誤事件,得到了金山軟件百姓網等眾多知名用戶的認可。 譯者按: 轉眼ES6發布2年了,是時候了解一下ES7與ES8特性了! 原文: ES7 and ES8 Features 譯者: Fundebug 為了保證可讀性,本文采用意譯而非直譯,并且對源代碼進行了大量修改。另外,本文版權歸原作者所有...
摘要:配置是一個編譯器,是前端開發中的一個利器。其中,插件是為了告訴只編譯批準的內容,相當于及最新版本。安裝用法將下面內容添加到文件中更多細節參考插件。 webpack - babel配置 babel是一個javascript編譯器,是前端開發中的一個利器。它突破了瀏覽器實現es標準的限制,使我們在開發中可以使用最新的javascript語法。 通過構建和babel,可以使用最新js語法進行...
摘要:在,是當之無愧的王者,贏得了與之間的戰爭,攻陷了的城池。于月發布了版本,這一版本為了更好的表現加入了渲染方式。前端框架這個前端框架清單可能是年疲勞的元兇之一。的創建者,目前在工作為尋找構建簡單性和自主配置性之間的平衡做了很大的貢獻。 春節后的第一篇就從這個開始吧~本文已在前端早讀課公眾號上首發 原文鏈接 JavasScript社區在創新的道路上開足了馬力,曾經流行過的也許一個月之后就過...
閱讀 1331·2019-08-30 15:44
閱讀 1381·2019-08-29 18:42
閱讀 433·2019-08-29 13:59
閱讀 770·2019-08-28 17:58
閱讀 2811·2019-08-26 12:02
閱讀 2414·2019-08-23 18:40
閱讀 2406·2019-08-23 18:13
閱讀 3106·2019-08-23 16:27