JavaScript 基础语法

JavaScript 是一种用于实现网页交互效果的编程语言。

在前端开发中：

text

HTML       → 网页结构
CSS        → 网页样式
JavaScript → 网页行为

例如：

html

<button>点击我</button>

HTML 负责创建按钮。

CSS 负责控制按钮的外观。

JavaScript 负责控制：

text

点击按钮以后发生什么

1. JavaScript 的使用方式

JavaScript 常见有三种使用方式：

行内 JavaScript
内部 JavaScript
外部 JavaScript

2. 行内 JavaScript

可以直接写在 HTML 属性中：

html

<button onclick="alert('Hello JavaScript')">
  点击我
</button>

点击按钮后会弹出提示框。

这种方式适合简单演示。

实际开发中一般不推荐大量使用。

3. 内部 JavaScript

可以在 HTML 中使用：

html

<script>
</script>

例如：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript</title>
  </head>

  <body>
    <button id="btn">点击我</button>

    <script>
      const button = document.querySelector("#btn");

      button.addEventListener("click", () => {
        alert("Hello JavaScript");
      });
    </script>
  </body>
</html>

4. 外部 JavaScript

实际开发中更常见的是将 JavaScript 单独放在 .js 文件中。

例如：

text

index.html
script.js

script.js：

javascript

console.log("Hello JavaScript");

HTML 中引入：

html

<script src="./script.js"></script>

完整示例：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript</title>
  </head>

  <body>
    <h1>Hello JavaScript</h1>

    <script src="./script.js"></script>
  </body>
</html>

通常将 <script> 放在 </body> 前面。

也可以放在 <head> 中并使用：

html

<script src="./script.js" defer></script>

defer 表示等待 HTML 解析完成后再执行脚本。

输出

5. console.log()

开发过程中最常用的输出方式之一：

javascript

console.log("Hello JavaScript");

浏览器开发者工具的 Console 中会显示：

text

Hello JavaScript

也可以输出变量：

javascript

const name = "Tom";

console.log(name);

输出多个值：

javascript

const name = "Tom";
const age = 18;

console.log(name, age);

6. alert()

弹出浏览器提示框：

javascript

alert("Hello");

通常用于简单测试或演示。

实际项目中不会频繁使用。

变量

7. let

let 用于声明可以重新赋值的变量。

javascript

let age = 18;

修改：

javascript

age = 19;

例如：

javascript

let score = 60;

score = 100;

console.log(score);

输出：

text

8. const

const 用于声明不能重新赋值的变量。

javascript

const name = "Tom";

下面这样是不允许的：

javascript

const name = "Tom";

name = "Jack";

实际开发中通常优先使用：

text

const

如果变量之后需要重新赋值，再使用：

text

let

可以简单记：

text

默认 const
需要修改时 let

9. var

旧版 JavaScript 经常使用：

javascript

var name = "Tom";

现代 JavaScript 通常推荐使用：

text

let
const

而不是 var。

数据类型

10. Number

数字：

javascript

const age = 18;
const price = 19.99;

JavaScript 不区分普通整数和浮点数：

javascript

const a = 10;
const b = 3.14;

它们通常都属于：

text

number

11. String

字符串：

javascript

const name = "Tom";

也可以：

javascript

const name = 'Tom';

或者使用模板字符串：

javascript

const name = `Tom`;

12. Boolean

布尔值只有两个：

javascript

true
false

例如：

javascript

const isLogin = true;
const isAdmin = false;

13. undefined

声明变量但没有赋值：

javascript

let value;

console.log(value);

结果：

text

undefined

表示：

当前没有被赋予具体值。

14. null

null 通常表示：

主动设置为空。

例如：

javascript

const user = null;

可以简单理解：

text

undefined → 还没有值
null      → 明确设置为空

15. typeof

可以查看数据类型：

javascript

const age = 18;

console.log(typeof age);

输出：

text

number

例如：

javascript

console.log(typeof "Hello");
console.log(typeof 123);
console.log(typeof true);
console.log(typeof undefined);

结果：

text

