JavaScript 学习总结

一、底子语法

1. 变量声明

• var：ES5 中用于声明变量，有函数作用域和变量提拔现象。变量提拔意味着变量可以在声明之前使用，但其值为 undefined。
  

1. console.log(a); // 输出: undefined
2. var a = 10;

复制代码

• let：ES6 引入，具有块级作用域。在块级作用域内声明的 let 变量，只在该块级作用域内有效。
  

1. {
2.     let b = 20;
3.     console.log(b); // 输出: 20
4. }
5. console.log(b); // 报错: b is not defined

复制代码

• const：同样是 ES6 引入，用于声明常量。一旦声明，其值不能被重新赋值，且也具有块级作用域。
  

1. const PI = 3.14159;
2. PI = 3.14; // 报错: Assignment to constant variable.

复制代码

2. 注释

• 单行注释：使用 // 开头，注释本行后面的内容。
  

1. // 这是一个单行注释
2. let num = 10;

复制代码

• 多行注释：使用 /* */ 包裹注释内容，可以超过多行。
  

1. /*
2. 这是一个
3. 多行注释
4. */
5. function add(a, b) {
6.     return a + b;
7. }

复制代码

3. 语句与 运算符

• 条件语句：
  
  
  
  • if、else、else if。
    
  • switch：多分支选择。
    
  
  
• 循环语句：
  
  
  
  • for：for (let i = 0; i < 5; i++) {}。
    
  • while：while (condition) {}。
    
  • do...while：do {} while (condition)。
    
  • for...of：遍历可迭代对象（如数组）。
    
  • for...in：遍历对象的可罗列属性。
    
  
  

1. for (let i = 0; i < 5; i++) {
2.   console.log(i);
3. }
5. const obj = { a: 1, b: 2 };
6. for (let key in obj) {
7.   console.log(key, obj[key]);
8. }

复制代码

• 算术运算符：+、-、*、/、%、**（幂运算）。
  
• 比较运算符：==（值相等）、===（值和类型相等）、!=、!==、>、<、>=、<=。
  
• 逻辑运算符：&&（与）、||（或）、!（非）。
  
• 赋值运算符：=、+=、-=、*=、/=。
  
• 三元运算符：condition ? expr1 : expr2。
  

1. let a = 10;
2. let b = 5;
3. console.log(a > b && a !== 10); // false

复制代码

 
二、数据类型

1. 基本数据类型

• undefined：表示变量已声明但未赋值。
  

1. let var1;
2. console.log(var1); // 输出: undefined

复制代码

• null：表示一个空值，通常用于表示有意的空值。
  

1. let var2 = null;
2. console.log(var2); // 输出: null

复制代码

• boolean：有两个值 true 和 false，用于逻辑判断。
  

1. let isDone = true;
2. if (isDone) {
3.     console.log('任务完成');
4. }

复制代码

• number：表示整数和浮点数。
  

1. let num1 = 10;
2. let num2 = 3.14;

复制代码

• string：用于表示文本数据，可使用单引号、双引号或反引号（模板字面量）。
  

1. let str1 = 'Hello';
2. let str2 = "World";
3. let str3 = `Hello, ${str2}`; // 模板字面量，可以嵌入表达式
4. console.log(str3); // 输出: Hello, World

复制代码

• symbol：ES6 新增，是一种唯一的、不可变的数据类型，常用于对象属性键，以避免属性名冲突。
  

1. let sym1 = Symbol('unique');
2. let sym2 = Symbol('unique');
3. console.log(sym1 === sym2); // 输出: false

复制代码

• bigint：ES2020 新增，用于表示任意精度的整数，办理了 number 类型的安全整数范围限制标题。
  

1. let big1 = BigInt(9007199254740991);
2. let big2 = BigInt('9007199254740991');

复制代码

2. 引用数据类型

• Object：是一种无序的键值对集合，可以存储各种类型的数据。对象，如 {}、[]、function。
  

1. let person = {
2.     name: 'John',
3.     age: 30,
4.     address: {
5.         city: 'New York',
6.         country: 'USA'
7.     },
8.     hobbies: ['reading', 'traveling']
9. };
10. console.log(person.name); // 输出: John

复制代码

• Array：是一种有序的、可变的列表，可以存储差异类型的数据。
  

1. let numbers = [1, 2, 3, 4, 5];
2. numbers.push(6); // 在数组末尾添加元素
3. console.log(numbers[2]); // 输出: 3

复制代码

• Function：是一种特殊的对象，用于封装可重用的代码块。函数可以作为值传递、存储在变量中、作为参数传递给其他函数等。
  

1. function add(a, b) {
2.     return a + b;
3. }
4. let sum = add(3, 5);
5. console.log(sum); // 输出: 8

