Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions cn/basics/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
layout: editorial
chapter: 2
pageNumber: 11
description: Programming means writing code. A book is made up of chapters, paragraphs, sentences, phrases, words, and finally punctuation and letters, likewise a program can be broken down into smaller and smaller components.
---


# 第2章

# 基础

在本章的开头,我们将学习编程与 JavaScript 语言的基础知识。

编程就是编写代码。就像一本书由章、段落、句子、词组、单词,最终到标点符号与字母构成一样,程序也可以被拆分为越来越小的组成部分。当前最重要的部分是“语句”。语句类似于书中的句子。它自身有结构与目的,但如果脱离周围其他语句的上下文,它的意义就不那么充分。

语句在口语中(也是更常见的说法)被称为一 *行代码*。这是因为语句通常写在单独的行上。因此,程序是自上而下、从左到右阅读的。你也许会好奇,什么是代码(也称源代码)。这是一个很宽泛的术语,既可以指整个程序,也可以指最小的部分。因此,一行代码就是你程序中的一行。

下面是一个简单示例:

```javascript
let hello = "Hello";
let world = "World";

// message等于 "Hello World"
let message = hello + " " + world;
```

这段代码可以由另一个称为 *解释器* 的程序来执行,它会读取代码并以正确的顺序执行所有语句。

在本章中,我们将探讨以下主题:

* [注释](./comments.md)
* [相等性](./equality.md)
* [类型](./types.md)
* [变量](./variables.md)
82 changes: 82 additions & 0 deletions cn/basics/comments.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
---
chapter: 2
pageNumber: 12
description: Comments are used to mark annotations for other programmers or small descriptions about the code that helps others to understand it. These statement are not executed by the interpreter.
---

# 注释

注释是不会被解释器执行的语句。它们用于为其他程序员做标注或对代码的作用进行简短说明,从而让他人更容易理解你的代码。注释也可用于在不影响程序控制流的情况下临时禁用代码。

## 注释的类型

### 单行注释

单行注释以两个正斜杠(`//`)开始,并持续到该行末尾。斜杠之后的任何内容都会被 JavaScript 解释器忽略。

```javascript
// 这是一条注释,解释器会忽略它
let a = "This is a variable";
```

你也可以在行尾使用它们:

```javascript
let b = 5; // 这也是一个有效的单行注释
```

### 多行注释

多行注释以 `/*` 开始并以 `*/` 结束。两者之间的内容都会被忽略。

```javascript
/*
这是一个多行注释。
你可以用它来解释更复杂的逻辑
或者暂时屏蔽一段代码。
*/
let x = 10;
```

### 现实中的注释示例

```javascript
// 修改标题:
document.getElementById("myH").innerHTML = "My First Page";

// 修改段落:
document.getElementById("myP").innerHTML = "My first paragraph.";
```

```javascript
/*
在测试新的 UI 流程时,暂时禁用欢迎消息。
*/

/*
document.getElementById("myH").innerHTML = "Welcome back!";
document.getElementById("myP").innerHTML = "We're glad to see you again.";
*/
```

它们对调试也很有用:

```javascript
let total = 0;
// total = calculateTotal(items); // 测试期间暂时禁用
```

```javascript
/*
登录问题的调试日志
问题解决后已注释掉
*/

/*
console.log("User data:", user);
console.log("Auth token:", token);
console.log("Response from API:", response);
*/
```

在代码中包含注释对于维护代码质量、促进协作以及简化调试过程至关重要。通过为程序的各个部分提供上下文与解释,注释能让将来更容易理解代码。因此,在代码中编写注释被视为一种良好的实践。
55 changes: 55 additions & 0 deletions cn/basics/equality.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
chapter: 2
pageNumber: 17
description: The equality operator is used for comparision. It can to determine if two variables are equal, even if they are not of the same type.
---

# 相等性

在编写程序时,我们经常需要判断变量与其他变量是否相等。这通过相等运算符来完成。最基本的相等运算符是 `==`。该运算符会尽其所能判断两个变量是否相等,即使它们的类型并不相同。

例如,假设:

```javascript
let foo = 42;
let bar = 42;
let baz = "42";
let qux = "life";
```

