4月阅读周·你不知道的JavaScript | 深入编程,从熟悉基础编程概念开始

举报
叶一一 发表于 2024/04/19 09:28:37 2024/04/19
【摘要】 背景去年下半年,我在微信书架里加入了许多技术书籍,各种类别的都有,断断续续的读了一部分。没有计划的阅读,收效甚微。新年伊始,我准备尝试一下其他方式,比如阅读周。每月抽出1~2个非连续周,完整阅读一本书籍。这个“玩法”虽然常见且板正,但是有效,已经坚持阅读三个月。4月份的阅读计划有两本,《你不知道的JavaScrip》系列迎来收尾。已读完书籍:《架构简洁之道》、《深入浅出的Node.js》、《...

背景

去年下半年,我在微信书架里加入了许多技术书籍,各种类别的都有,断断续续的读了一部分。

没有计划的阅读,收效甚微。

新年伊始,我准备尝试一下其他方式,比如阅读周。每月抽出1~2个非连续周,完整阅读一本书籍。

这个“玩法”虽然常见且板正,但是有效,已经坚持阅读三个月。

4月份的阅读计划有两本,《你不知道的JavaScrip》系列迎来收尾。

已读完书籍《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript(上卷)》、《你不知道的JavaScript(中卷)》

当前阅读周书籍《你不知道的JavaScript(下卷)》

深入编程

代码

程序常被称为源码代码,它是一组特定的指令,用来指示计算机要执行哪些任务。

虽然对JavaScript来说可以直接在浏览器的开发者终端中输入代码,但代码通常会被保存在文本文件中。

指令的格式和组合规则被称为计算机语言,有时也被称为语法,这非常类似于英语中告诉你如何拼写单词以及如何使用单词和标点符号来构造有效的句子。

语句

在计算机语言中,执行特定任务的一组单词、数字和运算符被称为语句。在JavaScript中,一条语句可能如下所示:

a = b * 2;

表达式

语句由一个或多个表达式组成。一个表达式是对一个变量或值的引用,或者是一组值和变量与运算符的组合。

举例来说,a = b * 2;这个语句中有四个表达式。

  • 2是一个字面值表达式
  • b是一个变量表达式,表示获取它的当前值。
  • b * 2是一个算术表达式,表示进行乘法运算。
  • a = b * 2是一个赋值表达式,意思是将表达式b * 2的结果赋值给变量a(我们将在后文中深入介绍赋值)。

一个独立的表达式也可以称为表达式语句,如下所示:

b * a

更常用的表达式语句是调用表达式语句,因为整个语句本身就是一个函数调用表达式:

alert( a );

a = b * 2这样的语句便于开发者读写,但实际上计算机并不能直接理解这种形式。因此,需要通过计算机上一个专门的工具(解释器或编译器)将你编写的代码翻译成计算机可以理解的命令。

对某些计算机语言来说,在程序被执行时,对命令的翻译通常是自上而下逐行执行的,这通常被称为代码解释

运算符

使用运算符,开发者可以对变量和值执行操作。

JavaScript中最常用的一些运算符:

1、赋值

=,如a = 2就表示将值2保存在变量a中。

3、算术

+(加)、-(减)、*(乘)、/(除),如a * 3。

3、复合赋值

+=、-=、*=和/=是复合运算符,可以将算术运算符与赋值组合起来,比如,a += 2等同于a = a + 2。

4、递增/递减

++表示递增,--表示递减,比如a++就类似于a = a + 1。

5、对象属性访问

如console.log()中的.。

对象是在名为属性的位置中持有其他值的值。obj.a指的是一个名为obj的对象值,并伴有一个属性名为a的属性。也可以通过obj["a"]这种形式访问属性。

6、相等

==(粗略相等)、===(严格相等)、! =(粗略不等)和!==(严格不等),如a == b。

7、比较

<(小于)、>(大于)、<=(小于或粗略等于)和>=(大于或粗略等于),如a <= b。

8、逻辑

&&(与)和||(或),如a || b就表示a或者b。这些运算符用于表示复合条件,比如a或b为真。

值与类型

在编程术语中,对值的不同表示方法称为类型。

JavaScript为以下这些基本值提供了内置类型。

直接包含在源码中的值被称为字面值。字符串字面值由双引号("...")或单引号('…')围住,二者的唯一区别只是风格不同。数字和布尔型字面值可以直接表示(如42、true等)。

除了字符串/数字/布尔值类型,编程语言通常还会提供数组、对象、函数等。

类型转换

JavaScript为类型间的强制转换提供了几种不同的机制。举例来说:

var a = '42';
var b = Number(a);

console.log(a); // "42"
console.log(b); // 42

如上所示,Number(..)(一个内置函数)的使用是一种显式的类型转换,可以将任意类型转换为数字类型。

如果需要进行比较的是不同类型的两个值,那么会怎么样呢?需要隐式的类型转换。JavaScript有时会隐式地将值转换到匹配的类型。

代码注释

编写代码并不只是为了给计算机看,在给计算机看的同时,代码同样要给开发者阅读。

