20+个超级实用的 JavaScript 开发技巧(下)

简介: 今天来分享几个JavaScript开发技巧,希望对你有所帮助~

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'
})
相关文章
|
13天前
|
Web App开发 缓存 JavaScript
深入浅出Node.js后端开发
【9月更文挑战第26天】本文将引导你了解Node.js的基本原理,并通过实际案例展示如何在后端开发中应用它。我们将从Node.js的核心概念讲起,逐步深入到构建一个完整的后端服务,最后探讨如何优化你的Node.js应用。准备好让你的开发技能更上一层楼了吗?让我们一起潜入Node.js的世界!
|
4天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第35天】本文将带你走进Node.js的世界,从基础概念到实战应用,一步步揭示Node.js在后端开发中的魅力。我们将通过实际代码示例,让你轻松掌握Node.js的开发技巧,开启你的后端开发之旅。
|
2天前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
15 3
|
4天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第35天】本文将带你走进Node.js的世界,探索这个强大的后端开发平台。我们将从基础开始,逐步深入,最后以一个简单的代码示例结束,让你对Node.js有更深入的理解。无论你是前端开发者还是后端开发者,这篇文章都将为你提供有价值的信息。让我们一起开启Node.js的学习之旅吧!
|
16天前
|
JavaScript 前端开发 API
深入浅出Node.js后端开发
【9月更文挑战第23天】在这篇文章中,我们将探索Node.js的世界,了解它如何改变后端开发的面貌。通过实际案例和代码示例,我们不仅学习Node.js的核心概念,还会深入探讨它的高级特性,如异步编程、事件驱动模型以及微服务架构的应用。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的视角和实用技能,帮助你构建更高效、可扩展的后端系统。
49 19
|
13天前
|
JavaScript 开发者
深入理解Node.js事件循环及其在后端开发中的应用
【8月更文挑战第57天】本文将带你走进Node.js的事件循环机制,通过浅显易懂的语言和实例代码,揭示其背后的工作原理。我们将一起探索如何高效利用事件循环进行异步编程,提升后端应用的性能和响应速度。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启发和思考。
|
11天前
|
Web App开发 JavaScript 前端开发
探索现代JavaScript开发:ECMAScript提案的未来
JavaScript是最受欢迎的编程语言之一,其发展迅速。ECMAScript(JS的标准化版本)的提案和更新为其带来了诸多新特性和改进。本文将介绍值得关注的ECMAScript提案,如可选链、空值合并运算符、逻辑赋值运算符、类字段和顶级Await,并展示如何利用这些新特性提升开发效率和代码质量。通过关注TC39提案流程、使用Babel和TypeScript等工具,开发者可以提前体验并利用这些新特性。随着JavaScript的不断进步,未来将有更多令人期待的功能加入。
|
14天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第25天】本文将带你了解Node.js的基本概念和核心优势,同时提供一些实际的代码示例来加深理解。无论你是初学者还是有一定经验的开发者,都能通过本文获得有价值的信息和技巧。让我们一起探索Node.js的世界吧!
|
24天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【9月更文挑战第15天】在数字化浪潮中,Node.js作为一颗耀眼的星辰,为后端开发领域注入了活力与创新。本文将带你领略Node.js的魅力所在,探索其架构设计、性能优化及实战应用,让你在轻松愉快的氛围中掌握Node.js后端开发的精髓。
|
28天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第11天】本文将带你走进Node.js的世界,了解其背后的运行机制和实际应用。我们将从基础概念出发,逐步深入到实战应用,最后通过代码示例巩固学习成果。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。