string
number
boolean
undefined

字符串

16. 字符串拼接

可以使用：

javascript

例如：

javascript

const firstName = "Moonlit";
const lastName = "Boy";

const name = firstName + lastName;

console.log(name);

17. 模板字符串

现代 JavaScript 更推荐模板字符串。

使用反引号：

javascript

例如：

javascript

const name = "Tom";
const age = 18;

console.log(`姓名：${name}，年龄：${age}`);

其中：

javascript

${变量}

可以将变量插入字符串。

18. 字符串长度

使用：

javascript

.length

例如：

javascript

const text = "Hello";

console.log(text.length);

输出：

text

19. 常见字符串方法

转大写：

javascript

const text = "hello";

console.log(text.toUpperCase());

输出：

text

HELLO

转小写：

javascript

const text = "HELLO";

console.log(text.toLowerCase());

去除首尾空格：

javascript

const text = "  hello  ";

console.log(text.trim());

判断是否包含：

javascript

const text = "Hello JavaScript";

console.log(text.includes("JavaScript"));

结果：

text

true

运算符

20. 算术运算符

常见：

text

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

例如：

javascript

const a = 10;
const b = 3;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);

21. 自增和自减

javascript

let num = 10;

num++;

等价于：

javascript

num = num + 1;

自减：

javascript

num--;

22. 赋值运算符

javascript

let num = 10;

常见简写：

javascript

num += 5;
num -= 5;
num *= 2;
num /= 2;

例如：

javascript

let score = 10;

score += 5;

console.log(score);

输出：

text

比较运算符

23. 大小比较

text

>
<
>=
<=

例如：

javascript

console.log(10 > 5);

结果：

text

true

24. == 和 ===

JavaScript 中：

javascript

==

会进行类型转换。

例如：

javascript

console.log(10 == "10");

结果：

text

true

因为 JavaScript 会尝试转换类型。

严格相等使用：

javascript

===

例如：

javascript

console.log(10 === "10");

结果：

text

false

因为：

text

10     → number
"10"   → string

类型不同。

实际开发中通常推荐使用：

text

===

而不是：

text

==

25. 不等于

普通不等：

javascript

!=

严格不等：

javascript

!==

通常推荐：

javascript

!==

逻辑运算符

26. &&

逻辑与：

javascript

&&

两个条件都成立才为 true。

例如：

javascript

const age = 20;
const hasTicket = true;

console.log(age >= 18 && hasTicket);

27. ||

逻辑或：

javascript

||

其中一个条件成立即可。

javascript

const isAdmin = false;
const isOwner = true;

console.log(isAdmin || isOwner);

结果：

text

true

28. !

逻辑非：

javascript

用于取反。

javascript

const isLogin = true;

console.log(!isLogin);

结果：

text

false

条件判断

29. if

基本格式：

javascript

if (条件) {
  代码;
}

例如：

javascript

const age = 20;

if (age >= 18) {
  console.log("成年人");
}

30. if...else

javascript

const age = 16;

if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

31. if...else if...else

javascript

const score = 85;

if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

32. 三元运算符

简单的 if...else 可以使用三元运算符：

javascript

条件 ? 值1 : 值2

例如：

javascript

const age = 20;

const result = age >= 18 ? "成年人" : "未成年人";

console.log(result);

switch

33. switch 语句

当需要判断多个固定值时，可以使用：

javascript

switch

例如：

javascript

const day = 2;

switch (day) {
  case 1:
    console.log("星期一");
    break;

  case 2:
    console.log("星期二");
    break;

  case 3:
    console.log("星期三");
    break;

  default:
    console.log("未知");
}

break 用于结束当前分支。

循环

34. for 循环

基本格式：

javascript

for (初始化; 条件; 更新) {
  代码;
}

例如：

javascript

for (let i = 0; i < 5; i++) {
  console.log(i);
}

输出：

text

35. while 循环

javascript

let i = 0;

while (i < 5) {
  console.log(i);

  i++;
}

36. break

结束循环：

javascript

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }

  console.log(i);
}

