• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

学习使用 JavaScript 编码：基础知识

我是辣辣 • 2年前 (2022-11-07) • JavaScript

您如何在没有编码知识的情况下设计新鲜的网站和博客？您不需要聘请网页设计师。这就是Blog Designer Pro的用武之地！ 

javascript 是一种语言，我们可以使用它来编写在浏览器或使用 node.js 的服务器上运行的程序。由于有 Node，您可以使用 JavaScript 构建完整的 Web 应用程序，例如 Twitter 或多人游戏。

这是一个由四部分组成的系列的第一课，我将在其中教您所需的编程基础知识，以便您学习构建自己的应用程序。在第 1 部分中，我将向您介绍 javaScript 和 ES6 的语法。ES6 代表 ECMAScript 6，它是 JavaScript 的现代版本。我们还将介绍其他一些基本概念，例如变量和数据类型。

安装和设置

首先，我们将设置我们的开发环境，以便我们可以在自己的计算机上运行我们的代码。或者，您可以在OneCompiler等在线编辑器中测试代码示例。

最简单的方法是使用您的网络浏览器。如果您以前没有一般的编程经验，则尤其如此。您只需在 Firefox中按Control-Shift-K或在 chrome 中按 Control -Shift-J即可开始使用。这应该会为您提供如下图所示的内容，其中我已经执行了一行代码。

学习使用 JavaScript 编码：基础知识 第1张

或者，如果您对安装和设置自己的运行时环境感到满意，也可以考虑使用 Node。您将能够将其放在您的简历上，并在以后给您的雇主留下深刻印象。

首先，您需要一个文本编辑器来编写代码。我推荐Sublime Text或Visual Studio Code。接下来，下载 Node 并将其安装到您的计算机上。您可以在Node.js 网站上获取该软件。node -v通过从终端键入命令来确认安装是否有效。如果一切正常，您将看到 Node 安装的版本号。

您可以使用 Node 做的一件事是在终端中运行 JavaScript 代码。这发生在所谓的 REPL shell 中。术语 REPL 代表 Read-Eval-Print-Loop。基本上，shell 将读取您输入的代码，E评估您编写的内容，打印结果，并保持循环直到您退出。要试一试——node在终端中输入命令。

接下来，让我们打印消息“Hello, World”。在终端中输入以下内容：

> console.log("Hello, World");

学习使用 JavaScript 编码：基础知识 第2张

要退出 REPL，请按两次Control-C 。当您想要测试上面示例中的简单语句时，使用 REPL 会派上用场。事实证明，这比将代码保存到文件更方便——尤其是在您编写一次性代码时。

要执行您在文件中编写的程序，请在终端中运行 command node filename，其中filename将替换为 JavaScript 文件的名称。您不必键入文件名的js扩展名来运行脚本。而且您必须位于文件所在的根目录中。

让我们尝试一个例子。创建一个名为hello.js的文件。在里面，我们将放入以下代码：

console.log("Hello, World");

从终端运行代码：

$ node hello

如果一切顺利，您将看到文本“Hello, World”输出到终端。

学习使用 JavaScript 编码：基础知识 第3张

从现在开始，您可以使用 Node REPL 或保存到文件来测试本教程中的代码示例。

设计程序

在编写任何代码之前，您应该花时间了解问题。你需要什么数据？结果如何？您的程序需要通过哪些测试？

当您了解程序的要求后，您就可以编写解决它的步骤。这些步骤是您的算法。你的算法不是代码。这是解决问题的简单英语（用您的母语替换英语）说明。例如，如果你想编写一个烹饪顶级拉面的算法，它可能看起来像这样：

  1. 从杯子上取下顶部。

  2. 将空调料装入杯中。

  3. 将杯子装满水。

  4. 微波炉高火2分钟。

  5. 冷却1分钟。

是的，一想到这个我就饿了。不，这不是您实际上会被视为编程问题的东西。这是一个更实际的问题示例。它是一种计算数字列表平均值的算法。

  1. 计算所有数字的总和。

  2. 获取数字的总数。

  3. 将总和除以总数。

  4. 返回结果。

理解问题并提出算法是编程中最重要的步骤。当您对自己的算法有信心时，您应该编写一些测试用例。测试将显示您的代码应该如何表现。完成测试后，您可以编写代码并对其进行调整，直到您的测试通过。根据您的问题的复杂程度，您的算法中的每个步骤都可能需要进一步分解。

任务

编写一个算法来计算一个数的阶乘。一个数的阶乘n是从 1 到 的所有整数的乘积n。例如，4!(4 阶乘) 1 x 2 x 3 x 4= 24。

句法

程序类似于我们使用的语言。唯一的区别是编程语言旨在与计算机（以及必须使用它的其他程序员）进行通信。构建程序的规则是它的语法。程序由语句组成。一个陈述可以被认为是一个句子。在 JavaScript 中，您必须在语句的末尾放置一个分号。例子：

a = 2 + 2;

语句由表达式组成。表达式就像句子的主语/谓语部分。在编程语言中，表达式具有值。表达式由关键字 likevar和for是语言的内置词汇表组成；数字或字符串等数据；和运算符喜欢+and =。例子：

