JavaScript 基础(一):语法和程序结构

简介: JavaScript 是 Web 开发需要掌握的一种编程语言,它创建于 1995 年,用于在网景(Netscape) Navigator 浏览器中将程序添加到网页中。今天,该语言已被所有其他主要网络浏览器支持。

JavaScript 是 Web 开发需要掌握的一种编程语言,它创建于 1995 年,用于在网景(Netscape) Navigator 浏览器中将程序添加到网页中。今天,该语言已被所有其他主要网络浏览器支持。

设置环境

在本教程中,将有很多示例代码片段。要执行这些代码,可以简单地打开浏览器,进入开发者工具 -> 控制台

image.png

或者可以在计算机上安装 Node.js,它允许使用命令终端运行 JavaScript 程序。安装完成后,在终端中输入 node ,就可以开始输入 JavaScript 了,如下:

image.png

当然还可以在一些在线平台上运行 JavaScript ,如 codepen

数据类型

在计算机世界中,一切都与数据有关。计算机程序所做的本质上是获取一些输入数据,处理它们,并最终返回一些输出数据。下面就来讨论一下 JacaScript 可以处理的一些不同类型的数据。

Number

数字是最简单的,因为它的工作原理与小学数学课上所学的完全一样。

// 整数
100
// 小数
10.56
// 科学计数法
3.14e5 // 3.14 * 10^5 = 314000

数字的主要用途是进行算术运算。

3 + 5 * 2
// 输出 13

可能不认识一个运算符,它是模 (%) 运算。 X % Y 计算 X 除以 Y 的余数。例如:

25 % 5 // 结果为 0
25 % 10 // 结果为 5

字符串

字符串用于表示文本,它们都用引号(可以是单引号和双引号,个人比较偏向使用双引号)括起来,如下所示:

"Made in China.";
'Made in China.';

只要字符串开头和结尾的引号匹配,单引号和双引号的工作方式完全相同。

每当在字符串中发现反斜杠 \ 时,意味着它后面的字符具有特殊含义,即俗称的转义字符。例如,当字符 n 跟在反斜杠后面时 \n,计算机会将其解释为换行:

"Made in China \n 中国制造";

输出的结果是:

Made in China
中国制造

如下是一些常见的转义字符:

转义字符 所示含义
\n 换行符
\r 回车符
\t 水平制表符
\b 退格符
\\ 反斜线\
\' 单引号 '
\" 单引号 "

加号 +  操作符也可以用于字符串,显然,字符串不能用于算术运算,字符串里的加号表示连接(将两个字符拼接在一起)。

"Made in China:" + "中国制造";

最后输出的结果为:

Made in China:中国制造

在 ES6 中有一种特殊的字符串,即反引号字符串,通常称为模板字面量。它允许在字符串中嵌入其他变量值:

const country = "China";
const str = `Made in ${country}`;
console.log(str); // Made in China

当然也可以不是变量,如下:

const str = `100 的一半是: ${100 / 2}`;
console.log(str); // 100 的一半是: 50

布尔值

布尔值类型只包含两个值:truefalse,如下:

console.log(1 == 1); // true
console.log(1 > 2); // false
console.log(1 < 0); // false
console.log(1 != 2); // true

在上面的代码中,== 表示相等,!= 表示不相等,在实际项目开发中,建议使用恒等,用 === 取代 ==!== 取代 != 。其他类似的运算符包括 >=(大于或等于)和 <=(小于或等于)。

在 JavaScript 中,可以将三个逻辑运算符应用于布尔值,&&(与)、|| (或)、! (非)。

&& 运算符表示逻辑与,并且只有当给它的两个值或者以上的值都为 true 时结果才为 true

console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
console.log(true && true && true); // true
console.log(false && false && true); // false

&& 逻辑与可以用于优化条件语句,如下:

const month = 12;
const dosome = () => {
    console.log("dosom");
};
if (month === 12) {
    dosome();
}
// 逻辑与简化后
month === 12 && dosome();

|| 运算符表示逻辑或,如果给它的任何一个值都为 true,则结果为 true ;当所有的条件都为 false 的时候结果才为 false

console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
console.log(true || true); //  true

|| 逻辑或可以用户定义默认值变量,如下:

const age = inputAge || 18;  // 当 inputAge 为false 的情况下,将值 18 赋值给age

! 运算符表示逻辑非,给值取反。

console.log(!true); // false
console.log(!false); //  true

空值