执行到 5 时循环结束。

37. continue

跳过当前循环：

javascript

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue;
  }

  console.log(i);
}

结果：

text

数组

38. 创建数组

数组可以保存多个数据：

javascript

const languages = [
  "HTML",
  "CSS",
  "JavaScript"
];

39. 访问数组元素

数组下标从：

text

开始。

例如：

javascript

const languages = [
  "HTML",
  "CSS",
  "JavaScript"
];

console.log(languages[0]);

输出：

text

HTML

40. 数组长度

javascript

const languages = [
  "HTML",
  "CSS",
  "JavaScript"
];

console.log(languages.length);

结果：

text

41. push()

在数组末尾添加元素：

javascript

const languages = ["HTML", "CSS"];

languages.push("JavaScript");

console.log(languages);

42. pop()

删除数组最后一个元素：

javascript

languages.pop();

43. unshift()

在数组开头添加：

javascript

languages.unshift("C");

44. shift()

删除数组第一个元素：

javascript

languages.shift();

45. 遍历数组

普通 for：

javascript

const languages = [
  "HTML",
  "CSS",
  "JavaScript"
];

for (let i = 0; i < languages.length; i++) {
  console.log(languages[i]);
}

46. for...of

更简单的数组遍历：

javascript

const languages = [
  "HTML",
  "CSS",
  "JavaScript"
];

for (const language of languages) {
  console.log(language);
}

47. forEach()

javascript

const languages = [
  "HTML",
  "CSS",
  "JavaScript"
];

languages.forEach((language) => {
  console.log(language);
});

对象

48. 创建对象

对象用于保存一组相关的数据。

例如：

javascript

const user = {
  name: "Tom",
  age: 18,
  isAdmin: false
};

其中：

text

name
age
isAdmin

称为属性。

49. 访问对象属性

使用点语法：

javascript

console.log(user.name);

也可以：

javascript

console.log(user["name"]);

50. 修改对象属性

javascript

const user = {
  name: "Tom",
  age: 18
};

user.age = 19;

51. 添加属性

javascript

user.email = "tom@example.com";

52. 删除属性

javascript

delete user.age;

函数

53. 定义函数

基本格式：

javascript

function 函数名() {
  代码;
}

例如：

javascript

function hello() {
  console.log("Hello");
}

调用：

javascript

hello();

54. 函数参数

javascript

function hello(name) {
  console.log(`Hello ${name}`);
}

hello("Tom");

输出：

text

Hello Tom

多个参数：

javascript

function add(a, b) {
  console.log(a + b);
}

add(10, 20);

55. return

函数可以返回结果：

javascript

function add(a, b) {
  return a + b;
}

const result = add(10, 20);

console.log(result);

输出：

text

56. 函数表达式

函数也可以保存到变量中：

javascript

const hello = function () {
  console.log("Hello");
};

hello();

箭头函数

57. 基本语法

箭头函数：

javascript

const hello = () => {
  console.log("Hello");
};

调用：

javascript

hello();

58. 带参数的箭头函数

javascript

const add = (a, b) => {
  return a + b;
};

如果函数只有一条返回语句，可以简写：

javascript

const add = (a, b) => a + b;

作用域

59. 全局作用域

在函数或代码块外声明：

javascript

const name = "Tom";

function hello() {
  console.log(name);
}

name 可以在函数中访问。

60. 块级作用域

let 和 const 具有块级作用域。

例如：

javascript

if (true) {
  const name = "Tom";

  console.log(name);
}

在代码块外：

javascript

console.log(name);

无法直接访问。

DOM

61. 什么是 DOM

浏览器会把 HTML 页面转换成一个对象结构：

text

DOM

DOM 全称：

text

Document Object Model

中文通常称为：

text

文档对象模型

JavaScript 可以通过 DOM：

text

查找元素
修改元素
添加元素
删除元素
响应用户操作

62. querySelector()

查找页面中的元素：

HTML：

html

<h1 id="title">Hello</h1>

JavaScript：

javascript

const title = document.querySelector("#title");

查找 class：

javascript

