15个有用的神奇JavaScript 技巧

喜欢ヅ旅行 2022-09-03 15:19 249阅读 0赞

![151b5f0369af5c690944c95ccb267c57.png][]

英文 | https://levelup.gitconnected.com/15-magical-javascript-tips-for-every-web-developer-3301feb0b70c

翻译 | 杨小二

在本文中，我们将分享15个有用的 JavaScript 技巧，为每个 Web 开发人员节省宝贵的开发时间。

**技巧1、展平数组的数组**

这个技巧将帮助你通过在 flat 中使用 Infinity 来展平深度嵌套的数组。

var array = [123, 500, [1, 2, [34, 56, 67, [234, 1245], 900]], 845, [30257]]
    //flatten array of array
    array.flat(Infinity)
    // output:
    // [123, 500, 1, 2, 34, 56, 67, 234, 1245, 900, 845, 30257]

**技巧 2、简单的交换变量**

你可能使用第三个变量 temp 交换两个变量。但是这个技巧将向你展示一种使用解构来交换变量的新方法。

//example 1
    var a = 6;
    var b = 7;
    [a,b] = [b,a]
    console.log(a,b) // 7 6

**技巧 3、 按字母顺序排序**

排序是编程中的一个常见问题，这个技巧将通过编写长代码，按字母顺序对字符串进行排序，从而来节省你的宝贵时间。

//sort alphabetically
    function alphabetSort(arr)
    {
      return arr.sort((a, b) => a.localeCompare(b));
    }
    let array = ["d", "c", "b", "a"]
    console.log(alphabetSort(array)) // ["a", "b", "c", "d"]

**技巧 4、生成数字范围**

假设你想在特定范围之间生成一个数字。你将使用的第一种方法是循环。但是这个技巧将通过简单的方法为你节省宝贵的时间。

let Start = 1000, End = 1500;
    //Generating
    [...new Array(End + 1).keys()].slice(Start);
    Array.from({length: End - Start + 1}, (_,i) => Start + i) 
    // [1000, 1001 .... 1500]

**技巧 5、缩短控制台日志**

厌倦了一遍又一遍地编写 console.log() 吗？这个技巧将展示如何缩短控制台日志并加快编码速度。

var c = console.log.bind(document)
    c(455)
    c("hello world")

**技巧 6、以简单的方式缩短数组**

对于 Web 开发人员来说，这是一个很棒的技巧，可以以简单的方式缩短数组。你只需要通过使用length 方法来传递一个表示新数组大小的数字 。

let array = ["A", "B", "C", "D", "E", "F"]
    array.length=2
    console.log(array) // ["A", "B"]

**技巧 7、使用 isNumber**

这个技巧主要是检查一个值或变量是否包含一个数字（整数、浮点数等）。

function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); }
    console.log(isNumber(900))  // true
    console.log(isNumber(23.98))  // true
    console.log(isNumber("JavaScript")) // false

**技巧 8、 使用 isString**

这个技巧主要是检查值或数据是否为字符串格式。当你从服务器请求数据并想要检查数据类型时，这会派上用场。

const isString = vaue => typeof value === 'string';
    isString('JavaScript'); // true
    isString(345); // false
    isString(true); // false

**技巧 9、检查 Null**

在编程中，有时我们需要检查结果或数据是否为空。

const CheckNull= value => value === null || value === undefined;
    CheckNull(null) // true
    CheckNull() // true
    CheckNull(123) // false
    CheckNull("J") // false

**技巧 10、将数组合二为一**

当你需要将任意大小的两个数组合并为一个时，此技巧将非常有用。为此，你需要使用 JavaScript concate 方法。

//Example Code
    let arr1 = ["JavaScript", "Python", "C++"]
    let arr2 = ["Dart", "Java", "C#"]
    const mergeArr = arr1.concat(arr2)
    console.log(mergeArr) // ["JavaScript", "Python", "C++", "Dart", "Java", "C#"]

**技巧 11、快速计算性能**

这个技巧是我个人最常用的，主要用于计算我的 JavaScript 程序的性能。

const starttime = performance.now();
    //some program
    const endtime = performance.now();
    const totaltime = startTime - endTime
    console.log("function takes "+totaltime +" milisecond");

**技巧 12、 删除重复项**

你可能会遇到一个包含重复数据的数组，并使用循环方式去除这些重复数据。这个技巧将帮助你在不使用任何循环的情况下，以简单的方式删除重复项。

const ReDuplicates = array => [...new Set(array)];
    console.log(ReDuplicates([200,200,300,300,400,500,600,600])) // [200,300,400,600]

**技巧 13、将数字转换为二进制**

当你需要将数字转换为二进制时，此技巧很有用。看看下面的示例代码。

var num = 200
    console.log(num.toString(2)) // 11001000
    num = 300
    console.log(num.toString(2)) //100101100

**技巧 14、字符“e”表示过多的零**

这技巧将为你节省时间，你可以通过将所有零替换为字符“e”来摆脱在 JavaScript 中编写大量的零。

//normal way
    var num = 20000000
    //good way
    var num2 = 2e7
    console.log(num2) //20000000

**技巧 15、 清空数组**

这个技巧将帮助你节省清空数组的时间。我将向你介绍使用 JavaScript 长度方法清空数组的快速方法。

let array = ["A", "B", "C", "D", "E", "F"]
    array.length=0
    console.log(array) // []

**最后的想法**

我希望你发现这篇文章对学习这些技巧有用且有趣。如果你有好的 JavaScript 技巧，请随时与我或其他开发人员进行分享。

快乐的 JavaScript 编码。

如果你觉得这篇文章有帮助，请点击下方的赞按钮并与你的朋友分享这篇文章。

感谢你的阅读。

#  #

**学习更多技能**

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

![8adeca46c61c1965583ba63a3a794e36.gif][]

![64de8f092eee82c731ed090c2cbefb36.png][]

![b002d96d3ac5f8e185b55ec4bedf17cb.png][]

[151b5f0369af5c690944c95ccb267c57.png]: /images/20220829/8a5d19e11b894298a9e1d61856eefe47.png
[8adeca46c61c1965583ba63a3a794e36.gif]: /images/20220829/7327a30a56bf45dc804ea43f2d7f9218.png
[64de8f092eee82c731ed090c2cbefb36.png]: /images/20220829/bf958a0b3976408ea3f61f1f6a67129f.png
[b002d96d3ac5f8e185b55ec4bedf17cb.png]: /images/20220829/3090302721ec48cba0ae337dde1676c9.png