JavaScript 学习总结
一、底子语法1. 变量声明
[*]var：ES5 中用于声明变量，有函数作用域和变量提拔现象。变量提拔意味着变量可以在声明之前使用，但其值为 undefined。
console.log(a); // 输出: undefined
var a = 10;
[*]let：ES6 引入，具有块级作用域。在块级作用域内声明的 let 变量，只在该块级作用域内有效。
{
let b = 20;
console.log(b); // 输出: 20
}
console.log(b); // 报错: b is not defined
[*]const：同样是 ES6 引入，用于声明常量。一旦声明，其值不能被重新赋值，且也具有块级作用域。
const PI = 3.14159;
PI = 3.14; // 报错: Assignment to constant variable. 2. 注释
[*]单行注释：使用 // 开头，注释本行后面的内容。
// 这是一个单行注释
let num = 10;
[*]多行注释：使用 /* */ 包裹注释内容，可以超过多行。
/*
这是一个
多行注释
*/
function add(a, b) {
return a + b;
} 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：遍历对象的可罗列属性。
for (let i = 0; i < 5; i++) {
console.log(i);
}
const obj = { a: 1, b: 2 };
for (let key in obj) {
console.log(key, obj);
}
[*] 算术运算符：+、-、*、/、%、**（幂运算）。
[*] 比较运算符：==（值相等）、===（值和类型相等）、!=、!==、>、<、>=、<=。
[*] 逻辑运算符：&&（与）、||（或）、!（非）。
[*] 赋值运算符：=、+=、-=、*=、/=。
[*] 三元运算符：condition ? expr1 : expr2。
let a = 10;
let b = 5;
console.log(a > b && a !== 10); // false
二、数据类型
1. 基本数据类型
[*]undefined：表示变量已声明但未赋值。
let var1;
console.log(var1); // 输出: undefined
[*]null：表示一个空值，通常用于表示有意的空值。
let var2 = null;
console.log(var2); // 输出: null
[*]boolean：有两个值 true 和 false，用于逻辑判断。
let isDone = true;
if (isDone) {
console.log('任务完成');
}
[*]number：表示整数和浮点数。
let num1 = 10;
let num2 = 3.14;
[*]string：用于表示文本数据，可使用单引号、双引号或反引号（模板字面量）。
let str1 = 'Hello';
let str2 = "World";
let str3 = `Hello, ${str2}`; // 模板字面量，可以嵌入表达式
console.log(str3); // 输出: Hello, World
[*]symbol：ES6 新增，是一种唯一的、不可变的数据类型，常用于对象属性键，以避免属性名冲突。
let sym1 = Symbol('unique');
let sym2 = Symbol('unique');
console.log(sym1 === sym2); // 输出: false
[*]bigint：ES2020 新增，用于表示任意精度的整数，办理了 number 类型的安全整数范围限制标题。
let big1 = BigInt(9007199254740991);
let big2 = BigInt('9007199254740991'); 2. 引用数据类型
[*]Object：是一种无序的键值对集合，可以存储各种类型的数据。对象，如 {}、[]、function。
let person = {
name: 'John',
age: 30,
address: {
city: 'New York',
country: 'USA'
},
hobbies: ['reading', 'traveling']
};
console.log(person.name); // 输出: John
[*]Array：是一种有序的、可变的列表，可以存储差异类型的数据。
let numbers = ;
numbers.push(6); // 在数组末尾添加元素
console.log(numbers); // 输出: 3
[*]Function：是一种特殊的对象，用于封装可重用的代码块。函数可以作为值传递、存储在变量中、作为参数传递给其他函数等。
function add(a, b) {
return a + b;
}
let sum = add(3, 5);
console.log(sum); // 输出: 8
三、函数
1. 函数定义
[*]函数声明：使用 function 关键字定义函数，具有函数提拔特性。
function multiply(a, b) {
return a * b;
}
let result1 = multiply(4, 5);
console.log(result1); // 输出: 20
[*]函数表达式：将函数赋值给一个变量，没有函数提拔特性。
let divide = function (a, b) {
return a / b;
};
let result2 = divide(10, 2);
console.log(result2); // 输出: 5
[*]箭头函数：ES6 引入的简洁函数定义方式，没有本身的 this、arguments、super 和 new.target。
let square = (x) => x * x;
let result3 = square(3);
console.log(result3); // 输出: 9
// 多个参数
let addNumbers = (a, b) => a + b;
// 无参数
let greet = () => console.log('Hello'); 2. 函数参数
[*]默认参数：在函数定义时可以为参数指定默认值。
function greet(name = 'Guest') {
console.log(`Hello, ${name}`);
}
greet(); // 输出: Hello, Guest
greet('John'); // 输出: Hello, John
[*]剩余参数：使用 ... 语法将多个参数网络到一个数组中。
function sumAll(...numbers) {
let total = 0;
for (let num of numbers) {
total += num;
}
return total;
}
let sumResult = sumAll(1, 2, 3, 4, 5);
console.log(sumResult); // 输出: 15 3. 函数作用域和闭包
[*]函数作用域：函数内部可以访问外部作用域的变量，而外部作用域不能访问函数内部的变量。
let outerVar = 10;
function outerFunction() {
let innerVar = 20;
console.log(outerVar); // 可以访问外部变量
console.log(innerVar); // 可以访问内部变量
}
outerFunction();
console.log(innerVar); // 报错: innerVar is not defined
[*]闭包：函数可以记住并访问其所在的词法作用域，即使在函数执行完毕后。闭包常用于创建私有变量和模仿面向对象的封装。
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}
const counter = outer();
counter(); // 1
counter(); // 2
四、对象和数组
1. 对象创建
[*]对象字面量：最常用的创建对象的方式，使用花括号 {} 定义对象的属性和方法。
let car = {
brand: 'Toyota',
model: 'Corolla',
year: 2020,
start: function () {
console.log('The car has started.');
}
};
[*]new Object()：使用 Object 构造函数创建对象，然后逐个添加属性。
let person = new Object();
person.name = 'Alice';
person.age = 30; 2. 属性访问
[*]点表示法：使用点号 . 访问对象的属性。
console.log(car.brand); // 输出: Toyota
[*]方括号表示法：使用方括号 [] 访问对象的属性，实用于属性名是变量或包含特殊字符的环境。
let propName ='model';
console.log(car); // 输出: Corolla 3. 继续
[*]传统原型链继续：通过构造函数和原型链实现继续。
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function () {
console.log(this.name +'makes a sound.');
};
function Dog(name, breed) {
Animal.call(this, name);
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
let myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // 输出: Buddy makes a sound.
[*]ES6 class 继续：使用 class 和 extends 关键字实现继续，语法更简洁。
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name +'makes a sound.');
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
}
let myDog2 = new Dog('Charlie', 'Labrador');
myDog2.speak(); // 输出: Charlie makes a sound. 4. 数组
[*] 定义：const arr = 。
[*] 常用方法：
[*] push()、pop()、shift()、unshift()。
[*] map()、filter()、reduce()。
[*] slice()、splice()。
const numbers = ;
const doubled = numbers.map((n) => n * 2); // 五、异步编程
1 回调函数
[*] 异步操纵完成后执行的函数。
setTimeout(function () {
console.log('First timeout');
setTimeout(function () {
console.log('Second timeout');
}, 1000);
}, 1000);
[*]回调地狱：当多个异步操纵嵌套时，代码会变得难以阅读和维护，形成回调地狱。
2. Promise
[*]基本概念：Promise 是一个表示异步操纵最终完成（或失败）及其结果值的对象。它有三种状态：pending（举行中）、fulfilled（已成功）和 rejected（已失败）。
[*] 方法：then()、catch()、finally()。
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Success!');
}, 1000);
});
promise.then(value => {
console.log(value);
}).catch(error => {
console.error(error);
});
[*]链式调用：通过 .then() 方法可以将多个 Promise 操纵链接起来，办理回调地狱标题。
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Success"), 1000);
});
promise.then((result) => console.log(result));
3. async/await
[*]基本概念：async 函数是一种异步函数，它返回一个 Promise 对象。await 只能在 async 函数内部使用，用于停息异步函数的执行，直到 Promise 被办理（fulfilled）或被拒绝（rejected）。
[*] 基于 Promise 的语法糖，使异步代码看起来像同步代码。
async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
} 六、DOM 操纵
1 选择元素
[*] document.getElementById()
[*] document.querySelector()
[*] document.querySelectorAll()
const element = document.querySelector("#myElement"); 2 修改元素
[*] 修改内容：element.textContent、element.innerHTML。
[*] 修改样式：element.style.property = value。
[*] 修改属性：element.setAttribute()。
element.textContent = "Hello, World!";
element.style.color = "red"; 3 变乱处理
[*] 添加变乱监听器：element.addEventListener()。
let button = document.getElementById('myButton');
button.addEventListener('click', function () {
console.log('Button clicked!');
}); 4.常见变乱类型
[*]鼠标变乱：如 click（点击）、dblclick（双击）、mouseover（鼠标悬停）、mouseout（鼠标离开）、mousedown（鼠标按下）、mouseup（鼠标释放）等。
[*]键盘变乱：如 keydown（键盘按下）、keyup（键盘释放）、keypress（键盘按下并产生字符）等。
[*]表单变乱：如 submit（表单提交）、input（输入框内容改变）、change（表单元素值改变）等。
let form = document.getElementById('myForm');
form.addEventListener('submit', function (event) {
event.preventDefault(); // 阻止表单默认提交行为
console.log('Form submitted');
}); 七、ES6+ 新特性
1 解构赋值
[*] 从数组或对象中提取值。
const = ;
const { name, age } = { name: "Alice", age: 25 }; 2 模板字符串
[*] 使用反引号（``）定义字符串，支持多行和嵌入表达式。
const name = "Alice";
console.log(`Hello, ${name}!`); 3 模块化
[*] 使用 import 和 export 导入和导出模块。
// math.js
export const add = (a, b) => a + b;
// main.js
import { add } from "./math.js";
console.log(add(2, 3)); // 5 八、 常用 API__内置函数或方法，
1 数组方法
数组是 JavaScript 中最常用的数据结构之一，以下是一些常用的数组方法：
map()：对数组中的每个元素执行函数，并返回新数组。
const numbers = ;
const doubled = numbers.map((n) => n * 2); // filter()：过滤数组，返回满足条件的元素构成的新数组。
const evens = numbers.filter((n) => n % 2 === 0); // reduce()：将数组元素累积为一个值。
const sum = numbers.reduce((acc, n) => acc + n, 0); // 6 find()：返回数组中第一个满足条件的元素。
const firstEven = numbers.find((n) => n % 2 === 0); // 2 some()：检查数组中是否有元素满足条件。
const hasEven = numbers.some((n) => n % 2 === 0); // true every()：检查数组中的所有元素是否都满足条件。
const allEven = numbers.every((n) => n % 2 === 0); // false 2.字符串 API
字符串是 JavaScript 中的基本数据类型之一，以下是一些常用的字符串方法：
split()：将字符串按指定分隔符拆分为数组。
const str = "hello,world";
const arr = str.split(","); // ["hello", "world"] join()：将数组元素按指定分隔符拼接为字符串。
const newStr = arr.join("-"); // "hello-world" substring()：提取字符串的子串。
const sub = str.substring(0, 5); // "hello" replace()：替换字符串中的内容。
const newStr = str.replace("world", "JavaScript"); // "hello,JavaScript" toUpperCase()：将字符串转换为大写。
const upper = str.toUpperCase(); // "HELLO,WORLD" toLowerCase()：将字符串转换为小写。
const lower = str.toLowerCase(); // "hello,world" 3. 对象 API
对象是 JavaScript 中的核心数据结构，以下是一些常用的对象方法：
Object.keys()：返回对象的所有键构成的数组。
const obj = { a: 1, b: 2 };
const keys = Object.keys(obj); // ["a", "b"] Object.values()：返回对象的所有值构成的数组。
const values = Object.values(obj); // Object.entries()：返回对象的键值对构成的数组。
const entries = Object.entries(obj); // [["a", 1], ["b", 2]] Object.assign()：将一个或多个对象的属性复制到目标对象。
const target = { a: 1 };
const source = { b: 2 };
const result = Object.assign(target, source); // { a: 1, b: 2 } 4. 日期 API
JavaScript 提供了 Date 对象来处理日期和时间。
new Date()：创建日期对象。
const now = new Date(); // 当前时间 getFullYear()：获取年份。
const year = now.getFullYear(); // 2025 getMonth()：获取月份（0-11）。
const month = now.getMonth(); // 1 (表示 2 月) getDate()：获取日期（1-31）。
const date = now.getDate(); // 12 getHours()：获取小时（0-23）。
const hours = now.getHours(); // 14 5.网络请求 API
JavaScript 提供了 fetch API 用于发送网络请求。
fetch()：发送 HTTP 请求并获取响应。
fetch("https://api.example.com/data")
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error)); 6. 浏览器环境 API
JavaScript 可以通过浏览器提供的 API 操纵 DOM 和浏览器环境。
document.querySelector()：选择 DOM 元素。
const element = document.querySelector("#myElement"); element.addEventListener()：为 DOM 元素添加变乱监听器。
element.addEventListener("click", () => {
console.log("Element clicked");
}); localStorage：在浏览器中存储数据。
localStorage.setItem("name", "Alice");
const name = localStorage.getItem("name"); // "Alice" sessionStorage：在浏览器会话中存储数据。
sessionStorage.setItem("token", "12345");
const token = sessionStorage.getItem("token"); // "12345" 7. 数学 API
JavaScript 提供了 Math 对象来处理数学运算。
Math.random()：天生 0 到 1 之间的随机数。
const random = Math.random(); // 0.123456789 Math.floor()：向下取整。
const num = Math.floor(3.7); // 3 Math.ceil()：向上取整。
const num = Math.ceil(3.2); // 4 Math.round()：四舍五入。
const num = Math.round(3.5); // 4 九、最佳实践
1 代码风格
[*] 使用 const 和 let 取代 var。
[*] 使用箭头函数简化代码。
[*] 使用模板字符串取代字符串拼接。
2 错误处理
[*] 使用 try...catch 捕获异常。
try {
// 可能出错的代码
} catch (error) {
console.error(error);
} 3 性能优化
[*] 避免全局变量。
[*] 使用变乱委托减少变乱监听器数目。
[*] 使用 requestAnimationFrame 优化动画。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]