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

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

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.prototype.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构造函数并返回结果。

相关文章
|
30天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
1月前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
20 4
|
1月前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
17 3
|
1月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
22 2
|
1月前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=&gt;`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
18 5
|
1天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
15 2
|
1天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
7 1
|
1天前
|
JavaScript 前端开发
js开发:请解释同步和异步编程的区别。
同步编程按顺序执行,易阻塞;异步编程不阻塞,提高效率。同步适合简单操作,异步适合并发场景。示例展示了JavaScript中同步和异步函数的使用。
10 0
|
9天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
1月前
|
Web App开发 JavaScript 前端开发
js开发:请解释什么是Node.js,以及它的应用场景。
Node.js是基于V8的JavaScript运行时,用于服务器端编程。它的事件驱动、非阻塞I/O模型使其在高并发实时应用中表现出色,如Web服务器、实时聊天、API服务、微服务、工具和跨平台桌面应用(使用Electron)。适用于高性能和实时需求场景。
18 4