如果您想提高 JavaScript 技能并成為更好的開發(fā)人員，那么本文適合您。本文將教您 11 個專業(yè)技巧，幫助您編寫更好的 JavaScript 代碼，你還在等什么？一起來學習吧。

【資料圖】

1. 使用 XOR 運算符比較數(shù)字

按位異或運算符 (^) 對兩個操作數(shù)執(zhí)行按位異或運算。這意味著如果位不同則返回 1，如果相同則返回 0。

const a = 1337;const b = 69;// noobya !== 69 ? console.log("Unequal") : console.log("Equal");  // Unequalb !== 69 ? console.log("Unequal") : console.log("Equal");  // Equal// proa ^ 69 ? console.log("Unequal") : console.log("Equal");    // Unequalb ^ 69 ? console.log("Unequal") : console.log("Equal");    // Equal

2. 用數(shù)據即時創(chuàng)建和填充數(shù)組

// noobyconst array = new Array(3);for(let i=0; i < array.length; i++){    array[i] = i;}console.log(array)  // [ 0, 1, 2 ]// proconst filledArray = new Array(3).fill(null).map((_, i)=> (i));console.log(filledArray)  // [ 0, 1, 2 ]

3. 使用對象中的動態(tài)屬性

// noobylet propertyName = "body";let paragraph = {    id: 1,};paragraph[propertyName] = "other stringy";// { id: 1, body: "other stringy" }console.log(paragraph)// prolet propertyName = "body";let paragraph = {    id: 1,    [propertyName] : "other stringy"};// { id: 1, body: "other stringy" }console.log(paragraph)

4. 輕松消除數(shù)組中的重復值

您可以使用集合消除數(shù)組中的重復值。

// noobylet answers = [7, 13, 31, 13, 31, 7, 42];let leftAnswers = [];let flag = false;for (i = 0; i< answers.length; i++) {    for (j = 0; j < leftAnswers.length; j++) {        if (answers[i] === leftAnswers[j]) {            flag = true;        }    }    if (flag === false) {        leftAnswers.push(answers[i]);    }    flag = false;}//[ 7, 13, 31, 42 ]console.log(leftAnswers)// prolet answers = [7, 13, 31, 13, 31, 7, 42];let leftAnswers = Array.from(new Set(answers));// [ 7, 13, 31, 42 ]console.log(leftAnswers)

5. 輕松地將對象轉換為數(shù)組

您可以使用展開運算符將數(shù)組轉換為對象。

// noobylet arr = ["v1", "v2", "v3"];let objFromArray = {};for (let i = 0; i < arr.length; ++i) {    if (arr[i] !== undefined) {        objFromArray[i] = arr[i];    }}// { "0": "v1", "1": "v2", "2": "v3" }console.log(objFromArray)// prolet objFromArrayPro = {...arr};// { "0": "v1", "1": "v2", "2": "v3" }console.log(objFromArrayPro)

6. 使用邏輯運算符進行短路評估

您可以使用邏輯運算符進行短路評估，方法是使用 && 運算符返回表達式鏈中的第一個假值或最后一個真值，或者使用 || 運算符返回表達式鏈中的第一個真值或最后一個假值。

const dogs = true;// noobyif (dogs) {    runAway();}// prodogs && runAway()function runAway(){    console.log("You run!");}

7. 對象鍵維護它們的插入順序

對象鍵通過遵循一個簡單的規(guī)則來維護它們的插入順序：類整數(shù)鍵按數(shù)字升序排序，而非類整數(shù)鍵根據它們的創(chuàng)建時間排序。

const character = {    name: "Arthas",    age: 27,    class: "Paladin",    profession: "Lichking",};// name age class professionconsole.log(Object.keys(character));

8. 創(chuàng)建并填充指定大小的數(shù)組

您可以使用帶有兩個參數(shù)的 Array() 構造函數(shù)來創(chuàng)建和填充指定大小和值的數(shù)組：大小和值，或者對空數(shù)組使用 Array.fill() 方法。

// noobyconst size = 5;const defaultValue = 0;const arr = []for(let i = 0; i < size; i++){    arr.push(defaultValue)}console.log(arr);// proconst size = 5;const defaultValue = 0;const arr = Array(size).fill(defaultValue);console.log(arr); // [0, 0, 0, 0, 0]

9. 理解 JavaScript 中的 Truthy 和 Falsy 值

在布爾上下文中使用時，Truthy 和 Falsy 值會隱式轉換為 true 或 false。

虛假值 => false, 0, ""(空字符串), null, undefined, &NaN

真值 => "Values", "0", {}（空對象），&[]（空數(shù)組）

// proif(![].length){    console.log("There is no Array...");} else {    console.log("There is an Array, Hooray!");}if(!""){    console.log("There is no content in this string...");} else {    console.log("There is content in this string, Hooray!");}

10. 用更好的參數(shù)改進函數(shù)

不要使用單個多個參數(shù)，而是使用參數(shù)對象。在函數(shù)定義中解構它以獲得所需的屬性。

// noobyfunction upload(user, resourceId, auth, files) {}upload(...); // need to remember the order// profunction upload(    { user, resourceId, auth, files } = {}) {}const uploadObj = {    user: "me",    resourceId: uuid(),    auth: "token",    files: []}upload(uploadObj);

11. Null 和 Undefined 在 JavaScript 中是不同的

Null 和 undefined 是兩個不同的值，表示沒有值。

null => 是的，這是一個值。Undefined 不是將 null 想象成在一個空盒子前面把 undefined 想象成在沒有盒子的前面

const fnExpression = (s = "default stringy") => console.log(s);fnExpression(undefined); // default stringyfnExpression(); // default stringyfnExpression(null); // null

總結

以上就是我今天想與您分享的11個關于JavaScript的專業(yè)技巧，希望您能從中學到新東西。

關鍵詞：