這篇文章是面向新手的,但如果幸運(yùn)的話,希望能給各位大佬們帶來(lái)一些小小的啟發(fā)。
常規(guī)情況下,我們想要篩選唯一值,一般會(huì)想到遍歷數(shù)組然后逐個(gè)對(duì)比,或者使用成熟的庫(kù)比如lodash之類的。
不過(guò),ES6帶來(lái)了一個(gè)新玩意兒!它引入了一個(gè)全新的對(duì)象類型:Set!而且,如果結(jié)合上...展開(kāi)運(yùn)算符,我們可以超級(jí)快速地創(chuàng)建一個(gè)已經(jīng)去重的全新數(shù)組!
const arr = [10, 10, 10, 20, 20, 30, 40, 40, 50, 60, 60, 70];const uniArr = [...new Set(array)];console.log(uniArr);// [10, 20, 30, 40, 50, 60, 70]
這個(gè)技巧只適用于包含基本類型的數(shù)組,比如undefined、null、boolean、string和number。
但是要記住哦,如果數(shù)組里面還有對(duì)象、函數(shù)或其他數(shù)組的話,就不能用這個(gè)方法了!
當(dāng)我們使用邏輯運(yùn)算符||進(jìn)行條件判斷時(shí),如果有很多可選值,代碼會(huì)變得冗長(zhǎng)。
不過(guò),我們可以使用includes方法來(lái)簡(jiǎn)化對(duì)數(shù)組的遍歷操作,方便地判斷數(shù)組是否包含某個(gè)特定的元素。
這樣一來(lái),我們就可以更簡(jiǎn)潔地列出可選值,而不必寫(xiě)一長(zhǎng)串的條件判斷語(yǔ)句。includes方法可以幫助我們輕松判斷數(shù)組中是否存在指定的元素。
const myNum = '3';const numArr = ['1', '2', '3'];// 使用 || if (myNum === '1' || myNum === '2' || myNum === '3') { //……}// 使用 includeif (numArr.includes(myNum)) { //……}
操作數(shù)組時(shí),我們通常會(huì)優(yōu)先使用array對(duì)象中的高級(jí)函數(shù)。
不過(guò),我這里要介紹一種更簡(jiǎn)單的方法來(lái)改變數(shù)組長(zhǎng)度,我喜歡它的原因是它非常直觀且易讀。
只需使用length屬性并傳遞一個(gè)數(shù)字,就可以改變數(shù)組的長(zhǎng)度。這樣做非常方便!
let array = ['1', '2', '3', '4'];array.length = 2;console.log(array); // ['1', '2']
當(dāng)然 ,如果你更注重性能,還是請(qǐng)使用 array.slice()。
若要提高數(shù)字的可讀性,你可以使用下劃線作為分隔符來(lái)更好地區(qū)分?jǐn)?shù)字的各個(gè)部分。這樣做可以讓數(shù)字更易讀,讓人一目了然。
const num = 1_000_000_000;console.log(num); // 1000000000
在使用console.log()時(shí),你可以將參數(shù)括在大括號(hào)中,這樣可以在控制臺(tái)輸出時(shí)同時(shí)顯示變量的名稱和值。這種方式非常方便,讓你更清晰地了解每個(gè)變量的內(nèi)容。
const name = "道長(zhǎng)王jj";console.log({ name });// {// "name": "道長(zhǎng)王jj"http:// }
if...else條件判斷是代碼過(guò)程中最常用的,幾乎在任何情況下,我們都會(huì)快速地敲下它來(lái)控制邏輯流程。
不過(guò),有時(shí)候我們也希望代碼更加簡(jiǎn)潔、快速,不占那么多篇幅。我們想盡可能地簡(jiǎn)潔且快速,于是就會(huì)用到三元運(yùn)算符:
const num = 75;const result1 = num > 100 ? '大于100' : '小于100';
但是我在這里并不是推薦使用“三元運(yùn)算”,其實(shí)有時(shí)候三元運(yùn)算符可能會(huì)讓代碼邏輯變得有點(diǎn)復(fù)雜哦!比如這樣:
const result2 = num > 100 ? (num > 200 ? '大于200' : '介于100和200之間') : '小于100';
這個(gè)時(shí)候,使用 && 和 || 這類邏輯運(yùn)算符反而能更簡(jiǎn)潔的表達(dá)算式。
舉個(gè)例子:
// 假設(shè),我們有三個(gè)已經(jīng)打過(guò)分的相親對(duì)象必須選擇一個(gè)來(lái)當(dāng)女朋友,使用 `&&` 可以很好的幫我們做出選擇。const one = 8;const two = 9;const three = 10;// 返回10console.log(one && two && three); // 返回0console.log(0 && null);
// 當(dāng)然,如果你足夠獨(dú)特~~(變態(tài))~~,就是不要女朋友,如果選只選最差的,你可以使用 `||` 來(lái)幫你做吹選擇。const one = 8;const two = 9;const three = 10;// 返回8console.log(one || two || three); // 返回nullconsole.log(0 || null);
哦,這個(gè)情況在工作場(chǎng)景中確實(shí)很常見(jiàn)。
假設(shè)我們想返回變量的 length ,但我們不確定接口會(huì)不會(huì)給我們需要的類型。
這個(gè)時(shí)候我們就可以使用 if/else 語(yǔ)句來(lái)檢查是可接受的類型,但它會(huì)讓我們的代碼非常臃腫。
這時(shí)候,我們可以使用短路運(yùn)算來(lái)簡(jiǎn)化代碼,而且有極高的健壯性:
// 使用iflet temp = getArray();if (!temp) { tempLength = 0;} else { tempLength = temp.length}// 使用 ||// 如果變量 tempArray 為真,則將返回該變量。否則,將返回 []const temp = (tempArray || []).length;
你有沒(méi)有遇到過(guò)訪問(wèn)嵌套對(duì)象屬性的困擾?
就是有時(shí)候你根本不確定這個(gè)對(duì)象或者它的子屬性到底存不存在,結(jié)果就報(bào)錯(cuò)了!以至于程序崩潰無(wú)法運(yùn)行
console.log(abc.ss)// ceError: abc is not defined// at <anonymous>:1:1// (匿名) @ VM190795
為了不讓報(bào)錯(cuò)阻止我們的程序運(yùn)行,我們通常會(huì)將它包裝在一個(gè)if……else代碼塊中:
if (abc.ss) { console.log(abc.ss);} else { console.log('沒(méi)有abc這個(gè)變量喏~');}// 還可以用短路運(yùn)算console.log(abc && abc.ss)
不過(guò),ES6的可選鏈可以讓我們徹底拋棄掉上面的寫(xiě)法了,我們可以直接這樣做:
console.log(abc?.ss?.aa?.bb?.cc)
在這之前需要科普一些小知識(shí):
除了常規(guī)的true和false之外,其他變量也可以被當(dāng)成true 或者 false。
除了0、""(空字符串)、null、undefined、NaN、false 之外呢,JavaScript中的所有其他值都是"真的"哦!
所以呢,基于這個(gè)認(rèn)知。
我們可以使用負(fù)運(yùn)算符 ! ,將類型轉(zhuǎn)換為 "boolean" 。
const x = Boolean(expression); // 推薦const x = !!(expression); // 推薦const x = new Boolean(expression); // 不太好
我們可以使用連接運(yùn)算符 + 后跟一組空引號(hào) '',將類型轉(zhuǎn)換為 "string" 。
const value = 12 + '';console.log(value); // '12'
我們可以使用減法運(yùn)算符 -,將類型轉(zhuǎn)換為 "number" 。
感謝 @hhhyyymmm 指正,我之前這里使用了加法運(yùn)算符。
let myValue = '12';myValue = myValue - 1;console.log(myValue); // 11// 當(dāng)然也可以轉(zhuǎn)換 Boolean 變成 Number // 工作中不推薦這樣用!!!!console.log(+true); // 1console.log(+false); // 0
以前我們?cè)谑褂肑avaScript進(jìn)行數(shù)學(xué)運(yùn)算時(shí),總是要借助Math庫(kù)進(jìn)行運(yùn)算。很奇怪的是,但是很多教程并沒(méi)有提醒我們,ES7其實(shí)帶來(lái)的全新運(yùn)算符。
如果想示乘方操作,通常我們會(huì)調(diào)用Math.pow(5, 7)這個(gè)方法。但是現(xiàn)在我們可以使用冪運(yùn)算符**了,而且性能更快更好。
console.log(5 ** 7); // 78125
如果想將浮點(diǎn)數(shù)轉(zhuǎn)換為整數(shù),通常我們會(huì)使用Math.floor()、Math.ceil()或Math.round()這些方法。不過(guò),其實(shí)可以使用 | 將浮點(diǎn)數(shù)直接截?cái)酁檎麛?shù)。這個(gè)技巧可以讓你的代碼更簡(jiǎn)潔高效哦!
// 正數(shù),則向下舍入console.log(34.9 | 0); // Result: 34// 負(fù)數(shù),則向上舍入console.log(-12.9 | 0); // Result: -12
以前我們只取千分位需要進(jìn)行類型轉(zhuǎn)換后才能進(jìn)行取數(shù)
let str = "33545"; Number(str.substring(0, str.length - 3)); // 33
但是我們可以更優(yōu)雅地這樣做:
console.log(33545 / 1000 | 0) // Result: 33
希望本文能夠幫助到你, 雖然真的很基礎(chǔ)很基礎(chǔ)。
本文鏈接:http://www.www897cc.com/showinfo-26-5725-0.htmlJavaScript 中有趣的九個(gè)常用編碼套路
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。郵件:2376512515@qq.com