跳到主要内容

附录:JavaScript 上手指南

JavaScript 是什么

JavaScript 是一门编程语言,同时也是这个世界上最流行的编程语言之一。它深刻地影响着大家生活的方方面面,平时打开浏览器看的所有网页、手机中的很多 App 等都能看到它的身影。

而 JavaScript 本身是一个非常容易上手的编程语言,非常适合没有任何经验的小白入门编程。同时 JavaScript 受到绝大多数主流浏览器的支持,你可以没有部署任何环境只有一个浏览器的情况下运行 JavaScript 代码。

教程推荐

本教程主要是对 JavaScript 的一些基础用法进行非常简单的介绍,大家如果想要查看更加详细的教程,建议可以参考下面的网站:

快速入门

示例代码运行方式可以参考 这里

基本语法

和大多数编程语言一样,JavaScript 代码也是由语句组成。比如说下面的代码片段就每行就含有 1 个语句,总共有 2 行:

console.log("Hello World");
const name = 'xiaoming';

同时,在默认情况下每个语句需要以 ; 结束。当然其实理论上我们也是支持两个语句在同一行的,但是并不推荐这种写法:

console.log("Hello World");const name = 'xiaoming';

正常情况下,想实现一个功能会写下非常多不同的语句,不同语句也有着不同的作用,正是这些不同的语句搭配上对应的逻辑才组成了我们的日常认知里的代码片段。下面就大致介绍一下 JavaScript 的一些基础写法和特定的作用。

数据类型和变量

就类似于维格表的列类型一样,JavaScript 中也定义了不同的数据类型。

String

用得最多的一种数据类型,是以单引号或双引号包起来的任意文本。

const name = 'xiaoming';

Number

数字不需要用单引号或双引号包起来,因此被包起来的数字并不属于 Number 类型。

const myString = "1"; // String
const myNumber = 1; // Number

Boolean

布尔值,只有两种情况:truefalse,同样无需引号。

const myString = "false"; // String
const myFalse = false; // Boolean

Array

相对上述几种数据类型,Array 会稍微复杂一些,它可以包含任意数据类型,并且能够非常方便地对数组里面的数据进行读写。

// 定义一个数组
const myArray = [1, "test", true, 10];

// 可以通过下标读取其中的数据
console.log(myArray[0]); // 结果是 1
console.log(myArray[1]); // 结果是 test

Object

对象是 JavaScript 描述世界的方式。真实生活里,我们通过语言描述一个人通常会从身高、年龄等开始:他叫小明,今年 22 岁,身高 170。 而使用 JavaScript 作为一种编程语言可以用一种更结构化的方式去描述,让我们提取上述表达的信息整理一下:

属性内容
姓名小明
年龄22
身高170

对象其实就是 JavaScript 对于上面这一结构化信息的特殊表达,姓名、年龄等通常称为键(可以理解成一种特殊的变量名),而具体内容则为值:

// 定义一个 Object
const people = {
name: "小明",
age: 22,
height: 170,
};

// 读取 Object 的数据
console.log(people.name); // 结果是 小明
console.log(people.age); // 结果是 22

此时我们可以将 people 视为一个对象,这个对象里面有 nameage 等等关键信息。

变量和常量

在 JavaScript 中变量和常量都是用来存储数据的,前者和代数中的变量类似——它存放的数据是可以改变的,而后者不行。

let myFalse = false; // 定义一个变量 myFalse
const myNumber = 1; // 定义一个常量 myNumber,值为 1
const myString = "test"; // 定义一个常量 myString,值为 'test'
myFalse = true; // 更新变量 myFalse,更新后的值为 true
console.log(myFalse);
console.log(myNumber);
console.log(myString);

可以看到上面的常量 myNumbermyString 是以 const 开头,然后接一个特定的名称和 =,最后再写上具体的值。变量的定义方式也是类似的,不过需要以 let 开头,比如说上面的变量 myFalse,使用 let 定义的变量是可以被更新的,就像上面的代码中最后的 myFalse = truemyFalse 从 false 改成了 true。

如果想了解更多关于 constlet 的知识,建议在上面的 推荐教程 中搜索。

运算符

计算是编程最常见的用途之一,因此如何使用运算符也是学习一门语言非常重要的内容。

赋值

=:这一个在上面的 变量和常量 一章里已经提到过了

加减乘除

+

// 两个 Number 类型的数据会相加
const myNumber1 = 1;
const myNumber2 = 2;
console.log(myNumber1 + myNumber2); // 结果是 3

// 两个 String 类型的数据会拼接
const firstName = "xiaoming";
const lastName = "vika";
console.log(firstName + ' ' + lastName); // 结果是 xiaoming vika

- * /

// 通常在 Number 类型才会用到
const myNumber1 = 1;
const myNumber2 = 2;

console.log(myNumber1 - myNumber2); // 结果是 -1
console.log(myNumber1 * myNumber2); // 结果是 2
console.log(myNumber1 / myNumber2); // 结果是 0.5

比较

下面列举了一些比较常用的运算符供参考

>=:大于等于

>:大于

<=:小于等于

<:小于

==:等于

!=:不等于

条件语句

if 语句是 JavaScript 中非常常用的条件判断方式,而且通常会和比较运算符搭配使用:

const muNumber1 = 1;
const muNumber2 = 2;

if (muNumber1 == muNumber2) {
console.log(1);
} else if (muNumber1 > muNumber2) {
console.log(2);
} else {
console.log(3);
}
// 结果为 3

另外,JavaScript 也支持 switch 语句进行条件判断,感兴趣的话可以去 推荐教程 中搜索。

循环语句

如果写代码的时候希望能够做到重复执行同样的代码,那么可以使用 for 语句来实现。

const myNumber = 0;
const circleNum = 100; // 循环次数

for (i = 0; i < circleNum; i++) {
myNumber = myNumber + i;
}
console.log(myNumber); // 结果为 4950
  • i=0 是初始化循环变量
  • i<circleNum 是判断循环变量是否小于定义的的循环次数,如果是将继续执行
  • i++ 代表每次循环后 i 都会加 1

另外,JavaScript 也可以使用 for/in、While 语句进行循环,感兴趣的话可以去 推荐教程 中搜索。