`foo == bar` 的结果为 `true`,`baz == qux` 的结果为 `false`,这与直觉一致。然而,尽管 `foo` 和 `baz` 的类型不同,`foo == baz` 也会得到 `true`。在幕后,`==` 相等运算符会在判断是否相等之前,尝试将其操作数强制转换为同一类型。这与 `===` 相等运算符形成对比。

`===` 相等运算符只有在两个变量类型相同 *并且* 值也相同时才认为它们相等。沿用上面的假设,这意味着 `foo === bar` 仍然为 `true`,但 `foo === baz` 现在为 `false`。`baz === qux` 依然为 `false`。

{% exercise %}
使用 `==` 和 `===` 运算符比较 `str1` 和 `str2` 的值。

{% initial %}
let str1 = "hello";
let str2 = "HELLO";
let bool1 = true;
let bool2 = 1;
// 使用 == 比较
let stringResult1 =
let boolResult1 =
// 使用 === 比较
let stringResult1 =
let boolResult2 =
{% solution %}
let str1 = "hello";
let str2 = "HELLO";
let bool1 = true;
let bool2 = 1;
// 使用 == 比较
let stringResult1 = str1 == str2 // false
let boolResult1 = bool1 == bool2 // true

// 使用 === 比较
let stringResult2 = str1 === str2 // false
let boolResult2 = bool1 === bool2 // false

{% validation %}
assert(stringResult1 === false && stringResult2 === false && boolResult1 ==true && boolResult2 === false );

{% context %}
{% endexercise %}
103 changes: 103 additions & 0 deletions cn/basics/types.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
---
chapter: 2
pageNumber: 15
description: Types are the kinds of data that can be represented and manipulated in the language.
---

# 变量类型

计算机足够复杂,能使用比数字更复杂的变量。这就是变量类型的作用所在。变量有多种类型,不同语言支持的类型也不尽相同。

最常见的类型有:

* **Number**:数字可以是整数(如 `1`、`-5`、`100`)或浮点数(如 `3.14`、`-2.5`、`0.01`)。JavaScript 不区分整数与浮点数;两者都被视为数字。
* **String**:字符串是由字符组成的序列,可以用单引号(如 `'hello'`)或双引号(如 `"world"`)表示。
* **Boolean**:布尔值表示真或假,可写为 `true` 或 `false`(不加引号)。
* **Null**:null 类型表示空值,含义是“没有值”。写作 `null`(不加引号)。
* **Undefined**:undefined 类型表示尚未被赋值的值。如果一个变量已声明但未被赋值,它就是 `undefined`。
* **Object**:对象是属性的集合,每个属性都有名称和对应的值。可以使用花括号(`{}`)创建对象,并以“名称-值”对的方式为其赋予属性。
* **Array**:数组是一种特殊的对象类型,用来保存一组条目。可以使用方括号(`[]`)创建数组,并为其赋予一个值列表。
* **Function**:函数是一段可以定义并通过名称调用的代码。[函数](../functions/README.md)可以接收参数(输入)并返回一个值(输出)。可以使用 `function` 关键字创建函数。

JavaScript 是一种“*弱类型*”语言,这意味着你不必显式声明变量的数据类型。只需使用 `var` 关键字表明你在声明变量,解释器会根据上下文与是否使用引号推断你所使用的数据类型。

{% exercise %}
声明三个变量并用以下值初始化:将 `age` 设为数字、`name` 设为字符串、`isMarried` 设为布尔值。

{% initial %}
let age =
let name =
let isMarried =
{% solution %}
let age = 30
let name = "Cecilia"
let isMarried = true

{% validation %}
assert(typeof age === "number" && typeof name === "string" && typeof isMarried === "boolean");

{% context %}
{% endexercise %}

`typeof` 运算符用于检查变量的数据类型。

```javascript
typeof "John" // 返回 "string"
typeof 3.14 // 返回 "number"
typeof NaN // 返回 "number"
typeof false // 返回 "boolean"
typeof [1,2,3,4] // 返回 "object"
typeof {name:'John', age:34} // 返回 "object"
typeof new Date() // 返回 "object"
typeof function () {} // 返回 "function"
typeof myCar // 返回 "undefined" *
typeof null // 返回 "object
```

