10 個你可能還不知道的很酷JavaScript特性

英文 | https://javascript.plainenglish.io/5-cool-javascript-features-you-might-not-know-about-yet-f2fc818bdd31

翻譯 | 楊小愛

您可能使用 JavaScript 很長時間了，它的最新版本是 ES12。您可能正在使用它的一些功能，今天，我想重點介紹其中的一些功能，它們可能有助于您編寫更好、更清晰、更優的 JavaScript 代碼。

1、空運算符

如果左側為空或未定義，則此運算符傳回右側值。

const data= null ?? 'data';
console.log(data);
// expected output: "data"
const data1 = 1 ?? 4;
console.log(data1);
// expected output: 1      

邏輯 OR (||) 運算符執行相同的操作，但是，當将 0 作為值傳遞時，它将視為 false，這使得它容易用于數字。

function add(a, b) {
    val1 = a || 1;
    val2 = b || 1;
    sum = val1 + val2;
    return sum;
}


console.log(add(0, 0)); //output:2      

當我們使用 Nullish 運算符時，同樣的事情

function add1(a, b) {
    val1 = a ?? 1;
    val2 = b ?? 1;
    sum = val1 + val2;
    return sum;
}


console.log(add1(0, 0)); //ouput:0      

2、Switch 語句優化

如果你想優化你的 switch 語句，那麼，這個語句會有所幫助。

// Longhand
switch (data) {
    case 1:
        data1();
        break;
    case 2:
        data2();
        break;
    case 3:
        data();
        break;
        // And so on...
}
// Shorthand
var data = {
    1: data1,
    2: data2,
    3: data
};
const val = 1
data[val]();
function data1() {
    console.log("data1");
}
function data2() {
    console.log("data2");
}
function data() {
    console.log("data");
}      

3、控制台樣式

您是否厭倦了使用相同的控制台？現在我們可以設計我們的控制台。

console.log(`%cabc`, 'font-weight:bold;color:red');      

4、AND (&&) 運算符

如果我們想避免一個 if 語句，那麼這個速記會很有幫助。

//Longhand 
if (test1) {
 callMethod(); 
}
//Shorthand 
test1 && callMethod();      

5、短函數調用

我們可以使用三元運算符來實作這些功能。

// Longhand
function data1() {
    console.log('data1');
};
function data2() {
    console.log('data2');
};
var data3 = 1;
if (data3 == 1) {
    data1();
} else {
    data2();
} //data1
// Shorthand
(data3 === 1 ? data1 : data2)(); //data1      

6、傳回簡寫

這将有助于避免大量代碼專門傳回到基于傳回語句的調用方法。

// Longhand
let value;
function returnMe() {
    if (!(value === undefined)) {
        return value;
    } else {
        return callFunction('value');
    }
}
var data = returnMe();
console.log(data); //output value
function callFunction(val) {
    console.log(val);
}
// Shorthand
function returnMe() {
    return value || callFunction('value');
}      

7、 If... else 簡寫

當我們有 if-else 語句時，這會有所幫助（確定您有最多 2-3 個 if...else 語句，因為多于這些會降低代碼的可讀性）。

// Longhand
let mychoice: boolean;
if (money > 100) {
    mychoice= true;
} else {
    mychoice= false;
}
// Shorthand
let mychoice= (money > 10) ? true : false;
//or we can use directly
let mychoice= money > 10;
console.log(mychoice);      

嵌套條件如下所示：

let salary = 300,
checking = (salary > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(checking); // "greater than 100"      

8、可選鍊

有時，通路未定義的屬性會出錯，我們需要為所有嵌套對象屬性添加空檢查。可以使用可選連結來減少它。

const data = {
    a: 1,
    b: 'atit',
    d: {
        test1: {
            test2: 'patel',
        },
    },
};
console.log(data.val.test1); // here val is not present in object which leads the error
Error: Cannot read properties of undefined (reading 'test1')
console.log(data?.val); // using this we can check if the val is present in the data or not      

9、對象屬性指派

當我們想從兩個字元串建立對象并保持與字元串相同的鍵時，可以使用這個技巧來完成。

let data1 = 'abcd'; 
let data2 = 'efgh';
//Longhand 
let data = {data1: data1, data2: data2};
//Shorthand 
let data = {data1, data2};      

10、延遲

當 JavaScript 代碼量增加時，可能會導緻浏覽器必須等到所有腳本都執行完後再加載 DOM，進而增加了等待時間。

通過使用這個屬性，我們可以告訴浏覽器不要等待腳本；相反，它将繼續建構 DOM，并在背景加載腳本。

<p>heading before loads</p>
<script defer src="src/test.js"></script>
<p>heading after loads</p>      

總結

以上就是我今天與你分享的10個關于JavaScript 技巧的知識，希望能夠有助于您的代碼看起來更好，并幫助您在 JavaScript 中編寫更清晰的代碼。