17个每个开发人员都应该知道的顶级 JavaScript 技巧

怼烎@ 2022-09-08 00:22 195阅读 0赞

![ae4a11efdddbbf8346dcc7187b70e18e.png][]

英文 | https://levelup.gitconnected.com/17-clever-javascript-tricks-that-every-developer-should-use-e7f299e49896

翻译 | 杨小二

**1、删除重复项**

你主要使用循环来迭代整个 Array 以从中删除重复项。 但我将向你展示通过编写更少的代码来完成相同工作的专业方法。

let array = [100, 200, 200, 120, 238, 201, 201]
    let newArray = Array.from(new Set(array));
    console.log(newArray) // [ 100, 200, 120, 238, 201 ]

**2、数组的最后一个元素**

当你需要获取数组的最后一个元素时， slice 方法在 JavaScript 中非常有用。 只需将负数作为参数传递，它就会从最后一个索引开始对数组进行切片。

Slice 方法的最大好处是它不会影响你的原始数组。

let array = [1, 3, 4, 5, 6, 9, 10, 12]
    console.log(array.slice(-1)) // [12]
    console.log(array.slice(-2)) // [10, 12]
    console.log(array.slice(-4)) // [6, 9 ,10, 12]

**3、带有“Reduce”的数组的平均值**

Reduce 方法是一种非常棒的遍历数组并获得单个输出的方法。 使用 Reduce 方法的一个示例是获取数组中值的平均值。

let array = [100, 120, 150, 101, 301]
    let sum = array.reduce((previous, current)=> current += previous)
    let average = sum / array.length
    console.log(average) // 154.4

首先，我们声明一个包含值的数组，然后，我们使用 Reduce 方法计算所有值的总和，最后，我们将总和除以数组的长度以获得平均值。

**4、具有唯一值的数组**

拥有重复的数组对我们来说总是一个麻烦。 在 JavaScript 中，你可能使用map或filter来清除数组中的重复值。 但是我们还有另一种选择，那就是使用Set 对象。 看看下面的例子。

let array = [1, 3, 3, 1, 2, 4, 5, 6 ,5, 2]
    const uniqueArray = [...new Set(array)]
    console.log(uniqueArray) // [1, 3, 2, 4, 5, 6]

**5、缩短数组**

想象一下，你有一个包含 100 个项目的数组，并且你想缩短它。 在 JavaScript 中，你可能会使用 splice 方法，但我将向你展示另一种截断数组的方法。

let array = [100, 200, 300, 400, 500, 600, 700]
    //shortening your array
    array.length = 4
    console.log(array) // [100, 200, 300, 400]

**6、将对象与扩展方法结合**

假设你想将多个对象合并为一个。 在 JavaScript 中，你可以使用 Spread 方法，这是实现此目的的好方法。 在下面的示例代码中，我使用 spread 方法组合了两个对象。

示例如下：

let object1 = {'a' : 1, 'b' : 2, 'c': 3}
    let object2 = {'d' : 4, 'e' : 5}
    //combining the objects
    const combine = {...object1 , ...object2}
    console.log(combine) //  {'a' : 1, 'b' : 2, 'c': 3, 'd' : 4, 'e' : 5}

**7、在数组中查找索引**

假设你必须找到数组中特定元素的索引。 你可能会为此使用 findindex() 方法。 但是，在这个技巧中，我将向你展示另一种以更有效的方式完成相同工作的方法。

let array = [1, 4, 78, 90, 23, 123, 100, 230]
    //IndexOf Method
    console.log(array.indexOf(123)) // 5
    console.log(array.indexOf(23)) // 4
    console.log(array.indexOf(1)) // 0

**8、展平数组**

你是否有一个大型二维数组并想将其展平以制作单个一维数组？ 这个技巧可能会对你有所帮助。 查看下面的示例代码。

let array = [1, 2, [3, 4], [5, 6, 7, ]];
    const newArray = array.flat()
    console.log(newArray) // [1, 2, 3, 4, 5, 6, 7]

**9、以好的方式交换值**

