JavaScript 初学者速查表🔥

2025-05-28

JavaScript 初学者速查表🔥

大家好！JavaScript 是世界上最流行的编程语言，也是 Web 编程语言。JavaScript 很容易学，尽管有人说它很难。我之前提到过，任何编程语言，如果不去尝试，都会很难😜！

关于这一点，这不是一个关于 JavaScript 的完整教程，但我们可以获得有关 JavaScript 的基本知识，也可以将其用作 JavaScript 变量、字符串和其他属性的参考列表。🤟

弦乐（4）.png

在 HTML 页面中包含 JavaScript

要在页面中包含 JavaScript，您需要将其正确包装在<script>标签中🎁：

<script type="text/javascript">

//JS code goes here

</script>
Enter fullscreen mode Exit fullscreen mode

有了这个输入，浏览器就可以正确识别并执行代码。

调用外部 JavaScript 文件

您还可以将 JavaScript 放在单独的文件中，并在 HTML 中为其命名。这样，您可以将不同类型的代码分开，从而更好地组织文件。如果您的代码位于名为 的文件中myscript.js，您可以这样命名：

<script src="myscript.js"></script>
Enter fullscreen mode Exit fullscreen mode

图像.png
确保只在复杂的情况下使用注释。无论如何，如果你使用注释，

  • 用于//单行注释，

  • /* */用于多行注释。

// My name is Mr Unity Buddy 

/*My name
is
Mr Unity Buddy
*/
Enter fullscreen mode Exit fullscreen mode

图像.png
JavaScript 语法是 JavaScript 程序的构造规则集：

// How to create variables:
var x;
let y;

// How to use variables:
x = 5;
y = 6;
let z = x + y;
Enter fullscreen mode Exit fullscreen mode

以下是另外几点需要注意的，

  • JavaScript 区分大小写。unitybuddy和unityBuddy是两个不同的变量。
  • -JavaScript 中不能使用连字符 ( )。
  • 每个 Js 行都应该以分号结尾;

图像.png
变量是可以用来执行运算的替代值。你应该在数学课上熟悉它们。

var，，const​let

在 JavaScript 中声明变量有三种不同的可能性，每种都有自己的特点：

  • var— 最常见的变量。它可以重新赋值，但只能在函数内访问。使用 定义的变量var在代码执行时会移至顶部。
  • const— 在它们出现在代码中之前不能重新分配并且不能访问。
  • let— 与 类似const，let 变量可以重新赋值但不能重新声明。
var x = 5; //Store value of 5
let x = 10; // Store value of 10
const PI = 3.14159265359; // Store this value of 3.14159265359;
Enter fullscreen mode Exit fullscreen mode

图像.png
在编程中，数据类型是一个重要的概念。为了能够对变量进行操作，了解其类型非常重要。如果没有数据类型，计算机就无法安全地解决以下问题：

let x = 16 + "Volvo";
Enter fullscreen mode Exit fullscreen mode

把“沃尔沃”加到十六位有意义吗？它会产生错误还是会产生结果？

JavaScript 将把上面的示例视为：

let x = "16" + "Volvo";
Enter fullscreen mode Exit fullscreen mode

当添加一个数字和一个字符串时，JavaScript 会将数字视为字符串。

图像.png
通过@Bello的文章 了解更多关于Js数据类型的知识

JavaScript 类型是动态的

JavaScript 具有动态类型。这意味着同一个变量可以用来保存不同的数据类型，就像下面这样👇

let x;           // Now x is undefined
x = 5;           // Now x is a Number
x = "John";      // Now x is a String
____________________________________
x = "Cat" // Now x is a Cat 😹
Enter fullscreen mode Exit fullscreen mode

图像.png
functionJavaScript 函数由关键字、名称和括号 定义()。

函数名称可以包含字母、数字、下划线和美元符号（与变量相同的规则）。

