12 个 JavaScript代码片段，解决日常开发问题

英文 | 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 Assignment
let data = ["Haider", "22", "50000", "Web Developer"]
let [name, age, salary, profession] = data
console.log(name, age, salary, profession) 
// Haider 22 50000 Web Developer

4、分割数组

这是另一个有用的片段代码，它将在不使用任何循环的情况下对您的数组进行切片。 slice 的语法是 slice(startIndex, endIndex)。

// Slicing An Array
let 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")) // yoBredoC
console.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 Click
window.oncontextmenu = () => {console.log("Right Click is Pressed!")}

9、内置排序

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

// Built in Sorting
var 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 Handling
try {
  // 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 Element
var num = [9, 8, 4, 2, 8, 0, 3, 8]
console.log(num.indexOf(9)) 
// 0
console.log(num.indexOf(3)) 
// 6
console.log(num.indexOf(8)) 
// 1

12、检查字符串是否为大写

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

// Check for UpperCase
const CheckUpper = string => string === string.toUpperCase();
console.log(CheckUpper("Hello")) 
// false
console.log(CheckUpper("LEARN")) 
// true

最后的想法

内容就到这里了，我希望你觉得这篇文章对您有帮助并且读起来很有趣。 请在留言区随时分享您的留言，也不要忘记与您身边的开发者朋友分享它。 

祝您快乐编程！

学习更多技能

请点击下方公众号