JavaScript: 从入门到放弃 | 第一讲: 变量、值和类型

JavaScript 一直以来都被认为是最适合做网页的语言,同时也是公认坑第二多的语言。(什么?坑第一多的语言是哪家?这还用问吗?)

无论您有多努力,总有一天您必定会放弃 JS. 当然,如果您足够努力的话,也许可以坚持到 JS 语言废弃也说不定~

好了,负能量就到这里吧,如果您准备好了,那么就和青色旋律一起开始愉快的 JavaScript 旅途吧?

(此文根据之前JS学习小组的讨论进行整理,类似讨论笔记。)

目录

JS 环境配置

要学习 JS,必须有一个可以运行 JS 的环境。在阅读以下内容之前,请务必配置好自己的 JavaScript 环境。

  • Chrome/Firefox 用户可以按一下 F12 ,在弹出的窗口中选择 Console (控制台),在那里可以直接运行 JS。
  • 各位也可以安装 Node.js (服务端常用的 JS 环境), Linux 请用包管理器安装,而 Windows 用户需要下载安装程序。具体可以看 http://nodejs.org/download/
  • 如果是手机用户,或者觉得其他方式太麻烦,可以直接用这个网页,打开就能用: http://repl.it/languages/JavaScript

打开了以后,请试着运行这样一条语句(请复制粘贴):

1
console.log("Hello, JavaScript!");

如果出现Hello, JavaScript!字样,则说明已经配置成功了。那么恭喜,赶快进入接下来的教程吧?

Hello, world!

上面执行的那条语句可以算是最简单的 JS 程序之一了。如果您已经学习过了其他类似的语言,那么不妨跳过这一段内容,直接进入下一节吧?或者,如果您对 JS 已经有了最基本的了解,请期待本系列的第二篇。

此处 console.log(...); 的作用是在控制台打印输出...处的内容。其中...可以是字符串 "ABC" 也可以是整数 9. JavaScript 中每句语句以分号 ; 结束。

基本类型:数和文本

数据类型是指编程语言能够处理的基本单元。JS 中常见的类型包括文本(字符串,string)和整数(数,number),括号中为正式名称。

字符串顾名思义就是一串字符,以双引号开始和结束,例如 "Hello" 包含5个字符。中文字符也可以出现在字符串中,例如 "你好" ,但必须使用英文半角双引号。

数包括整数和非整数。 JS 不区分整数和小数类型,无论整数或者浮点数都统称为数。例如 3.149 均为 number 类型。

表达式和运算

JS 可以进行算术运算,支持 +, -, *, / 运算符,例如表达式 1+2 . 除法的结果不会自动取整,例如 1/2 结果是 0.5. 算术运算受浮点数精度限制,结果不一定是精确值。

复杂表达式也可以用括号分组,例如 (1 + 2) * 3 结果为 9. 算术运算的结果必定为 number 类型。

console.log(1+2); 时,会先计算括号内的表达式内容,因此结果打印为 3, 而不是打印 1+2. 如果需要打印 1+2, 应该使用字符串 console.log("1+2");.

数中有特殊值 Infinity-Infinity 对应正负无穷大。如果算术运算结果超出处理范围,返回值可能会是这两个值。同理由于精度限制,如果算数处理的结果非常接近于 0 ,则会返回 0, 不存在无穷小这个说法。

此外,还有特殊值 NaN 表示 Not a Number (不是数)。例如 0/0 的结果是 NaN, 不会报错。NaN 也属于 number 类型,尽管读作不是数。此外,其他类型的值转换为数失败的场合也会变成 NaN 值,见下述。

NaN 与任何数进行算术运算的结果均为 NaN. 此外 NaN !== NaN (与自身不相等)。

字符串连接

+ 除了进行加法运算以外,还可以进行字符串的连接。比如 console.log("青色" + "旋律");, 此处运算结果是两个字符串相连接,而不是加法。

如遇到字符串与数相连接的情况, JS 会将数转换为字符串再进行操作,例如 console.log("今天的气温是" + 33 + "摄氏度");

此处 33 会被转换为对应的字符串 "33" ,然后再执行连接。

