英文 | https://medium.com/geekculture/12-javascript-pro-snippet-codes-for-everyday-problems-678d510b28de

翻譯 | 楊小愛

在這篇文章中，我將分享 12 個(gè) JavaScript 代碼片段，以解決您的日常開發(fā)問題。這將是您可以在 JavaScript 項(xiàng)目中自由使用的工具箱。

1、智能數(shù)據(jù)過濾

使用 JavaScript 內(nèi)置的 Filter 方法過濾您的數(shù)據(jù)。當(dāng)您有大量數(shù)組形式的數(shù)據(jù)并希望從中過濾一些元素時(shí)，這會(huì)派上用場(chǎng)。

// Data Filteration
var data = ["Football", "Soccer", "Cricket", "Basketball", "Hockey"]var filtered_data = data.filter(data => data.length < 8)console.log(filtered_data) // ["Soccer", "Cricket", "Hockey"]

2、循環(huán)鍵和值

另一個(gè)有用的代碼片段，用于迭代數(shù)據(jù)的鍵和值。我們將使用 forEach 方法來完成這個(gè)任務(wù)。

// looping throught objectslet data = {JavaScript: 1, Dart: 2, Java: 3};Object.keys(data).forEach((key, value) => {  console.log(key, value); });// Output// JavaScript 0// Dart 1// Java 2

3、解構(gòu)賦值

您可以使用解構(gòu)方法解壓縮數(shù)組值并將它們分配給其他變量。查看下面的示例代碼。

// Destructive Assignmentlet data = ["Haider", "22", "50000", "Web Developer"]let [name, age, salary, profession] = dataconsole.log(name, age, salary, profession) // Haider 22 50000 Web Developer

4、分割數(shù)組

這是另一個(gè)有用的片段代碼，它將在不使用任何循環(huán)的情況下對(duì)您的數(shù)組進(jìn)行切片。 slice 的語法是 slice(startIndex, endIndex)。

// Slicing An Arraylet array = [10, 12, 13, 14, 15, 16]console.log(array.slice(0, 3)) // [10, 12, 13]console.log(array.slice(0, 2)) // [10, 12]

5、在數(shù)組中搜索對(duì)象

您可以使用 JavaScript find() 方法在 Array 中搜索對(duì)象。下面是一個(gè)片段代碼示例。

// Search Object in Array
let data = [  {name:"haider", Salary:60000},  {name:"John", Salary:50000},  {name:"Peter", Salary:20000},]let emp = data.find(data => data.name === "Peter")console.log(emp) // Output {  name:"Peter",  Salary:20000}

6、反轉(zhuǎn)字符串

這段代碼將向您展示如何在不使用循環(huán)的情況下反轉(zhuǎn)字符串。

// String Reverse
var reverse = (data) => {return data.split("").reverse().join(""); }console.log(reverse("CoderBoy")) // yoBredoCconsole.log(reverse("Medium")) // muideM

7、連接列表

現(xiàn)在您不需要使用函數(shù)和循環(huán)將多個(gè)列表合并為一個(gè)。您可以使用 JavaScript內(nèi)置的 Concat() 方法。

查看下面的代碼示例。

let arr1 = [10, 20, 30]let arr2 = [40, 50]var arr = arr1.concat(arr2)console.log(arr) // [10, 20, 30, 40, 50]

8、捕獲右鍵單擊

這個(gè)簡(jiǎn)單的片段代碼將捕獲 Web 瀏覽器中鼠標(biāo)的右鍵單擊。

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

9、內(nèi)置排序

排序是每種編程語言的常見問題。在 JavaScript 中，您可以使用 sort() 方法對(duì)任何元素列表進(jìn)行排序。

// Built in Sortingvar num = [9, 8, 4, 2, 8, 0, 3, 8]num.sort()console.log(num) //[0, 2, 3, 4, 8, 8, 9]

10、處理JS中的錯(cuò)誤

在編程中，錯(cuò)誤總是令人頭疼的。要處理 JavaScript 中的錯(cuò)誤，您可以使用 try/catch 語句。查看以下語法：

// Error Handlingtry {  // Code Block to try}catch(err) {  // Code Block to handle errors}finally {  // Code Block to be executed regardless of the try and catch results}

11、查找數(shù)組元素的索引

現(xiàn)在你不需要遍歷整個(gè) Array 來找到任何元素的索引。查看下面的代碼片段，讓您的生活更輕松。

// Index of Elementvar num = [9, 8, 4, 2, 8, 0, 3, 8]console.log(num.indexOf(9)) // 0console.log(num.indexOf(3)) // 6console.log(num.indexOf(8)) // 1

12、檢查字符串是否為大寫

這是一個(gè)簡(jiǎn)單的片段，可幫助您檢查字符串是大寫還是小寫。

// Check for UpperCaseconst CheckUpper = string => string === string.toUpperCase();console.log(CheckUpper("Hello")) // falseconsole.log(CheckUpper("LEARN")) // true

最后的想法

內(nèi)容就到這里了，我希望你覺得這篇文章對(duì)您有幫助并且讀起來很有趣。請(qǐng)?jiān)诹粞詤^(qū)隨時(shí)分享您的留言，也不要忘記與您身邊的開發(fā)者朋友分享它。

祝您快樂編程！

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

12 個(gè) JavaScript代碼片段，解決日常開發(fā)問題

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)