首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >9个实用的JavaScript开发技巧,你一定要看下

9个实用的JavaScript开发技巧,你一定要看下

作者头像
前端达人
发布于 2021-04-22 02:46:40
发布于 2021-04-22 02:46:40
77900
代码可运行
举报
文章被收录于专栏:前端达人前端达人
运行总次数:0
代码可运行

英文 | https://javascript.plainenglish.io/9-javascript-hacks-nobody-talks-about-f15445e301ca

翻译 | web前端开发公众号

从Web开发到机器学习再到应用程序开发,JavaScript拥有大量的应用程序列表。

幸运的是,JavaScript提供了可以方便使用的全面功能列表,但是,其中许多功能和hack并不流行,很少被谈论。

有了如此众多的应用程序和用例,代码的复杂性也随之增加,知道这些开发技巧的窍门肯定可以为你节省大量时间。

因此,我整理了9个没人讨论过的实用JavaScript开发技巧清单,希望对你有所帮助,我们现在开始吧。

1、快速调整大小和清空数组

编程时我们经常需要更改或清空数组。执行此操作的最有效方法是使用Array.length方法。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const array = [1,2,3,4,5]; 
console.log(array); // 5
array.length--; 
console.log(array); // 4
array.length + = 15; 
console.log(array); // 19

该代码段的输出为:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
[1, 2, 3, 4, 5]
[1, 2, 3, 4]
[1, 2, 3, 4, ..15 empty]
undefined

你还可以通过将长度设置为0来删除数组的所有元素。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let arr= ['a', 'b', 'c'];
arr.length = 0;
console.log(arr.length); // Ouput=> 0
console.log(arr); // Output=> []

2、有条件的快捷方式

在编程过程中,当满足特定条件时,你可能需要一段特定的代码。

例如,你可能想要向未登录的用户显示登录页面,而当用户登录时,你想要显示主页。可以使用条件语句来实现这种逻辑。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var x=1;
if(x==1){
    console.log(x)
  }
else{
    console.log("Error")
  }

但是,可以使用三元运算符(?和:)轻松实现这种逻辑。

它需要三个操作数:一个条件,后跟一个?,如果条件为true,则要执行的表达式,然后是a :,然后是条件为false时必须执行的表达式。

让我们看一下代码,以更好地理解它。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var x=1;
console.log( x==1? x: "Error"); //Output: 1

3、动态导入

导入模块的标准方法很简单,但是当你需要动态导入函数时又会怎样呢?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import defaultExport from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";

你可能仅在满足某些条件时才需要导入某些特定模块,而这正是动态导入起作用的地方。你可以使用import功能动态导入模块。

