1. 空值和未定義值的判斷

一個非常常見的測試就是檢查變量是否為null或undefined，甚至是“空”，例如下面的示例：

if (typeof variable === "undefined" || variable === null || variable === "") {
  // do something
}

一個更簡單的方式是：

if (!variable) {
  // do something
}

2. 數組定義

創(chuàng)建一個Array對象：

var myArray = new Array();
myArray[0] = "value1";
myArray[1] = "value2";
myArray[2] = "value3";

我們可以用一行代碼完成相同的操作

var myArray = ["value1", "value2", "value3"];

3. 三元運算符

“if/else”是我們經常會用到的：

if (x > y) {
  result = "x is greater than y";
} else {
  result = "x is less than or equal to y";
}

使用三元運算符：

result = x > y ? "x is greater than y" : "x is less than or equal to y";

甚至更簡單：

result = x > y && "x is greater than y" || "x is less than or equal to y";

但是，它對于函數調用是否有效呢？如果我有兩個不同的函數，并且我想在if為true時調用一個函數，在if為false時調用另一個函數：

if (x > y) {
  myFunction1();
} else {
  myFunction2();
}

你可以使用三元運算符完成相同的函數調用：

(x > y ? myFunction1 : myFunction2)();

還值得一提的是，對于測試變量是否為true的if語句，有些小伙伴會這樣做：

if (variable === true) {
  // do something
}

也可以這樣做：

if (variable) {
  // do something
}

4. 變量聲明

var x = 0;
var y = 0;
var z = 0;

也可以這樣寫：

var x = y = z = 0;

5. 使用正則表達式

正則表達式是一種在文本分析和驗證方面創(chuàng)建優(yōu)雅和強大代碼的好工具，并且在某些類型的網絡爬蟲的數據提取方面也非常有用。

你可以在以下鏈接中了解更多關于如何使用正則表達式的信息：

• https://developer.mozilla.org/en-US/docs/Web/Javascript/Guide/Regular_Expressions
• https://regexr.com/
• https://regex101.com/

6. charAt()的快捷方式

那么你想從一個字符串中選擇一個特定位置的字符，就像下面這樣：

var myString = "Hello World";
var myChar = myString.charAt(0);

但是請注意，你可以通過記住字符串是一個字符數組來獲得相同的結果：

var myString = "Hello World";
var myChar = myString[0];

7. 10進制冪

一個數字10000在JS中可以很容易地被1e4替換，即1后跟4個零，如下所示：

var myNumber = 1e4;

8. 模板文字

這個語義化特性是ECMAscript版本6或更高版本獨有的，并且極大地簡化了變量集中的字符串連接。例如，下面的：

var name = "John";
var age = 30;
var message = "My name is " + name + " and I am " + age + " years old.";

從ES6開始，我們可以使用模板文字來完成這個連接：

var name = "John";
var age = 30;
var message = `My name is ${name} and I am ${age} years old.`;

9. 箭頭函數

箭頭函數是聲明函數的簡短方式。例如，下面是一個求和函數：

function sum(x, y) {
  return x + y;
}

我們也可以這樣聲明函數：

var sum = function(x, y) {
  return x + y;
}

但是使用箭頭函數就很簡單：

var sum = (x, y) => x + y;

10. 參數解構

這個技巧適用于那些充滿參數的函數，你決定用一個對象替換所有參數?；蛘邔τ谀切┐_實需要一個配置對象作為參數的函數。

問題在于必須繼續(xù)訪問通過參數傳遞的對象，然后是我們想要讀取的每個屬性。像這樣：

function myFunction(options) {
  var x = options.x;
  var y = options.y;
  var z = options.z;
}

參數解構特性恰好用于簡化這個問題，同時通過替換前一個語句來幫助代碼可讀性：

function myFunction({x, y, z}) {
  // do something with x, y, z
}

最后，我們還可以在參數對象的屬性中添加默認值：

function myFunction({x, y, z = 20}) {
  var s = x + y + z;
}

這樣，s的值將為1，但t的值將默認為此屬性，即20。

11. 鍵值命名

假設你有一個人的對象，它有一個將要通過一個名字變量賦值的名字屬性。像這樣：

const name = "Joseph"
const person = { name: name }// { name: "Joseph" }

而你也可以這樣做：

const name = "Joseph"
const person = { name }// { name: "Joseph" }

也就是說，如果你的變量與屬性同名，你就不需要調用它，只需傳遞變量即可。對于多個屬性也是如此：

const name = "Joseph"
const canCode = true
const person = { name, canCode }
// { name: "Joseph", canCode: true }

12. Map

考慮以下對象數組：

const animals = [
    {
        "name": "cat",
        "size": "small",
        "weight": 5
    },
    {
        "name": "dog",
        "size": "small",
        "weight": 10
    },
    {
        "name": "lion",
        "size": "medium",
        "weight": 150
    },
    {
        "name": "elefante",
        "size": "large",
        "weight": 5000
    }
]

我們想要僅將動物的名稱添加到另一個數組中。通常我們會這樣做：

let animalNames = [];

for (let i = 0; i < animals.length; i++) {
    animalNames.push(animals[i].name);
}

但是使用 Map，我們可以這樣做：

let animalNames = animais.map((animal) => {
    return animal.nome;
})

請注意，map預期通過參數傳遞一個帶有最多三個參數的函數：

• 第一個是當前對象（與 foreach 中的相同）
• 第二個是當前迭代的索引
• 第三個是整個數組

顯然，此函數將針對 animal 數組中的每個對象調用一次。

13. Filter

如果我們想要遍歷與上一個提示中相同的動物對象數組，但這次僅返回那些大小為“small”的對象，我們該如何做呢？

我們如何使用普通的JS實現呢？

let smallAnimals = [];

for (let i = 0; i < animals.length; i ++) {
    if (animals[i].size === "small") {
       smallAnimals.push(animals[i])
    }
}

然而，使用 filter 操作符，我們可以以更簡潔和更清晰的方式實現這一點：

let smallAnimals = animais.filter((animal) => {
    return animal.size === "small"
})

Filter通過參數傳遞一個帶有當前迭代對象參數的函數（與 foreach 中的相同），它應該返回一個布爾值，指示此對象是否將成為返回數組的一部分（true表示它通過了測試并將成為其中一部分）。

14. Reduce

Javascript 的另一個重要功能是 reduce。它允許我們以非常簡單和強大的方式對集合進行分組和計算。例如，如果我們想要將我們的動物對象數組中所有動物的重量相加，我們該怎么做呢？

let totalWeight = 0;

for (let i = 0; i < animals.length; i++) {
    totalWeight += animals[i].weight;
}

但是，使用 reduce，我們可以這樣做：

let totalWeight = animals.reduce((total, animal) => {
    return total += animal.weight;
}, 0)

Reduce通過參數傳遞一個帶有以下參數的函數：

• 第一個是累加器變量的當前值（在所有迭代結束時，它將包含最終值）
• 第二個參數是當前迭代對象
• 第三個參數是當前迭代的索引
• 第四個參數是將被迭代的所有對象的數組

此函數將在數組中的每個對象上執(zhí)行一次，在執(zhí)行結束時返回聚合值。

以上就是今日分享的關于Javascript的文章，雖然看起來很簡單，但是對于剛入門的小伙伴來說是非常有用的喲！