括号中可以包含以逗号分隔的参数名称：（
参数 1、参数 2、...）

function name(parameter1, parameter2, parameter3) {
  // code to 
}
Enter fullscreen mode Exit fullscreen mode

  • ()函数参数在函数定义中的括号内列出。

  • 函数参数是函数被调用时接收的值。

  • 在函数内部，参数（参数）表现为局部变量。

  • 函数要执行的代码放在花括号内：{}

// Sample Code
function getDaysBetweenTwoDates(start, end) {
    const startDate = new Date(start);
    const endDate = new Date(end);

    const diff = endDate - startDate;

    return Math.ceil(diff / (1000 * 60 * 60 * 24));
}
Enter fullscreen mode Exit fullscreen mode

这些只是 JavaScipt 函数的基础知识，因此，您可以阅读Faheem Khan撰写的 JavaScript 函数：初学者完整指南

字符串（1）.png

现实生活中的对象、属性和方法

的概念objects可能有点难，所以让我们举一个简单的例子。

在现实生活中，航班是一个物体。

properties航班的特征包括颜色和重量，以及methods俯仰（上下）、滚转等。

游戏 (1).png
所有航班都具有相同的属性，但不同航班的属性值有所不同。

所有飞行都有相同的方法，但执行方法的时间不同。

这就是对象的概念！超级简单🙌

JavaScript 中的对象

我们已经了解到 JavaScript 变量是数据值的容器。

此代码将一个简单值（F12）分配给名为 car 的变量：

let flight = "F12";
Enter fullscreen mode Exit fullscreen mode

对象也是变量。但是对象可以包含许多值。

此代码将许多值（F12、41 200、白色）分配给名为的变量flight：

const car = {name:"F12", weight:"41 200", color:"white"};
Enter fullscreen mode Exit fullscreen mode

值以名称：值对的形式写出（名称和值用冒号分隔）。

使用关键字声明对象是一种常见的做法const。

这是 JavaScript 中对象的基本概念。想要了解更多，可以参考Souvik Jana的《深入理解 JS 对象》 。

图像.png

字符串（或文本字符串）是一系列字符，就像“Unity Buddy”。

字符串用引号引起来。您可以使用单引号或双引号：

name = "Unity buddy" // or
name = 'Unity Buddy'
Enter fullscreen mode Exit fullscreen mode

字符串长度

要查找字符串的长度，只需使用length属性。

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
text.length;    // Will return 26
Enter fullscreen mode Exit fullscreen mode

JavaScript 字符串方法有很多，在[这篇文章]中@Niall Maher写了 26 个内置字符串方法。

布尔值
在编程中，你经常需要一种只能具有两个值之一的数据类型，例如

  • YES/NO
  • ON/OFF
  • TRUE/FALSE为此，JavaScript 有一个布尔数据类型。它只能取 true 或 false 的值。

Boolean()功能

您可以使用该Boolean()函数来判断表达式（或变量）是否为真：

Boolean(10 > 9)        // returns true
Enter fullscreen mode Exit fullscreen mode

非常简单，

(10 > 9)              // also returns true
10 > 9                // also returns true
Enter fullscreen mode Exit fullscreen mode

图像.png
JavaScript 数组用于在单个变量中存储多个值。

const authors = ["Victoria", "Chris", "Catalin"];
Enter fullscreen mode Exit fullscreen mode

简单地说，数组是一个特殊的变量，它可以同时保存多个值。

如果您有一个项目列表（例如，作者姓名列表），则将一些作者存储在单个变量中可能如下所示：

let author1 = "Didi";
let author2 = "Uncle Bigaby";
let author3 = "Favourite Jome";
Enter fullscreen mode Exit fullscreen mode

但是，如果你想循环遍历所有作者并找到特定的一位，该怎么办？如果你有的作者不止 3 位，而是 100 位，该怎么办？

解决方案是一个数组！