我敢打赌，你们中的许多新 JavaScript 程序员或任何语言程序员都曾使用变量 temp 在两个值之间交换。

但是我将向你展示如何在不使用临时变量或第三方变量的情况下交换它们。

let a = 5;
    let b = 7;
    console.log(a, b); // 5 7
    [a, b] = [b, a];
    console.log(a, b); // 7 5

**10、用随机范围内值填充数组**

const RandomIntArray = (min, max, n = 1) => Array.from({ length: n }, () => Math.floor(Math.random() * (max - min + 1)) + min)
    RandomIntArray(5, 20, 4) // [ 8, 17, 13, 9]

**11、合并两个数组**

假设你有两个数组并且你想将它们组合起来。 此方法将帮助你快速完成此操作。

let array1 = [1, 2, 3, 4, 5, 6, 7];
    let array2 = [8, 9, 10, 11, 12];
    const merge = array1.concat(array2)
    console.log(merge) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

**12、获取当前对象的类型**

这个技巧将帮助你了解任何对象的类型。 假设你使用 JavaScript 从网站请求数据，并且你想知道你收到的数据类型是字符串、整数等。

const GetType = v => v === undefined ? 'undefined' : v === null ? 'null' :   v.constructor.name.toLowerCase();
    console.log(GetType("Programming")) // String
    console.log(GetType(123)) //Integer

**13、当前网址**

这个技巧将帮助你获取正在运行 Javascript 的当前 URL。 假设你想查看你当前看到的网页的网址，那么你可以使用下面的代码。

let GetCurrentURL = () => window.location.href;
    GetCurrentURL() //https://medium.com/

**14、计算数组中出现的次数**

假设你有很大的重复值数组，并且你想计算特定元素的出现次数。

const CountOcc = (array, val) => array.reduce((x, v) => (v === val ? x + 1 : x), 0);
    console.log(CountOcc([3, 3, 4, 1, 2, 5, 3, 6],3)) // 3
    console.log(CountOcc([3, 4, 4, 1, 3, 6],4)) // 2

**15、错误处理**

在每种编程语言中，出现错误都是一种痛苦。 这个技巧将帮助你处理 JavaScript 编程中出现的错误。

try {
    try condition
    }
    catch (exception_var) {
    catch condition
    }

**16、修剪空格**

本技巧将指导你使用正则表达式修剪字符串中的空格。 当你拥有原始数据并且想要删除空格时，此提示将非常有用。

let string = " a b    cd   e   ";
    let Trim = string.replace(/\s+/g, '');
    console.log(Trim)

**17、数字化整数**

本技巧将向你展示如何将任何整数转换为数组格式。

查看下面的代码示例。

const DigitizeInt = n => [...`${n}`].map(i => parseInt(i));
    DigitizeInt(4560) // [4, 5, 6, 0]
    DigitizeInt(131) // [1,3,1]

**最后的想法**

我希望你觉得这篇文章有用和有趣。 我主要阅读 stackoverflow 和 Quora 网站以获取新的 JavaScript 技巧。 随时分享 JavaScript 的技巧和窍门。

如果你觉得这篇文章有帮助，请与你的朋友分享这篇文章。

#  #

**学习更多技能**

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

![d40510065ea54b9de5f9c3e37fc35697.gif][]

![6ce139b47d7f3c60170e46c3fc7d1790.png][]

![5c77d36e51a85c64eb55e2445cb07c38.png][]

[ae4a11efdddbbf8346dcc7187b70e18e.png]: /images/20220829/a50bd0b6d7c448b5857cfb52916ee928.png
[d40510065ea54b9de5f9c3e37fc35697.gif]: /images/20220829/0466ab9d4cfb4a7dab3921de724858ee.png
[6ce139b47d7f3c60170e46c3fc7d1790.png]: /images/20220829/9fe8e272c53843f0b5e6e0ec05ce2672.png
[5c77d36e51a85c64eb55e2445cb07c38.png]: /images/20220829/38ace7af3d2a4af7bb199755c2dbe6e5.png