2+2

以下是算术运算符列表：

操作员意义
+添加
-减法
**求幂
*乘法
/分配
%余
++增量
--递减

余数运算符返回两个数字相除后的余数。例如，4 % 2返回 0，然后5 % 3返回 2。余数运算符通常用于判断一个值是偶数还是奇数。偶数值的余数为 0。

我想提到的一件事是余数运算符与使用相同符号的模运算符不同。简而言之，模运算的结果将始终与除数具有相同的符号。另一方面，余数运算的结果将始终具有与被除数相同的符号。

任务

找出下列表达式的值。首先写下你的答案，然后在你的 REPL 中检查它们。

  • 9 % 3

  • 3 % 9

  • 3 % 6

  • 3 % 4

  • 3 % 3

  • 3 % 2

变量

变量是代表计算机内存中的值的名称。我们想要反复存储或使用的任何值都应该放在一个变量中。创建变量的一种方法是使用var关键字，但首选方法是使用letorconst关键字。以下是一些使用 let 创建变量的示例：

声明一个变量：

let a;

声明和初始化变量：

let a = 1;

重新分配变量：

a = 2;

常量是不能改变的变量。它们的值只能分配一次，并且必须在初始化期间发生。将对象或数组作为值的常量仍然可以修改，因为它们是通过引用分配的。变量不保存值；相反，它们指向对象的位置。例子：

const a = {foo:1,bar:2};
 
a.baz = 3;
 
console.log( a );    // displays { foo: 1, bar: 2, baz: 3 }

但是，这会给您一个错误：

const a = {foo:1,bar:2};
 
a = {};
 
console.log( a );

作为一般规则，您应该始终使用const关键字创建变量，并且let仅在您知道将来会重新分配变量值时使用。这将使您或任何其他浏览代码的人更容易调试，因为您将知道const您在许多行之后再次遇到的变量的值仍然具有您之前分配的相同值。

数据类型

在编写程序时，您通常必须处理不同类型的数据。该数据由不同的数据类型表示。数据类型有如何操作它们的规则。例如，如果我们将两个数字相加，我们会得到它们的总和。但是如果我们将一个数字与一个字符串相加，我们就会得到一个字符串。

以下是不同数据类型的列表：

  • undefined: 一个没有被赋值的变量

  • Boolean: 具有值 true 或 false 的实体

  • String: 一个字符序列

  • Symbol: 一个独特的、不变的键

  • Number：对于处理整数和十进制值很有用

  • BigIntNumber.MAX_SAFE_INTEGER：对于处理甚至可能超出限制的大数很有用

  • Object: 属性集合

此外，还有null一个特殊的 type 值Object。null用于表示空的或不存在的对象。

undefined对比null

虽然看起来很相似，但实际上它们非常不同undefined。null每当缺少某个值时，它都被视为undefined。另一方面，你必须明确地 make things null。例如，一个不返回任何值的函数被假定为返回undefined而不是null.

布尔值

该Boolean类型表示两个值，true和false。当您编写只想知道某事是否真实的代码时，它们很有用。例如，您可以使用变量 likeisItNight并检查其值是否为true或false以确定是应用深色主题还是浅色主题。

字符串

AString是由字符组成的数据类型。字符串将被单引号、双引号或反引号字符包围。

我们使用字符串来存储文本数据，例如人名。该String对象还具有多种可用于对它们执行操作的方法。以下是您可以对字符串执行的一些操作示例。

请记住，JavaScript 中的字符串是不可变的，您在字符串上使用的任何方法都将导致创建新字符串，同时保持原始字符串不变。下面是一些字符串方法的例子。

确定字符串是否以子字符串开头：

"Hello, World".startsWith("Hello");    //true

确定字符串是否以子字符串结尾：

"Hello, World".endsWith("World");    //true

确定子字符串是否位于字符串中的任何位置：

"Hello, World".includes("World");    //true

重复一个字符串指定的次数：

"Hello".repeat(3);    //HelloHelloHello

我们可以使用扩展运算符将字符串转换为单个字符的数组（长度为 1 的字符串）：...

let str = [..."hello"];
 
console.log(str);    //[ 'h', 'e', 'l', 'l', 'o' ]

模板文字是一种使用反引号的特殊字符串。我们可以使用它们在字符串中插入变量，如下所示：

let name = "World";
 
let greeting = `Hello, ${name}`;
 
console.log(greeting);    //Hello, World

我们可以像这样创建多行字符串：

`
<div>
 
    <h1>Hello, World</h1>
 
</div>
 
`

数字

当您处理数字时，JavaScript 中的Number类型会派上用场。它允许您存储和操作数字。您可以使用此类型来处理正数或负数以及分数。这是一个例子：

function factorial(x) {
  let result = 1;
  while(x > 1) {
    result *= n;
    x -= 1;
  }
   
  return result;
}
 
// 120
console.log(factorial(5));
 
// 362880
console.log(factorial(10));
 
