11个提高技能的JavaScript 技巧,附中奖者名单

时间:2022-11-21 16:00:20

11个提高技能的JavaScript 技巧,附中奖者名单

英文 | https://levelup.gitconnected.com/12-javascript-features-youve-probably-never-used-db932c413cdd

翻译 | 杨小二


当我开始学习 JavaScript 时,我总是很想找到可以节省时间并提高编程效率的技巧。我最终总是在 * 上搜索到答案,以及在Medium阅读许多 文章。

在本文中,我将分享我发现的 11 个提高效率的JavaScript开发技巧,它们将帮助你像专业程序员一样工作。不浪费任何时间,让我们开始吧。

1、你需要过滤掉错误值吗?

这个技巧肯定会帮助你摆脱错误值,例如 False、“ ”、0、undefined null。查看下面的示例代码以更好地理解。

//example code
const array = [1, 0, false, "", 2, null, 3]
const farray = array.filter(Boolean)
console.log(farray) // [1, 2, 3]

2、去除重复

我们都在 JavaScript 编程中遇到过重复值,最常用的摆脱它们的方法是将 indexOf() 方法与循环结合使用。今天这个技巧将向你展示两种快速去除重复的方法。

//example code
//method 1
const array = [1, 2, 1, 3, 3, 2, 4, 5, 5, 6, 1]
const farray=array.filter((item,idx,arr)=>arr.indexOf(item)===idx)
console.log(farray) // [1, 2, 3, 4, 5, 6]
//method 2
const farray2 =[...new Set(array)];
console.log(farray2) // [1, 2, 3, 4, 5, 6]

3、在 JavaScript 中截断数组

我主要使用这个技巧来缩短我的大数组或使其全空。我们将使用 Array 的长度参数并用一个值初始化它。该值可以是任何正数。

此值将根据你传递的大小截断你的数组。为了更好地理解,请看下面的示例代码。

// example code
const arr1 = [1, 2, 3, 4, 6]
arr1.length=2
console.log(arr1) // [1, 2]
const arr2 = [5, 4, 3, 9, 100, 101]
arr2.length=0
console.log(arr2) //[]
const arr3 = [5, 4, 3, 9, 100, 101]
arr3.length=7
console.log(arr3) //[5, 4, 3, 9, 100, 101, undefined]

4、合并多个对象

假设你需要在 JavaScript 中将两个对象合并为一个,以使其获得更好的信息。对于此任务,你可以使用扩展运算符 (...)。此运算符由三个点 (...) 表示。

它在许多情况下非常有用,我们将通过将两个数组合并为一个来尝试其中之一。查看下面的示例代码。

// example code
let employee = {
'id': 'S129',
'name': 'Haider',
'age': 22,
'addr': 'USA'
}
let job = {
'title': 'Software Engineer',
'location': 'Canada'
}
// merging them into one object
// using spread operator
let merge = {...employee, ...job};
console.log('Final Merged', merge);
//output:
// {
// 'id': 'S129',
// 'name': 'Haider',
// 'age': 22,
// 'addr': 'USA'
// 'title': 'Software Engineer',
// 'location': 'Canada'
// }

5、使用析构的简单交换

在其他编程语言中,交换是在第三个变量(通常名为 temp)的帮助下完成的。但是在 JavaScript 中,你可以使用析构方法在两个对象之间进行交换。查看下面的代码示例以更好地理解。

// example code
let x = 5;
let y = 9;
console.log(x, y); // 5 9
[x, y] = [y, x]; //swaping
console.log(x, y); // 9 5

6、将十进制转换为十六进制和二进制

这个很棒的技巧将帮助你使用内置方法 toString() 将十进制转换为十六进制和二进制值。

//example code
const deci = 500
console.log(deci.toString(2)) // 111110100
console.log(deci.toString(16)) // 1f4
console.log(deci.toString(8)) // 764

7、单行回文检查

这个短行代码技巧将教你如何检查一个字符串是不是回文。

// example code
function isPalindrome(str)
{
return str === str.split('').reverse().join('')


}
console.log(isPalindrome("mom")) // true
console.log(isPalindrome("ball")) // false
console.log(isPalindrome("maham")) // true

8、带空格的 JSON 输出

使 JSON 更清晰的一种简单方法是以其格式提供空格和缩进。这个技巧将帮助你使JSON 代码看起来更清晰和可读。查看下面的代码示例。

//example code
const employee = {
name : "Haider",
age : 22,
salary : 500000
}
const jemployee = JSON.stringify(employee, null, 2)
console.log(jemployee)
//output:
// {
// "name": "Haider",
// "age": 22,
// "salary": 500000
// }

9、代码的执行时间

为了计算你的代码执行时间,这个技巧将向你介绍控制台的 time 和 timeEnd 方法。

//example code
console.time("timer-1")
var a = 20
var b = 3
for(let i = b; i < a; i++)
{
// do something
}
console.timeEnd("timer-1") // timer-1: 1ms

10、检查 isArray

如果你想检查你的对象是不是一个数组,那么,这个技巧会派上用场。我们将使用一个简单的 JavaScript 内置方法,它接受一个参数对象。

//example code
const array1 = [1, 3, 4, 5]
console.log(Array.isArray(array1)) // true
const array2 = {}
console.log(Array.isArray(array2)) // false

11、JavaScript 中的快速 Power 方法

计算功率的一种方法是调用 Math.pow() 方法并传递值,但你也可以使用 **。

//example code
console.log("New Method Power of 2 ^ 3 ", 2**3); // 8
console.log("Old Method Power of 2 ^ 3 ", Math.pow(2,3)); //8

最后的想法

这就是我与你分享的 11个最好的 JavaScript 技巧,以便来帮助你提高你的开发技能并节省你的宝贵时间。 

我希望你喜欢这篇文章,并不要忘记在JavaScript 社区与大家分享它。

感谢你的阅读,祝编程快乐!


PS:《JavaScript悟道》赠书活动的中奖者名单已经出来了,见下图:

11个提高技能的JavaScript 技巧,附中奖者名单

请以上10位小伙伴,添加微信号【web_xiaoer】,备注【图书中奖】,通过后,请尽快将图书收货信息发送过来,以便于尽快安排时间寄出,这次赠书活动是与图灵出版社合作的,所以图书会由图灵这边统一寄出,请大家耐心等待一下。

对于,没有中奖的小伙伴不用灰心,后面我们也会有其他相关活动,敬请继续关注。

最后,感谢大家的积极参与。

我是杨小二,我们一起学习进步。



11个提高技能的JavaScript 技巧,附中奖者名单

11个提高技能的JavaScript 技巧,附中奖者名单