這篇文章是面向新手的，但如果幸運(yùn)的話，希望能給各位大佬們帶來一些小小的啟發(fā)。

在張掖等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站制作、成都網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作按需定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),成都全網(wǎng)營銷推廣,外貿(mào)網(wǎng)站制作,張掖網(wǎng)站建設(shè)費(fèi)用合理。

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

常規(guī)情況下，我們想要篩選唯一值，一般會(huì)想到遍歷數(shù)組然后逐個(gè)對比，或者使用成熟的庫比如lodash之類的。

不過，ES6帶來了一個(gè)新玩意兒！它引入了一個(gè)全新的對象類型：Set！而且，如果結(jié)合上...展開運(yùn)算符，我們可以超級快速地創(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ù)組里面還有對象、函數(shù)或其他數(shù)組的話，就不能用這個(gè)方法了！

2、include方法：簡化（ || 或）條件判斷

當(dāng)我們使用邏輯運(yùn)算符||進(jìn)行條件判斷時(shí)，如果有很多可選值，代碼會(huì)變得冗長。

不過，我們可以使用includes方法來簡化對數(shù)組的遍歷操作，方便地判斷數(shù)組是否包含某個(gè)特定的元素。

這樣一來，我們就可以更簡潔地列出可選值，而不必寫一長串的條件判斷語句。includes方法可以幫助我們輕松判斷數(shù)組中是否存在指定的元素。

const myNum = '3';
const numArr = ['1', '2', '3'];


// 使用 || 
if (myNum === '1' || myNum === '2' || myNum === '3') {
    //……
}


// 使用 include
if (numArr.includes(myNum)) {
    //……
}

3、截?cái)鄶?shù)組：改變length就可以

操作數(shù)組時(shí)，我們通常會(huì)優(yōu)先使用array對象中的高級函數(shù)。

不過，我這里要介紹一種更簡單的方法來改變數(shù)組長度，我喜歡它的原因是它非常直觀且易讀。

只需使用length屬性并傳遞一個(gè)數(shù)字，就可以改變數(shù)組的長度。這樣做非常方便！

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

當(dāng)然 ，如果你更注重性能，還是請使用 array.slice()。

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

若要提高數(shù)字的可讀性，你可以使用下劃線作為分隔符來更好地區(qū)分?jǐn)?shù)字的各個(gè)部分。這樣做可以讓數(shù)字更易讀，讓人一目了然。

const num = 1_000_000_000;


console.log(num); // 1000000000

5、控制臺(tái)打?。河脤ο蟀逦?/h4>

在使用console.log()時(shí)，你可以將參數(shù)括在大括號中，這樣可以在控制臺(tái)輸出時(shí)同時(shí)顯示變量的名稱和值。這種方式非常方便，讓你更清晰地了解每個(gè)變量的內(nèi)容。

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


// {
//     "name": "道長王jj"
// }

6、短路運(yùn)算：簡化條件判斷

if...else條件判斷是代碼過程中最常用的，幾乎在任何情況下，我們都會(huì)快速地敲下它來控制邏輯流程。

不過，有時(shí)候我們也希望代碼更加簡潔、快速，不占那么多篇幅。我們想盡可能地簡潔且快速，于是就會(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)算符反而能更簡潔的表達(dá)算式。

舉個(gè)例子：

// 假設(shè)，我們有三個(gè)已經(jīng)打過分的相親對象必須選擇一個(gè)來當(dāng)女朋友，使用 `&&` 可以很好的幫我們做出選擇。
const one = 8;
const two = 9;
const three = 10;
// 返回10
console.log(one && two && three); 
// 返回0
console.log(0 && null);

// 當(dāng)然，如果你足夠獨(dú)特~~（變態(tài)）~~，就是不要女朋友，如果選只選最差的，你可以使用 `||` 來幫你做吹選擇。
const one = 8;
const two = 9;
const three = 10;
// 返回8
console.log(one || two || three); 
// 返回null
console.log(0 || null);

哦，這個(gè)情況在工作場景中確實(shí)很常見。

假設(shè)我們想返回變量的 length ，但我們不確定接口會(huì)不會(huì)給我們需要的類型。

這個(gè)時(shí)候我們就可以使用 if/else 語句來檢查是可接受的類型，但它會(huì)讓我們的代碼非常臃腫。

這時(shí)候，我們可以使用短路運(yùn)算來簡化代碼，而且有極高的健壯性：

// 使用if
let temp = getArray();


if (!temp) {
    tempLength = 0;
} else {
    tempLength = temp.length
}


// 使用 ||
// 如果變量 tempArray 為真，則將返回該變量。否則，將返回 []
const temp = (tempArray || []).length;

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

你有沒有遇到過訪問嵌套對象屬性的困擾？

就是有時(shí)候你根本不確定這個(gè)對象或者它的子屬性到底存不存在，結(jié)果就報(bào)錯(cuò)了！以至于程序崩潰無法運(yùn)行

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

為了不讓報(bào)錯(cuò)阻止我們的程序運(yùn)行，我們通常會(huì)將它包裝在一個(gè)if……else代碼塊中：

if (abc.ss) {
  console.log(abc.ss);
} else {
  console.log('沒有abc這個(gè)變量喏~');
}


// 還可以用短路運(yùn)算
console.log(abc && abc.ss)

不過，ES6的可選鏈可以讓我們徹底拋棄掉上面的寫法了，我們可以直接這樣做：

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

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

在這之前需要科普一些小知識(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)算符 + 后跟一組空引號 ''，將類型轉(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); // 1
console.log(+false); // 0

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

以前我們在使用JavaScript進(jìn)行數(shù)學(xué)運(yùn)算時(shí)，總是要借助Math庫進(jìn)行運(yùn)算。很奇怪的是，但是很多教程并沒有提醒我們，ES7其實(shí)帶來的全新運(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()這些方法。不過，其實(shí)可以使用 | 將浮點(diǎn)數(shù)直接截?cái)酁檎麛?shù)。這個(gè)技巧可以讓你的代碼更簡潔高效哦！

// 正數(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ǔ)。

網(wǎng)頁題目：JavaScript 中有趣的九個(gè)常用編碼套路
網(wǎng)站路徑：http://uogjgqi.cn/article/dhpeges.html