JavaScript 系列教程 II JavaScript 基础知识

城南顾北

已于 2024-03-19 22:10:20 修改

阅读量1.5k

点赞数 24

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

于 2024-03-19 22:08:18 首次发布

本文链接：https://blog.csdn.net/weixin_54252035/article/details/136857024

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript编程语言的基础知识，包括script标签的使用、代码结构、变量和数据类型、运算符、控制结构（如while循环和continue）、函数以及箭头函数等，并简要提到了现代模式中的usestrict。

摘要由CSDN通过智能技术生成

在这里插入图片描述

🌟JavaScript 系列目录

第一章 JavaScript 简介
 第二章 JavaScript 基础知识

🌟Tip

本文是 JavaScript 系列教程的第二篇，主要简述了 JavaScript 编程语言的基本使用，是所有编程语言都有的通用性的东西。

🌟Hello World！

script 标签

我们的案例可以运行在 html 页面，即网页中，也可以运行在 node 环境中，我们这里选择运行在 html 页面中，你也可以运行在 node 中。

html 中 JavaScript 的代码通常被安排写在 script 标签中，然后右键 open with live server 就可以执行了。

我们先创建一个文件 test.html，然后写入一定的代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<div>hello world</div>
	<script type="text/javascript" language="javascript"></script>
</body>

</html>

右击：

tip：如果没有 live server ，可以上网查一下 live server 的安装，这并不复杂。

点击 live server 之后，页面会直接弹出：

这就是上面代码运行的结果。

现代的标记

我们上面的代码中，script 标签中写了两个属性，一个 type，一个 language，这两个属性都是可以省略不写的，现在的浏览器都不需要书写这两个属性了。

type 表示的是脚本类型，可以是以下的值：
- 不设置，或者空字符串，或者一个 JavaScript MIME 类型，表示导入了脚本
  - MIME 类型是一种标准，用来表示文档、文件的性质和格式，比如 type/javascript
- module：表示此代码是 JavaScript 模块
- importmap：表示导入了映射表
- 其他任何值：均被视为一个数据块，浏览器不会去处理
language 表示的是引入的是什么语言，其实就是废话，肯定是 JavaScript 啊。

所以这两个属性我们一般都不写。

外部脚本

从本地引入，写入 src 路径即可
从 cdn 引入，写入 src 路径即可

一般除了特别简单的脚本会直接内嵌在 html 中，其他的脚本都会被放在单独的文件中。这样的好处就是，浏览器会单独下载它，放在浏览器的缓存中，之后，如果其他页面也需要引入这个脚本，会直接从缓存中回去，而不是重新下载。这样就会节省流量，并且加载更快。

其他

如果一个 script 标签中既有 src，又有内容，那么内容会被自动忽略。

案例：

🌟代码结构

语句

语句是执行行为的语法结构和命令。

比如这个就是一个语句，打印出 123 。

<script>
	console.log(123);
</script>

分号

你可能注意到了，JavaScript 的代码需要再结尾放上分号，就像上面的代码一样，但是你肯定也在其他地方见过没有分号的 JavaScript 代码，难道是别人写错了吗？

其实 JavaScript 的分号在绝大多数情况下是可以不加的，一样可以运行，因为 JavaScript 会将换行符理解为 隐式的分号，然后自动进行分号插入。

但是有一些特殊的情况，比如

<script>
	console.log(1 + 2
		+ 3
	)
</script>

这个代码中，JavaScript 肯定不会在第一行和第二行的结尾加上分号，因为这样就无法运行了。