代码注释,程序中的文本,将其插入程序只是为了向人类解释说明代码的执行。解释器/编译器会忽略这些注释。

如何编写注释良好的代码?

以下这些观察结论和指导原则是很有用的。·

  • 没有注释的代码不是最优的。
  • 过多注释(比如每行一个)可能是拙劣代码的征兆。
  • 代码应该解释为什么,而非是什么。如果编写的代码特别容易令人迷惑的话,那么注释也可以解释一下实现原理。

注释类型

JavaScript中的注释有两种类型:单行注释和多行注释。

// 这是一个单行注释

/* 而这是
  一个多行
      注释。
          */

变量

JavaScript采用的机制是动态类型,变量可以持有任意类型值而不存在类型强制。

var amount = 99.99;
amount = amount * 2;

console.log(amount); // 199.98

// 将amount转化为一个字符串,并在开头添加 "$"
amount = '$' + String(amount);

console.log(amount); // "$199.98"

变量amount开始时持有值99.99,然后持有amount * 2的结果值,也就是199.98。

第一个console.log(..)命令需要隐式地转换类型,将数字值转换为字符串用于输出。

然后语句amount = "$" + String(amount)显式地将值199.98转换为字符串,并在开头加上字符"$"。此时,amount持有字符串值"$199.98",所以第二个console.log(..)语句打印输出时就不需要转换类型了。

管理程序状态

变量的主要用途:管理程序状态。状态跟踪了值随着程序运行的变化。

变量的另一个常见用法是集中设置值。更常见的说法是常量,即声明一个变量,赋予一个特定值,然后这个值在程序执行过程中保持不变。

这些常量的声明通常放在程序的开头,所以如果需要改变这些值的话,那么就会有一个很方便的集中位置。

通常来说,在JavaScript中作为常量的变量用大写表示,多个单词之间用下划线分隔。

在JavaScript中,使用一对大括号{ .. }在一个或多个语句外来表示块。

通常来说,块会与其他某个控制语句组合在一起,比如if语句或循环。举例来说:

var amount = 99.99;

// amount是否足够大呢?
if (amount > 10) {
  // <-- 块与if组合
  amount = amount * 2;
  console.log(amount); // 199.98
}

条件判断

程序中有很多种方法可以用于表示条件判断(也就是决策)。

最常用的是if语句。本质上就是在表达“如果这个条件是真的,那么进行后续这些……”。if语句要求在括号( )中放一个表达式,这个表达式要么是true,要么是false。

除if之外,还有其他形式的条件判断。比如,switch语句可以用作一组if..else语句的简写。循环(参见1.10节)通过一个条件判断来确定是继续还是停止。

循环

重复一系列动作,直到不满足某个条件,换句话说,重复只发生在满足条件的情况下,这就是程序循环的工作;循环有多种形式,但都满足基本的行为特性。

循环包括测试条件以及一个块(通常就是{ .. })。循环块的每次执行被称为一个迭代。

条件判断会在每次迭代时测试,这就好像是在循环内部有一个隐式的if语句。我们可以通过JavaScript的break语句来结束循环。

另外,我们也可以看到,很容易就会创建出一个如果不使用break机制就会陷入死循环的循环。

var i = 0;
// while..true循环会永久运行,不是吗?
while (true) {
  // 停止循环?
  if (i <= 9 === false) {
    break;
  }

  console.log(i);
  i = i + 1;
}
// 0 1 2 3 4 5 6 7 8 9

函数

你的程序也几乎总是需要将代码的任务分割成可复用的片段,而不是一直重复编码。实现这一点的方法就是定义一个函数

通常来说,函数是可以通过名字被“调用”的已命名代码段,每次调用,其中的代码就会运行。

函数可以接受参数,即你传入的值,也可以返回一个值:

function printAmount(amt) {
  console.log(amt.toFixed(2));
}

function formatAmount() {
  return '$' + amount.toFixed(2);
}

var amount = 99.99;

printAmount(amount * 2); // "199.98"

amount = formatAmount();
console.log(amount); // "$99.99"

函数printAmount(..)接受一个名为amt的参数。函数formatAmount()返回一个值。你也可以在同一个函数中同时使用这两种技术。

总结

我们来总结一下本篇的主要内容:

  • 在值上执行动作需要运算符
  • 执行各种类型的动作需要值和类型,比如,对数字进行数学运算,用字符串输出。
  • 在程序的执行过程中需要变量来保存数据(也就是状态)。
  • 需要if这样的条件判断来做出决策。
  • 需要循环来重复任务,直到不满足某个条件。
  • 需要函数将代码组织为逻辑上可复用的块。
  • 代码注释是编写可读代码的一种有效方法,能让你的代码更易于理解和维护,如果以后出现问题的话也更加容易进行修复。

作者介绍
非职业「传道授业解惑」的开发者叶一一。
《趣学前端》、《CSS畅想》等系列作者。华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。
如果看完文章有所收获,欢迎点赞👍 | 收藏️ | 留言📝

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。