AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

JavaScript 中有趣的九個常用編碼套路

來源: 責(zé)編: 時間:2023-08-14 22:01:17 333觀看
導(dǎo)讀這篇文章是面向新手的,但如果幸運的話,希望能給各位大佬們帶來一些小小的啟發(fā)。1、set對象:數(shù)組快速去重常規(guī)情況下,我們想要篩選唯一值,一般會想到遍歷數(shù)組然后逐個對比,或者使用成熟的庫比如lodash之類的。不過,ES6帶來了

這篇文章是面向新手的,但如果幸運的話,希望能給各位大佬們帶來一些小小的啟發(fā)。miX28資訊網(wǎng)——每日最新資訊28at.com

miX28資訊網(wǎng)——每日最新資訊28at.com

1、set對象:數(shù)組快速去重

常規(guī)情況下,我們想要篩選唯一值,一般會想到遍歷數(shù)組然后逐個對比,或者使用成熟的庫比如lodash之類的。miX28資訊網(wǎng)——每日最新資訊28at.com

不過,ES6帶來了一個新玩意兒!它引入了一個全新的對象類型:Set!而且,如果結(jié)合上...展開運算符,我們可以超級快速地創(chuàng)建一個已經(jīng)去重的全新數(shù)組!miX28資訊網(wǎng)——每日最新資訊28at.com

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]

這個技巧只適用于包含基本類型的數(shù)組,比如undefined、null、boolean、string和number。miX28資訊網(wǎng)——每日最新資訊28at.com

但是要記住哦,如果數(shù)組里面還有對象、函數(shù)或其他數(shù)組的話,就不能用這個方法了!miX28資訊網(wǎng)——每日最新資訊28at.com

2、include方法:簡化( || 或)條件判斷

當我們使用邏輯運算符||進行條件判斷時,如果有很多可選值,代碼會變得冗長。miX28資訊網(wǎng)——每日最新資訊28at.com

不過,我們可以使用includes方法來簡化對數(shù)組的遍歷操作,方便地判斷數(shù)組是否包含某個特定的元素。miX28資訊網(wǎng)——每日最新資訊28at.com

這樣一來,我們就可以更簡潔地列出可選值,而不必寫一長串的條件判斷語句。includes方法可以幫助我們輕松判斷數(shù)組中是否存在指定的元素。miX28資訊網(wǎng)——每日最新資訊28at.com

const myNum = '3';const numArr = ['1', '2', '3'];// 使用 || if (myNum === '1' || myNum === '2' || myNum === '3') {    //……}// 使用 includeif (numArr.includes(myNum)) {    //……}

3、截斷數(shù)組:改變length就可以

操作數(shù)組時,我們通常會優(yōu)先使用array對象中的高級函數(shù)。miX28資訊網(wǎng)——每日最新資訊28at.com

不過,我這里要介紹一種更簡單的方法來改變數(shù)組長度,我喜歡它的原因是它非常直觀且易讀。miX28資訊網(wǎng)——每日最新資訊28at.com

只需使用length屬性并傳遞一個數(shù)字,就可以改變數(shù)組的長度。這樣做非常方便!miX28資訊網(wǎng)——每日最新資訊28at.com

let array = ['1', '2', '3', '4'];array.length = 2;console.log(array); // ['1', '2']

當然 ,如果你更注重性能,還是請使用 array.slice()。miX28資訊網(wǎng)——每日最新資訊28at.com

4、數(shù)字分割符:提高數(shù)字可讀性

若要提高數(shù)字的可讀性,你可以使用下劃線作為分隔符來更好地區(qū)分數(shù)字的各個部分。這樣做可以讓數(shù)字更易讀,讓人一目了然。miX28資訊網(wǎng)——每日最新資訊28at.com

const num = 1_000_000_000;console.log(num); // 1000000000

5、控制臺打印:用對象包裹更清晰

在使用console.log()時,你可以將參數(shù)括在大括號中,這樣可以在控制臺輸出時同時顯示變量的名稱和值。這種方式非常方便,讓你更清晰地了解每個變量的內(nèi)容。miX28資訊網(wǎng)——每日最新資訊28at.com

const name = "道長王jj";console.log({ name });// {//     "name": "道長王jj"http:// }

6、短路運算:簡化條件判斷

if...else條件判斷是代碼過程中最常用的,幾乎在任何情況下,我們都會快速地敲下它來控制邏輯流程。miX28資訊網(wǎng)——每日最新資訊28at.com

不過,有時候我們也希望代碼更加簡潔、快速,不占那么多篇幅。我們想盡可能地簡潔且快速,于是就會用到三元運算符:miX28資訊網(wǎng)——每日最新資訊28at.com

const num = 75;const result1 = num > 100 ? '大于100' : '小于100';

但是我在這里并不是推薦使用“三元運算”,其實有時候三元運算符可能會讓代碼邏輯變得有點復(fù)雜哦!比如這樣:miX28資訊網(wǎng)——每日最新資訊28at.com

const result2 = num > 100 ? (num > 200 ? '大于200' : '介于100和200之間') : '小于100';

這個時候,使用 && 和 || 這類邏輯運算符反而能更簡潔的表達算式。miX28資訊網(wǎng)——每日最新資訊28at.com

舉個例子:miX28資訊網(wǎng)——每日最新資訊28at.com

// 假設(shè),我們有三個已經(jīng)打過分的相親對象必須選擇一個來當女朋友,使用 `&&` 可以很好的幫我們做出選擇。const one = 8;const two = 9;const three = 10;// 返回10console.log(one && two && three); // 返回0console.log(0 && null);
// 當然,如果你足夠獨特~~(變態(tài))~~,就是不要女朋友,如果選只選最差的,你可以使用 `||` 來幫你做吹選擇。const one = 8;const two = 9;const three = 10;// 返回8console.log(one || two || three); // 返回nullconsole.log(0 || null);