要动态导入,请使用关键字import作为函数并传入模块名称。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import'some-module'. 
     then(obj => .... catch(err => console.log(err))

如你所见,它返回一个promise,解析为一个模块对象。

静态导入可用于导入关键和必要的模块,而动态导入可提供一些好处:

  1. 静态导入会增加代码的加载时间,也可能导致未使用的模块。
  2. 静态导入说明符字符串不能动态生成。
  3. 静态导入会导致不必要的内存使用。

4、空位合并运算符

如果需要检查某个值是否为null,然后分配一个默认值,则空值合并运算符(??)可以是实时保存程序。这样可以防止应用程序出现无法预料的错误和意外行为。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const name = null ?? 'Anonymous';
console.log(name); // Output=> 'Anonymous'
const age= undefined?? 18;
console.log(bar); // Output=> 18

换句话说,当左侧操作数为undefined(或null)时,此运算符将返回右侧操作数。

该操作员提供的巨大优势立即显现出来。

它不仅会导致更多的无错误代码,而且还将有助于避免可能导致崩溃的意外情况。

值得注意的是,可以使用OR运算符(||)来实现相同的目的。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let firstName = null; 
let lastName = null; 
let nickName = "Guest";  
// shows the first truthy value: 
alert(firstName || lastName || nickName || "Anonymous"); 
//Guest

OR(||)和无效合并运算符(??)略有不同,即|| 运算符返回第一个真实值,而?? 运算符返回第一个指定值。

5、合并数组

数据集越大,合并两个数组时所需的计算能力就越大。

最简单和常用的方法是使用该Array.prototype.concat()方法。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const array1 = ['a''b''c']; 
const array2 = ['a''e''f']; 
const array3 = array1.concat(array2);
console.log(array3); 
//输出=>数组[“ a”,“ b”,“ c”,“ a”,“ e”,“ f”]

但是,在处理庞大的数据集时,Array.prototype.concat()并不是最有效的选择,因为这是一个内存密集型任务,因为它会创建一个新数组。

在这种情况下,使用该Array.push.apply(arr1, arr2)方法是更好的选择,因为它合并了两个数组而不创建一个新数组。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let list1 = ['a', 'b', 'c'];
let list2 = ['a', 'e', 'f'];
list1.push.apply(list1, list2);
console.log(list1);
//Output=> Array ["a", "b", "c", "a", "e", "f"]

6、最少的评估

如果要将变量分配给另一个变量,则可能要检查要分配的变量的值是否不为null。

使用一条if语句可以简单地执行此操作,但是,编写if具有多个条件评估的语句可能很麻烦,甚至可能导致错误。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
if (var1 !== null || var1 !== undefined || var1 !=='') {
     var2 = var1;
}

但是,实现此目的的简捷方法存在于JavaScript中。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var2 = var1 || 'Some value';

7、默认参数值

你的应用可能会允许用户选择输入自定义值或使用默认值。

这在计算器应用中很常见,在该应用中,除非用户提供了不同的默认利率,否则使用默认利率(例如6.5%)。

同样,可以使用if语句简单地实现此逻辑。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function calculator(principle,rate,time) {
  if (principle === undefined)
    principle = 5000;
  if (rate === undefined)
    rate = 6;
  if (time===undefined)
    time = 3;
  ....
}

实际上,实现此目的的简便方法非常简单。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function calculator(principle=5000, rate=6, time=3){
   ...
}

你基本上是在函数声明本身中分配默认值。

8、in 运算符

如果要检查对象或其原型链中是否存在指定的属性,则in运算符将为你提供便利。

换句话说,in运算符使检查对象或其原型链中是否存在已定义的属性变得更加容易。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const car = { make: 'Honda', model: 'Accord', year: 1998 };
console.log('make' in car);
// expected output: true
delete car.make;
if ('make' in car === false) {
  car.make = 'Suzuki';
}
console.log(car.make);
// expected output: "Suzuki"

该运算符返回true 或false。

当使用DOM(文档对象模型)时,此属性将非常有用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var q= "onrender" in  document.createElement("div");
if(q){
  ...
}
else{
  ...
}

9、强制参数检查

有时,你需要具有某些值才能成功完成任务。

例如,登录电子邮件帐户时,你必须提供电子邮件地址。

同样,注册某些社交媒体平台时,可能需要提供姓名,年龄,电子邮件和电话号码。在这里,平台无法提供默认值。

从开发人员的角度来看,检查是否提供了强制性值,而不是null,令人厌烦的检查,如果需要多次执行检查并且涉及多个这样的强制性值,则更加麻烦。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function submitName(name) {
  if(name=== undefined) {
    throw new Error('Missing parameter');
  }
  return name;
}

幸运的是,快速检查参数值是否为null的简便方法是通过在此列表上实施#7 hack(即默认参数值)来完成。

你需要创建一个仅引发错误的函数,以解决缺少的参数问题。

创建此功能后,需要将其分配为必填参数的默认值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
mandatory = () => {
  throw new Error('Missing parameter');
}

submitName= (name= mandatory()) => {
  return name;
}

如果未提供默认参数,mandatory()则会返回并执行引发错误的函数。

结论

JavaScript正在越来越广泛地用于各种场景中,并且当涉及到新的JavaScript框架时,似乎还看不到尽头。

但是,所有这些框架和库都有一个共同的事实,那就是它们都基于JavaScript,并且在尝试使用这些框架中的任何一个时,精通JavaScript总是会做得更好。

但是,通过不断学习新的技巧和功能,你一定可以熟练掌握JavaScript。

感谢阅读,希望你喜欢阅读本文!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-04-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
学习 Vue 3 全家桶 - vuex
现代 Web 应用都是由三大件构成,分别是:组件、数据和路由。在一些数据组件之间需要共享的时候,应该如何实现?
Cellinlab
2023/05/17
3620
学习 Vue 3 全家桶 - vuex
Vue3学习笔记Day10 如何使用Vuex进行数据跨组件交互?
那多个组件之间的数据通信是如何实现的呢?常见方案:定义全局变量,任何组件需要数据就去全局变量获取。
用户1072003
2023/02/23
8470
Vue3学习笔记Day10 如何使用Vuex进行数据跨组件交互?
Vue3学习笔记(七)—— 状态管理、Vuex、Pinia
理论上来说,每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例:
张果
2022/11/28
4.2K0
Vue3学习笔记(七)—— 状态管理、Vuex、Pinia
Vue3.0商店后台管理系统项目实战-vuex是什么(5大语法)
Vue3.0官方文档:https://cn.vuejs.org/ Element Plus文档:https://element-plus.gitee.io/zh-CN/
王小婷
2022/10/28
6610
Vuex3.x、Vuex4.x状态管理器学习笔记
什么是状态管理器?方便调试,方便维护数据。https://vuex.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E2%80%9C%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%A8%A1%E5%BC%8F%E2%80%9D%EF%BC%9F
房东的狗丶
2023/02/17
1.7K0
vue3中使用Vuex
Vuex 曾经是Vue.js的官方状态管理库。为什么说是曾经呢,因为在Vue.js官方网站的生态系统的官方系统中找不到Vuex的影子了,取而代之的是Pinia。那么问题来了,既然Vue官方已经舍弃了Vuex,使用Pinia取而代之,我们还有必要去深入了解Vuex吗?
九仞山
2023/10/14
7600
vue3中使用Vuex
Vue3之状态管理:Vuex和Pinia,孰强孰弱?
在前端开发中,状态管理器是一种用于管理应用程序全局状态的工具。它通常用于大型应用程序,可以帮助开发者更好地组织和管理状态,并提供一些强大的工具来简化状态的变更和使用。
用户6297767
2023/11/21
2.8K0
Vue3之状态管理:Vuex和Pinia,孰强孰弱?
Vue3 的 7 种和 Vue2 的 12 种组件通信,值得收藏
如果父组件是混合写法,子组件纯 Vue3 写法的话,是接收不到父组件里 data 的属性,只能接收到父组件里 setup 函数里传的属性。
Swift社区
2024/10/10
3580
Vue3 的 7 种和 Vue2 的 12 种组件通信,值得收藏
Vue3.0再不学就out了!跟我入门第一天,含集成ts、router、vuex等使用方法
由于在setup中不能使用this, 因为setup在初始化之前执行的,所以setup无法访问this setup是一个独立的钩子函数,不会依赖vue实例组件,如果用到外部函数,都需要从外部获取 不能再直接访问 this.router或this.router 或 this.router或this.route 作为代替,我们使用useRouter和useRoute函数
玖柒的小窝
2021/10/06
5620
Vue+Vue-Router+Vuex+SSR项目
Vue-Vue-Router-Vuex-SSR Vue+Webpack工程流搭建 Vue+Vue-Router+Vuex项目架构 服务端渲染 现在的前端框架是纯客户端渲染的,(请求🤴网站的时候,返回的html是没有什么内容的),存在问题是没有办法seo, 白屏时间较长。需要等待js加载完成,执行完成之后才会显示内容。 服务端渲染解决这些问题。 webpack升级注意 ⚠️ :1. 版本变化 2. 配置变化 3. 插件变化 vue-loader配置 const isDev = process.env.NOD
达达前端
2022/04/13
9530
10分钟学会vuex
通过上面两个步骤,每个组件中都有了$store属性,就是我们创建的容器。里面有commit,dispatch,state,getters,actions,mutations,在每个组件中可以通过this.$store打印出来看看。
Qiang
2019/06/05
4920
10分钟学会vuex
Vue3 过10种组件通讯方式
众所周知,Vue.js 中一个很重要的知识点是组件通信,不管是业务类的开发还是组件库开发,都有各自的通讯方法。
德育处主任
2022/04/17
2K0
Vue3 过10种组件通讯方式
一文让你彻底搞懂 vuex,满满的干货
简单地讲:可以把多个组件都需要的变量全部存储到一个对象里面,然后这个对象放在顶层的 vue 实例中,让其他组件可以使用。这样多个组件就可以共享这个对象中的所有属性。
呆呆
2021/12/01
9370
[源码解读]一文读懂Vuex4源码
写作不易,未经作者允许禁止以任何形式转载! Vuex4 Vuex是在Vue中常用的状态管理库,在Vue3发布后,这个状态管理库也随之发出了适配Vue3的Vuex4 快速过Vuex3.x原理 为什么每个组件都可以通过this.$store访问到store数据? 在beforeCreate时,通过mixin的方式注入了store 为什么Vuex中的数据都是响应式的 创建store的时候调用的是new Vue,创建了一个Vue实例,相当于借用了Vue的响应式。 mapXxxx是怎么获取到store中的数据和方法的
前端LeBron
2021/12/08
7530
[源码解读]一文读懂Vuex4源码
Vue状态管理——Vuex
  前面我们已经介绍过父子组件之间的通信方式,父组件通过prop向子组件传递数据,子组件通过自定义事件向父组件传递数据。然而,在实际项目中,经常会遇到多个组件需要访问同一数据的情况,且都需要根据数据的变化做出响应,而这些组件之间可能并不是父子组件这种简单的关系。在这种情况下,就需要一个全局的状态管理方案。在Vue开发中,官方推荐Vuex。   Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储来管理应用程序中所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也被集成到了Vue的官方调试工具vue-devtools中,提供了诸如零配置的time-travel调试、状态快照导入/导出等高级调试功能。 下图所示为Vuex的工作原理图
别团等shy哥发育
2023/02/25
2.4K0
Vue状态管理——Vuex
《vue3+ts+element-plus 后台管理系统系列》之vuex4.x
Vuex4.x 和 TS 一起分包变化也是比较多的,先从官方例子说起。基础例子请查看官网,传送vuex4.x官网。
星宇大前端
2021/03/02
1.4K0
《vue3+ts+element-plus 后台管理系统系列》之vuex4.x
浅析Vuex及相关面试题答案
自从学习了Vue框架,其中必不可少的会用到vuex这个核心插件,而且在做项目的时候,基本都会使用,可能你会使用vuex状态管理,但是对vuex原理存在着或多或少的的疑惑或不解,这篇文章就针对vuex原理进行研究,希望能帮助到大家,如果有不准确的地方,大家多多指教。。。
前端开发博客
2020/11/04
1.1K0
浅析Vuex及相关面试题答案
在 vue-4.5 中学习 vuex/超详细教程
基础目录结构:默认Vuex代码写在index中,modules模块化代码则放在Addition.js与Subition.js中;state、mutations、actions、getters均有两种调用方式
玖柒的小窝
2021/10/09
7560
在 vue-4.5 中学习 vuex/超详细教程
Vuex 深入浅出超详细
Vuex 官网🔗: Vuex 是一个专为 Vue.js 应用程序设计的状态管理库,它提供了一种集中式管理 应用中的状态;
Java_慈祥
2024/08/10
2240
Vuex 深入浅出超详细
vuex-4.0.0-alpha.1 体验
新的vuex 基础使用及api 没要太大变化, 调用方式更灵活. 但在当前的新的vue 版本下, vuex 存在的意义不大.
copy_left
2020/04/24
2.4K2
推荐阅读
相关推荐
学习 Vue 3 全家桶 - vuex
更多 >
LV.5
编程严选网软件架构师
目录
  • 1、快速调整大小和清空数组
  • 2、有条件的快捷方式
  • 3、动态导入
  • 4、空位合并运算符
  • 5、合并数组
  • 6、最少的评估
  • 7、默认参数值
  • 8、in 运算符
  • 9、强制参数检查
  • 结论
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档