我的编程空间,编程开发者的网络收藏夹
学习永远不晚

15个提高 Javascript 开发效率的技巧

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

15个提高 Javascript 开发效率的技巧

现在,我们一起来看看这些技巧。

1.判断空和未定义

我们很快就会在 JavaScript 中学到的一件事是,并非一切都像它看起来的那样,并且在像这样的动态语言中,变量可能会以多种方式导致你出现问题。可以进行的一个非常常见的测试是检查变量是否为空或未定义,甚至“空”,如下例所示:

let username;
if (name !== null || name !== undefined || name !== '') {
userName = name;
} else {
userName = "";

进行相同评估的更简单方法是:

let userName = name || "";

如果你不相信,请测试一下!

2.数组定义

所以你必须创建一个 Array 对象,然后用它的元素填充它,对吧?你的代码可能看起来像这样:

let a = new Array();  
a[0] = "s1";
a[1] = "s2";
a[2] = "s3";

在一行中做同样的事情怎么样?

let a = ["s1", "s2", "s3"]

挺好看的吧!

注意:我知道这个技巧更简单,但对我来说很简单,它可能会帮助一些从其他编程语言开始的人。

3. 三元运算符

著名的“单行 if/else”,三元运算符对于 Java 和 C# 等语言对于许多程序员来说已经是老熟人了。它也存在于 JS 中,并且可以像这样轻松地转换代码块:

let big;
if (x > 10) {
big = true;
}
else {
big = false;
}

在这:

let big = x > 10 ? true : false;let big;

或者更简单:

let big = x > 10;

但它也适用于函数调用吗?如果我有两个不同的函数,并且我想在 if 为真时调用一个,在 if 为假的情况下调用一个,通常你会执行以下操作:

function x() { console.log('x') };
function y() { console.log('y') };
let z = 3;
if (z == 3) {
x();
} else {
y();
}

但是,你也可以使用三元进行相同的函数调用:

function x() { console.log('x') };
function y() { console.log('y') };
let z = 3;
(z==3 ? x : y)(); // Shortcut

另外,值得一提的是测试变量是否为真的 ifs,一些程序员仍然这样做:

if (likeJs === true)

当他们可以这样做时:

if (likeJs)

4. 声明变量

是的,即使是变量的声明也有其怪癖。虽然这不是一个秘密,但你仍然会看到很多程序员做出这样的声明:

let x;
let y;
let z = 3;

他们什么时候可以这样做:

let x, y, z = 3;

5. 使用正则表达式

当涉及到文本分析和验证以及某些类型的网络爬虫的数据提取时,正则表达式是创建优雅而强大的代码的好工具。

你可以在以下链接中了解有关如何使用正则表达式的更多信息:

https://developer.mozilla.org/enUS/docs/Web/JavaScript/Guide/Regular_Expressions

https://regexr.com/

https://regex101.com/

6. charAt() 快捷键

你只想从一个字符串中选择一个字符,在一个特定的位置,对吧?我敢打赌,你首先想到的是使用 charAt 函数,如下所示:

"string".charAt(0);

但是得到这个,通过记住 String 是一个字符数组的类比,你会得到相同的结果:

"string"[0]; // Returns 's'

7. 以 10 为底的幂

这只是对 Base-10 指数数或充满零的著名数字的一种更精简的表示法。对于数学比较接近的人来说,看到其中一个不会太惊讶,但是一个数字 10000 在 JS 中可以很容易地被 1e4 替换,即 1 后跟 4 个零,如下所示:

for (let i = 0; i < 1e4; i++) {

8. 模板文字

这种语义特性是 ECMAScript 版本 6 或更高版本所独有的,并且极大地简化了读取变量集中的字符串连接。例如,下面的串联:

const question = “My number is  + number + , ok?

这个很简单,你可能做了更糟糕的连接。从 ES6 开始,我们可以使用模板文字进行这种连接:

const question = `My number is ${number}, ok?`

9. 箭头函数

箭头函数是声明函数的缩短方式。是的,自第一个 JavaScript 版本以来,有更多方法可以做同样的事情。例如,下面是一个求和函数:

function sum(n1,n2){
return n1 + n2;
}

我们也可以像这样声明这个函数:

const sum = function(n1,n2){
return n1+n2;
}

但是使用箭头函数:

const sum = (n1,n2) => n1 + n2;

10. 参数解构

本技巧适用于那些充满参数的函数,并且你决定用一个对象替换所有这些函数。或者对于那些真正需要配置对象作为参数的函数。

到目前为止都没有问题,毕竟谁从来没有经历过这个?问题是必须继续访问由参数传递的对象,然后是我们要读取的每个属性,对吧?像这样:

function init(config){
const s = config.s;
const t = config.t;
return s + t;// or config.s + config.t
}
init({s: "1", t: "2"});

参数解构特性正是为了简化这一点,同时通过用下面的语句替换前面的语句来帮助代码可读性:

function init({s, t}){
return s + t;
}
init({s: 1, t: 2});

最重要的是,我们仍然可以在参数对象的属性中添加默认值:

function init({s = 10, t = 20}){
return s + t;
}
init({s: 1});

这样,s 的值为 1,但 t 的值将默认为该属性,即 20。

11.键值名称

一个非常令人上瘾的功能是为对象分配属性的缩写方式。想象一下,你有一个 person 对象,该对象具有将通过 name 变量分配的 name 属性。它看起来像这样:

const name = "Joseph"
const person = { name: name }
// { name: "Joseph" }

虽然你可以这样做:

const name = "Joseph"
const person = { name }
// { name: "Joseph" }

也就是说,如果你的变量与属性同名,则不需要调用它,只需传递变量即可。多个属性也是如此:

const name = "Joseph"
const canCode = true
const person = { name, canCode }
// { name: "Joseph", canCode: true }

12. Map

考虑以下对象数组:

const animals = [
{
"name": "cat",
"size": "small",
"weight": 5
},
{
"name": "dog",
"size": "small",
"weight": 10
},
{
"name": "lion",
"size": "medium",
"weight": 150
},
{
"name": "elefante",
"size": "large",
"weight": 5000
}
]

现在想象一下,我们只想将动物的名字添加到另一个数组中。通常我们会这样做:

let animalNames = [];
for (let i = 0; i < animals.length; i++) {
animalNames.push(animals[i].name);
}

但是使用 Map,我们可以这样做:

let animalNames = animais.map((animal) => {
return animal.nome;
})

请注意,map 需要一个最多三个参数的函数:

  • 第一个是当前对象(如在 foreach 中)
  • 第二个是当前迭代的索引
  • 第三个是整个数组

显然,这个函数将为动物数组中的每个对象调用一次。

13.Filter

如果我们想遍历与上一个技巧中相同的动物对象数组,但这次只返回那些大小为“小”的对象怎么办?

我们将如何使用常规 JS 来做到这一点?

let smallAnimals = [];
for (let i = 0; i < animals.length; i ++) {
if (animals[i].size === "small") {
smallAnimals.push(animals[i])
}
}

然而,使用过filter操作符,我们可以用一种更简洁、更清晰的方式来做到这一点:

let smallAnimals = animais.filter((animal) => {
return animal.size === "small"
})

Filter 期望一个函数的参数是当前迭代的对象(如在 foreach 中),它应该返回一个布尔值,指示该对象是否将成为返回数组的一部分(true 表示它通过了测试 并将成为其中的一部分)。

14.Reduce

Javascript 的另一个重要特性是 reduce。它允许我们以非常简单和强大的方式在集合之上进行分组和计算。例如,如果我们想将动物对象数组中所有动物的重量相加,我们会怎么做?

let totalWeight = 0;
for (let i = 0; i < animals.length; i++) {
totalWeight += animals[i].weight;
}

但是使用 reduce 我们可以这样做:

let totalWeight = animals.reduce((total, animal) => {
return total += animal.weight;
}, 0)

Reduce 需要一个带有以下参数的函数:

  • 第一个是累加器变量的当前值(在所有迭代结束时,它将包含最终值)
  • 第二个参数是当前迭代的对象
  • 第三个参数是当前迭代的索引
  • 第四个参数是将要迭代的所有对象的数组

此函数将对数组中的每个对象执行一次,并在其执行结束时返回聚合值。

结论

以上就是我跟你分享的15关于JavaScript的技巧,如果你还有其他更好的实现方法,请在留言区跟我们分享。

另外,如果你觉得我今天分享的内容对你有用的话,请记得点赞我,关注我,并将它分享给你身边的朋友,也许能够帮助到他。

最后,感谢你的阅读,欢迎你的关注,祝编程愉快。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

15个提高 Javascript 开发效率的技巧

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

15个提高 Javascript 开发效率的技巧

在文章中,我将分享15 个关于JavaScript 的优秀技巧。这些技巧或者你可能已经掌握了,不过没有关系,这个技巧也不可能适用所有人,我分享的目的是把这些有趣好玩又便捷的技巧让更多人知道,以及在需要的时候,可以想到它们。

大大提高开发效率的十个JavaScript技巧

数组方法 flatMap() 本质上是 map()和 flat() 的组合,区别在于 flatMap 只能扁平1级,flat 可以指定需要扁平的级数,flatmap 比分别调用这两个方法稍微高效一些。

20 个提高效率的 JavaScript 缩写技巧

JavaScript中有很多速记技巧,可以缩短代码长度,减少冗余,提高代码的可读性和可维护性。本文将介绍20个提高效率的JS缩写技巧,帮助你告别写垃圾的生活,轻松写出优雅的代码!
JavaScript2024-11-30

15 个非 JavaScript 的高级 Web 开发技巧

随着尖端 HTML 和 CSS 功能的引入,Web 开发正在经历一场变革之旅。在今天这篇文章中,我们将探讨 15 种高级功能,这些功能现在可以在不依赖 JavaScript 的情况下实现。

十个极大提高开发效率的 VS Code 技巧!

本文来分享 10 个极大提高开发效率的 VS Code 技巧!在VS Code中,可以在设置中搜索\" Editor: Wrap Tabs\"来实现选项卡换行的功能。

提高开发效率的Go语言应用技巧

掌握Go语言的应用技巧:提升你的开发效率!随着互联网的快速发展,编程语言也在不断涌现和演进。Go语言作为一种相对较新的语言,以其简洁、高效和强大的特性,逐渐受到了广大开发者的关注和喜爱。那么,如何才能更好地掌握Go语言并提升开发效率呢?本
提高开发效率的Go语言应用技巧
2024-02-02

Python 网络爬虫:15 个高效爬虫开发技巧

本文将为你分享 15 个高效爬虫开发技巧,帮助你更好地利用 Python 进行网络数据抓取。

使用Golang Facade提高项目开发效率的技巧

使用Golang Facade可以提高项目开发效率的一些技巧包括:1. 封装复杂的子系统:将复杂的子系统封装在一个简单易用的接口之后,可以让其他部分的开发人员更容易理解和使用这些子系统的功能。2. 简化接口:使用Facade可以将多个子系统
2023-10-08

五个大幅提升开发效率的VS Code技巧

虽然 VS Code 提供了众多的生产力功能,但有些任务可能需要外部工具来进行自动化。NimbleText 就是这样一个工具的例子。它是一个文本处理工具,可以快速进行批量编辑和生成文本模式。

Golang开发经验分享:提升开发效率的几个技巧

Golang,一门自 Google 开发的开源编程语言,拥有高效且简洁的语法,以及出色的并发性能,近年来受到越来越多开发者的青睐。在使用 Golang 进行开发的过程中,为了提升开发效率,我们可以使用一些技巧和工具来简化工作流程。本文将分享
Golang开发经验分享:提升开发效率的几个技巧
2023-11-22

提高开发效率和性能的Vue技巧有哪些

本篇内容主要讲解“提高开发效率和性能的Vue技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“提高开发效率和性能的Vue技巧有哪些”吧!1. 巧用$attrs和$listeners$att
2023-07-02

Java 文件操作高级技巧:提升开发效率

Java文件操作是开发中常见任务,掌握高级技巧可显著提升效率。本文介绍多个实用技巧,包括文件读取、写入、复制、移动和删除操作,以及文件元数据管理和文件锁。
Java 文件操作高级技巧:提升开发效率
2024-02-26

Python开发经验总结:提高开发效率的技巧和工具

Python开发经验总结:提高开发效率的技巧和工具在当今快节奏的软件开发环境中,提高开发效率成为了每个开发者都关注的重点。作为一种功能强大且易学易用的编程语言,Python在软件开发领域中日益受到青睐。本文将总结一些提高Python开发效率
Python开发经验总结:提高开发效率的技巧和工具
2023-11-22

提升PHP开发效率:高效利用依赖管理技巧

PHP依赖管理高效指南在PHP开发中,合理地管理依赖是确保项目稳定运行的关键。然而,许多开发者在处理依赖时常常遇到各种问题,如版本冲突、更新滞后等。本文将为你介绍如何高效地进行PHP依赖管理,让你的PHP项目更加稳定和可靠。一、理解PHP依赖管理的重要性
提升PHP开发效率:高效利用依赖管理技巧
PHP2024-12-22

十个提高VS Code工作效率的技巧

Visual Studio Code是一款功能强大且用途广泛的代码编辑器,可以显著提高开发人员的工作效率。通过掌握键盘快捷键、安装有用的扩展和自定义环境,可以简化工作流程,更高效地编写代码。

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录