哦,這個情況在工作場景中確實很常見。miX28資訊網(wǎng)——每日最新資訊28at.com

假設(shè)我們想返回變量的 length ,但我們不確定接口會不會給我們需要的類型。miX28資訊網(wǎng)——每日最新資訊28at.com

這個時候我們就可以使用 if/else 語句來檢查是可接受的類型,但它會讓我們的代碼非常臃腫。miX28資訊網(wǎng)——每日最新資訊28at.com

這時候,我們可以使用短路運算來簡化代碼,而且有極高的健壯性:miX28資訊網(wǎng)——每日最新資訊28at.com

// 使用iflet temp = getArray();if (!temp) {    tempLength = 0;} else {    tempLength = temp.length}// 使用 ||// 如果變量 tempArray 為真,則將返回該變量。否則,將返回 []const temp = (tempArray || []).length;

7、可選鏈:更加安全地訪問對象屬性

你有沒有遇到過訪問嵌套對象屬性的困擾?miX28資訊網(wǎng)——每日最新資訊28at.com

就是有時候你根本不確定這個對象或者它的子屬性到底存不存在,結(jié)果就報錯了!以至于程序崩潰無法運行miX28資訊網(wǎng)——每日最新資訊28at.com

console.log(abc.ss)// ceError: abc is not defined//     at <anonymous>:1:1// (匿名) @ VM190795

為了不讓報錯阻止我們的程序運行,我們通常會將它包裝在一個if……else代碼塊中:miX28資訊網(wǎng)——每日最新資訊28at.com

if (abc.ss) {  console.log(abc.ss);} else {  console.log('沒有abc這個變量喏~');}// 還可以用短路運算console.log(abc && abc.ss)

不過,ES6的可選鏈可以讓我們徹底拋棄掉上面的寫法了,我們可以直接這樣做:miX28資訊網(wǎng)——每日最新資訊28at.com

console.log(abc?.ss?.aa?.bb?.cc)

8、巧用運算符:快速類型轉(zhuǎn)換

在這之前需要科普一些小知識:miX28資訊網(wǎng)——每日最新資訊28at.com

除了常規(guī)的true和false之外,其他變量也可以被當成true 或者 false。miX28資訊網(wǎng)——每日最新資訊28at.com

除了0、""(空字符串)、null、undefined、NaN、false 之外呢,JavaScript中的所有其他值都是"真的"哦!miX28資訊網(wǎng)——每日最新資訊28at.com

所以呢,基于這個認知。miX28資訊網(wǎng)——每日最新資訊28at.com

我們可以使用負運算符 ! ,將類型轉(zhuǎn)換為 "boolean" 。miX28資訊網(wǎng)——每日最新資訊28at.com

const x = Boolean(expression);     // 推薦const x = !!(expression);          // 推薦const x = new Boolean(expression); // 不太好

我們可以使用連接運算符 + 后跟一組空引號 '',將類型轉(zhuǎn)換為 "string" 。miX28資訊網(wǎng)——每日最新資訊28at.com

const value = 12 + '';console.log(value); // '12'

我們可以使用減法運算符 -,將類型轉(zhuǎn)換為 "number" 。miX28資訊網(wǎng)——每日最新資訊28at.com

感謝 @hhhyyymmm 指正,我之前這里使用了加法運算符。miX28資訊網(wǎng)——每日最新資訊28at.com

let myValue = '12';myValue = myValue - 1;console.log(myValue); // 11// 當然也可以轉(zhuǎn)換 Boolean 變成 Number // 工作中不推薦這樣用!!!!console.log(+true); // 1console.log(+false); // 0

9、快速運算:更快更簡潔的數(shù)學(xué)運算操作符

以前我們在使用JavaScript進行數(shù)學(xué)運算時,總是要借助Math庫進行運算。很奇怪的是,但是很多教程并沒有提醒我們,ES7其實帶來的全新運算符。miX28資訊網(wǎng)——每日最新資訊28at.com

如果想示乘方操作,通常我們會調(diào)用Math.pow(5, 7)這個方法。但是現(xiàn)在我們可以使用冪運算符**了,而且性能更快更好。miX28資訊網(wǎng)——每日最新資訊28at.com

console.log(5 ** 7); // 78125

如果想將浮點數(shù)轉(zhuǎn)換為整數(shù),通常我們會使用Math.floor()、Math.ceil()或Math.round()這些方法。不過,其實可以使用 | 將浮點數(shù)直接截斷為整數(shù)。這個技巧可以讓你的代碼更簡潔高效哦!miX28資訊網(wǎng)——每日最新資訊28at.com

// 正數(shù),則向下舍入console.log(34.9 | 0);  // Result: 34// 負數(shù),則向上舍入console.log(-12.9 | 0); // Result: -12

以前我們只取千分位需要進行類型轉(zhuǎn)換后才能進行取數(shù)miX28資訊網(wǎng)——每日最新資訊28at.com

let str = "33545"; Number(str.substring(0, str.length - 3)); // 33

但是我們可以更優(yōu)雅地這樣做:miX28資訊網(wǎng)——每日最新資訊28at.com

console.log(33545 / 1000 | 0)  // Result: 33

希望本文能夠幫助到你, 雖然真的很基礎(chǔ)很基礎(chǔ)。miX28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-26-5725-0.htmlJavaScript 中有趣的九個常用編碼套路

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 什么是代碼審查及其如何節(jié)省時間:開發(fā)人員指南

下一篇: 面試官:JavaScript中“x !== x”可以返回True嗎?

標簽:
  • 熱門焦點
Top