此外，如果下一行是用 ( 或者 [ 开头的，代码也不会自动加上分号，这时候如果你不自己加上分号的话，代码就会报错。

这时候就需要将分号补在下一行的开头：

这样代码才能正常运行。同样，分号开头也是一样：

注释

JavaScript 中的注释分为行注释和块注释，像以下这样使用：

<script>
	// 打印出 6
	console.log(1 + 2 + 3)
	/**
	 * 块注释
	 */
	console.log('hello world')
</script>

🌟现代模式

‘use strict’

意为开启严格模式，一旦开启就无法关闭，一般我们放在文件的开头即可开启，如果是函数，也可以放在函数的开头，但是并不是随便放在页面中任意的位置都可以的。

use strict 是为了保证在 es5 出现之后，大部分的现代化的修改能够生效，所以其实你可以看到，实际上是 JavaScript 为了保证旧的功能能够使用，大部分的现代化的修改是不生效的，而 use strict 是为了开启现代化的特性。

这里举一个例子，我们定义变量都会使用 let 操作符，如果你没有使用 let 操作符的话，在原来的 JavaScript 中是不会报错的：

<script>
	a = 100; // 此处并不会报错，并且在后面，如果使用了 a ，a 还会被创建。
</script>

但是开启了严格模式之后才会报错：

所以，显然，开启严格模式才是更加合理的。

此外，当我们的代码全部写在了 class 和 module 中时，就可以省略掉 use strict 了，因为只要使用了 class 和 module ，就默认开启严格模式了。

🌟变量

变量

直接看变量的定义：

<script>
	// 定义一个可变的变量
	let a = 1
	// 顶一个一个常量
	const b = 2
	// 你也可以使用 var 来代替 let，不过不推荐
	var c = 3
</script>

变量的命名

数字 + 子母 + 下划线，但是不能用数字开头。

区分大小写，apple 和 APPLE 不一样。

<script>
	let apple = '苹果'
	let APPLE = 'APPLE'

	console.log(apple);
	console.log(APPLE);
</script>

允许西里尔字母甚至是象形文字作为变量。

<script>
	let 我 = 123
	console.log(我)
</script>

但是不建议这样做，使用数字+字母+下划线是国际惯例。

🌟数据类型

JavaScript 一共有 number，boolean，string，symbol，null，undefined、bigInt 7种基本数据类型。

还有很多对象数据类型。

你可以使用 typeof 关键字直接得到变量的类型。

🌟基础运算符

基础运算符

加法 +
减法 -
乘法 *
除法 /
取余 %
求幂 **

位运算符

位运算符把运算元当做 32 位整数，并在它们的二进制表现形式上操作。

这些运算符不是 JavaScript 特有的。大部分的编程语言都支持这些运算符。

下面是位运算符：

按位与 ( & )
按位或 ( | )
按位异或 ( ^ )
按位非 ( ~ )
左移 ( << )
右移 ( >> )
无符号右移 ( >>> )

逗号运算符

let a = (1 + 2, 3 + 4)

a 的值是多少？

之后最后一个运算的结果会返回，所以 a 的值是 7。

意义在哪？

// 一行上有三个运算符
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}

🌟?? 运算符

let a = null
let b = a ?? '不存在'
console.log(b);

当然，以下是对while循环、continue语句、函数和箭头函数的补充说明。

🌟while 循环和 continue 语句

while循环是JavaScript中的一种基本循环结构，它会重复执行代码块，直到给定的条件不再为真。

let count = 0;
while (count < 5) {
  console.log(count);
  count++; // 增加计数器，以避免无限循环
}

continue语句用于跳过当前循环的剩余部分，并立即开始下一次迭代。

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue; // 跳过偶数，只打印奇数
  }
  console.log(i);
}

🌟函数

函数是组织好的，可重复使用的，用来实现单一，或相关联功能的JavaScript代码段。

function greet(name) {
  return 'Hello, ' + name + '!';
}

console.log(greet('Kimi')); // 输出: Hello, Kimi!

函数可以接受参数，并且有返回值。

🌟箭头函数

箭头函数是ES6中引入的一种新的函数语法，它提供了一种更简洁的方式来写函数表达式。

const greet = (name) => 'Hello, ' + name + '!';

console.log(greet('Kimi')); // 输出: Hello, Kimi!

箭头函数有几个重要的特性：

它们没有自己的this，arguments，super或new.target。
箭头函数不能作为构造函数使用。
箭头函数不能使用yield关键字。

城南顾北

关注

24
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 系列教程 II JavaScript 基础知识

这样的好处就是，浏览器会单独下载它，放在浏览器的缓存中，之后，如果其他页面也需要引入这个脚本，会直接从缓存中回去，而不是重新下载。这样就会节省流量，并且加载更快。use strict 是为了保证在 es5 出现之后，大部分的现代化的修改能够生效，所以其实你可以看到，实际上是 JavaScript 为了保证旧的功能能够使用，大部分的现代化的修改是不生效的，而。意为开启严格模式，一旦开启就无法关闭，一般我们放在文件的开头即可开启，如果是函数，也可以放在函数的开头，但是并不是随便放在页面中任意的位置都可以的。
复制链接

扫一扫