const card = document.querySelector(".card");

查找标签：

javascript

const p = document.querySelector("p");

63. 修改文字

HTML：

html

<h1 id="title">Hello</h1>

JavaScript：

javascript

const title = document.querySelector("#title");

title.textContent = "Hello JavaScript";

页面上的文字就会被修改。

64. 修改 HTML

可以使用：

javascript

innerHTML

例如：

javascript

const box = document.querySelector(".box");

box.innerHTML = "<strong>Hello</strong>";

但如果内容来自用户输入或外部数据，要特别注意安全问题。

65. 修改样式

可以直接修改：

javascript

element.style

例如：

javascript

const title = document.querySelector("#title");

title.style.color = "red";

66. classList

实际开发中通常更推荐通过 class 控制样式。

CSS：

css

.active {
  color: red;
}

JavaScript：

javascript

const title = document.querySelector("#title");

title.classList.add("active");

删除：

javascript

title.classList.remove("active");

切换：

javascript

title.classList.toggle("active");

判断是否存在：

javascript

title.classList.contains("active");

事件

67. addEventListener()

JavaScript 可以监听用户操作。

例如：

javascript

const button = document.querySelector("#btn");

button.addEventListener("click", () => {
  console.log("按钮被点击");
});

其中：

text

click

表示点击事件。

68. 常见事件

常见事件：

text

click       → 点击
dblclick    → 双击
input       → 输入内容变化
change      → 值发生变化
submit      → 提交表单
keydown     → 键盘按下
keyup       → 键盘松开
mouseover   → 鼠标进入

69. event 对象

事件处理函数可以获得事件对象：

javascript

button.addEventListener("click", (event) => {
  console.log(event);
});

可以通过：

javascript

event.target

知道触发事件的元素：

javascript

button.addEventListener("click", (event) => {
  console.log(event.target);
});

表单

70. 获取输入框内容

HTML：

html

<input id="username" type="text" />

JavaScript：

javascript

const input = document.querySelector("#username");

console.log(input.value);

通过：

javascript

.value

读取输入框内容。

71. submit 事件

HTML：

html

<form id="login-form">
  <input id="username" type="text" />

  <button type="submit">
    登录
  </button>
</form>

JavaScript：

javascript

const form = document.querySelector("#login-form");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  console.log("表单提交");
});

其中：

javascript

event.preventDefault();

用于阻止浏览器默认的表单提交行为。

数组常用方法

72. map()

map() 可以根据原数组生成一个新数组。

例如：

javascript

const numbers = [1, 2, 3];

const result = numbers.map((number) => {
  return number * 2;
});

console.log(result);

结果：

text

[2, 4, 6]

可以简写：

javascript

const result = numbers.map(
  (number) => number * 2
);

73. filter()

筛选符合条件的数据：

javascript

const numbers = [1, 2, 3, 4, 5];

const result = numbers.filter(
  (number) => number > 2
);

console.log(result);

结果：

text

[3, 4, 5]

74. find()

查找第一个符合条件的元素：

javascript

const users = [
  { name: "Tom", age: 18 },
  { name: "Jack", age: 20 }
];

const user = users.find(
  (item) => item.name === "Jack"
);

console.log(user);

解构

75. 数组解构

原来：

javascript

const numbers = [10, 20];

const a = numbers[0];
const b = numbers[1];

可以写成：

javascript

const [a, b] = numbers;

76. 对象解构

原来：

javascript

const user = {
  name: "Tom",
  age: 18
};

const name = user.name;
const age = user.age;

可以写成：

javascript

const { name, age } = user;

展开运算符

77. ...

展开运算符：

javascript

...

可以展开数组：

javascript

const a = [1, 2];
const b = [3, 4];

const numbers = [...a, ...b];

console.log(numbers);

结果：

text

[1, 2, 3, 4]

复制对象：

javascript

const user = {
  name: "Tom",
  age: 18
};

const newUser = {
  ...user
};

还可以修改属性：

javascript

const newUser = {
  ...user,
  age: 20
};

可选链

78. ?.