复制代码

 
三、函数

1. 函数定义

• 函数声明：使用 function 关键字定义函数，具有函数提拔特性。
  

1. function multiply(a, b) {
2.     return a * b;
3. }
4. let result1 = multiply(4, 5);
5. console.log(result1); // 输出: 20

复制代码

• 函数表达式：将函数赋值给一个变量，没有函数提拔特性。
  

1. let divide = function (a, b) {
2.     return a / b;
3. };
4. let result2 = divide(10, 2);
5. console.log(result2); // 输出: 5

复制代码

• 箭头函数：ES6 引入的简洁函数定义方式，没有本身的 this、arguments、super 和 new.target。
  

1. let square = (x) => x * x;
2. let result3 = square(3);
3. console.log(result3); // 输出: 9
5. // 多个参数
6. let addNumbers = (a, b) => a + b;
8. // 无参数
9. let greet = () => console.log('Hello');

复制代码

2. 函数参数

• 默认参数：在函数定义时可以为参数指定默认值。
  

1. function greet(name = 'Guest') {
2.     console.log(`Hello, ${name}`);
3. }
4. greet(); // 输出: Hello, Guest
5. greet('John'); // 输出: Hello, John

复制代码

• 剩余参数：使用 ... 语法将多个参数网络到一个数组中。
  

1. function sumAll(...numbers) {
2.     let total = 0;
3.     for (let num of numbers) {
4.         total += num;
5.     }
6.     return total;
7. }
8. let sumResult = sumAll(1, 2, 3, 4, 5);
9. console.log(sumResult); // 输出: 15

复制代码

3. 函数作用域和闭包

• 函数作用域：函数内部可以访问外部作用域的变量，而外部作用域不能访问函数内部的变量。
  

1. let outerVar = 10;
2. function outerFunction() {
3.     let innerVar = 20;
4.     console.log(outerVar); // 可以访问外部变量
5.     console.log(innerVar); // 可以访问内部变量
6. }
7. outerFunction();
8. console.log(innerVar); // 报错: innerVar is not defined

复制代码

• 闭包：函数可以记住并访问其所在的词法作用域，即使在函数执行完毕后。闭包常用于创建私有变量和模仿面向对象的封装。
  

1. function outer() {
2.   let count = 0;
3.   return function inner() {
4.     count++;
5.     console.log(count);
6.   };
7. }
9. const counter = outer();
10. counter(); // 1
11. counter(); // 2

复制代码

 
四、对象和数组

1. 对象创建

• 对象字面量：最常用的创建对象的方式，使用花括号 {} 定义对象的属性和方法。
  

1. let car = {
2.     brand: 'Toyota',
3.     model: 'Corolla',
4.     year: 2020,
5.     start: function () {
6.         console.log('The car has started.');
7.     }
8. };

复制代码

• new Object()：使用 Object 构造函数创建对象，然后逐个添加属性。
  

1. let person = new Object();
2. person.name = 'Alice';
3. person.age = 30;

复制代码

2. 属性访问

• 点表示法：使用点号 . 访问对象的属性。
  

1. console.log(car.brand); // 输出: Toyota

复制代码

• 方括号表示法：使用方括号 [] 访问对象的属性，实用于属性名是变量或包含特殊字符的环境。
  

1. let propName ='model';
2. console.log(car[propName]); // 输出: Corolla

复制代码

3. 继续

• 传统原型链继续：通过构造函数和原型链实现继续。
  

1. function Animal(name) {
2.     this.name = name;
3. }
4. Animal.prototype.speak = function () {
5.     console.log(this.name +'makes a sound.');
6. };
7. function Dog(name, breed) {
8.     Animal.call(this, name);
9.     this.breed = breed;
10. }
11. Dog.prototype = Object.create(Animal.prototype);
12. Dog.prototype.constructor = Dog;
13. let myDog = new Dog('Buddy', 'Golden Retriever');
14. myDog.speak(); // 输出: Buddy makes a sound.

复制代码

• ES6 class 继续：使用 class 和 extends 关键字实现继续，语法更简洁。
  

1. class Animal {
2.     constructor(name) {
3.         this.name = name;
4.     }
5.     speak() {
6.         console.log(this.name +'makes a sound.');
7.     }
8. }
9. class Dog extends Animal {
10.     constructor(name, breed) {
11.         super(name);
12.         this.breed = breed;
13.     }
14. }
15. let myDog2 = new Dog('Charlie', 'Labrador');
16. myDog2.speak(); // 输出: Charlie makes a sound.

复制代码

4. 数组

• 定义：const arr = [1, 2, 3]。
  
