15个有用的神奇JavaScript 技巧

web前端开发

共 3401字,需浏览 7分钟

 ·

2021-08-10 14:43

英文 | 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 arrayarray.flat(Infinity)// output:// [123, 500, 1, 2, 34, 56, 67, 234, 1245, 900, 845, 30257]

技巧 2、简单的交换变量

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

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

技巧 3、 按字母顺序排序

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

//sort alphabeticallyfunction 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=2console.log(array) // ["A", "B"]

技巧 7、使用 isNumber

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

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

技巧 8、 使用 isString

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

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

技巧 9、检查 Null

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

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

技巧 10、将数组合二为一

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

//Example Codelet 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 programconst endtime = performance.now();const totaltime = startTime - endTimeconsole.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 = 200console.log(num.toString(2)) // 11001000num = 300console.log(num.toString(2)) //100101100

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

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

//normal wayvar num = 20000000//good wayvar num2 = 2e7console.log(num2) //20000000

技巧 15、 清空数组

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

let array = ["A", "B", "C", "D", "E", "F"]array.length=0console.log(array) // []
最后的想法
我希望你发现这篇文章对学习这些技巧有用且有趣。如果你有好的 JavaScript 技巧,请随时与我或其他开发人员进行分享。
快乐的 JavaScript 编码。
如果你觉得这篇文章有帮助,请点击下方的赞按钮并与你的朋友分享这篇文章。
感谢你的阅读。

学习更多技能

请点击下方公众号

浏览 36
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报