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

曾经终败给现在 2022-09-08 15:54 143阅读 0赞

![b2d0f2c4a862da94d58e8c666407b883.png][]

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

翻译 | 杨小二

当我开始学习 JavaScript 时，我总是很想找到可以节省时间并提高编程效率的技巧。我最终总是在 Stackoverflow 上搜索到答案，以及在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悟道》赠书活动的中奖者名单已经出来了，见下图：

![be76d8de24601902af84b2b21f007c7c.png][]

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

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

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

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

**学习更多技能**

**请点击下方公众号**

![cb7390f918430fda679cf8fc624d8c6a.gif][]

![2df9bcaec528c9bc70a5b0e33cf7805a.png][]

![02efcb343e11aedd408db74198a2fcea.png][]

[b2d0f2c4a862da94d58e8c666407b883.png]: /images/20220829/1be0df9608684f4f9aa72c6ffaf5e075.png
[be76d8de24601902af84b2b21f007c7c.png]: /images/20220829/000b76e1773e42bcb7d8f4f5f0b7c8a7.png
[cb7390f918430fda679cf8fc624d8c6a.gif]: /images/20220829/83a0efcc20dd4b20b28a9cea4de81b2f.png
[2df9bcaec528c9bc70a5b0e33cf7805a.png]: /images/20220829/d46b4aa47ead491a89495a8104812781.png
[02efcb343e11aedd408db74198a2fcea.png]: /images/20220829/ab691339372748478fbcc6dcb0c2a977.png