前端 web 7h内入门-优快云博客

本文链接：https://blog.youkuaiyun.com/King_model/article/details/148052283

以下是 JavaScript 的核心语法知识点分类总结，内容涵盖基础语法、变量与数据类型、运算符、流程控制、函数、对象与数组、面向对象编程、ES6+ 新特性等，以分点形式呈现：

一、基础语法

1. 脚本引入方式

内部脚本：通过 <script> 标签嵌入 HTML 文档中。

<script>
  console.log("Hello, JavaScript!");
</script>

外部脚本：通过 <script src="文件路径.js"></script> 引入外部 JS 文件。
```
<script src="app.js"></script>
```

2. 注释

单行注释：// 这是单行注释
多行注释：/* 这是多行注释 */

二、变量与数据类型

1. 变量声明

var（函数作用域，存在变量提升，已逐步被淘汰）。
let（块级作用域，不存在变量提升）。
const（块级作用域，声明常量，值不可重新赋值）。

2. 数据类型

原始数据类型：
- Number：数值（整数、浮点数），如 10、3.14。
- String：字符串，用单引号或双引号包裹，如 "hello"。
- Boolean：布尔值，true 或 false。
- Null：表示空值，null（显式赋值）。
- Undefined：未初始化的变量，默认值为 undefined。
- Symbol（ES6+）：唯一标识符，如 const id = Symbol('id');。
引用数据类型：
- Object：对象（包括数组、函数、正则等），如 { name: "Alice" }。
- Array：数组，如 [1, 2, 3]。
- Function：函数，如 function add(a, b) { return a + b; }。

三、运算符

1. 算术运算符

+（加法/字符串拼接）、-（减法）、*（乘法）、/（除法）、%（取模）、++（自增）、--（自减）。

2. 比较运算符

==（松散相等，类型自动转换）、===（严格相等，类型和值均需相同）。
>、<、>=、<=（比较数值或字符编码）。

3. 逻辑运算符

&&（逻辑与，全真为真）、||（逻辑或，有真为真）、!（逻辑非，取反）。

4. 赋值运算符

=（基本赋值）、+=、-=、*=、/=、%=（复合赋值）。

5. 三元运算符

条件 ? 表达式1 : 表达式2，如 let age = 18; let status = age >= 18 ? "成年人" : "未成年人";。

四、流程控制

1. 条件语句

if...else：

let score = 85;
if (score >= 90) {
  console.log("优秀");
} else if (score >= 80) {
  console.log("良好");
} else {
  console.log("一般");
}

switch...case：

let day = 3;
switch (day) {
  case 1:
    console.log("星期一");
    break;
  case 2:
    console.log("星期二");
    break;
  default:
    console.log("其他");
}

2. 循环语句

for 循环：

for (let i = 0; i < 5; i++) {
  console.log(i); // 输出 0, 1, 2, 3, 4
}

while 循环：

let count = 0;
while (count < 3) {
  console.log(count); // 输出 0, 1, 2
  count++;
}

do...while 循环（至少执行一次）：

let x = 5;
do {
  console.log(x); // 输出 5
  x++;
} while (x < 5);

for...in 循环（遍历对象属性）：

const person = { name: "Bob", age: 30 };
for (const key in person) {
  console.log(key + ": " + person[key]); // 输出 "name: Bob", "age: 30"
}

for...of 循环（ES6+，遍历可迭代对象如数组、字符串）：

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item); // 输出 1, 2, 3
}

五、函数

1. 函数声明

function add(a, b) { // 函数声明式
  return a + b;
}

2. 函数表达式

const subtract = function (a, b) { // 函数表达式
  return a - b;
};

3. 箭头函数（ES6+）

const multiply = (a, b) => a * b; // 简洁语法，适用于非构造函数场景

4. 参数与作用域

默认参数（ES6+）：function greet(name = "Guest") { ... }。
剩余参数（ES6+）：function sum(...nums) { return nums.reduce((acc, cur) => acc + cur, 0); }。
作用域链：函数内部可访问外层作用域的变量（闭包基础）。

六、对象与数组

1. 对象操作

创建对象：

