24个实用JavaScript 开发技巧
作者:CUGGZ 发布时间:2024-04-10 11:03:39
目录
1. 初始化数组
2. 数组求和、求最大值、最小值
3. 过滤错误值
4. 使用逻辑运算符
5. 判断简化
6. 清空数组
7. 计算代码性能
8. 拼接数组
9. 对象验证方式
10. 验证undefined和null
11. 数组元素转化为数字
12. 类数组转为数组
13. 对象动态声明属性
14. 缩短console.log()
15. 获取查询参数
16. 数字取整
17. 删除数组元素
18. 检查对象是否为空
19. 使用 switch case 替换 if/else
20. 获取数组中的最后一项
21. 值转为布尔值
22. 格式化 JSON 代码
23. 避免使用eval()和with()
24. 函数参数使用对象而不是参数列表
1. 初始化数组
如果想要初始化一个指定长度的一维数组,并指定默认值,可以这样:
const array = Array(6).fill('');
// ['', '', '', '', '', '']
如果想要初始化一个指定长度的二维数组,并指定默认值,可以这样:
const matrix = Array(6).fill(0).map(() => Array(5).fill(0));
// [[0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0]]
2. 数组求和、求最大值、最小值
const array = [5,4,7,8,9,2];
数组求和:
array.reduce((a,b) => a+b);
数组最大值:
array.reduce((a,b) => a > b ? a : b);
Math.max(...array)
数组最小值:
array.reduce((a,b) => a < b ? a : b);
Math.min(...array)
使用数组的reduce
方法可以解决很多数组的求值问题。
3. 过滤错误值
如果想过滤数组中的false、0、null、undefined等值,可以这样:
const array = [1, 0, undefined, 6, 7, '', false];
array.filter(Boolean);
// [1, 6, 7]
4. 使用逻辑运算符
如果有一段这样的代码:
if(a > 10) {
doSomething(a)
}
可以使用逻辑运算符来改写:
a > 10 && doSomething(a)
这样写就会简洁很多,如果逻辑与&&操作符前面的值为假,就会发生短路操作,直接结束这一句的执行;如果为真,就会继续执行&&后面的代码,并返回后面代码的返回值。使用这种方式可以减少很多if...else判断。
5. 判断简化
如果有下面的这样的一个判断:
if(a === undefined || a === 10 || a=== 15 || a === null) {
//...
}
就可以使用数组来简化这个判断逻辑:
if([undefined, 10, 15, null].includes(a)) {
//...
}
这样代码就会简洁很多,并且便于扩展,如果还有需要等于a的判断,直接在数组中添加即可。
6. 清空数组
如果想要清空一个数组,可以将数组的length置于0:
let array = ["A", "B", "C", "D", "E", "F"]
array.length = 0
console.log(array) // []
7. 计算代码性能
可以使用以下操作来计算代码的性能:
const startTime = performance.now();
// 某些程序
for(let i = 0; i < 1000; i++) {
console.log(i)
}
const endTime = performance.now();
const totaltime = endTime - startTime;
console.log(totaltime); // 30.299999952316284
8. 拼接数组
如果我们想要拼接几个数组,可以使用扩展运算符:
const start = [1, 2]
const end = [5, 6, 7]
const numbers = [9, ...start, ...end, 8] // [9, 1, 2, 5, 6, 7 , 8]
或者使用数组的concat()方法:
const start = [1, 2, 3, 4]
const end = [5, 6, 7]
start.concat(end); // [1, 2, 3, 4, 5, 6, 7]
但是使用concat()
方法时,如果需要合并的数组很大,那么concat()
函数会在创建单独的新数组时消耗大量内存。这时可以使用以下方法来实现数组的合并:
Array.push.apply(start, end)
通过这种方式就能在很大程度上较少内存的使用。
9. 对象验证方式
如果我们有一个这样的对象:
const parent = {
child: {
child1: {
child2: {
key: 10
}
}
}
}
很多时候我们会这样去写,避免某一层级不存在导致报错:
parent && parent.child && parent.child.child1 && parent.child.child1.child2
这样代码看起来就会很臃肿,可以使用JavaScript的可选链运算符:
parent?.child?.child1?.child2
这样实现和效果和上面的一大长串是一样的。
可选链运算符同样适用于数组:
const array = [1, 2, 3];
array?.[5]
可选链运算符允许我们读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。在引用为空(null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined
。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined
。
10. 验证undefined和null
如果有这样一段代码:
if(a === null || a === undefined) {
doSomething()
}
也就是如果需要验证一个值如果等于null
或者undefined
时,需要执行一个操作时,可以使用空值合并运算符来简化上面的代码:
a ?? doSomething()
这样,只有a是undefined
或者null时,才会执行控制合并运算符后面的代码。空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined
时,返回其右侧操作数,否则返回左侧操作数。
11. 数组元素转化为数字
如果有一个数组,想要把数组中的元素转化为数字,可以使用map方法来实现:
const array = ['12', '1', '3.1415', '-10.01'];
array.map(Number); // [12, 1, 3.1415, -10.01]
通过这种方式,map
会在遍历数组时,对数组的每个元素执行Number构造函数并返回结果。
12. 类数组转为数组
可以使用以下方法将类数组arguments转化为数组:
Array.prototype.slice.call(arguments);
除此之外,还可以使用扩展运算符来实现:
[...arguments]
13. 对象动态声明属性
如果想要给对象动态声明属性,可以这样:
const dynamic = 'color';
var item = {
brand: 'Ford',
[dynamic]: 'Blue'
}
console.log(item);
// { brand: "Ford", color: "Blue" }
14. 缩短console.log()
每次进行调试时书写很多console.log()就会比较麻烦,可以使用以下形式来简化这个代码:
const c = console.log.bind(document)
c(996)
c("hello world")
这样每次执行c方法就行了。
15. 获取查询参数
如果我们想要获取URL中的参数,可以使用window对象的属性:
window.location.search
如果一个URL为www.baidu.com?project=js&type=1 那么通过上面操作就会获取到?project=js&type=1。如果在想获取到其中某一个参数,可以这样:
let type = new URLSearchParams(location.search).get('type');
16. 数字取整
如果有一个数字包含小数,我们想要去除小数,通过会使用math.floor
、math.ceil
或math.round
方法来消除小数。其实可以使用~~运算符来消除数字的小数部分,它相对于数字的那些方法会快很多。
~~3.1415926 // 3
其实这个运算符的作用有很多,通常是用来将变量转化为数字类型的,不同类型的转化结果不一样:
如果是数字类型的字符串,就会转化为纯数字;
如果字符串包含数字之外的值,就会转化为0;
如果是布尔类型,true会返回1,false会返回0;
除了这种方式之外,我们还可以使用按位与来实现数字的取整操作,只需要在数字后面加上|0即可:
23.9 | 0 // 23
-23.9 | 0 // -23
这个操作也是直接去除数字后面的小数。这个方法和上面方法类似,使用起来性能都会比JavaScript
的的API好很多。
17. 删除数组元素
如果我们想删除数组中的一个元素,我们可以使用delete来实现,但是删除完之后的元素会变为undefined
,并不会消失,并且执行时会消耗大量的时间,这样多数情况下都不能满足我们的需求。所以可以使用数组的splice()
方法来删除数组元素:
const array = ["a", "b", "c", "d"]
array.splice(0, 2) // ["a", "b"]
18. 检查对象是否为空
如果我们想要检查对象是否为空,可以使用以下方式:
Object.keys({}).length // 0
Object.keys({key: 1}).length // 1
Object.keys()
方法用于获取对象的 key,会返回一个包含这些key值的数组。如果返回的数组长度为0,那对象肯定为空了。
19. 使用 switch case 替换 if/else
switch case
相对于 if/else 执行性能更高,代码看起来会更加清晰。
if (1 == month) {days = 31;}
else if (2 == month) {days = IsLeapYear(year) ? 29 : 28;}
else if (3 == month) {days = 31;}
else if (4 == month) {days = 30;}
else if (5 == month) {days = 31;}
else if (6 == month) {days = 30;}
else if (7 == month) {days = 31;}
else if (8 == month) {days = 31;}
else if (9 == month) {days = 30;}
else if (10 == month) {days = 31;}
else if (11 == month) {days = 30;}
else if (12 == month) {days = 31;}
使用switch...case来改写:
switch(month) {
case 1: days = 31; break;
case 2: days = IsLeapYear(year) ? 29 : 28; break;
case 3: days = 31; break;
case 4: days = 30; break;
case 5: days = 31; break;
case 6: days = 30; break;
case 7: days = 31; break;
case 8: days = 31; break;
case 9: days = 30; break;
case 10: days = 31; break;
case 11: days = 30; break;
case 12: days = 31; break;
default: break;
}
看起来相对来说简洁了一点。可以根据情况,使用数组或对象来改写if...else。
20. 获取数组中的最后一项
如果想获取数组中的最后一项,很多时候会这样来写:
const arr = [1, 2, 3, 4, 5];
arr[arr.length - 1] // 5
其实我们还可以使用数组的slice方法来获取数组的最后一个元素:
arr.slice(-1)
当我们将slice方法的参数设置为负值时,就会从数组后面开始截取数组值,如果我们想截取后两个值,参数传入-2即可。
21. 值转为布尔值
在JavaScript
中,以下值都会在布尔值转化时转化为false,其他值会转化为true:
undefined
null
0
-0
NaN
""
通常我们如果想显式的值转化为布尔值,会使用Boolean()
方法进行转化。其实我们可以使用!!运算符来将一个值转化我布尔值。我们知道,一个!是将对象转为布尔型并取反,两个!是将取反后的布尔值再取反,相当于直接将非布尔类型值转为布尔类型值。这种操作相对于Boolean()
方法性能会快很多,因为它是计算机的原生操作:
!!undefined // false
!!"996" // true
!!null // false
!!NaN // false
22. 格式化 JSON 代码
相信大家都使用过JSON.stringify
方法,该方法可以将一个 JavaScript
对象或值转换为 JSON 字符串。他的语法如下:
JSON.stringify(value, replacer, space)
它有三个参数:
value
:将要序列化成 一个 JSON 字符串的值。replacer
可选:如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;如果该参数为 null 或者未提供,则对象所有的属性都会被序列化。space
可选:指定缩进用的空白字符串,用于美化输出(pretty-print);如果参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格;如果该参数为字符串(当字符串长度超过10个字母,取其前10个字母),该字符串将被作为空格;如果该参数没有提供(或者为 null),将没有空格。
通常情况下,我们都写一个参数来将一个 JavaScript 对象或值转换为 JSON 字符串。可以看到它还有两个可选的参数,所以我们可以用这俩参数来格式化JSON代码:
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
输出结果如下:
23. 避免使用eval()和with()
with()
会在全局范围内插入一个变量。因此,如果另一个变量具有相同的名称,则可能会导致混淆并覆盖该值。eval()
是比较昂贵的操作,每次调用它时,脚本引擎都必须将源代码转换为可执行代码。
24. 函数参数使用对象而不是参数列表
当我们使用参数列表给函数传递参数时,如果参数较少还好,如果参数较多时,就会比较麻烦,因为我们必须按照参数列表的顺序来传递参数。如果使用TypeScript
来写,那么写的时候还需要让可选参数排在必选参数的后面。
如果我们的函数参数较多,就可以考虑使用对象的形式来传递参数,对象的形式传递参数时,传递可选参数并不需要放在最后,并且参数的顺序不在重要。与参数列表相比,通过对象传递的内容也更容易阅读和理解。
下面来看一个例子:
function getItem(price, quantity, name, description) {}
getItem(15, undefined, 'bananas', 'fruit')
下面来使用对象传参:
function getItem(args) { const {price, quantity, name, description} = args}getItem({ name: 'bananas', price: 10, quantity: 1, description: 'fruit'})
来源:https://juejin.cn/post/7039142750503534599
猜你喜欢
- 本文实例讲述了Flask框架模板渲染操作。分享给大家供大家参考,具体如下:from flask import render_template
- 安装方法:Windows:在终端输入命令:pip install scrapy;mac:在终端输入命令:pip3 install scrap
- 前面已经了解了关于PL/SQL编程的基础,本文将结合一个案例来加深对这些知识点的理解。一. 案例介绍 某数据库有两张表,是关于某公司员工资料
- 目录1 请求和响应1.1 请求1.2 响应2 视图2.1 基于APIView写接口2.2 基于GenericAPIView写的接口2.3 基
- 本文我们总结了几个在安装SQL Server数据库时常见问题的解决方案,供初学者学习参考,接下来让我们来一起看一下吧。常见问题一:安装Sql
- scratch-blocks编译的时候会出现的问题:scratch-gui依赖的scratch-blocks模块在安装的时候编译会报错。原因
- 本文实例为大家分享了python dlib人脸识别的具体代码,供大家参考,具体内容如下import matplotlib.pyplot as
- Win10系统下MySQL 8.0.20安装和配置超详细教程MySQL下载MySQL直接去官网下载就行,选择community版本(免费)下
- 事情是这样的,我写了一个tornado的服务,过程当中我用logging记录一些内容,由于一开始并没有仔细观察tornado自已的日志管理,
- SQL数据库连接超时时间已到问题1:System.InvalidOperationException: 超时时间已到。超时时间已到,但是尚未
- 在使用javascript编程时浏览器中经常会遇到的两个麻烦,下面提供两个函数解决方式做参考,并提供一个demo让你更直观地了解我所说的这两
- 如果内部修改外部变量需要nonlocal,globaldef f1(): print("in f1..") num=11
- 1.视图的概述 视图其实就是一条查询sql语句,用于显示一个或多个表或其他视图中的相关数据。视图将一个查询的结果作为一个表来使用,因此视图可
- 本文实例为大家分享了Python人脸识别的具体代码,供大家参考,具体内容如下1.利用opencv库sudo apt-get install
- 注意,在改变数值之前锁定应用,确保一段时间里只有一个客户执行该语句。<SCRIPT LANGUAGE="VBScr
- win7 64位下如何安装配置mysql-5.7.5-m15-winx64 距离上次安装MySQL已经过去好久了。步骤这些,有可能
- MySQL 一级防范检查列表以下是加固你的 Mysql 服务器安全所要做的工作的重要参考:Securing MySQL: step-by-s
- 我们知道可以将一个海量记录的 MySQL 大表根据主键、时间字段,条件字段等分成若干个表甚至保存在若干服务器中。 唯一的问题就是跨服务器批量
- 我们的搜索示例仍然相当地简单,特别从数据验证方面来讲;我们仅仅只验证搜索关键值是否为空。 然后许多HTML表单包含着比检测值是否为空更为复杂
- python:如何将excel文件转化成CSV格式import pandas as pddata = pd.read_excel('