摘要:前言書接上文細數(shù)實用黑科技一本文介紹獨孤九劍和兩篇最高內(nèi)功心法??梢詫⒆兞哭D(zhuǎn)換為布爾值??梢园讶魏晤愋偷闹缔D(zhuǎn)換為布爾值,并且只有當這個變量的值為的時候才會返回,其他情況都返回。同樣的,函數(shù)體內(nèi)部聲明的函數(shù),作用域綁定函數(shù)體內(nèi)部。
前言
書接上文:細數(shù) JavaScript 實用黑科技(一)
本文介紹 獨孤九劍和兩篇最高內(nèi)功心法。
第一式. !!!! 操作符:!!variable 。
!! 可以將變量轉(zhuǎn)換為布爾值。
!! 可以把任何類型的值轉(zhuǎn)換為布爾值,并且只有當這個變量的值為 0 / null / "" / NaN / undefined 的時候才會返回 false,其他情況都返回 true。
!!"" // false !!" " // true !!0 // false !!null // false !!undefined // false !!NaN // false !!123 // true !![] // true第二式. +
它只能作用于字符串數(shù)值,否則就會返回 NaN(不是數(shù)字)。
例子:
function toNumber(strNumber) { return +strNumber; } console.log(toNumber("1234")); // 1234 console.log(toNumber("abc")); // NaN
并且此方法也可作用于 Date 函數(shù),這是它將返回時間戳:
console.log(+new Date()) // 1461288164385第三式. if (條件)
if (token) { getUser(); }
可以通過使用 && 操作符組合兩個變量來縮短它。
比如前面這段代碼可以縮短為:
token && getUser();第四式. 短路表達式 ||
如果第一個參數(shù)返回 false,第二個值將被作為默認值。用來設(shè)置默認參數(shù)。
function getUser(token) { var token = token || "XXXXXXXXXX"; console.log("token",token) // 用 token 來異步請求數(shù)據(jù) // ....... } getUser(666666); // 666666 getUser(); // XXXXXXXXXX
當然,ES6 已經(jīng)支持默認值參數(shù)設(shè)置了。
如果你想學到更多工作中會用到的 ES6 的新特性,請看小汪寫過的:那些必會用到的 ES6 精粹
大多數(shù)人的做法:
var arr = [123, 456, 789]; var len = arr.length; var end = arr[len-1] console.log("end:", end) // "end:" 789
優(yōu)化方法:
var array = [1, 2, 3, 4, 5, 6]; console.log( array.slice(-1) ); // [6] console.log( array.slice(-1)[0] ); // 6 console.log( array.slice(-2) ); // [5,6] console.log( array.slice(-3) ); // [4,5,6]第六式. 打亂數(shù)組元素的順序
不適用 Lodash 等這些庫打亂數(shù)組元素順序,你可以使用這個技巧:
var list = [1,2,3]; console.log( list.sort(function() { Math.random() - 0.5 }) ); // [2,1,3]第七式. 偽數(shù)組轉(zhuǎn)換為真數(shù)組
數(shù)組的 slice方法可以將“類似數(shù)組的對象”變成真正的數(shù)組。
var arr = Array.prototype.slice.call(arrayLike);
var elements = document.querySelectorAll("p"); // NodeList 節(jié)點列表對象。但這個對象并不具有數(shù)組的全部方法,如 sort(), reduce(), map(), filter() var arrayElements = [].slice.call( elements ); // 現(xiàn)在 NodeList 是一個數(shù)組 var arrayElements = Array.from( elements ); // 這是另一種轉(zhuǎn)換 NodeList 到 Array 的方法第八式. 截斷數(shù)組
比如,當數(shù)組中有 10 個元素,而你只想獲取其中前 5 個的話,你可以截斷數(shù)組,通過設(shè)置 array.length = 5 使其更小。
var array = [1,2,3,4,5,6]; console.log( array.length ); // 6 array.length = 3; console.log( array.length ); // 3 console.log( array ); // [1,2,3]第九式. 合并數(shù)組
一般人合并兩個數(shù)組的話,通常會使用 Array.concat()。
var array1 = [1,2,3]; var array2 = [4,5,6]; console.log(array1.concat(array2)); // [1,2,3,4,5,6];
然而,這個函數(shù)并不適用于合并大的數(shù)組,因為它需要創(chuàng)建一個新的數(shù)組,而這會消耗很多內(nèi)存。
這時,你可以使用 Array.push.apply( arr1, arr2 ) 來代替創(chuàng)建新的數(shù)組,它可以把第二個數(shù)組合并到第一個中,從而較少內(nèi)存消耗:
var array1 = [1,2,3]; var array2 = [4,5,6]; console.log( array1.push.apply(array1, array2) ); // [1,2,3,4,5,6];內(nèi)功心法. 易混淆點 函數(shù)本身的作用域
函數(shù)本身也是一個值,也有自己的作用域。它的作用域與變量一樣,就是其聲明時所在的作用域,與其運行時所在的作用域無關(guān)。
// 先來一道題,看看輸出什么 var a = 1; var x = function () { console.log(a); }; function f() { var a = 2; x(); } f() // 1
上面代碼中,函數(shù) x 是在函數(shù) f 的外部聲明的,所以它的作用域綁定外層,內(nèi)部變量 a 不會到函數(shù) f 體內(nèi)取值,所以輸出 1,而不是 2。
總之,函數(shù)執(zhí)行時所在的作用域,是定義時的作用域,而不是調(diào)用時所在的作用域。
很容易犯錯的一點是,如果函數(shù) A 調(diào)用函數(shù) B,卻沒考慮到函數(shù) B 不會引用函數(shù) A 的內(nèi)部變量。
// 再來一道題,看看輸出什么 var x = function () { console.log(a); }; function y(f) { var a = 2; f(); } y(x) // ReferenceError: a is not defined
上面代碼將函數(shù) x 作為參數(shù),傳入函數(shù) y。但是,函數(shù) x 是在函數(shù) y 體外聲明的,作用域綁定外層,因此找不到函數(shù) y 的內(nèi)部變量 a,導致報錯。
同樣的,函數(shù)體內(nèi)部聲明的函數(shù),作用域綁定函數(shù)體內(nèi)部。
function foo() { var x = 1; function bar() { console.log(x); } return bar; } var x = 2; var f = foo(); f() // 1
上面代碼中,函數(shù) foo 內(nèi)部聲明了一個函數(shù) bar,bar 的作用域綁定 foo。當我們在 foo 外部取出 bar 執(zhí)行時,變量 x 指向的是 foo 內(nèi)部的 x,而不是 foo 外部的 x。正是這種機制,構(gòu)成了 “閉包” 現(xiàn)象。
閉包簡單理解,請看我的筆記: 閉包
立即調(diào)用的函數(shù)表達式立即調(diào)用的函數(shù)表達式”(Immediately-Invoked Function Expression),簡稱 IIFE。
通常寫法:
(function(){ /* code */ }()); // 或者 (function(){ /* code */ })();
注意,上面兩種寫法最后的分號都是必須的。如果省略分號,遇到連著兩個 IIFE,可能就會報錯。
// 報錯 (function(){ /* code */ }()) (function(){ /* code */ }())
上面代碼的兩行之間沒有分號,JavaScript 會將它們連在一起解釋,將第二行解釋為第一行的參數(shù)。
IIFE 的目的有兩個:
一是不必為函數(shù)命名,避免了污染全局變量;
二是 IIFE 內(nèi)部形成了一個多帶帶的作用域,可以封裝一些外部無法讀取的私有變量。
例子:
// 寫法一 var tmp = newData; processData(tmp); storeData(tmp); // 寫法二 (function () { var tmp = newData; processData(tmp); storeData(tmp); }());
上面代碼中,寫法二比寫法一更好,因為完全避免了污染全局變量。
最后獨孤九劍共九式和兩篇最高內(nèi)功心法都在這里面了,大俠學會后,除惡懲奸,遨游江湖吧?。?!
如果你覺得該文章對你有幫助,歡迎到我的 github,star 一下,謝謝。
github 地址
參考教程: 《JavaScript 語言入門教程》
參考文章:12 個非常有用的 JavaScript Hacks
你以為本文就這么結(jié)束了 ? 精彩在后面 ?。?!
對 全棧修煉 有興趣的朋友可以掃下方二維碼關(guān)注我的公眾號
我會不定期更新有價值的內(nèi)容,長期運營。
關(guān)注公眾號并回復 福利 可領(lǐng)取免費學習資料,福利詳情請猛戳: Python、Java、Linux、Go、node、vue、react、javaScript
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/97958.html
摘要:小汪經(jīng)過實踐得出以下用途??諗?shù)組的類型也是,這表示在內(nèi)部,數(shù)組本質(zhì)上只是一種特殊的對象。調(diào)用函數(shù)時,某個參數(shù)未設(shè)置任何值,這時就可以傳入,表示該參數(shù)為空。前端還是很有未來的下節(jié)內(nèi)容細數(shù)實用黑科技二。 showImg(https://segmentfault.com/img/remote/1460000016507838); 前言 只有深入學精一門語言,學其他語言才能更好地舉一反三,觸類...
摘要:你首先需要了解的安全工具之一就是。是另一個可為進行安全漏洞掃描的工具。和相似,是的安全審核工具。和其他容器安全工具不同,使用創(chuàng)建自定義配置文件非常容易。月日,北京海航萬豪酒店,容器技術(shù)大會即將舉行。 網(wǎng)絡(luò)安全問題的重要性大概毋庸置疑,最近無數(shù)關(guān)于惡意軟件和安全漏洞的消息已充分證明了這一點。 假如你要管理一個Docker環(huán)境,并希望幫助自己的公司或用戶在下一個大漏洞來臨時避免遇到麻煩,那...
摘要:你首先需要了解的安全工具之一就是。是另一個可為進行安全漏洞掃描的工具。和相似,是的安全審核工具。和其他容器安全工具不同,使用創(chuàng)建自定義配置文件非常容易。月日,北京海航萬豪酒店,容器技術(shù)大會即將舉行。 網(wǎng)絡(luò)安全問題的重要性大概毋庸置疑,最近無數(shù)關(guān)于惡意軟件和安全漏洞的消息已充分證明了這一點。 假如你要管理一個Docker環(huán)境,并希望幫助自己的公司或用戶在下一個大漏洞來臨時避免遇到麻煩,那...
摘要:但是,構(gòu)造函數(shù)注意是大寫的有點特別。構(gòu)造函數(shù)接受的參數(shù)中,第一個是要傳入的參數(shù)名,第二個是函數(shù)內(nèi)的代碼用字符串來表示。 Javascript是一門很吊的語言,我可能學了假的JavaScript,哈哈,大家還有什么推薦的,補充送那啥邀請碼。 本文秉承著:你看不懂是你SB,我寫的代碼就要牛逼。 1、單行寫一個評級組件 ★★★★★☆☆☆☆☆.slice(5 - rate, 10 - rate...
閱讀 2758·2021-11-19 09:40
閱讀 5332·2021-09-27 14:10
閱讀 2110·2021-09-04 16:45
閱讀 1489·2021-07-25 21:37
閱讀 3005·2019-08-30 10:57
閱讀 2990·2019-08-28 17:59
閱讀 1063·2019-08-26 13:46
閱讀 1415·2019-08-26 13:27