const obj = {
  name: "Alice",
  age: 25,
  sayHi() { // 对象方法
    console.log(`Hello, ${this.name}`);
  }
};

访问属性：obj.name 或 obj["age"]。
新增/修改属性：obj.gender = "female";。
删除属性：delete obj.age;。

2. 数组操作

创建数组：const arr = [1, "apple", true];（动态类型数组）。
常用方法：
- push()：末尾添加元素，返回新长度。
- pop()：删除末尾元素，返回删除值。
- shift()：删除开头元素，返回删除值。
- unshift()：开头添加元素，返回新长度。
- splice()：删除/替换/插入元素，返回删除的元素数组。
- slice()：截取数组片段，返回新数组（不修改原数组）。
- indexOf()：查找元素索引，不存在返回 -1。
- forEach()：遍历数组（ES5+）。
- map()：返回新数组（原数组元素映射后的值，ES5+）。
- filter()：过滤符合条件的元素（ES5+）。
- reduce()：累加数组元素（ES5+）。

七、面向对象编程（OOP）

1. 构造函数

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function () {
    console.log(`Hi, I'm ${this.name}`);
  };
}
const p = new Person("Charlie", 30); // 使用 new 关键字创建实例

2. 原型链（`prototype`）

通过原型为构造函数添加共享方法，避免重复创建函数：

Person.prototype.walk = function () {
  console.log(`${this.name} is walking`);
};

3. 类（ES6+）

class Animal {
  constructor(species) {
    this.species = species;
  }
  speak() { // 类方法
    console.log("Animal sound");
  }
}

class Dog extends Animal { // 继承
  constructor(name) {
    super("Dog"); // 调用父类构造函数
    this.name = name;
  }
  speak() { // 方法重写
    console.log("Woof!");
  }
}

八、ES6+ 新特性

1. 解构赋值

数组解构：

const [a, b, c] = [1, 2, 3]; // a=1, b=2, c=3

对象解构：

const { name, age } = { name: "David", age: 35 }; // name="David", age=35

2. 模板字符串

const user = "Eve";
const msg = `Hello, ${user}! You are ${age + 5} years old in 5 years.`; // 支持表达式插值

3. 模块化（`import/export`）

导出模块（module.js）：

export const PI = 3.14;
export function calculateArea(r) { return PI * r * r; }

导入模块（app.js）：

import { PI, calculateArea } from "./module.js";

4. `let`/`const` 块级作用域

解决 var 的作用域问题，避免变量提升带来的隐患。

5. 剩余参数与展开运算符

剩余参数：function fn(...args) { ... }（收集多余参数为数组）。

展开运算符：

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // 合并数组：[1, 2, 3, 4]

6. `Promise` 与异步编程

创建 Promise：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功"); // 或 reject("失败");
  }, 1000);
});

链式调用：

promise.then((result) => {
  console.log(result); // "成功"
}).catch((error) => {
  console.error(error);
});

7. `async/await`（ES2017）

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data"); // 等待异步操作
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error:", error);
  }
}

8. `Set` 和 `Map`（ES6+）

Set：存储唯一值的集合：

const set = new Set([1, 2, 2, 3]); // Set {1, 2, 3}

Map：键值对集合（键可为任意类型）：

const map = new Map();
map.set("name", "Frank").set(1, "one"); // 链式调用

九、其他重要语法

1. `this` 关键字

指向函数执行时的上下文（取决于调用方式）：
- 普通函数中：默认指向全局对象（浏览器为 window，严格模式为 undefined）。
- 方法中：指向所属对象。
- 箭头函数中：继承外层作用域的 this（常用于避免 this 指向混乱）。

2. `typeof` 运算符

检测变量类型，返回字符串（如 "number"、"string"、"object" 等），注意 typeof null 返回 "object"（历史遗留问题）。

3. 异常处理（`try...catch`）

try {
  // 可能抛出错误的代码
  throw new Error("自定义错误");
} catch (error) {
  console.error("捕获错误:", error.message); // 输出 "捕获错误: 自定义错误"
} finally {
  // 可选，无论是否出错都会执行
  console.log("执行清理操作");
}