15个JavaScript技巧,神奇又有用!

2021-08-1706:33:06编程语言入门到精通Comments1,429 views字数 2552阅读模式

技巧1、展平数组的数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

这个技巧将帮助你通过在 flat 中使用 Infinity 来展平深度嵌套的数组。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

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、简单的交换变量文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

你可能使用第三个变量 temp 交换两个变量。但是这个技巧将向你展示一种使用解构来交换变量的新方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

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

技巧 3、 按字母顺序排序文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

排序是编程中的一个常见问题,这个技巧将通过编写长代码,按字母顺序对字符串进行排序,从而来节省你的宝贵时间。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

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

技巧 4、生成数字范围文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

假设你想在特定范围之间生成一个数字。你将使用的第一种方法是循环。但是这个技巧将通过简单的方法为你节省宝贵的时间。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

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、缩短控制台日志文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

厌倦了一遍又一遍地编写 () 吗?这个技巧将展示如何缩短控制台日志并加快编码速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

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

技巧 6、以简单的方式缩短数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

对于 Web 开发人员来说,这是一个很棒的技巧,可以以简单的方式缩短数组。你只需要通过使用length 方法来传递一个表示新数组大小的数字 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

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

技巧 7、使用 isNumber文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

这个技巧主要是检查一个值或变量是否包含一个数字(整数、浮点数等)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

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

技巧 8、 使用 isString文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

这个技巧主要是检查值或数据是否为字符串格式。当你从服务器请求数据并想要检查数据类型时,这会派上用场。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

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

技巧 9、检查 Null文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

在编程中,有时我们需要检查结果或数据是否为空。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

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

技巧 10、将数组合二为一文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

当你需要将任意大小的两个数组合并为一个时,此技巧将非常有用。为此,你需要使用 JavaScript concate 方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

//Example Codelet arr1 = ["JavaScript", "Python", "C++"]let arr2 = ["Dart", "Java", "C#"]const mergeArr = (arr2)(mergeArr) // ["JavaScript", "Python", "C++", "Dart", "Java", "C#"]

技巧 11、快速计算性能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

这个技巧是我个人最常用的,主要用于计算我的 JavaScript 程序的性能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

const starttime = ();//some programconst endtime = ();const totaltime = startTime - endTimeconsole.log("function takes "+totaltime +" milisecond");

技巧 12、 删除重复项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

你可能会遇到一个包含重复数据的数组,并使用循环方式去除这些重复数据。这个技巧将帮助你在不使用任何循环的情况下,以简单的方式删除重复项。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

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

技巧 13、将数字转换为二进制文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

当你需要将数字转换为二进制时,此技巧很有用。看看下面的示例代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

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

技巧 14、字符“e”表示过多的零文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

这技巧将为你节省时间,你可以通过将所有零替换为字符“e”来摆脱在 JavaScript 中编写大量的零。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

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

技巧 15、 清空数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

这个技巧将帮助你节省清空数组的时间。我将向你介绍使用 JavaScript 长度方法清空数组的快速方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html

let array = ["A", "B", "C", "D", "E", "F"]array.length=0console.log(array) // []
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/21996.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/ymba/21996.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定