12 個(gè)有用的JavaScript片段，希望通過這些代碼的學(xué)習(xí)，加快開發(fā)速度并節(jié)省時(shí)間!
## **1、破壞賦值**
在 JavaScript 中，您可以使用析構(gòu)方法將數(shù)組中的值解包并將它們分配給其他變量。
```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中查找對(duì)象**
JavaScript find() 方法可用于搜索數(shù)組以查找特定對(duì)象。
```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、反轉(zhuǎn)字符串**
以下代碼段可用于在不使用循環(huán)的情況下反轉(zhuǎn)任何字符串。
```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語句**
對(duì)于 JavaScript 中的簡(jiǎn)單 if-else 語句，您可以使用單行方法來執(zhí)行它。
```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、擺脫重復(fù)**
在 JavaScript 中，有一種簡(jiǎn)單的方法可以從任何輸入數(shù)組中去除重復(fù)項(xiàng)。當(dāng)數(shù)組中有很多元素并且可能有一些重復(fù)項(xiàng)時(shí)，這非常方便。
以下代碼段將展示如何使用 Set 數(shù)據(jù)類型來實(shí)現(xiàn)此目的
```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、將字符串拆分為數(shù)組**
如果您想將字符串拆分為數(shù)組，可以使用以下代碼片段
```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 并希望在用戶使用時(shí)捕獲右鍵單擊以執(zhí)行某些代碼。
```js
// 8. Capture Right Click
// only usable in HTML/JS
window.oncontextmenu = () => {console.log("Right Click is Pressed!")}
```
## **9、遍歷鍵和值**
這個(gè)有用的片段可用于迭代字典數(shù)據(jù)的鍵(或值)。為此，您可以檢索鍵/值并使用 forEach 函數(shù)。
```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、智能數(shù)據(jù)過濾**
使用 JavaScript 內(nèi)置的 Filter 方法過濾您的數(shù)據(jù)。如果您的輸入有大量數(shù)據(jù)并且您只需要輸入數(shù)組中的特定數(shù)據(jù)，這很重要。
```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、空合并運(yùn)算符**
空合并運(yùn)算符 (??) 是一個(gè)邏輯運(yùn)算符，當(dāng)其左側(cè)操作數(shù)為空或未定義時(shí)返回其右側(cè)操作數(shù)，否則返回其左側(cè)操作數(shù)。
```js
// 11. Nullish coalescing operator
const foo = null ?? 'default string';
const baz = 0 ?? 42;
console.log(foo); // default string
console.log(baz); // 0
```
## **12、錯(cuò)誤處理**
在編程中，開發(fā)過程中總會(huì)發(fā)生錯(cuò)誤。為了避免您的程序崩潰，您可以使用 try-catch 語句。這是每個(gè)編程語言中的一種眾所周知的語法，用于捕獲運(yùn)行時(shí)錯(cuò)誤。
```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** **-**
更多關(guān)于“html5培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。
京公網(wǎng)安備 11010802030320號(hào)