分享 12 段让你工作高效的代码片段

共 3065字，需浏览 7分钟

· 2021-10-30

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

翻译 | 杨小爱

在这篇文章中，我将分享 12 个 JavaScript 代码片段，以解决您的日常开发问题。这将是您可以在 JavaScript 项目中自由使用的工具箱。

1、智能数据过滤

使用 JavaScript 内置的 Filter 方法过滤您的数据。当您有大量数组形式的数据并希望从中过滤一些元素时，这会派上用场。

// 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、循环键和值

另一个有用的代码片段，用于迭代数据的键和值。我们将使用 forEach 方法来完成这个任务。

// 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、解构赋值

您可以使用解构方法解压缩数组值并将它们分配给其他变量。查看下面的示例代码。

// 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、分割数组

这是另一个有用的片段代码，它将在不使用任何循环的情况下对您的数组进行切片。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、在数组中搜索对象

您可以使用 JavaScript find() 方法在 Array 中搜索对象。下面是一个片段代码示例。

// 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、反转字符串

这段代码将向您展示如何在不使用循环的情况下反转字符串。

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

7、连接列表

现在您不需要使用函数和循环将多个列表合并为一个。您可以使用 JavaScript内置的 Concat() 方法。

查看下面的代码示例。

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

8、捕获右键单击

这个简单的片段代码将捕获 Web 浏览器中鼠标的右键单击。

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

9、内置排序

排序是每种编程语言的常见问题。在 JavaScript 中，您可以使用 sort() 方法对任何元素列表进行排序。

// 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中的错误

在编程中，错误总是令人头疼的。要处理 JavaScript 中的错误，您可以使用 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、查找数组元素的索引

现在你不需要遍历整个 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、检查字符串是否为大写

这是一个简单的片段，可帮助您检查字符串是大写还是小写。

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