在 JavaScript 中有两个特殊的值,nullundefined,它们表明没有意义的值,可以理解为空值。这两个值看起来没有太大的区别,实际上,在大多数情况下,可以将它们视为可以互换的。有两个不同的值表示同一件事,这是 JavaScript 设计的一个意外。同时这个意外增加空值判断的复杂性,虽然nullundefined可以理解为同一个意思,但是它们的比较还是有区别。如希望了解更多,可以参阅《再说 JavaScript 的 null 和 undefined》。

数据类型转换

JavaScript 是弱类型语言,这导致了程序编写具有很强的随意性,很多情况下都会尝试执行提交给它的代码,即使这个代码没有意义。例如:

console.log(8 * null); // 0
console.log("8" - 1); //  7
console.log("8" + 1); //  81

在第一个示例中,null 被转换为数字 0,而在第二个示例中,字符串 "8" 转换为数字 8。但是,在第三个例子中,数字 1 被转换为字符串 "1",通过加号对两个字符串进行连接,所以结果变成了 81

程序结构

语句和赋值

在计算机编程中,可以将“程序”视为解决复杂问题的说明手册。该手册中的每条指令/句子都称为语句。在 JavaScript 中,每一行代码应始终以分号 ; 结尾。这部分事情可以让代码编辑器自动来完成。

const num = 10;

上述代码称为变得定义及赋值。它使用 = 运算符将值 10 赋值给常量 num,如果是变量,可以使用 let  或者 var 来定义,如下:

let num = 10;

关键字 constletvar 都可以用于定义变量,但是它们的作用域不同。

函数

函数是一段程序,它返回一个值或有一些副作用,或两者兼而有之。比如上面的 console.log() 函数就是用来在终端输出值的。或者,prompt() 函数将显示一个要求用户输入的对话框,并且将输入值赋值给变量 num

let num = prompt("请输入一个数字:");
console.log(num);

image.png

显示对话和将文本写入屏幕都是有副作用。没有副作用的函数也很有用。例如:

console.log(Math.max(2, 4, 6, 8)); // 8

Math.max() 函数没有任何副作用,它只需要一组数字并返回最大值。

所有这些功能都是浏览器内置的。当然也可以使用 JavaScript 创建自己的函数,下面来看看组成函数的语句。

if 语句

if 语句提供了一种在不同条件下执行不同代码段的方法。例如:

const num = prompt("请输入一个整数:");
if (num < 10) {
    console.log("小于10");
} else {
    console.log("大于10");
}

这个程序要求你输入一个整数,如果数字小于 10,语句 console.log("小于10"); 将被执行,程序将输出 小于10 。如果数字大于 10,程序将输出大于10

如果需要包含多个条件,还可以使用多个 if/else 对:

const num = prompt("请输入一个整数:");
if (num < 10) {
    console.log("小于10");
} else if (num < 100) {
    console.log("小于100");
} else {
    console.log("大于100");
}

for 循环

只要满足某些条件,for 循环为提供了一种反复执行相同代码的方法。

for (let num = 0; num <= 12; num = num + 2) {
    console.log(num);
}

while 循环

while 循环以类似的方式工作,除了它只需要一个表达式。事实上,可以轻松地将之前的 for 循环示例更改为 while 循环。如下:

let num = 0;
while (num <= 12) {
    console.log(num);
    num = num + 2;
}

do while 循环

do-while 循环与 while 循环只有一点不同,它保证循环体至少执行一次。

let num = 10;
do {
    num = num + 1;
    console.log(num);
} while (num <= 1);

这次 num 的初始值为 10,没有触发循环继续的条件。但是因为这是一个 do-while 循环,所以主体仍然执行一次。如果这是一个 while 循环,它根本不会执行。

循环中断

没有触发循环继续的条件并不是停止循环的唯一方法。例如,要求找到一个大于 100 且可被 9 整除的数。

for (let num = 100; ; num = num + 1) {
    if (num % 9 === 0) {
        console.log(num);
        break;
    }
}

请注意,没有决定循环是否继续的表达式。相反,有一个 if 语句,里面有一个 break 关键字,如果它被执行,它将跳出循环。


作者:天行无忌

链接:https://juejin.cn/post/7073357077053177886

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

目录
打赏
0
0
0
0
20
分享
相关文章
函数计算产品使用问题之如何使用Node.js编写程序
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
239 1
利用事件循环提高 JavaScript 程序的性能
本文介绍了事件循环在JavaScript中的工作原理,以及如何通过合理利用事件循环来优化程序性能,包括异步操作、任务优先级和避免阻塞等技巧。
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
96 0
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
306 4

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等