访问可能不存在的属性时，可以使用：

javascript

?.

例如：

javascript

const user = {};

console.log(user.address?.city);

如果 address 不存在，不会直接报错，而是得到：

text

undefined

空值合并

79. ??

空值合并运算符：

javascript

??

例如：

javascript

const username = null;

const name = username ?? "游客";

console.log(name);

结果：

text

游客

只有左边是：

text

null
undefined

时，才会使用右边的值。

JSON

80. 什么是 JSON

JSON 是一种常见的数据交换格式。

例如：

json

{
  "name": "Tom",
  "age": 18
}

它和 JavaScript 对象看起来很像。

81. JSON.parse()

将 JSON 字符串转换为 JavaScript 对象：

javascript

const text = '{"name":"Tom","age":18}';

const user = JSON.parse(text);

console.log(user.name);

82. JSON.stringify()

将 JavaScript 对象转换为 JSON 字符串：

javascript

const user = {
  name: "Tom",
  age: 18
};

const text = JSON.stringify(user);

console.log(text);

定时器

83. setTimeout()

延迟执行一次：

javascript

setTimeout(() => {
  console.log("Hello");
}, 1000);

其中：

text

1000 毫秒 = 1 秒

84. setInterval()

按照固定间隔重复执行：

javascript

setInterval(() => {
  console.log("Hello");
}, 1000);

每隔 1 秒执行一次。

异步基础

85. Promise

现代 JavaScript 中很多异步操作都会使用：

text

Promise

一个 Promise 通常会有三种状态：

text

pending   → 进行中
fulfilled → 成功
rejected  → 失败

初学阶段先理解：

Promise 用于处理需要等待结果的操作。

86. async 和 await

例如：

javascript

async function getData() {
  const response = await fetch(
    "https://example.com/api"
  );

  const data = await response.json();

  console.log(data);
}

其中：

text

async  → 表示这是异步函数
await  → 等待异步操作完成

这部分属于 JavaScript 进阶中非常重要的内容。

注释

87. 单行注释

javascript

// 这是单行注释

88. 多行注释

javascript

/*
  这是
  多行注释
*/

一个完整的小例子

HTML：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />

    <title>JavaScript 示例</title>
  </head>

  <body>
    <h1 id="title">MoonlitLog</h1>

    <input
      id="username"
      type="text"
      placeholder="请输入用户名"
    />

    <button id="btn">
      修改标题
    </button>

    <script src="./script.js"></script>
  </body>
</html>

JavaScript：

javascript

const title = document.querySelector("#title");
const input = document.querySelector("#username");
const button = document.querySelector("#btn");

button.addEventListener("click", () => {
  const username = input.value;

  if (username === "") {
    title.textContent = "请输入用户名";

    return;
  }

  title.textContent = `你好，${username}`;
});

这个例子包含：

text

变量
DOM
事件
输入框
条件判断
模板字符串
函数

执行流程：

text

用户输入名字
    ↓
点击按钮
    ↓
JavaScript 读取 input.value
    ↓
判断是否为空
    ↓
修改 h1 的内容

JavaScript 基础语法速查

功能	JavaScript
输出	`console.log()`
变量	`let`
常量	`const`
条件	`if...else`
多分支	`switch`
循环	`for`
循环	`while`
函数	`function`
箭头函数	`() => {}`
数组	`[]`
对象	`{}`
数组长度	`.length`
添加数组元素	`.push()`
遍历数组	`for...of`
查找 DOM	`querySelector()`
修改文字	`textContent`
添加事件	`addEventListener()`
输入框内容	`.value`
阻止默认行为	`preventDefault()`
数组转换	`map()`
数组筛选	`filter()`
查找元素	`find()`
JSON → 对象	`JSON.parse()`
对象 → JSON	`JSON.stringify()`

总结

JavaScript 基础学习可以分成三个阶段。

第一阶段：

text

变量
数据类型
运算符
条件判断
循环
函数

这是 JavaScript 作为编程语言本身的基础。

第二阶段：

text

数组
对象
数组方法
解构
展开运算符

