JavaScript的进阶学习目标之一是掌握面向对象编程(OOP)思想和ES6+的新特性,以提升代码质量和可维护性。下面将详细介绍你提到的核心知识点。
1. ES6+ 新特性
1.1 解构赋值(Destructuring Assignment)
解构赋值是ES6引入的一种简洁的赋值语法,可以从数组或对象中提取值,并将其赋给变量。
-
数组解构:
const [a, b] = [1, 2];
console.log(a); // 输出 1
console.log(b); // 输出 2 -
对象解构:
const {name, age} = {name: 'Tom', age: 25};
console.log(name); // 输出 Tom
console.log(age); // 输出 25
解构赋值也支持嵌套解构和默认值:
const person = {name: 'Alice', address: {city: 'New York', zip: '10001'}};
const {name, address: {city}} = person;
console.log(name); // Alice
console.log(city); // New York
// 默认值
const [x = 10, y = 20] = [5];
console.log(x); // 5
console.log(y); // 20
1.2 模板字符串(Template Literals)
模板字符串提供了更简洁和更灵活的字符串拼接方式。使用反引号(`````)包围字符串,并支持内嵌表达式。
const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // 输出 "Hello, John!"
模板字符串不仅支持表达式,还支持多行字符串:
const multiLineString = `This is line 1
This is line 2`;
console.log(multiLineString);
1.3 箭头函数与 this 绑定(Arrow Functions and this Binding)
箭头函数是ES6引入的一种简洁函数表达式,语法上没有function
关键字,并且它会捕获其所在上下文的this
值。
const sum = (a, b) => a + b;
console.log(sum(3, 4)); // 输出 7
传统函数中的this
是由调用上下文决定的,而箭头函数中的this
是由函数定义时的上下文决定的,称为"词法绑定"。
function TraditionalFunction() {
this.value = 1;
setTimeout(function() {
this.value++;
console.log(this.value); // `this`指向全局对象(浏览器中是window),值为NaN
}, 1000);
}
function ArrowFunction() {
this.value = 1;
setTimeout(() => {
this.value++;
console.log(this.value); // `this`指向外部作用域中的ArrowFunction实例,值为2
}, 1000);
}
1.4 Promise 和异步编程:async/await
Promise
是处理异步操作的基础,它表示一个异步操作的最终完成(或失败),并返回结果。async/await
是ES7引入的基于Promise
的语法糖,使异步代码像同步代码一样易于理解。
-
Promise:
const myPromise = new Promise((resolve, reject) => {
const success = true;
if(success) {
resolve('Operation succeeded');
} else {
reject('Operation failed');
}
});myPromise
.then(result => console.log(result)) // 输出 'Operation succeeded'
.catch(error => console.log(error)); // 如果失败,输出 'Operation failed' -
async/await:
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.log('Error:', error);
}
}
async
函数会返回一个Promise
对象,await
表达式使得代码在异步操作完成后才继续执行。
1.5 Map 和 Set 数据结构
-
Map 是一种键值对的集合,类似于对象,但它的键可以是任何类型。
const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);
console.log(map.get('name')); // 输出 "Alice" -
Set 是一种集合,它只存储唯一的值。
const set = new Set([1, 2, 3, 3]);
console.log(set.has(2)); // 输出 true
console.log(set.size); // 输出 3,因为重复的值3被去掉了
1.6 模块化(import/export)
ES6模块化允许你将代码拆分成多个模块,使用import
和export
来进行模块间的导入导出。
-
export 用于导出模块的函数、对象或值:
// person.js
export const name = 'Tom';
export function greet() {
console.log('Hello, ' + name);
} -
import 用于导入模块中的内容:
// app.js
import { name, greet } from './person.js';
console.log(name); // 输出 Tom
greet(); // 输出 Hello, Tom
1.7 展开运算符(Spread Operator)
展开运算符(...
)可以将数组或对象拆分成单独的元素或属性,或者合并多个数组或对象。
-
数组展开:
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出 [1, 2, 3, 4, 5] -
对象展开:
const obj1 = {name: 'Alice', age: 25};
const obj2 = {...obj1, city: 'New York'};
console.log(obj2); // 输出 {name: "Alice", age: 25, city: "New York"}
2. 面向对象编程(OOP)
面向对象编程(OOP)是一种通过对象和类的组织来设计程序的编程范式。在JavaScript中,OOP是基于原型继承的,但从ES6开始,也引入了类的概念,使得面向对象编程更加直观。
2.1 原型与原型链(Prototype and Prototype Chain)
每个JavaScript对象都有一个内部属性[[Prototype]]
,它指向另一个对象,这样就形成了原型链。对象可以通过原型链继承属性和方法。
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log(`Hello, ${this.name}`);
};
const person = new Person('John');
person.sayHello(); // 输出 "Hello, John"
2.2 类(Class)和继承(Extends)
ES6引入了class
语法,提供了更加面向对象的编程方式。类中可以定义构造函数、方法和继承。
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks`);
}
}
const dog = new Dog('Buddy');
dog.speak(); // 输出 "Buddy barks"
2.3 构造函数与对象实例化
构造函数用于创建对象实例,并初始化实例的属性。使用new
关键字时,会调用构造函数。
function Car(make, model) {
this.make = make;
this.model = model;
}
const myCar = new Car('Toyota', 'Corolla');
console.log(myCar.make); // Toyota
console.log(myCar.model); // Corolla
3. 函数式编程(Functional Programming)
函数式编程是一种声明式编程范式,强调函数的使用,函数是第一类公民,并尽量避免副作用。
3.1 高阶函数(Higher-Order Functions)
高阶函数是接受函数作为参数或返回函数的函数。常见的高阶函数有map
、filter
和reduce
。
-
map:对数组中的每个元素应用给定函数,返回一个新的数组。
const numbers = [1, 2, 3];
const squaredNumbers = numbers.map(x => x * x);
console.log(squaredNumbers); // [1, 4, 9] -
filter:过滤出符合条件的元素,返回一个新的数组。
const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(x => x % 2 === 0);
console.log(evenNumbers); // [2, 4] -
reduce:将数组元素通过某个函数归约成单一的值。
const numbers = [1, 2, 3];
const sum = numbers.reduce((acc, current) => acc + current, 0);
console.log(sum); // 6
3.2 函数柯里化与链式调用(Currying and Chaining)
-
柯里化是将一个接受多个参数的函数转化为多个接受单一参数的函数。
const add = a => b => a + b;
const add5 = add(5);
console.log(add5(3)); // 输出 8 -
链式调用 是将多个函数调用组合成一个调用链,每个函数返回
this
,从而可以连续调用多个方法。class Calculator {
constructor(value = 0) {
this.value = value;
}add(n) { this.value += n; return this; } subtract(n) { this.value -= n; return this; } getResult() { return this.value; }
}
const calc = new Calculator();
console.log(calc.add(5).subtract(2).getResult()); // 输出 3