字符串转换为数

但减法的情况下,两边必须都是数才能执行。此时 JS 会将字符串转换为数。例如: console.log("3" - "1") 会输出数 2 (不是字符串 "2")。

此处的执行过程可以理解成两边各自转换为数变成 3 - 1, 然后再得到 2.

如果转换失败,则那个值用 NaN 代替,例如 "你好" - 3 变成 NaN - 3, 结果为 NaN.

-, *, / 三种运算都有此特性,会将两侧的值分别转换为数。这个特性称为“隐式类型转换”。

+ 的处理是不同的。如果两侧均为数,则会按照加法运算来执行,结果为 number 类型。如果其中至少一侧为字符串,则会隐式转换另一侧为字符串,然后执行连接操作,结果为 string 类型。

JS 作为计算器使用

理解了数、字符串和运算以后,就可以把 JS 作为计算器使用了。例如青色旋律的访客中一共有 60 人,其中 12 人会JS,那么会JS的访客比例是 12 / 60. 如果需要转换为百分比,需要手动乘以 100 。为了输出美观,可以在后面接上百分比符号的字符串 "%". 于是我们得到:

1
console.log(12 / 60 * 100 + "%");

其中 "%" 是一个字符串,起到装饰作用,并不是数学运算之类的。

大部分的 REPL 不需要 console.log 也能输出表达式的计算值。例如控制台里直接输入 1+2 回车即可输出 3, 可以方便地计算各种值。但是在完整的 JS 程序里,大部分语句是只会执行不会输出的,需要使用 console.log 等语句来进行输出。

变量

变量可以存放一个值,值的类型可以是数或者字符串等。let a = 42; 声明一个变量 a, 其值为数 42.

接下去假如执行表达式 a/3, 结果是 14, 相当于把 a 的值取出然后再参与运算。

let b = 1 + 2; 的情况下,b 的值是 3 , 而不是算术式 1 + 2 也不是字符串 "1 + 2".

利用这个特性,可以存储一部分运算结果供接下去的运算使用。

变量存储字符串的情况例如 let name = "Tom";. 此时可以 console.log("Hello, " + name);.

使用 let 或者 var (后述)声明的变量可以修改其对应值,称为赋值。赋值语句的语法为 a = 3, 读作”a赋值为3”,或者 a gets 3. 这里的等号实际上可以理解成左箭头 , 而不是数学意义上的相等之类的。

b = b + 1; 的执行结果为变量 b 的值增加1. (计算右侧表达式的值,然后赋值给左侧变量).

如果使用 const 代替 let 声明变量,则该变量不能再次赋值。例如 const pi = 3.14; 之后,执行 pi = 3 会报错。也有人将其称为“常量”,但其实 JS 语言中这些仍然属于变量,只是增加了赋值时会报错的检查。

letconst 声明的变量具有块作用域,且不可在声明语句之前访问。而另一种 var 声明的变量具有函数作用域,且声明会提升。关于作用域可以参考 这里的说明,这个属于比较高级的话题,系列之后的文章会专门介绍。

青色旋律在此推荐写程序时,变量最好用 const 声明,然后如果之后需要改变值的时候再回头将此处修改为 let 即可。正常的程序中绝大部分变量是不需要修改值的,因此这样能尽早发现一些错误的赋值。

JS 作为弱类型语言,变量本身没有类型,只有值有类型。因此 let a = 0; 之后,仍然可以执行赋值 a = "Hello";, 而不会报错。 JS 的变量更像是指向一个值的“指针”,而不是一块固定的存储空间之类的。

变量使用举例

假如青色旋律博客当前访客人数为 62, 其中 12 人会 JavaScript. 如果用变量保存并计算其中会 JS 的人数比例,可以有以下代码:

1
2
3
let totalVisitors = 62;
let visitorsWhoKnowJS = 12;
console.log(visitorsWhoKnowJS / totalVisitors);

假设在此之后,又有 3 位新访客,其中 1 位会 JS, 则可以在以上代码之后续写:

1
2
3
totalVisitors = totalVisitors + 3;
visitorsWhoKnowJS = visitorsWhoKnowJS + 1;
console.log(visitorsWhoKnowJS / totalVisitors);

