每个Web开发人员都应该知道的10个JavaScript技巧

2020年12月30日10:50:30 发表评论 34 次浏览

本文概述

如果使用这些技巧优化JavaScript代码, 则可以帮助你编写更简洁的代码, 节省资源并优化编程时间。

根据红僧, JavaScript是最流行的编程语言。此外, SlashData估计1240万开发人员使用JavaScript, 其中还包括CoffeeScript和Microsoft的TypeScript。

这意味着数以百万计的人使用JavaScript从事程序员工作, 通过诸如上班和自由职业者, 甚至自己开始网络开发业务.

notlogy具有出色的基础课程在JavaScript上。但是, 如果你已经熟悉了基础知识并想提高你的JavaScript熟练程度, 那么你应该学习以下十种技巧并将其整合到你的工作流程中。

1.如何使用条件快捷方式

JavaScript使你可以使用某些快捷方式来简化代码。在一些简单的情况下, 你可以使用逻辑运算符&&和||代替if和其他.

让我们看一下&&操作员在行动。

示例片段:

// instead of
if (accessible) {
console.log("It’s open!");
}
// use
accessible && console.log("It’s open!");

的||运算符用作"或"子句。现在, 使用此运算符比较麻烦, 因为它可能阻止应用程序执行。但是, 我们可以添加条件来解决它。

示例片段:

// instead of
if (price.data) {
return price.data;
} else {
return 'Getting the price’';
}
// use
return (price.data || 'Getting the price');

2.如何使用~~运算符转换为积分

删除小数以使用返回整数数学地板or数学轮占用资源。一种更有效的方法是使用~~操作员。

示例片段:

// instead of
math.round(math.random*50)
// use
~~(math.random*50)
You can also use the "~~" operator to convert anything into a number value.
Example snippet:
~~('whitedress') // returns 0
~~(NaN) // returns 0

3.使用array.length调整大小或清空数组

有时你需要调整数组的大小或将其清空。最有效的方法是使用array.length.

示例片段:

array.length = n
var array = [a, b, c, d, e, f, g, h, i , j];
console.log(array.length); // returns the length as 10
array.length = 4;
console.log(array.length); // returns the length as 4
console.log(array); // returns "a, b, c, d"

你也可以使用array.length从指定数组中删除所有值。

示例片段:

var array = [a, b, c, d, e, f, g, h, i , j];
array.length = 0;
console.log(array.length); // returns the length as 0
console.log(array);

4.如何在不导致服务器超载的情况下合并阵列

合并阵列时, 这可能会对服务器造成严重的压力, 尤其是在处理大型数据集时。为了使事情简单并保持性能水平, 请使用array.concat()和array.push.apply(arr1, arr2)职能。

使用这两个函数中的任何一个都取决于阵列的大小。

让我们看一下如何处理较小的数组。

示例片段:

var list1 = [a, b, c, d, e];
var list2 = [f, g, h, i, j];
console.log(list1.concat(list2)); // returns the merged values of both arrays (a, b, c, d, e, f, g, h, i, j)

使用时array.concat()如果对较大的数据集使用"函数", 则会在创建新数组时消耗大量内存。要避免性能下降, 请使用array.push.apply(arr1, arr2)它将第二个数组合并为第一个而不创建新的数组。

示例片段:

var list1 = [a, b, c, d, e];
var list2 = [f, g, h, i, j];
console.log(list1.push.apply(list1, list2)); // returns the merged values of both arrays (a, b, c, d, e, f, g, h, i, j)

5.如何对数组使用过滤器

当你使用多列对应数据时, 过滤数组非常有用。在这种情况下, 你可以基于描述阵列中组的任何特征来包含和排除数据。

要过滤数组, 请使用过滤()功能。

示例片段:

const cars = [
{ make: 'Opel', class: 'Regular' }, { make: 'Bugatti', class: 'Supercar' }, { make: 'Ferrari', class: 'Supercar' }, { make: 'Ford', class: 'Regular' }, { make: 'Honda', class: 'Regular' }, ]
const supercar = cars.filter(h => h.class === 'Supercar');
console.table(supercar); // returns the supercar class data in a table format

你也可以使用过滤()和...一起boolean返回数组中所有空值或未定义的值。

示例片段:

cars.filter(Boolean)

6.如何提取唯一值

假设你有一个重复值的数据集, 并且需要从该值集中产生唯一值。你可以结合使用扩展语法...和对象类型组。此方法适用于单词和数字。

示例片段:

const cars = ['Opel', 'Bugatti', 'Opel', 'Ferrari', 'Ferrari', 'Opel'];
var unrepeated_cars = [...new Set(cars)];
console.log(unrepeated_cars); // returns the values Opel, Bugatti, Ferrari

7.如何使用替换功能快捷方式

你应该熟悉string.replace()功能。但是, 它只会用指定的行替换一次字符串, 然后从该位置停止。假设你有一个较大的数据集, 并且需要多次键入此函数。一段时间后, 它变得令人沮丧。

为了使你的生活更轻松, 你可以添加/g在正则表达式的末尾, 因此该函数将运行并替换所有匹配条件, 而不会在第一个条件处停止。

示例片段:

var grammar = "synonym synonym";
console.log(grammar.replace(/syno/, "anto")); // this returns "antonym synonym"
console.log(grammar.replace(/syno/g, "anto")); // this returns "antonym antonym"

8.如何缓存变量

当你处理大型数组时, 需要使用ID通过ID请求元素getElementById(), 或使用getElementsByClassName(), 然后JavaScript在每个相似元素请求的循环下遍历数组。这可能会占用大量资源。

但是, 如果你知道自己定期使用指定的选择, 则可以通过缓存变量来提高性能。

示例片段:

var carSerial = serials.getElementById('serial1234');
carSerial.addClass('cached-serial1234');

9.如何检查对象是否具有值

当你使用多个对象时, 很难跟踪哪些对象包含实际值以及可以删除哪些对象。

这是有关如何检查对象是否为空或是否具有值的快速技巧Object.keys()功能。

示例片段:

Object.keys(objectName).length // if it returns 0 then the Object is empty, otherwise it displays the number of values

10.如何缩小JavaScript文件

大型JS文件会影响你网页的加载和响应性能。在编写代码时, 可能会留下不必要的行, 注释和无效代码。根据文件的大小, 它可能堆积并成为多余的瓶颈。

有两种工具可以帮助你清理代码, 并使JS文件更轻(或以开发人员的名义缩小)。尽管缩小JS文件本身并不是黑客, 但对于开发人员来说仍然是有益的。

一个是Google Closure编译器, 它可以解析你的JavaScript, 对其进行分析, 删除无效代码, 并重写并最大程度地减少剩余内容。另一个是微软Ajax Minifier, 通过减少JavaScript文件的大小, 你可以提高Web应用程序的性能。

你有它。使用这十个技巧可以使你的代码更整洁, 节省服务器资源并保留编程时间。

谢谢阅读!

我是一位对数字营销, 网站开发和网络安全充满热情的作家。你可以联系我这里的LinkedIn.

你可能还会喜欢我写的其他一些文章:

  • Google专页体验:你需要了解的内容以及为2021年做好准备的五个步骤
  • Web托管安全威胁在这个季节需要提防
  • 如何在2020年不同寻常的假期中提升销售量
一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: