12 個有用的JavaScript片段，希望通過這些代碼的學習，加快開發速度并節省時間!

　　## **1、破壞賦值**

　　在 JavaScript 中，您可以使用析構方法將數組中的值解包并將它們分配給其他變量。

　　```js

　　// 1. Destructive Assignment

　　const data = ["Paul", "too old", "Software Engineer"]

　　const [name, age, job_title] = data

　　console.log(name, age, job_title) // Paul too old Software Engineer

　　```

　　## **2、在Array中查找對象**

　　JavaScript find() 方法可用于搜索數組以查找特定對象。

　　```js

　　// 2. Find an object in Array

　　const employess = [

　　{name: "Paul", job_title: "Software Engineer"},

　　{name: "Peter", job_title: "Web Developer"},

　　{name: "Harald", job_title: "Screen Designer"},

　　]

　　let sen = employess.find(data => data.job_title === "Software Engineer")

　　console.log(sen) // { name: 'Paul', job_title: 'Software Engineer' }

　　```

　　## **3、反轉字符串**

　　以下代碼段可用于在不使用循環的情況下反轉任何字符串。

　　```js

　　// 3. Reverse a String

　　const reverse = (input) => {

　　return input.split("").reverse().join("");

　　}

　　console.log(reverse("Paul Knulst")) // tslunK luaP

　　console.log(reverse("Medium is awesome")) // emosewa si muideM

　　```

　　## **4、帶有占位符的模板文字**

　　如果您使用模板文字，您可以借助 ${} 方法在字符串中包含變量。

　　```js

　　// 4. Placeholder in Strings

　　let placeholder1 = "Engineer";

　　let placeholder2 = "Developer";

　　console.log(`I'm a Software ${placeholder1}`); // I'm a Software Engineer

　　console.log(`I'm a Software ${placeholder2}`); // I'm a Software Developer

　　```

　　## **5、單行if-else語句**

　　對于 JavaScript 中的簡單 if-else 語句，您可以使用單行方法來執行它。

　　```js

　　// 5. One-Line if-else Statement

　　// normal

　　if (13 > 37) {

　　console.log(true);

　　} else {

　　console.log(false)

　　}

　　// One liner

　　13 > 37 ? console.log(true) : console.log(false)

　　```

　　## **6、擺脫重復**

　　在 JavaScript 中，有一種簡單的方法可以從任何輸入數組中去除重復項。當數組中有很多元素并且可能有一些重復項時，這非常方便。

　　以下代碼段將展示如何使用 Set 數據類型來實現此目的

　　```js

　　// 6. Get Rid of Duplicates

　　function removeDuplicates(array) {

　　return [...new Set(array)];

　　}

　　const uniqueStr = removeDuplicates(["Paul", "John", "Harald", "Paul", "John"])

　　const uniqueNr = removeDuplicates([1, 1, 2, 2, 3, 3, 4, 5, 6, 7, 7, 7, 9])

　　console.log(uniqueStr) // [ 'Paul', 'John', 'Harald' ]

　　console.log(uniqueNr) // [1, 2, 3, 4, 5, 6, 7, 9]

　　```

　　## **7、將字符串拆分為數組**

　　如果您想將字符串拆分為數組，可以使用以下代碼片段

　　```js

　　// 7. Split String to Array

　　const randomString = "Software"

　　const newArray = [...randomString]

　　console.log(newArray) // ['S', 'o', 'f', 't', 'w', 'a', 'r', 'e']

　　```

　　## **8、捕獲右鍵單擊**

　　如果使用 JavaScript 并希望在用戶使用時捕獲右鍵單擊以執行某些代碼。

　　```js

　　// 8. Capture Right Click

　　// only usable in HTML/JS

　　window.oncontextmenu = () => {console.log("Right Click is Pressed!")}

　　```

　　## **9、遍歷鍵和值**

　　這個有用的片段可用于迭代字典數據的鍵(或值)。為此，您可以檢索鍵/值并使用 forEach 函數。

　　```js

　　// 9. Looping through Keys and Values

　　const programming_languages = {JavaScript: 1, Kotlin: 2, Python: 3};

　　Object.keys(programming_languages).forEach((key) => {

　　console.log(key);

　　});

　　// JavaScript

　　// Kotlin

　　// Python

　　Object.values(programming_languages).forEach((key) => {

　　console.log(key);

　　});

　　// 1

　　// 2

　　// 3

　　```

　　## **10、智能數據過濾**

　　使用 JavaScript 內置的 Filter 方法過濾您的數據。如果您的輸入有大量數據并且您只需要輸入數組中的特定數據，這很重要。

　　```js

　　// 10. Smart Data Filteration

　　const jobs = ["Frontend Developer", "Backend Developer", "Data Scientist", "Teacher"]

　　const filtered_jobs1 = jobs.filter(data => data.length < 10)

　　const filtered_jobs2 = jobs.filter(data => data.includes("Developer"))

　　console.log(filtered_jobs1) // [ 'Teacher' ]

　　console.log(filtered_jobs2) // [ 'Frontend Developer', 'Backend Developer' ]

　　```

　　## **11、空合并運算符**

　　空合并運算符 (??) 是一個邏輯運算符，當其左側操作數為空或未定義時返回其右側操作數，否則返回其左側操作數。

　　```js

　　// 11. Nullish coalescing operator

　　const foo = null ?? 'default string';

　　const baz = 0 ?? 42;

　　console.log(foo); // default string

　　console.log(baz); // 0

　　```

　　## **12、錯誤處理**

　　在編程中，開發過程中總會發生錯誤。為了避免您的程序崩潰，您可以使用 try-catch 語句。這是每個編程語言中的一種眾所周知的語法，用于捕獲運行時錯誤。

　　```js

　　// 12. Error Handling

　　function getRectArea(width, height) {

　　if (isNaN(width) || isNaN(height)) {

　　throw 'Parameter is not a number!';

　　}

　　}

　　try {

　　getRectArea(3, "A")

　　} catch (err) {

　　console.log(`There was an error: ${err}`)

　　} finally {

　　console.log("This code block is executed regardless of try/catch results")

　　}

　　// Output:

　　// There was an error: Parameter is not a number!

　　// This code block is executed regardless of try/catch results

　　```

　　**-** **End** **-**

　　更多關于“html5培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。