// 3.0414093201713376e+64
console.log(factorial(50));
 
// Infinity
console.log(factorial(500));

您是否完成了“设计程序”部分下的任务，您必须编写算法来计算数字的阶乘？上面的代码向您展示了如何在 JavaScript 中实现类似的东西。

我们定义了自己的函数，命名为factorial()接受一个数字作为输入并给我们它的阶乘。定义一个函数可以让我们避免代码的重复。例如，我们不必编写四次代码来计算四个不同数字的阶乘。您将在后面的教程中更详细地了解函数。

上面有两件事你可能已经注意到了。首先，该函数按预期计算阶乘。但是，它不会返回 50 的阶乘的确切数字。其次，它不会返回任何类型的数字，而只是Infinity在计算 500 的阶乘时说。

我们都知道 500 的阶乘不会是无穷大。但是，JavaScript 会将任何超过Number.MAX_VALUE2 1024的数字转换为Infinity.

我们有什么方法可以得到 500 阶乘的实际值？就在这里！接下来我们将了解BigInt类型。

大整数

该BigInt类型允许您使用任意数量的数字。这意味着您的值可以超越Number.MAX_VALUE而不会返回诸如Infinity.

有两种创建BigInt. 您可以在整数值的末尾附加n，也可以调用该BigInt()函数。BigInt让我们重写上面的代码以使用类型获取阶乘。

function factorial(x) {
  let result = 1n;
  while(x > 1n) {
    result *= n;
    x -= 1n;
  }
   
  return result;
}
 
// 120n
console.log(factorial(5n));
 
// 3628800n
console.log(factorial(10n));
 
// 30414093201713378043612608166064768844377641568960512000000000000n
console.log(factorial(50n));
 
// 1220136825991110068701238785423046926253574342803192842192413588385845373153881997605496447502203281863013616477148203584163378722078177200480785205159329285477907571939330603772960859086270429174547882424912726344305670173270769461062802310452644218878789465754777149863494367781037644274033827365397471386477878495438489595537537990423241061271326984327745715546309977202781014561081188373709531016356324432987029563896628911658974769572087926928871281780070265174507768410719624390394322536422605234945850129918571501248706961568141625359056693423813008856249246891564126775654481886506593847951775360894005745238940335798476363944905313062323749066445048824665075946735862074637925184200459369692981022263971952597190945217823331756934581508552332820762820023402626907898342451712006207714640979456116127629145951237229913340169552363850942885592018727433795173014586357570828355780158735432768888680120399882384702151467605445407663535984174430480128938313896881639487469658817504506926365338175055478128640000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000n
console.log(factorial(500n));

如您所见，我们确实得到了一个实际的数值作为阶乘 500 的结果。但是，请记住，这BigInt仅有助于存储整数。你不能用它来计算任意大小的小数。

要记住的另一件事是，在进行算术运算时不能混合使用BigInt常规类型。Number这就是我们通过在末尾BigInt附加来转换所有数字的原因，即使是像 1 这样的小数字。n

目的

正如本教程前面提到的，JavaScript 中的对象是属性的集合，这些属性只是用于存储信息的键值对。JavaScript 中的函数基本上也是我们可以调用的对象。用于在单个变量中存储多个值的数组也是对象。

现在不要担心对象和数组，因为我们将在本系列的其他教程中更详细地了解它们。

象征

ASymbol是一个内置的 JavaScript 原语，始终保证是唯一的。这使其成为创建不会与可能由其他代码添加的对象键冲突的唯一属性键的理想选择。

每次调用都Symbol()返回一个唯一的符号。但是，您可以使用该for()方法为特定键取回相同的符号。

const x = Symbol();
const y = Symbol();
 
const a = Symbol.for("potato");
const b = Symbol.for("potato");
 
// Symbol Mismatch
if(x === y) {
  console.log('Same Symbol');
} else {
  console.log('Symbol Mismatch');
}
 
// This should Match
if(a === b) {
  console.log("This should Match");
}

审查

我们已经了解了如何使用 Node.js 设置我们的开发环境。编程的第一步是编写解决问题的步骤。这称为算法。实际代码将包含许多语句。语句是程序的指令，由表达式组成。

如果我们将表达式分配给变量，表达式在我们的程序中很有用。变量是使用letorconst关键字创建的。变量通常会存储我们刚刚讨论过的不同类型的数据。

在下一部分中，我将解释允许您在不同情况下运行一组不同任务的条件，例如用户是登录还是注销。

资源

这篇文章已经更新了 Monty Shokeen的贡献。Monty 是一名全栈开发人员，他也喜欢编写教程和学习新的 JavaScript 库。



文章目录
  • 安装和设置
  • 设计程序
    • 任务
  • 句法
    • 任务
  • 变量
  • 数据类型
    • undefined对比null
    • 布尔值
    • 字符串
    • 数字
    • 大整数
    • 目的
    • 象征
  • 审查
  • 资源

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：学习使用 JavaScript 编码：基础知识
    文章地址：https://www.weixiaolive.com/en/index.php/post/1b240dd6.html

    相关推荐

    发表评论

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云