JavaScript 中使用的数据类型可以按“是否能包含值”分为两类。

可以包含值的数据类型:

* `string`
* `number`
* `boolean`
* `object`
* `function`

{% hint style="info" %}
`Object`、`Date`、`Array`、`String`、`Number` 与 `Boolean` 是 JavaScript 中可用的对象类型。
{% endhint %}

不能包含值的数据类型:

* `null`
* `undefined`

原始(primitive)数据值是没有附加属性与方法、且不是对象的简单数据值。它们是不可变的,也就是不能被就地修改。共有 7 种原始数据类型:

* string
* number
* bigint
* boolean
* undefined
* symbol
* null

{% exercise %}
声明一个名为 `person` 的变量,并用一个对象初始化它。该对象包含以下属性:`age` 为数字、`name` 为字符串、`isMarried` 为布尔值。

{% initial %}
let person =

{% solution %}
let person = {
name: "Mary",
age: 25,
isMarried: false
};

{% validation %}
assert(typeof person.age === "number" && typeof person.name === "string" && typeof person.isMarried === "boolean");

{% context %}
{% endexercise %}
116 changes: 116 additions & 0 deletions cn/basics/variables.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
---
chapter: 2
pageNumber: 13
description: Variables are used to store and hold data. It can hold various types of values, such as numbers, strings, booleans, objects, arrays, functions and more.
---

# 变量

真正理解编程的第一步是回到代数。如果你还记得在学校学的内容,代数从书写如下项开始。

```javascript
3 + 5 = 8
```

当你引入一个未知数时就开始进行计算,例如下面的 `x`:

```javascript
3 + x = 8
```

通过移项,你可以确定 `x`:

```javascript
x = 8 - 3
-> x = 5
```

当你引入不止一个未知数时,你的式子会更灵活——这就是在使用变量:

```javascript
x + y = 8
```

你可以改变 `x` 和 `y` 的值,而这个公式仍然可以成立:

```javascript
x = 4
y = 4
```

或者

```javascript
x = 3
y = 5
```

编程语言也是如此。在编程中,变量是装载会变化的值的容器。变量可以保存各种值,也可以保存计算的结果。变量有一个用等号 `(=)` 连接的 `名称` 和 `值`。不过,要牢记不同的编程语言对变量名各自有一定的限制与约束,因为语言中的某些词可能被保留用于特定的函数或操作。

来看一下在 JavaScript 中它是如何工作的。下面的代码定义了两个变量,计算它们相加的结果,并将该结果作为第三个变量的值。

```javascript
let x = 5;
let y = 6;
let result = x + y;
```

命名变量时需要遵循一些准则:

* 变量名必须以字母、下划线 `(_)` 或美元符号 `($)` 开头。
* 在首字符之后,可以使用*字母*、*数字*、*下划线*或*美元符号*。
* JavaScript 区分大小写,因此 `myVariable`、`MyVariable` 和 `MYVARIABLE` 是三个不同的变量。
* 为了让代码易于阅读和维护,建议使用能准确反映用途的描述性变量名。

{% exercise %}
将变量 `x` 定义为 20。

{% initial %}
let x =

{% solution %}
let x = 20;

{% validation %}
assert(x == 20);

{% context %}
{% endexercise %}
**ES6 版本**

[ECMAScript 2015 或 ES2015](https://262.ecma-international.org/6.0/),也称为 E6,是自 2009 年以来对 JavaScript 的一次重要更新。在 ES6 中,我们有三种声明变量的方式。

```javascript
var x = 5;
const y = 'Test';
let z = true;
```

声明方式的差异体现在作用域上。与不考虑块级作用域、在全局或整个函数内声明变量的 `var` 不同,`let` 允许你将变量的作用域限制在其所处的代码块、语句或表达式中。例如:

```javascript
function varTest(){
var x=1;
if(true){
var x=2; // 同一个变量
console.log(x); //2
}
console.log(x); //2
}

function letTest(){
let x=1;
if(true){
let x=2;
console.log(x); // 2
}
console.log(x); // 1
}
```

`const` 变量是不可变的,这意味着它们不允许被重新赋值。

```javascript
const x = "hi!";
x = "bye"; // 这将导致错误
```