这是处理数据时非常常用的内容。

第三阶段：

text

DOM
事件
表单
异步请求

这是 JavaScript 真正和网页结合起来的部分。

对于前端学习来说，最重要的一条路线可以理解为：

text

JavaScript 基础语法
       ↓
数组与对象
       ↓
函数
       ↓
DOM
       ↓
事件
       ↓
异步编程
       ↓
前端框架

初学阶段建议优先掌握：

text

const / let

string
number
boolean

if
for

function
箭头函数

数组
对象

map
filter

querySelector
textContent
value

addEventListener

其中：

text

数组 + 对象 + 函数 + DOM + 事件

是 JavaScript 前端开发中非常核心的一组基础知识。

JavaScript 基础语法 ​

1. JavaScript 的使用方式 ​

2. 行内 JavaScript ​

3. 内部 JavaScript ​

4. 外部 JavaScript ​

输出 ​

5. console.log() ​

6. alert() ​

变量 ​

7. let ​

8. const ​

9. var ​

数据类型 ​

10. Number ​

11. String ​

12. Boolean ​

13. undefined ​

14. null ​

15. typeof ​

字符串 ​

16. 字符串拼接 ​

17. 模板字符串 ​

18. 字符串长度 ​

19. 常见字符串方法 ​

运算符 ​

20. 算术运算符 ​

21. 自增和自减 ​

22. 赋值运算符 ​

比较运算符 ​

23. 大小比较 ​

24. == 和 === ​

25. 不等于 ​

逻辑运算符 ​

26. && ​

27. || ​

28. ! ​

条件判断 ​

29. if ​

30. if...else ​

31. if...else if...else ​

32. 三元运算符 ​

switch ​

33. switch 语句 ​

循环 ​

34. for 循环 ​

35. while 循环 ​

36. break ​

37. continue ​

数组 ​

38. 创建数组 ​

39. 访问数组元素 ​

40. 数组长度 ​

41. push() ​

42. pop() ​

43. unshift() ​

44. shift() ​

45. 遍历数组 ​

46. for...of ​

47. forEach() ​

对象 ​

48. 创建对象 ​

49. 访问对象属性 ​

50. 修改对象属性 ​

51. 添加属性 ​

52. 删除属性 ​

函数 ​

53. 定义函数 ​

54. 函数参数 ​

55. return ​

56. 函数表达式 ​

箭头函数 ​

57. 基本语法 ​

58. 带参数的箭头函数 ​

作用域 ​

59. 全局作用域 ​

60. 块级作用域 ​

DOM ​

61. 什么是 DOM ​

62. querySelector() ​

63. 修改文字 ​

JavaScript 基础语法

1. JavaScript 的使用方式

2. 行内 JavaScript

3. 内部 JavaScript

4. 外部 JavaScript

输出

5. console.log()

6. alert()

变量

7. let

8. const

9. var

数据类型

10. Number

11. String

12. Boolean

13. undefined

14. null

15. typeof

字符串

16. 字符串拼接

17. 模板字符串

18. 字符串长度

19. 常见字符串方法

运算符

20. 算术运算符

21. 自增和自减

22. 赋值运算符

比较运算符

23. 大小比较

24. == 和 ===

25. 不等于

逻辑运算符

26. &&

27. ||

28. !

条件判断

29. if

30. if...else

31. if...else if...else

32. 三元运算符

switch

33. switch 语句

循环

34. for 循环

35. while 循环

36. break

37. continue

数组

38. 创建数组

39. 访问数组元素

40. 数组长度

41. push()

42. pop()

43. unshift()

44. shift()

45. 遍历数组

46. for...of

47. forEach()

对象

48. 创建对象

49. 访问对象属性

50. 修改对象属性

51. 添加属性

52. 删除属性

函数

53. 定义函数

54. 函数参数

55. return

56. 函数表达式

箭头函数

57. 基本语法

58. 带参数的箭头函数

作用域

59. 全局作用域

60. 块级作用域

DOM

61. 什么是 DOM

62. querySelector()

63. 修改文字