数组可以在一个名称下保存多个值，并且您可以通过引用索引号来访问这些值。

使用数组文字是创建 JavaScript 数组的最简单方法。

// Array syntax
const array_name = [item1, item2, ...];
Enter fullscreen mode Exit fullscreen mode

例如，

const games = ["COD", "Overwatch", "Among Us"];
Enter fullscreen mode Exit fullscreen mode

空格和换行符不重要。声明可以跨越多行：

const games = [
  "COD",
  "Overwatch",
  "Among Us"
];
Enter fullscreen mode Exit fullscreen mode

访问数组元素

您可以通过索引号来访问数组元素：

const games = ["COD", "Overwatch", "Among Us"];
let x = games[0];    // x = "COD"
Enter fullscreen mode Exit fullscreen mode

注意📝：数组索引从 0 开始。

[0]是第一个元素。[1]是第二个元素。

添加数组元素

要添加新元素，我们应该给出push

向数组添加新元素的最简单方法是使用该push()方法：

const games = ["COD", "Overwatch", "Cyberpunk"];
fruits.push("Hill Climb Racing");  // Adds a new element (Hill Climb Racing) to fruits
Enter fullscreen mode Exit fullscreen mode

更改数组元素

以下代码更改了games

cars[0] = "Cyberpunk"; // Change COD into Cyberpunk
Enter fullscreen mode Exit fullscreen mode

超级简单。

数组元素可以是对象

JavaScript 变量可以是对象。数组是一种特殊的对象。

因此，您可以在同一个数组中拥有不同类型的变量。

数组中可以包含对象。数组中可以包含函数。数组中可以包含数组：

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myGames;
Enter fullscreen mode Exit fullscreen mode

请参阅@ Shreyas Pahune的这篇文章中一些常用的 JS 数组方法

字符串.png
比较运算符和逻辑运算符用于测试真或假。

比较运算符

比较运算符用于逻辑语句中，以确定变量或值之间的相等或差异。

图像.png

if (age < 18) text = "Not eligible to vote";
Enter fullscreen mode Exit fullscreen mode

逻辑运算符

图像.png

比较不同类型

比较不同类型的数据可能会产生意想不到的结果。

当比较字符串和数字时，JavaScript 会将字符串转换为数字。空字符串转换为 0。非数字字符串转换为 NaN，NaN 始终为 false。

下表显示了比较不同数据类型时得到的结果

图像.png

图像.png

我们编写代码时经常希望针对不同的决策执行不同的操作。

我们可以在代码中使用条件语句来执行此操作。

在 JavaScript 中，我们有以下条件语句：

  • 用于if指定在指定条件为真时执行的代码块 - 用于else指定在相同条件为假时执行的代码块 - 用于else if指定在第一个条件为假时测试的新条件 - 用于switch指定要执行的多个备选代码块

if陈述

if (condition) {
  //  block of code to be executed if the condition is true
}
Enter fullscreen mode Exit fullscreen mode

使用 if 语句来指定当条件满足时要执行的 JavaScript 代码块true。

if (age < 18) {
  message = "Too young to vote";
}
Enter fullscreen mode Exit fullscreen mode

else陈述

if (condition) {
  //  block of code to be executed if the condition is true
} else {
  //  block of code to be executed if the condition is false
}
Enter fullscreen mode Exit fullscreen mode

使用else语句指定当条件为假时要执行的代码块。

if (age < 18) {
  message = "Too young to vote";
} else {
  message = "Old enough to vote";
}
Enter fullscreen mode Exit fullscreen mode

else if陈述

if (condition1) {
  //  block of code to be executed if condition1 is true
} else if (condition2) {
  //  block of code to be executed if the condition1 is false and condition2 is true
} else {
  //  block of code to be executed if the condition1 is false and condition2 is false
}
Enter fullscreen mode Exit fullscreen mode

如果第一个条件为假，则使用 else if 语句指定新条件。