• 常用方法：
  
  
  
  • push()、pop()、shift()、unshift()。
    
  • map()、filter()、reduce()。
    
  • slice()、splice()。
    
  
  

1. const numbers = [1, 2, 3];
2. const doubled = numbers.map((n) => n * 2); // [2, 4, 6]

复制代码

五、异步编程

1 回调函数

• 异步操纵完成后执行的函数。
  

1. setTimeout(function () {
2.     console.log('First timeout');
3.     setTimeout(function () {
4.         console.log('Second timeout');
5.     }, 1000);
6. }, 1000);

复制代码

• 回调地狱：当多个异步操纵嵌套时，代码会变得难以阅读和维护，形成回调地狱。
  

2. Promise

• 基本概念：Promise 是一个表示异步操纵最终完成（或失败）及其结果值的对象。它有三种状态：pending（举行中）、fulfilled（已成功）和 rejected（已失败）。
  
• 方法：then()、catch()、finally()。
  

1. let promise = new Promise((resolve, reject) => {
2.     setTimeout(() => {
3.         resolve('Success!');
4.     }, 1000);
5. });
6. promise.then(value => {
7.     console.log(value);
8. }).catch(error => {
9.     console.error(error);
10. });

复制代码

• 链式调用：通过 .then() 方法可以将多个 Promise 操纵链接起来，办理回调地狱标题。
  

1. const promise = new Promise((resolve, reject) => {
2.   setTimeout(() => resolve("Success"), 1000);
3. });
5. promise.then((result) => console.log(result));

复制代码

3. async/await

• 基本概念：async 函数是一种异步函数，它返回一个 Promise 对象。await 只能在 async 函数内部使用，用于停息异步函数的执行，直到 Promise 被办理（fulfilled）或被拒绝（rejected）。
  
• 基于 Promise 的语法糖，使异步代码看起来像同步代码。
  

1. async function fetchData() {
2.   const response = await fetch("https://api.example.com/data");
3.   const data = await response.json();
4.   console.log(data);
5. }

复制代码

六、DOM 操纵

1 选择元素

• document.getElementById()
  
• document.querySelector()
  
• document.querySelectorAll()
  

1. const element = document.querySelector("#myElement");

复制代码

2 修改元素

• 修改内容：element.textContent、element.innerHTML。
  
• 修改样式：element.style.property = value。
  
• 修改属性：element.setAttribute()。
  

1. element.textContent = "Hello, World!";
2. element.style.color = "red";

复制代码

3 变乱处理

• 添加变乱监听器：element.addEventListener()。
  

1. let button = document.getElementById('myButton');
2. button.addEventListener('click', function () {
3.     console.log('Button clicked!');
4. });

复制代码

4.常见变乱类型

• 鼠标变乱：如 click（点击）、dblclick（双击）、mouseover（鼠标悬停）、mouseout（鼠标离开）、mousedown（鼠标按下）、mouseup（鼠标释放）等。
  
• 键盘变乱：如 keydown（键盘按下）、keyup（键盘释放）、keypress（键盘按下并产生字符）等。
  
• 表单变乱：如 submit（表单提交）、input（输入框内容改变）、change（表单元素值改变）等。
  

1. let form = document.getElementById('myForm');
2. form.addEventListener('submit', function (event) {
3.     event.preventDefault(); // 阻止表单默认提交行为
4.     console.log('Form submitted');
5. });

复制代码

七、ES6+ 新特性

1 解构赋值

• 从数组或对象中提取值。
  

1. const [a, b] = [1, 2];
2. const { name, age } = { name: "Alice", age: 25 };

复制代码

2 模板字符串

• 使用反引号（``）定义字符串，支持多行和嵌入表达式。
  

1. const name = "Alice";
2. console.log(`Hello, ${name}!`);

复制代码

3 模块化

• 使用 import 和 export 导入和导出模块。
  

1. // math.js
2. export const add = (a, b) => a + b;
4. // main.js
5. import { add } from "./math.js";
6. console.log(add(2, 3)); // 5

复制代码

八、 常用 API__内置函数或方法，

1 数组方法

数组是 JavaScript 中最常用的数据结构之一，以下是一些常用的数组方法：
map()：对数组中的每个元素执行函数，并返回新数组。

1. const numbers = [1, 2, 3];
2. const doubled = numbers.map((n) => n * 2); // [2, 4, 6]

复制代码

filter()：过滤数组，返回满足条件的元素构成的新数组。

1. const evens = numbers.filter((n) => n % 2 === 0); // [2]

复制代码

reduce()：将数组元素累积为一个值。

1. const sum = numbers.reduce((acc, n) => acc + n, 0); // 6

复制代码

find()：返回数组中第一个满足条件的元素。