其中 totalVisitors = totalVisitors + 3; 可以简写为 totalVisitors += 3;, 读作 totalVisitors 增加 3. 此外 visitorsWhoKnowJS = visitorsWhoKnowJS + 1; 可以简写成 visitorsWhoKnowJS++;, 读作递增,作用为变量值增加 1. 也有人不推荐使用 ++.

上面的例子中,不一定需要修改变量的值,也可以直接使用变量运算:

1
console.log((visitorsWhoKnowJS + 1) / (totalVisitors + 3));

事实上,假如这两个变量使用 const 声明,则只能这样书写。实际编码中请自行选择合适的方式吧。通常来说,假如用 totalVisitors 变量记录当前人数,则推荐用 let 并修改值。但假如运算的结果意义改变了,则推荐使用另一个变量,如 const visitorsWhoDontKnowJS = totalVisitors - visitorsWhoKnowJS;, 提高可读性。

作业

青色旋律在这里提供一些作业题目以供各位自习使用。作业内容全部为可选,不需要提交。但如果您对于以上的概念是第一次接触,建议还是尽量完成作业。

作业完成后,可以上传至 https://gist.github.com/ ,并将链接贴在下方评论区中。青色旋律会对作业进行批改和反馈。如果有任何问题也可以使用下方评论区提问。

作业的参考答案将会在下一次的系列博文中公布。

除了作业外,也请预习 JS 的各种控制语句,例如 if, for, while 等。如果已经有其他语言基础的话,那么请简单复习下就好。下次的内容可不会这么简单了哦?教程会假设各位基本上已经了解过控制语句了,会着重介绍 JS 与其他语言不同的地方,即使是有编程基础的各位应该也能愉快地学习~请继续关注青色旋律博客吧~

那么,下次再见了哦~

作业1: 摄氏度转换为华氏度

编写程序计算 39 摄氏度等于多少华氏度。要求将摄氏度的值保存到变量中,然后在计算公式中使用变量。输出的结果范例:

39 摄氏度等于 ? 华氏度。

其中 ? 的地方需要替换为正确答案。可以看到,需要连接字符串和数字以实现这样的文字输出。

关于计算公式,请自行搜索。

作业2: 交换两个变量的值

假设 alice 有 8 个苹果,而 bob 只有 5 个。他们互相交换所有的苹果,然后请问 alicebob 分别有几个苹果?

这个作业要求用 alicebob 两个变量存放苹果数量,然后输出初始的各自苹果数量。在程序运行的时候交换两个变量的值,然后再输出一次。

这样是不行的:

alice = bob;
bob = alice;

各位可以去运行一下,就知道为什么不行了。请记住 = 用于改变变量的值。一旦经过改变,变量变为存储新的值,而忘记了原有的值。

程序执行有顺序,并不能同时执行两条语句。需要用其他的方法来交换。

实在想不出的情况,请上网搜索交换两个变量的值。

作业3:JS作为计算器

上面已经说过了, JS 可以作为计算器使用。请尝试用 JS 做一些简单的运算,或者解决一些实际问题。

以下问题仅供参考:

  • 使用 JS 计算一年有多少秒。简单的乘法。
  • 进一步,假设自己写一行代码需要17秒,那么一年能写多少行代码?
  • 愚蠢的人类需要吃饭睡觉休息,不能像高阶生物那样全年不休地写代码。
  • 请估算在有休息的情况下一名普通人类(以自己为例)能写多少代码。
  • (人类以外请跳过上面一行)
  • 上网搜索 Linux 内核的代码行数。计算一下一个人独立完成 Linux 内核需要几年?
  • 使用 JS 计算来估算 Linux 的参与人数,再与网上的统计数据对照。

(也可以是任意生活中遇到的实际问题或感兴趣的其他问题。)

各位,作业请加油~如果完成了别忘记在评论区提交作业哦。


知识共享许可协议 本作品是青色旋律原创作品,采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。转载请注明来自 青色旋律,链接至 此页面 并使用相同授权协议。如需更宽松的授权协议,请联系青色旋律。