javascript初学者_面向初学者的十大JavaScript速记

最新推荐文章于 2025-10-02 18:18:20 发布

翻译最新推荐文章于 2025-10-02 18:18:20 发布 · 267 阅读

JavaScript速记不仅可以加快编码过程，还可以缩短脚本长度，从而加快页面加载速度 。速记代码与速写版本一样有效。它们本质上代表着同一件事–仅以更紧凑的格式。它们是最简单的代码优化技术之一。

有几种JavaScript速记，但是它们没有正式的参考指南 。有些真的很简单，而另一些则即使对于有经验的开发人员来说也相当吓人。在本文中，您可以找到适合初学者的10个JavaScript速记 ，您可以使用它们来进行代码优化并编写更简洁的代码。

1.小数

如果您经常使用大的小数，则此速记可能是天赐的礼物，因为您不必再键入所有零，只需将它们替换为e表示法即可。例如， 1e8表示在1位数字后添加八个零，等于100000000 。

字母e之后的数字表示e之前的数字之后的零个数。同样， 16e4是160000等的简写。

/* Shorthand */
var myVar = 1e8;

/* Longhand */
var myVar = 100000000;

2.递增，递减

增量速记由两个+符号组成，这意味着变量的值将增加一 。类似地， 减量速记由两个-迹象，这意味着该变量是由一个递减 。

这两个速记只能用于数字数据类型 。它们在循环中起着不可或缺的作用，最常见的用例是for循环 。

/* Shorthand */
i++;
j--;

/* Longhand */
i=i+1;
j=j-1;

3.加，分散，乘，除

四个基本数学运算中的每一个都有一个简写形式：加法，分神，乘法和除法。它们的工作方式类似于增量和减量运算符，只是在这里，您可以将变量的值更改为任意数字 （而不仅仅是更改一个）。

在下面的示例中， i变量递增5 ， j递减3 ， k乘以10 ， l乘以2 。

/* Shorthand */
i+=5;
j-=3;
k*=10;
l/=2;

/* Longhand */
i=i+5;
j=j-3;
k=k*10;
l=l/2;

4.确定角色位置

charAt()方法是最常用的字符串方法之一，它返回指定位置的字符（例如，字符串的^第 5 ^个字符）。您可以使用一个简单的速记来代替：在字符串后添加放在方括号中的字符位置 。

请注意， charAt()方法是从零开始的 。因此， myString[4]将返回字符串中的^第 5 ^个字符（示例中为"y" ）。

var myString = "Happy birthday";

/* Shorthand */
myString[4];

/* Longhand */
myString.charAt(4);

5.批量声明变量

如果要同时创建多个变量，则不必一一键入。 仅使用一次 var （或let ）关键字就足够了，然后您可以列出要创建的变量， 并用逗号分隔 。

使用此简写，可以声明未定义的变量和带有value的变量 。

/* Shorthand */
var i, j=5, k="Good morning", l, m=false;

/* Longhand */
var i;
var j=5;
var k="Good morning";
var l;
var m=false;

6.声明一个关联数组

通过使用var myArray = ["apple", "pear", "orange"]语法var myArray = ["apple", "pear", "orange"]在JavaScript中声明数组是一个相对简单的任务。但是， 声明关联数组要稍微复杂一点，因为在这里，您不仅需要定义值，还必须定义键（对于常规数组，键为0, 1, 2, 3, etc. ）。

关联数组是键值对的集合。长久的方法是声明数组，然后将每个元素一一添加。但是，使用下面的缩写，您也可以同时声明关联数组 及其所有元素 。

在下面的示例中， myArray关联数组将其出生地（值）分配给名人（键）。

/* Shorthand */
var myArray  = {
  "Grace Kelly": "Philadelphia",
  "Clint Eastwood": "San Francisco",
  "Humphrey Bogart": "New York City",
  "Sophia Loren": "Rome",
  "Ingrid Bergman": "Stockholm"
}

/* Longhand */
var myArray = new Array();
myArray["Grace Kelly"] = "Philadelphia";
myArray["Clint Eastwood"] = "San Francisco";
myArray["Humphrey Bogart"] = "New York City";
myArray["Sophia Loren"] = "Rome";
myArray["Ingrid Bergman"] = "Stockholm";

7.声明一个对象

对象声明的简写方式与关联数组的简写方式类似。但是，这里没有键值对，而是需要在大括号{}之间放置属性值对 。

速记语法的唯一区别是对象属性未用引号引起来 （ age wasJamesBond中的name ， placeOfBirth ， age ， wasJamesBond ）。

/* Shorthand */
var myObj = { name: "Sean Connery", placeOfBirth: "Edinburgh",
age: 86, wasJamesBond: true };

/* Longhand */
var myObj = new Object();
myObj.name = "Sean Connery";
myObj.placeOfBirth = "Edinburgh";
myObj.age = 86;
myObj.wasJamesBond = true;

8.使用条件运算符

条件（三元）运算符通常用作if-else语句的快捷方式 。它包括三个部分 ：

条件
如果条件为真 （ if ）会发生什么？
如果条件为假会发生什么（ else ）

在下面的示例中，我们向想要加入俱乐部的人发送一条简单消息（在message变量内）。使用简写形式，只需一行代码即可运行评估 。

var age = 17;

/* Shorthand */
var message = age >= 18 ? "Allowed" : "Denied";

/* Longhand */
if( age >= 18) {
  var message = "Allowed";
} else {
  var message = "Denied";
}

如果要测试它，只需将代码复制到Web控制台 （大多数浏览器中为F12 ），然后几次修改age变量的值。

9.检查状态

它经常发生，你需要检查一个变量是否存在或不存在 。 “如果存在”的简写可以帮助您以更少的代码来做到这一点。

请注意，关于JavaScript速记的大多数文章都没有给出正确的速记形式，因为if( myVar )表示法不仅会检查变量是否为false，还会检查其他一些事情。即，变量不能为undefined，empty，null和false 。

var myVar = 99;

/* Shorthand */
if( myVar ) {
  console.log("The myVar variable is defined AND it's not empty
  AND not null AND not false.");
}

/* Longhand */
if( typeof myVar !== "undefined" && myVar !==  "" && myVar !== null
&& myVar !== 0 && myVar !== false  ) {
  console.log("The myVar variable is defined AND it's not empty
  AND not null AND not false.");
}

您可以通过将以下代码段插入Web控制台并几次更改myVar的值来测试“如果存在”的简写方式。

要了解此速记的工作原理，值得使用"" （空字符串）， false ， 0 ， true ，非空字符串（例如"Hi" ），数字（例如99 ）以及何时变量未定义（简称var myVar; ）。

10.检查缺席

通过在变量前面加上感叹号，可以使用“如果存在”的简写来检查变量的不存在 。感叹号是JavaScript（以及大多数编程语言）中的逻辑非运算符 。

因此，使用if( !myVar )表示法，可以检查myVar变量是否未定义，为空，为null或为false 。

var myVar;

/* Shorthand */
if( !myVar ) {
  console.warn("The myVar variable is undefined (OR) empty (OR)
  null (OR) false.");
}

/* Longhand */
if( typeof myVar === "undefined" || myVar === "" || myVar === null
|| myVar === 0 || myVar === false  ) {
  console.warn("The myVar variable is undefined (OR) empty (OR)
  null (OR) false.");
}