1. const firstEven = numbers.find((n) => n % 2 === 0); // 2

复制代码

 some()：检查数组中是否有元素满足条件。

1. const hasEven = numbers.some((n) => n % 2 === 0); // true

复制代码

 every()：检查数组中的所有元素是否都满足条件。

1. const allEven = numbers.every((n) => n % 2 === 0); // false

复制代码

2.字符串 API

字符串是 JavaScript 中的基本数据类型之一，以下是一些常用的字符串方法：
split()：将字符串按指定分隔符拆分为数组。

1. const str = "hello,world";
2. const arr = str.split(","); // ["hello", "world"]

复制代码

join()：将数组元素按指定分隔符拼接为字符串。

1. const newStr = arr.join("-"); // "hello-world"

复制代码

substring()：提取字符串的子串。

1. const sub = str.substring(0, 5); // "hello"

复制代码

replace()：替换字符串中的内容。

1. const newStr = str.replace("world", "JavaScript"); // "hello,JavaScript"

复制代码

 toUpperCase()：将字符串转换为大写。

1. const upper = str.toUpperCase(); // "HELLO,WORLD"

复制代码

toLowerCase()：将字符串转换为小写。

1. const lower = str.toLowerCase(); // "hello,world"

复制代码

3. 对象 API

对象是 JavaScript 中的核心数据结构，以下是一些常用的对象方法：
Object.keys()：返回对象的所有键构成的数组。

1. const obj = { a: 1, b: 2 };
2. const keys = Object.keys(obj); // ["a", "b"]

复制代码

Object.values()：返回对象的所有值构成的数组。

1. const values = Object.values(obj); // [1, 2]

复制代码

Object.entries()：返回对象的键值对构成的数组。

1. const entries = Object.entries(obj); // [["a", 1], ["b", 2]]

复制代码

 Object.assign()：将一个或多个对象的属性复制到目标对象。

1. const target = { a: 1 };
2. const source = { b: 2 };
3. const result = Object.assign(target, source); // { a: 1, b: 2 }

复制代码

4. 日期 API

JavaScript 提供了 Date 对象来处理日期和时间。
 new Date()：创建日期对象。

1. const now = new Date(); // 当前时间

复制代码

getFullYear()：获取年份。

1. const year = now.getFullYear(); // 2025

复制代码

 getMonth()：获取月份（0-11）。

1. const month = now.getMonth(); // 1 (表示 2 月)

复制代码

getDate()：获取日期（1-31）。

1. const date = now.getDate(); // 12

复制代码

getHours()：获取小时（0-23）。

1. const hours = now.getHours(); // 14

复制代码

5.网络请求 API

JavaScript 提供了 fetch API 用于发送网络请求。
fetch()：发送 HTTP 请求并获取响应。

1. fetch("https://api.example.com/data")
2.   .then((response) => response.json())
3.   .then((data) => console.log(data))
4.   .catch((error) => console.error(error));

复制代码

6. 浏览器环境 API

JavaScript 可以通过浏览器提供的 API 操纵 DOM 和浏览器环境。
 document.querySelector()：选择 DOM 元素。

1. const element = document.querySelector("#myElement");

复制代码

 element.addEventListener()：为 DOM 元素添加变乱监听器。

1. element.addEventListener("click", () => {
2.   console.log("Element clicked");
3. });

复制代码

localStorage：在浏览器中存储数据。

1. localStorage.setItem("name", "Alice");
2. const name = localStorage.getItem("name"); // "Alice"

复制代码

 sessionStorage：在浏览器会话中存储数据。

1. sessionStorage.setItem("token", "12345");
2. const token = sessionStorage.getItem("token"); // "12345"

复制代码

7. 数学 API

JavaScript 提供了 Math 对象来处理数学运算。
Math.random()：天生 0 到 1 之间的随机数。

1. const random = Math.random(); // 0.123456789

复制代码

 Math.floor()：向下取整。

1. const num = Math.floor(3.7); // 3

复制代码

 Math.ceil()：向上取整。

1. const num = Math.ceil(3.2); // 4

复制代码

 Math.round()：四舍五入。

1. const num = Math.round(3.5); // 4

复制代码

九、最佳实践

1 代码风格

• 使用 const 和 let 取代 var。
  
• 使用箭头函数简化代码。
  
• 使用模板字符串取代字符串拼接。
  

2 错误处理

• 使用 try...catch 捕获异常。
  

1. try {
2.   // 可能出错的代码
3. } catch (error) {
4.   console.error(error);
5. }

复制代码

3 性能优化

• 避免全局变量。
  
• 使用变乱委托减少变乱监听器数目。
  
• 使用 requestAnimationFrame 优化动画。
  

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。