if (time < 10) {
  wish = "Good morning";
} else if (time < 20) {
  wish = "Good day";
} else {
  wish = "Good evening";
}
Enter fullscreen mode Exit fullscreen mode

弦乐（2）.png
该switch语句用于根据不同的条件执行不同的操作。

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}
Enter fullscreen mode Exit fullscreen mode

工作原理如下：

  • switch 表达式只被求值一次。
  • 将表达式的值与每个案例的值进行比较。
  • 如果匹配，则执行相关的代码块。
  • 如果没有匹配，则执行默认代码块。

让我们看一个例子，

switch (new Date().getDay()) { // The getDay() method returns 
the weekday as a number between 0 and 6.
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}
Enter fullscreen mode Exit fullscreen mode

所以，我们的结果将是

Sunday
Enter fullscreen mode Exit fullscreen mode

关键词break​

当 JavaScript 遇到 break 关键字时，它会跳出 switch 块。

这将停止 switch 块内的执行。

没有必要在 switch 块的最后一个 case 处中断。该块无论如何都会在那里中断（结束）。

📝 如果省略 break 语句，即使评估结果与 case 不匹配，也会执行下一个 case。

关键词default​

default 关键字指定在没有大小写匹配时运行的代码：

switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
\\ Result is 'looking forward to the weekend'
}
Enter fullscreen mode Exit fullscreen mode

严格比较

Switch 案例使用严格比较（===）。

值必须是同一类型才能匹配。

仅当操作数属于同一类型时，严格比较才为真。

在此示例中，x 没有匹配项：

let x = "0";
switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}
Enter fullscreen mode Exit fullscreen mode

图像.png
最后！你太棒了👏👏

如果您想一遍又一遍地运行相同的代码，并且每次使用不同的值，那么循环就很酷。

使用数组时通常会出现这种情况：

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<be>";
Enter fullscreen mode Exit fullscreen mode

除此之外，您还可以使用循环

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}
Enter fullscreen mode Exit fullscreen mode

For循环

for 循环具有以下语法：

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}
Enter fullscreen mode Exit fullscreen mode

  • 语句 1在代码块执行之前执行（一次）。

  • 语句 2定义执行代码块的条件。

  • 代码块执行完毕后，每次都会执行语句 3 。

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}
Enter fullscreen mode Exit fullscreen mode

结果：

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
Enter fullscreen mode Exit fullscreen mode

while循环

while (condition) {
  // code block to be executed
}
Enter fullscreen mode Exit fullscreen mode

只要指定的条件为真，while 循环就会循环执行一段代码。这意味着值会不断变化，并且只要条件为真，while循环就会继续执行。

while (i < 10) { // While the variable is less than 10
  text += "The number is " + i;
  i++;
}
Enter fullscreen mode Exit fullscreen mode

Do While 循环

do {
  // code block to be executed
}
while (condition);
Enter fullscreen mode Exit fullscreen mode

循环do...while是 while 循环的变体。此循环会在检查条件是否为真之前执行一次代码块，然后只要条件为真，它就会重复循环。

do {
  text += "The number is " + i;
  i++;
}
while (i < 10);
Enter fullscreen mode Exit fullscreen mode

太棒了，超级简单明了。如果你想了解更多关于 Js 循环的知识，@ Bello有一篇很棒的文章——JavaScript循环。

JavaScript 有很多库。React 和 Node.js 很受欢迎。如果你想了解更多，可以阅读以下文章

哇，就这样！💙💙 这不是一个完整的教程，但我希望初学者可以在这里了解函数、循环、运算符等的基本概念。感谢阅读这篇长文，祝你编程愉快！

最初发表于 Hahshnode

文章来源：https://dev.to/unitybuddy/javascript-cheatsheet-for-beginners-3330
Devto 翻译
PREV
使用 CSS 的背景滤镜效果
NEXT
提高编程逻辑的 7 种方法