⚡ JavaScript - ES6

What new primitive data type was added in ES6? What are its characteristics?

考察点：基础知识的掌握。

答案：

ES6 新增了 Symbol 这个基本数据类型。Symbol 是一种原始数据类型，表示独一无二的值。每个通过 Symbol() 创建的值都是唯一的，即使传入相同的描述参数。

主要特点：

1. 唯一性：每个 Symbol 值都是独一无二的

   const sym1 = Symbol('desc');
   const sym2 = Symbol('desc');
   console.log(sym1 === sym2); // false
   

2. 不可枚举性：Symbol 属性不会出现在 for…in、Object.keys() 等遍历中

   const obj = {
       name: 'test',
       [Symbol('hidden')]: 'secret'
   };
   console.log(Object.keys(obj)); // ['name']
   

3. 类型转换限制：Symbol 不能与其他类型进行隐式转换

   const sym = Symbol('test');
   // String(sym) 或 sym.toString() 可以显式转换
   // sym + '' 会报错
   

适用场景：

• 创建对象的私有属性，避免属性名冲突
• 实现对象的元编程，如自定义迭代器 Symbol.iterator
• 定义常量值，确保唯一性
• 第三方库中避免与用户代码的属性名冲突

What are the differences between let, const and var?

考察点：变量声明方式和作用域。

答案：

let、const 和 var 是 JavaScript 中三种变量声明方式，它们在作用域、变量提升、重复声明和赋值方面有显著区别。

主要区别：

1. 作用域范围：

   // var: 函数作用域或全局作用域
   function test1() {
       if (true) {
           var a = 1;
       }
       console.log(a); // 1，可以访问
   }
   
   // let/const: 块级作用域
   function test2() {
       if (true) {
           let b = 1;
           const c = 2;
       }
       // console.log(b); // ReferenceError
       // console.log(c); // ReferenceError
   }
   

2. 变量提升表现：

   console.log(a); // undefined (var声明被提升)
   // console.log(b); // ReferenceError (let存在暂时性死区)
   var a = 1;
   let b = 2;
   

3. 重复声明：

   var a = 1;
   var a = 2; // 允许重复声明
   
   let b = 1;
   // let b = 2; // SyntaxError: 不允许重复声明
   

4. 重新赋值：

   let a = 1;
   a = 2; // 允许重新赋值
   
   const b = 1;
   // b = 2; // TypeError: 不允许重新赋值
   

使用建议：

• 优先使用 const，确保值不被意外修改
• 需要重新赋值时使用 let
• 避免使用 var，除非需要兼容旧版本浏览器

What is block scope? How does ES6 implement it?

考察点：作用域理解与变量生命周期。

答案：

块级作用域是指变量只在一对大括号 {} 内有效的作用域规则。ES6 通过 let 和 const 关键字引入了块级作用域，解决了 var 声明变量时的作用域问题。

ES6 实现方式：

1. let 声明的块级作用域：

   {
       let a = 1;
       console.log(a); // 1
   }
   // console.log(a); // ReferenceError: a is not defined
   

2. const 声明的块级作用域：

   {
       const PI = 3.14159;
       console.log(PI); // 3.14159
   }
   // console.log(PI); // ReferenceError: PI is not defined
   

3. for 循环中的块级作用域：

   // ES5 问题
   for (var i = 0; i < 3; i++) {
       setTimeout(() => console.log(i), 100); // 3 3 3
   }
   
   // ES6 解决方案
   for (let i = 0; i < 3; i++) {
       setTimeout(() => console.log(i), 100); // 0 1 2
   }
   

主要特征：

• 暂时性死区：在声明之前访问变量会报错
• 不允许重复声明：同一作用域内不能重复声明同名变量
• 不会创建全局属性：块级作用域的变量不会成为全局对象的属性

实际应用：

• 避免变量污染和命名冲突
• 更好地控制变量的生命周期
• 解决闭包和异步操作中的变量作用域问题
• 提高代码的可维护性和安全性

What are the differences between arrow functions and regular functions?

考察点：语法特性与 this 指向。

答案：

箭头函数是 ES6 引入的函数简写语法，与普通函数在语法、this 指向、arguments 对象等方面存在显著区别。

主要区别：

1. 语法差异：

   // 普通函数
   function add(a, b) {
       return a + b;
   }
   
   // 箭头函数
   const add = (a, b) => a + b;
   
   // 单参数可省略括号
   const double = x => x * 2;
   
   // 无参数必须保留括号
   const getRandom = () => Math.random();
   

2. this 指向：

   const obj = {
       name: 'Alice',
       // 普通函数：this 指向调用对象
       getName: function() {
           return this.name; // 'Alice'
       },
       // 箭头函数：this 继承外层作用域
       getNameArrow: () => {
           return this.name; // undefined (全局this)
       }
   };
   

3. arguments 对象：

   // 普通函数有 arguments 对象
   function normalFunc() {
       console.log(arguments); // [1, 2, 3]
   }
   normalFunc(1, 2, 3);
   
   // 箭头函数没有 arguments 对象
   const arrowFunc = () => {
       // console.log(arguments); // ReferenceError
   };
   

4. 构造函数使用：

   // 普通函数可作为构造函数
   function Person(name) {
       this.name = name;
   }
   const person = new Person('Bob');
   
   // 箭头函数不能作为构造函数
   const PersonArrow = (name) => {
       this.name = name;
   };
   // const person2 = new PersonArrow('Bob'); // TypeError
   

适用场景：

• 箭头函数：回调函数、数组方法、简短的工具函数
• 普通函数：对象方法、构造函数、需要 this 动态绑定的场景

What are template strings? What are their uses?

考察点：字符串拼接与表达式插值。

答案：

模板字符串（Template Literals）是 ES6 引入的新型字符串字面量，使用反引号（`）包围，支持嵌入表达式、多行字符串和标签模板等高级功能。

主要用法：

1. 变量插值：

   const name = 'Alice';
   const age = 25;
   
   // ES5 方式
   const msg1 = 'Hello, ' + name + '. You are ' + age + ' years old.';
   
   // ES6 模板字符串
   const msg2 = `Hello, ${name}. You are ${age} years old.`;
   

2. 表达式计算：

   const a = 10;
   const b = 20;
   const result = `${a} + ${b} = ${a + b}`; // "10 + 20 = 30"
   
   // 函数调用
   const getName = () => 'Bob';
   const greeting = `Hello, ${getName()}!`; // "Hello, Bob!"
   

3. 多行字符串：

   // ES5 多行字符串
   const html1 = '<div>\n' +
                 '  <h1>Title</h1>\n' +
                 '  <p>Content</p>\n' +
                 '</div>';
   
   // ES6 模板字符串
   const html2 = `
   <div>
     <h1>Title</h1>
     <p>Content</p>
   </div>`;
   

4. 标签模板：

   function highlight(strings, ...values) {
       return strings.reduce((result, string, i) => {
           return result + string + (values[i] ? `<mark>${values[i]}</mark>` : '');
       }, '');
   }
   
   const name = 'Alice';
   const score = 95;
   const message = highlight`Student ${name} scored ${score} points!`;
   // "Student <mark>Alice</mark> scored <mark>95</mark> points!"
   

实际应用：

• HTML 模板生成和 DOM 操作
• SQL 查询语句构建
• 国际化文本处理
• 调试和日志输出
• API 接口地址拼接

What is destructuring assignment? What data types can it be used with?

考察点：数组、对象解构语法。

答案：

解构赋值是 ES6 引入的语法，允许从数组或对象中提取值并赋给变量，使代码更简洁易读。它是一种模式匹配的赋值方式。

适用数据类型：

1. 数组解构：

   // 基本用法
   const [a, b, c] = [1, 2, 3];
   console.log(a, b, c); // 1 2 3
   
   // 跳过元素
   const [first, , third] = [1, 2, 3];
   console.log(first, third); // 1 3
   
   // 剩余参数
   const [head, ...tail] = [1, 2, 3, 4];
   console.log(head, tail); // 1 [2, 3, 4]
   

2. 对象解构：

   // 基本用法
   const {name, age} = {name: 'Alice', age: 25, city: 'Beijing'};
   console.log(name, age); // 'Alice' 25
   
   // 重命名
   const {name: userName, age: userAge} = {name: 'Bob', age: 30};
   console.log(userName, userAge); // 'Bob' 30
   
   // 嵌套解构
   const {user: {name, profile: {email}}} = {
       user: {
           name: 'Charlie',
           profile: {email: '[email protected]'}
       }
   };
   

3. 字符串解构：

   const [a, b, c, d, e] = 'hello';
   console.log(a, b, c, d, e); // 'h' 'e' 'l' 'l' 'o'
   
   // 获取字符串长度属性
   const {length} = 'hello';
   console.log(length); // 5
   

4. 函数参数解构：

   // 对象参数解构
   function greet({name, age = 18}) {
       return `Hello ${name}, you are ${age} years old`;
   }
   greet({name: 'Alice', age: 25}); // "Hello Alice, you are 25 years old"
   
   // 数组参数解构
   function sum([a, b]) {
       return a + b;
   }
   sum([10, 20]); // 30
   

默认值设置：

// 数组默认值
const [x = 1, y = 2] = [undefined, null];
console.log(x, y); // 1 null

// 对象默认值
const {name = 'Anonymous', age = 0} = {age: 25};
console.log(name, age); // 'Anonymous' 25

实际应用：

• 快速交换变量值
• 从函数返回多个值
• 提取 JSON 数据中的字段
• 简化函数参数传递
• 模块导入时选择性提取

How does ES6 declare default parameters? How is it different from ES5?

考察点：函数参数默认值。

答案：

ES6 提供了直接在函数参数中声明默认值的语法，相比 ES5 的实现方式更加简洁和安全。

ES6 默认参数语法：

// 基本用法
function greet(name = 'Guest', age = 18) {
    return `Hello ${name}, you are ${age} years old`;
}

greet(); // "Hello Guest, you are 18 years old"
greet('Alice'); // "Hello Alice, you are 18 years old"
greet('Bob', 25); // "Hello Bob, you are 25 years old"

与 ES5 的区别：

1. 语法简洁性：

   // ES5 方式
   function multiply(a, b) {
       a = a || 1; // 问题：a为0时也会使用默认值
       b = typeof b !== 'undefined' ? b : 1; // 正确但冗长
       return a * b;
   }
   
   // ES6 方式
   function multiply(a = 1, b = 1) {
       return a * b;
   }
   

2. undefined 处理：

   // ES6 只有 undefined 才触发默认值
   function test(x = 10) {
       return x;
   }
   
   test(0); // 0 (不会使用默认值)
   test(null); // null (不会使用默认值)
   test(undefined); // 10 (使用默认值)
   test(); // 10 (使用默认值)
   

3. 表达式和函数调用：

   // 默认值可以是表达式或函数调用
   function createId(prefix = 'id', suffix = Date.now()) {
       return `${prefix}-${suffix}`;
   }
   
   // 可以引用前面的参数
   function greet(name = 'Guest', message = `Hello ${name}`) {
       return message;
   }
   

4. 与解构赋值结合：

   // ES6 支持复杂的默认值设定
   function config({
       host = 'localhost',
       port = 3000,
       protocol = 'http'
   } = {}) {
       return `${protocol}://${host}:${port}`;
   }
   
   config(); // "http://localhost:3000"
   config({host: 'example.com'}); // "http://example.com:3000"
   

优势对比：

• ES6：语法简洁、逻辑清晰、支持复杂表达式
• ES5：需要手动检查、容易出错、代码冗长
• 性能：ES6 在参数处理上更加高效
• 可读性：ES6 函数签名更清晰地表达了接口契约

What is the spread operator (…)? What are its common use cases?

考察点：数组、对象、函数参数等。

答案：

扩展运算符（Spread Operator）用三个点（…）表示，可以将可迭代对象展开为独立的元素。它在数组、对象、函数调用等场景中有广泛应用。

常见应用场景：

1. 数组操作：

   // 数组展开
   const arr1 = [1, 2, 3];
   const arr2 = [4, 5, 6];
   const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
   
   // 数组复制（浅拷贝）
   const original = [1, 2, 3];
   const copy = [...original]; // [1, 2, 3]
   
   // 数组转换
   const str = 'hello';
   const chars = [...str]; // ['h', 'e', 'l', 'l', 'o']
   

2. 函数参数传递：

   // 将数组元素作为参数传递
   const numbers = [1, 2, 3, 4, 5];
   const max = Math.max(...numbers); // 等同于 Math.max(1, 2, 3, 4, 5)
   
   // 替代 apply 方法
   function sum(a, b, c) {
       return a + b + c;
   }
   const args = [1, 2, 3];
   const result = sum(...args); // 6
   

3. 对象操作：

   // 对象展开（ES2018+）
   const obj1 = {a: 1, b: 2};
   const obj2 = {c: 3, d: 4};
   const merged = {...obj1, ...obj2}; // {a: 1, b: 2, c: 3, d: 4}
   
   // 对象复制和属性覆盖
   const user = {name: 'Alice', age: 25};
   const updatedUser = {...user, age: 26}; // {name: 'Alice', age: 26}
   

4. 剩余参数（Rest Parameters）：

   // 函数剩余参数
   function sum(first, ...rest) {
       return first + rest.reduce((a, b) => a + b, 0);
   }
   sum(1, 2, 3, 4); // 10
   
   // 数组解构中的剩余元素
   const [head, ...tail] = [1, 2, 3, 4, 5];
   console.log(head); // 1
   console.log(tail); // [2, 3, 4, 5]
   

5. DOM 操作：

   // NodeList 转数组
   const nodeList = document.querySelectorAll('.item');
   const elementsArray = [...nodeList];
   
   // 数组方法应用
   [...nodeList].forEach(el => el.classList.add('active'));
   

实际应用：

• 数组和对象的浅拷贝
• 合并多个数组或对象
• 函数参数的灵活处理
• 类数组对象转换为真正的数组
• React 中的 props 传递和状态更新
• 简化数学运算中的参数传递

How does ES6 declare multi-line strings?

考察点：模板字符串语法。

答案：

ES6 通过模板字符串（Template Literals）提供了声明多行字符串的简洁方式，使用反引号（`）包围字符串，可以直接在字符串中换行。

语法格式：

// ES6 模板字符串多行声明
const multilineString = `
    这是第一行
    这是第二行  
    这是第三行
`;

与 ES5 对比：

1. ES5 实现方式：

   // 方式一：字符串拼接
   const html = '<div>' +
                '  <h1>标题</h1>' +
                '  <p>内容</p>' +
                '</div>';
   
   // 方式二：转义字符
   const text = '第一行\n第二行\n第三行';
   
   // 方式三：数组 join
   const lines = [
       '第一行',
       '第二行', 
       '第三行'
   ].join('\n');
   

2. ES6 模板字符串：

   const html = `
   <div>
     <h1>标题</h1>
     <p>内容</p>
   </div>`;
   
   const text = `
   第一行
   第二行
   第三行`;
   

实际应用示例：

1. HTML 模板：

   const createCard = (title, content) => `
   <div class="card">
     <h2 class="card-title">${title}</h2>
     <div class="card-content">
       ${content}
     </div>
   </div>`;
   

2. SQL 查询：

   const query = `
   SELECT users.name, orders.total
   FROM users
   JOIN orders ON users.id = orders.user_id
   WHERE orders.status = 'completed'
   ORDER BY orders.created_at DESC`;
   

3. 配置文件内容：

   const configContent = `
   {
     "name": "${packageName}",
     "version": "${version}",
     "description": "${description}"
   }`;
   

注意事项：

• 模板字符串会保留所有空格和换行符
• 首尾的空行也会被保留，可能需要使用 trim() 方法
• 可以结合变量插值 ${} 使用
• 支持嵌套使用和标签模板功能

优势：

• 语法简洁，无需转义字符或字符串拼接
• 保持代码的可读性和格式
• 支持变量和表达式插值
• 更好的 IDE 支持和语法高亮

What are the differences between for…of and for…in?

考察点：遍历对象与数组的方式。

答案：

for…of 和 for…in 是两种不同的循环语句，主要区别在于遍历的内容和适用的数据类型。

主要区别：

1. 遍历内容不同：

   const array = ['a', 'b', 'c'];
   
   // for...in 遍历索引/键名
   for (let index in array) {
       console.log(index); // "0", "1", "2" (字符串类型)
   }
   
   // for...of 遍历值
   for (let value of array) {
       console.log(value); // "a", "b", "c"
   }
   

2. 适用数据类型：

   // for...in 适用于对象
   const obj = {name: 'Alice', age: 25, city: 'Beijing'};
   for (let key in obj) {
       console.log(key, obj[key]); // name Alice, age 25, city Beijing
   }
   
   // for...of 适用于可迭代对象
   const string = 'hello';
   for (let char of string) {
       console.log(char); // h, e, l, l, o
   }
   

3. 原型链属性：

   Array.prototype.customMethod = function() {};
   const arr = [1, 2, 3];
   
   // for...in 会遍历原型链上的可枚举属性
   for (let key in arr) {
       console.log(key); // "0", "1", "2", "customMethod"
   }
   
   // for...of 只遍历自身的值
   for (let value of arr) {
       console.log(value); // 1, 2, 3
   }
   

支持的数据结构对比：

1. for…in 支持：

   • 对象（Object）
   • 数组（Array，但遍历索引）
   • 字符串（String，但遍历索引）

2. for…of 支持：

   • 数组（Array）
   • 字符串（String）
   • Map、Set、WeakMap、WeakSet
   • NodeList、Arguments 等类数组对象
   • 自定义可迭代对象

使用建议：

// 推荐用法
const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];

// 遍历对象属性 - 使用 for...in
for (let key in users[0]) {
    console.log(key, users[0][key]);
}

// 遍历数组元素 - 使用 for...of
for (let user of users) {
    console.log(user.name);
}

// 需要索引时 - 使用 entries()
for (let [index, user] of users.entries()) {
    console.log(index, user.name);
}

注意事项：

• for…in 遍历顺序不保证，for…of 保证遍历顺序
• 使用 for…in 遍历数组时建议检查 hasOwnProperty()
• for…of 不能直接遍历普通对象，需配合 Object.keys() 等方法

What are Map and Set? How do they differ from Object and Array?

考察点：新数据结构的理解。

答案：

Map 和 Set 是 ES6 引入的两种新数据结构。Map 是键值对集合，Set 是值的集合，它们在功能和性能上相比传统的 Object 和 Array 有显著优势。

Map 与 Object 的区别：

1. 键的类型：

   // Object 的键只能是字符串或 Symbol
   const obj = {
       'name': 'Alice',
       1: 'number key' // 1 会被转为字符串 "1"
   };
   
   // Map 的键可以是任何类型
   const map = new Map();
   map.set('string', '字符串键');
   map.set(1, '数字键');
   map.set(true, '布尔键');
   map.set({id: 1}, '对象键');
   

2. 大小获取：

   // Object 需要手动计算
   const obj = {a: 1, b: 2, c: 3};
   const objSize = Object.keys(obj).length; // 3
   
   // Map 直接获取
   const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
   const mapSize = map.size; // 3
   

3. 遍历方式：

   // Object 遍历
   for (let key in obj) {
       console.log(key, obj[key]);
   }
   
   // Map 遍历（保证插入顺序）
   for (let [key, value] of map) {
       console.log(key, value);
   }
   

Set 与 Array 的区别：

1. 唯一性：

   // Array 允许重复元素
   const arr = [1, 2, 2, 3, 3, 3];
   console.log(arr); // [1, 2, 2, 3, 3, 3]
   
   // Set 自动去重
   const set = new Set([1, 2, 2, 3, 3, 3]);
   console.log(set); // Set(3) {1, 2, 3}
   

2. 操作方法：

   // Array 基于索引操作
   const arr = [1, 2, 3];
   arr.push(4);
   arr[1] = 'modified';
   
   // Set 基于值操作
   const set = new Set([1, 2, 3]);
   set.add(4);
   set.delete(2);
   console.log(set.has(3)); // true
   

API 对比：

// Map 常用方法
const map = new Map();
map.set(key, value);  // 设置键值对
map.get(key);         // 获取值
map.has(key);         // 检查键是否存在
map.delete(key);      // 删除键值对
map.clear();          // 清空所有键值对

// Set 常用方法
const set = new Set();
set.add(value);       // 添加值
set.has(value);       // 检查值是否存在
set.delete(value);    // 删除值
set.clear();          // 清空所有值

适用场景：

• Map：需要非字符串键、频繁增删、需要保持插入顺序的键值对存储
• Set：数据去重、成员关系检测、集合运算
• Object：记录和字典、JSON 数据交换、作为对象实例
• Array：有序列表、需要索引访问、栈/队列操作

性能优势：

• Map/Set 在频繁增删操作时性能更好
• Set 的查找性能优于 Array 的 includes()
• Map 的查找性能在大数据量时优于 Object 属性访问

How does ES6 simplify object property and method declarations?

考察点：对象字面量增强写法。

答案：

ES6 通过对象字面量增强（Enhanced Object Literals）提供了多种简化对象属性和方法声明的语法，使代码更加简洁易读。

主要简化方式：

1. 属性简写：

   // ES5 写法
   const name = 'Alice';
   const age = 25;
   const user1 = {
       name: name,
       age: age
   };
   
   // ES6 简写（属性名与变量名相同时）
   const user2 = {
       name,
       age
   };
   

2. 方法简写：

   // ES5 写法
   const obj1 = {
       sayHello: function() {
           return 'Hello!';
       },
       calculate: function(a, b) {
           return a + b;
       }
   };
   
   // ES6 简写
   const obj2 = {
       sayHello() {
           return 'Hello!';
       },
       calculate(a, b) {
           return a + b;
       }
   };
   

3. 计算属性名：

   // ES5 需要分步骤
   const prefix = 'user';
   const obj1 = {};
   obj1[prefix + 'Name'] = 'Alice';
   obj1[prefix + 'Age'] = 25;
   
   // ES6 动态属性名
   const obj2 = {
       [`${prefix}Name`]: 'Alice',
       [`${prefix}Age`]: 25,
       [Symbol.iterator]: function() { /* ... */ }
   };
   

4. 生成器方法：

   const obj = {
       * generator() {
           yield 1;
           yield 2;
           yield 3;
       }
   };
   
   const gen = obj.generator();
   console.log([...gen]); // [1, 2, 3]
   

5. async/await 方法：

   const api = {
       async fetchUser(id) {
           const response = await fetch(`/api/users/${id}`);
           return response.json();
       },
       
       async* asyncGenerator() {
           yield await Promise.resolve(1);
           yield await Promise.resolve(2);
       }
   };
   

综合应用示例：

const createUser = (name, age, role) => {
    const prefix = 'get';
    const createdAt = Date.now();
    
    return {
        // 属性简写
        name,
        age,
        role,
        createdAt,
        
        // 方法简写
        greet() {
            return `Hello, I'm ${this.name}`;
        },
        
        // 计算属性名
        [`${prefix}Info`]() {
            return {name: this.name, age: this.age, role: this.role};
        },
        
        // async 方法
        async save() {
            const response = await fetch('/api/users', {
                method: 'POST',
                body: JSON.stringify(this.getInfo())
            });
            return response.json();
        },
        
        // 生成器方法
        * getFields() {
            yield ['name', this.name];
            yield ['age', this.age];
            yield ['role', this.role];
        }
    };
};

使用优势：

• 代码简洁性：减少重复代码和冗余语法
• 可读性提升：语义更清晰，结构更紧凑
• 动态性：支持运行时计算属性名
• 现代语法：与其他 ES6+ 特性配合使用

注意事项：

• 方法简写中的 this 绑定行为与普通函数相同
• 计算属性名在对象创建时求值
• 生成器和 async 方法简写语法需要相应的运行环境支持

What is Symbol? What are its application scenarios?

考察点：唯一性、隐藏属性等。

答案：

Symbol 是 ES6 引入的第七种基本数据类型，表示独一无二的值。主要用于创建唯一标识符，避免属性名冲突，实现对象的私有属性等。

应用场景：

1. 避免属性名冲突：

   // 多个库或模块可能使用同名属性
   const PRIVATE_KEY = Symbol('private');
   
   const myObject = {
       publicProperty: 'visible',
       [PRIVATE_KEY]: 'hidden from normal enumeration'
   };
   
   console.log(Object.keys(myObject)); // ['publicProperty']
   

2. 实现私有属性/方法：

   const _counter = Symbol('counter');
   const _increment = Symbol('increment');
   
   class Counter {
       constructor() {
           this[_counter] = 0;
       }
       
       [_increment]() {
           this[_counter]++;
       }
       
       get value() {
           return this[_counter];
       }
       
       next() {
           this[_increment]();
           return this.value;
       }
   }
   

3. 定义对象的元编程接口：

   // 自定义迭代器
   const myIterable = {
       data: [1, 2, 3],
       [Symbol.iterator]() {
           let index = 0;
           return {
               next: () => {
                   if (index < this.data.length) {
                       return { value: this.data[index++], done: false };
                   }
                   return { done: true };
               }
           };
       }
   };
   
   for (let value of myIterable) {
       console.log(value); // 1, 2, 3
   }
   

4. 创建常量值：

   // 替代魔法字符串常量
   const STATUS = {
       LOADING: Symbol('loading'),
       SUCCESS: Symbol('success'),
       ERROR: Symbol('error')
   };
   
   function handleStatus(status) {
       switch (status) {
           case STATUS.LOADING:
               return 'Loading...';
           case STATUS.SUCCESS:
               return 'Success!';
           case STATUS.ERROR:
               return 'Error occurred';
       }
   }
   

5. 实现单例模式：

   const singleton = Symbol('singleton');
   
   class Database {
       constructor() {
           if (Database[singleton]) {
               return Database[singleton];
           }
           Database[singleton] = this;
       }
   }
   

6. 扩展内置对象行为：

   // 自定义 toPrimitive 行为
   const obj = {
       [Symbol.toPrimitive](hint) {
           if (hint === 'number') {
               return 42;
           }
           if (hint === 'string') {
               return 'custom string';
           }
           return 'default';
       }
   };
   
   console.log(+obj); // 42
   console.log(`${obj}`); // 'custom string'
   

Well-known Symbols：

ES6 预定义了多个内置 Symbol：

• Symbol.iterator：定义对象默认迭代器
• Symbol.toStringTag：定义对象的字符串描述
• Symbol.toPrimitive：定义对象转换为原始值的方法
• Symbol.hasInstance：定义 instanceof 运算符行为
• Symbol.species：定义创建衍生对象时使用的构造函数

实际开发优势：

• 避免第三方库属性名冲突
• 实现真正的私有属性（配合 WeakMap 使用更安全）
• 扩展内置对象功能而不影响原有代码
• 创建不可枚举的对象属性
• 实现复杂的元编程功能

How does ES6 implement classes? How is it different from ES5 constructor functions?

考察点：面向对象语法。

答案：

ES6 引入了 class 语法糖，提供了更接近传统面向对象语言的类定义方式，但底层仍基于原型链机制。

ES6 类实现：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    // 实例方法
    greet() {
        return `Hello, I'm ${this.name}`;
    }
    
    // 静态方法
    static species() {
        return 'Homo sapiens';
    }
    
    // getter/setter
    get fullInfo() {
        return `${this.name}, ${this.age} years old`;
    }
    
    set updateAge(newAge) {
        this.age = newAge;
    }
}

// 继承
class Student extends Person {
    constructor(name, age, grade) {
        super(name, age); // 调用父类构造函数
        this.grade = grade;
    }
    
    greet() {
        return `${super.greet()}, I'm a student`;
    }
}

与 ES5 构造函数的区别：

1. 语法简洁性：

   // ES5 方式
   function Person(name, age) {
       this.name = name;
       this.age = age;
   }
   
   Person.prototype.greet = function() {
       return 'Hello, I\'m ' + this.name;
   };
   
   Person.species = function() {
       return 'Homo sapiens';
   };
   
   // ES6 方式更简洁清晰
   class Person {
       constructor(name, age) { /* ... */ }
       greet() { /* ... */ }
       static species() { /* ... */ }
   }
   

2. 严格模式：

   // ES6 类自动运行在严格模式下
   class MyClass {
       constructor() {
           // 自动严格模式，this 不会指向全局对象
       }
   }
   

3. 不可提升：

   // ES5 构造函数可以提升
   const p1 = new Person(); // 可以工作
   function Person() {}
   
   // ES6 类不会提升
   // const p2 = new MyClass(); // ReferenceError
   class MyClass {}
   

4. 继承机制：

   // ES5 继承较复杂
   function Student(name, age, grade) {
       Person.call(this, name, age);
       this.grade = grade;
   }
   Student.prototype = Object.create(Person.prototype);
   Student.prototype.constructor = Student;
   
   // ES6 继承简单明了
   class Student extends Person {
       constructor(name, age, grade) {
           super(name, age);
           this.grade = grade;
       }
   }
   

主要优势：

• 语法更清晰，接近其他面向对象语言
• 继承机制更直观，super 关键字使用简单
• 内置对严格模式和 new 调用的检查
• 更好的工具支持和代码提示
• 支持静态方法、getter/setter 等现代特性

注意事项：

• ES6 类本质上仍是基于原型的语法糖
• 类声明不会提升，需要先定义后使用
• 类内部默认为严格模式
• 必须使用 new 调用，否则会报错

What is modularization? How does ES6 import and export modules?

考察点：import/export 语法。

答案：

模块化是将程序拆分成独立的、可重用的代码单元的编程方式。ES6 引入了原生模块系统，提供了 import 和 export 语法来实现模块的导入和导出。

导出语法：

1. 命名导出（Named Exports）：

   // math.js
   export const PI = 3.14159;
   export function add(a, b) {
       return a + b;
   }
   
   // 或者统一导出
   const subtract = (a, b) => a - b;
   const multiply = (a, b) => a * b;
   export { subtract, multiply };
   
   // 重命名导出
   export { multiply as times };
   

2. 默认导出（Default Export）：

   // calculator.js
   class Calculator {
       add(a, b) { return a + b; }
   }
   export default Calculator;
   
   // 或者直接导出
   export default function(a, b) {
       return a * b;
   }
   

导入语法：

1. 命名导入：

   // 基本导入
   import { PI, add } from './math.js';
   
   // 重命名导入
   import { add as sum, subtract as minus } from './math.js';
   
   // 导入所有命名导出
   import * as MathUtils from './math.js';
   console.log(MathUtils.PI, MathUtils.add(1, 2));
   

2. 默认导入：

   import Calculator from './calculator.js';
   
   // 可以任意命名
   import Calc from './calculator.js';
   

3. 混合导入：

   // 同时导入默认和命名导出
   import Calculator, { PI, add } from './math-calculator.js';
   

动态导入：

// 条件导入
if (condition) {
    import('./feature.js').then(module => {
        module.default(); // 使用默认导出
    });
}

// async/await 方式
async function loadModule() {
    const module = await import('./heavy-feature.js');
    return module.heavyFunction();
}

模块化优势：

• 封装性：每个模块有独立的作用域
• 可重用性：模块可在多个地方使用
• 可维护性：代码结构清晰，便于维护
• 依赖管理：明确的依赖关系
• 按需加载：支持懒加载和代码分割

与其他模块系统对比：

• CommonJS：Node.js 使用，同步加载
• AMD：异步模块定义，浏览器端使用
• ES6 Module：语言层面支持，静态分析，Tree Shaking

What is a Promise? What are its three states?

考察点：异步编程基础概念。

答案：

Promise 是 ES6 引入的异步编程解决方案，用于处理异步操作的结果。它代表一个异步操作的最终完成（或失败）及其结果值。

三种状态：

1. Pending（等待中）：初始状态，既没有被兑现，也没有被拒绝
2. Fulfilled（已兑现）：操作成功完成
3. Rejected（已拒绝）：操作失败

// Promise 状态转换示例
const promise = new Promise((resolve, reject) => {
    // 初始状态：pending
    console.log('Promise created'); // 同步执行
    
    setTimeout(() => {
        if (Math.random() > 0.5) {
            resolve('Success!'); // 状态变为 fulfilled
        } else {
            reject('Failed!'); // 状态变为 rejected
        }
    }, 1000);
});

// 处理 Promise 结果
promise
    .then(result => {
        console.log('Fulfilled:', result);
    })
    .catch(error => {
        console.log('Rejected:', error);
    });

状态特点：

• 状态只能从 pending 转换为 fulfilled 或 rejected
• 一旦状态改变，就不会再变，称为 resolved（已定型）
• Promise 对象的状态改变只有两种可能：pending → fulfilled 或 pending → rejected

What new common methods did ES6 add to Array?

考察点：数组操作API。

答案：

ES6 为 Array 新增了多个实用方法，主要用于查找、填充、转换等操作：

主要新增方法：

1. Array.from() - 将类数组对象或可迭代对象转换为数组：

   Array.from('hello'); // ['h','e','l','l','o']
   Array.from(new Set([1,2,3])); // [1,2,3]
   Array.from({0:'a', 1:'b', length:2}); // ['a','b']
   

2. Array.of() - 创建包含所有参数的新数组：

   Array.of(7); // [7]
   Array.of(1,2,3); // [1,2,3]
   Array(7); // [empty × 7] - 对比Array构造函数
   

3. find() - 返回第一个满足条件的元素：

   [1,2,3,4].find(x => x > 2); // 3
   

4. findIndex() - 返回第一个满足条件元素的索引：

   [1,2,3,4].findIndex(x => x > 2); // 2
   

5. fill() - 用指定值填充数组：

   new Array(3).fill(0); // [0,0,0]
   [1,2,3].fill('a', 1, 2); // [1,'a',3]
   

6. copyWithin() - 浅复制数组的一部分到同一数组中的另一个位置：

   [1,2,3,4,5].copyWithin(0, 3); // [4,5,3,4,5]
   

What new common methods did ES6 add to String?

考察点：字符串处理API。

答案：

ES6 为 String 新增了多个便于字符串处理的方法：

主要新增方法：

1. startsWith() - 判断字符串是否以指定子字符串开头：

   'hello world'.startsWith('hello'); // true
   'hello world'.startsWith('world', 6); // true
   

2. endsWith() - 判断字符串是否以指定子字符串结尾：

   'hello world'.endsWith('world'); // true
   'hello world'.endsWith('hello', 5); // true
   

3. includes() - 判断字符串是否包含指定子字符串：

   'hello world'.includes('lo w'); // true
   'hello world'.includes('hi'); // false
   

4. repeat() - 重复字符串指定次数：

   'abc'.repeat(3); // 'abcabcabc'
   'hello'.repeat(0); // ''
   

5. padStart() 和 padEnd() - 字符串填充：

   '5'.padStart(3, '0'); // '005'
   'hello'.padEnd(10, '!'); // 'hello!!!!!'
   

Are variables declared with const really immutable? Please give examples.

考察点：const 的特性和限制。

答案：

const 声明的变量并不是完全不可变的。const 只保证变量标识符不能被重新赋值，但对于引用类型（对象、数组）的内部内容是可以修改的。

基本类型 - 不可变：

const num = 42;
// num = 43; // TypeError: Assignment to constant variable

const str = 'hello';
// str = 'world'; // TypeError: Assignment to constant variable

引用类型 - 内部可变：

1. 对象属性可以修改：

   const obj = { name: 'Alice', age: 25 };
   
   // 可以修改属性
   obj.name = 'Bob';
   obj.city = 'Beijing';
   console.log(obj); // { name: 'Bob', age: 25, city: 'Beijing' }
   
   // 但不能重新赋值整个对象
   // obj = {}; // TypeError
   

2. 数组元素可以修改：

   const arr = [1, 2, 3];
   
   // 可以修改数组内容
   arr.push(4);
   arr[0] = 10;
   console.log(arr); // [10, 2, 3, 4]
   
   // 但不能重新赋值整个数组
   // arr = []; // TypeError
   

3. 嵌套对象也可以修改：

   const user = {
       profile: {
           name: 'Alice',
           settings: {
               theme: 'dark'
           }
       }
   };
   
   user.profile.name = 'Bob';
   user.profile.settings.theme = 'light';
   // 完全有效
   

实现真正不可变的方法：

1. Object.freeze() - 浅冻结：

   const obj = Object.freeze({ name: 'Alice', age: 25 });
   // obj.name = 'Bob'; // 严格模式下报错，非严格模式静默失败
   

2. 深冻结实现：

   function deepFreeze(obj) {
       Object.getOwnPropertyNames(obj).forEach(name => {
           const value = obj[name];
           if (value && typeof value === 'object') {
               deepFreeze(value);
           }
       });
       return Object.freeze(obj);
   }
   
   const frozenObj = deepFreeze({
       user: { name: 'Alice' }
   });
   

3. 使用 Immutable.js 等库：

   const { Map } = require('immutable');
   const map1 = Map({ a: 1, b: 2, c: 3 });
   const map2 = map1.set('b', 50); // 返回新对象，不修改原对象
   

const 的实际作用：

• 防止变量标识符被重新赋值
• 提供代码意图的清晰表达
• 在团队开发中约定某些值不应改变
• 配合 Object.freeze() 等方法实现不可变数据

Please explain the ‘this’ binding rules of arrow functions.

考察点：词法作用域与上下文绑定。

答案：

箭头函数的 this 指向规则与普通函数完全不同。箭头函数没有自己的 this，而是捕获其定义时所在上下文的 this 值，这称为词法绑定或静态绑定。

核心规则：

1. 继承外层作用域的 this：

   const obj = {
       name: 'Alice',
       regularFunction: function() {
           console.log('Regular function this:', this.name); // 'Alice'
           
           const arrowFunction = () => {
               console.log('Arrow function this:', this.name); // 'Alice'
           };
           arrowFunction();
       }
   };
   obj.regularFunction();
   

2. 不受调用方式影响：

   const obj = {
       name: 'Alice',
       arrowMethod: () => {
           console.log(this.name); // undefined (全局this)
       }
   };
   
   // 无论如何调用，this 都不会改变
   obj.arrowMethod(); // undefined
   obj.arrowMethod.call({name: 'Bob'}); // undefined
   obj.arrowMethod.bind({name: 'Charlie'})(); // undefined
   

与普通函数对比：

function Person(name) {
    this.name = name;
    
    // 普通函数：this 取决于调用方式
    this.sayHello = function() {
        console.log(`Hello, I'm ${this.name}`);
    };
    
    // 箭头函数：this 继承构造函数的 this
    this.sayHi = () => {
        console.log(`Hi, I'm ${this.name}`);
    };
}

const person = new Person('Alice');
const sayHello = person.sayHello;
const sayHi = person.sayHi;

// 普通函数丢失 this 绑定
sayHello(); // "Hello, I'm undefined"

// 箭头函数保持 this 绑定
sayHi(); // "Hi, I'm Alice"

实际应用场景：

1. 事件处理器：

   class Counter {
       constructor() {
           this.count = 0;
           
           // 使用箭头函数避免 this 丢失
           document.getElementById('btn').addEventListener('click', () => {
               this.increment(); // this 正确指向 Counter 实例
           });
       }
       
       increment() {
           this.count++;
           console.log(this.count);
       }
   }
   

2. 异步操作：

   class DataService {
       constructor() {
           this.data = [];
       }
       
       async fetchData() {
           try {
               const response = await fetch('/api/data');
               const result = await response.json();
               
               // 箭头函数确保 this 指向正确
               result.forEach(item => {
                   this.data.push(item); // this 指向 DataService 实例
               });
           } catch (error) {
               console.error(error);
           }
       }
   }
   

注意事项：

• 箭头函数不能用作构造函数，不能使用 new 调用
• 没有 arguments 对象，可以使用剩余参数 …args
• 不能使用 call()、apply()、bind() 改变 this 指向
• 适合用作回调函数，但不适合作为对象方法（除非特意需要外层 this）

What is Promise? What problems does it solve?

考察点：异步编程与回调地狱。

答案：

Promise 是 ES6 引入的异步编程解决方案，代表一个异步操作的最终完成或失败。它主要解决了回调函数的嵌套问题，提供了更好的异步流程控制。

Promise 解决的核心问题：

1. 回调地狱（Callback Hell）：

   // ES5 回调地狱
   getData(function(a) {
       getMoreData(a, function(b) {
           getMoreData(b, function(c) {
               getMoreData(c, function(d) {
                   // 嵌套层级过深，难以维护
               });
           });
       });
   });
   
   // Promise 链式调用
   getData()
       .then(a => getMoreData(a))
       .then(b => getMoreData(b))
       .then(c => getMoreData(c))
       .then(d => {
           // 扁平化的异步流程
       });
   

2. 错误处理困难：

   // 回调方式：每层都需要错误处理
   getData(function(err, a) {
       if (err) handleError(err);
       getMoreData(a, function(err, b) {
           if (err) handleError(err);
           // 重复的错误处理逻辑
       });
   });
   
   // Promise 方式：统一错误处理
   getData()
       .then(a => getMoreData(a))
       .then(b => getMoreData(b))
       .catch(err => handleError(err)); // 统一捕获错误
   

Promise 的核心特性：

1. 状态管理：

   const promise = new Promise((resolve, reject) => {
       // pending 状态
       setTimeout(() => {
           if (Math.random() > 0.5) {
               resolve('成功'); // 变为 fulfilled
           } else {
               reject('失败'); // 变为 rejected
           }
       }, 1000);
   });
   

2. 链式调用：

   promise
       .then(result => {
           console.log(result);
           return result + ' 处理完成';
       })
       .then(newResult => {
           console.log(newResult);
       })
       .catch(error => {
           console.error(error);
       });
   

实际应用优势：

1. 并发控制：

   // 并行执行多个异步操作
   Promise.all([
       fetch('/api/user'),
       fetch('/api/posts'),
       fetch('/api/comments')
   ]).then(responses => {
       // 所有请求完成后处理
   });
   
   // 竞速执行，取最快的结果
   Promise.race([
       fetch('/api/server1'),
       fetch('/api/server2')
   ]).then(fastestResponse => {
       // 处理最快返回的结果
   });
   

2. 更好的代码组织：

   // 可组合的异步操作
   function authenticateUser(credentials) {
       return validateCredentials(credentials)
           .then(user => generateToken(user))
           .then(token => saveSession(token))
           .then(session => ({ user: session.user, token: session.token }));
   }
   

解决的问题总结：

• 可读性：扁平化的链式调用替代深度嵌套
• 错误处理：统一的错误捕获机制
• 组合性：更好的异步操作组合能力
• 可测试性：更容易进行单元测试
• 标准化：提供了异步编程的标准接口

How to implement a simple Promise?

考察点：状态机与异步控制。

答案：

实现一个简单的 Promise 需要理解其状态机制、回调队列管理和链式调用原理。以下是一个基础的 Promise 实现：

基础 Promise 实现：

class SimplePromise {
    constructor(executor) {
        // 三种状态
        this.PENDING = 'pending';
        this.FULFILLED = 'fulfilled';
        this.REJECTED = 'rejected';
        
        // 初始状态
        this.state = this.PENDING;
        this.value = undefined;
        this.reason = undefined;
        
        // 回调队列
        this.onFulfilledCallbacks = [];
        this.onRejectedCallbacks = [];
        
        // resolve 函数
        const resolve = (value) => {
            if (this.state === this.PENDING) {
                this.state = this.FULFILLED;
                this.value = value;
                // 执行所有成功回调
                this.onFulfilledCallbacks.forEach(callback => callback());
            }
        };
        
        // reject 函数
        const reject = (reason) => {
            if (this.state === this.PENDING) {
                this.state = this.REJECTED;
                this.reason = reason;
                // 执行所有失败回调
                this.onRejectedCallbacks.forEach(callback => callback());
            }
        };
        
        // 执行传入的函数
        try {
            executor(resolve, reject);
        } catch (error) {
            reject(error);
        }
    }
    
    // then 方法实现
    then(onFulfilled, onRejected) {
        // 返回新的 Promise 支持链式调用
        return new SimplePromise((resolve, reject) => {
            // 处理 fulfilled 状态
            const handleFulfilled = () => {
                try {
                    if (typeof onFulfilled === 'function') {
                        const result = onFulfilled(this.value);
                        resolve(result);
                    } else {
                        resolve(this.value);
                    }
                } catch (error) {
                    reject(error);
                }
            };
            
            // 处理 rejected 状态
            const handleRejected = () => {
                try {
                    if (typeof onRejected === 'function') {
                        const result = onRejected(this.reason);
                        resolve(result);
                    } else {
                        reject(this.reason);
                    }
                } catch (error) {
                    reject(error);
                }
            };
            
            // 根据当前状态执行相应逻辑
            if (this.state === this.FULFILLED) {
                // 异步执行保证回调顺序
                setTimeout(handleFulfilled, 0);
            } else if (this.state === this.REJECTED) {
                setTimeout(handleRejected, 0);
            } else if (this.state === this.PENDING) {
                // 状态未确定，加入回调队列
                this.onFulfilledCallbacks.push(handleFulfilled);
                this.onRejectedCallbacks.push(handleRejected);
            }
        });
    }
    
    // catch 方法实现
    catch(onRejected) {
        return this.then(null, onRejected);
    }
}

使用示例：

// 基本使用
const promise = new SimplePromise((resolve, reject) => {
    setTimeout(() => {
        if (Math.random() > 0.5) {
            resolve('成功!');
        } else {
            reject('失败!');
        }
    }, 1000);
});

promise
    .then(result => {
        console.log('第一个then:', result);
        return result + ' -> 处理完成';
    })
    .then(result => {
        console.log('第二个then:', result);
    })
    .catch(error => {
        console.error('捕获错误:', error);
    });

核心实现要点：

1. 状态管理：

   • 三种状态：pending、fulfilled、rejected
   • 状态只能从 pending 转换到其他状态，且不可逆

2. 回调队列：

   • 处理异步场景下的回调存储
   • 状态改变时执行队列中的所有回调

3. 链式调用：

   • then 方法返回新的 Promise 实例
   • 支持值的传递和错误的传播

4. 异步执行：

   • 使用 setTimeout 确保回调异步执行
   • 符合 Promise/A+ 规范的执行顺序

静态方法扩展：

// Promise.resolve 静态方法
SimplePromise.resolve = function(value) {
    return new SimplePromise(resolve => resolve(value));
};

// Promise.reject 静态方法
SimplePromise.reject = function(reason) {
    return new SimplePromise((resolve, reject) => reject(reason));
};

// Promise.all 静态方法
SimplePromise.all = function(promises) {
    return new SimplePromise((resolve, reject) => {
        const results = [];
        let completed = 0;
        
        promises.forEach((promise, index) => {
            promise.then(value => {
                results[index] = value;
                completed++;
                if (completed === promises.length) {
                    resolve(results);
                }
            }, reject);
        });
    });
};

这个简单的 Promise 实现展示了 Promise 的核心机制：状态管理、回调队列和链式调用，为理解更复杂的异步流程控制奠定了基础。

What is a Generator? How to use it?

考察点：函数暂停与迭代器协议。

答案：

Generator（生成器）是 ES6 引入的特殊函数，能够暂停执行并在需要时恢复。它通过 function* 语法定义，使用 yield 关键字来暂停执行并产生值。

基本语法和使用：

1. Generator 函数定义：

   function* simpleGenerator() {
       console.log('开始执行');
       yield 1;
       console.log('第一次恢复');
       yield 2;
       console.log('第二次恢复');
       return 3;
   }
   
   // 调用 Generator 函数返回迭代器对象
   const gen = simpleGenerator();
   
   console.log(gen.next()); // { value: 1, done: false }
   console.log(gen.next()); // { value: 2, done: false }
   console.log(gen.next()); // { value: 3, done: true }
   

2. yield 的双向通信：

   function* communicateGenerator() {
       const a = yield '请输入第一个数';
       const b = yield '请输入第二个数';
       return a + b;
   }
   
   const gen = communicateGenerator();
   console.log(gen.next());      // { value: '请输入第一个数', done: false }
   console.log(gen.next(10));    // { value: '请输入第二个数', done: false }
   console.log(gen.next(20));    // { value: 30, done: true }
   

实际应用场景：

1. 实现迭代器：

   function* range(start, end, step = 1) {
       for (let i = start; i < end; i += step) {
           yield i;
       }
   }
   
   // 使用 for...of 遍历
   for (const num of range(0, 10, 2)) {
       console.log(num); // 0, 2, 4, 6, 8
   }
   
   // 转换为数组
   const numbers = [...range(1, 6)]; // [1, 2, 3, 4, 5]
   

2. 异步流程控制：

   function* fetchUserData() {
       try {
           const user = yield fetch('/api/user');
           const posts = yield fetch(`/api/users/${user.id}/posts`);
           const comments = yield fetch(`/api/posts/${posts[0].id}/comments`);
           return { user, posts, comments };
       } catch (error) {
           console.error('获取数据失败:', error);
       }
   }
   
   // 执行器函数
   function runGenerator(genFunc) {
       const gen = genFunc();
       
       function step(value) {
           const result = gen.next(value);
           if (!result.done) {
               return result.value.then(step);
           }
           return result.value;
       }
       
       return step();
   }
   

3. 无限序列生成：

   function* fibonacci() {
       let a = 0, b = 1;
       while (true) {
           yield a;
           [a, b] = [b, a + b];
       }
   }
   
   const fib = fibonacci();
   const first10 = [];
   for (let i = 0; i < 10; i++) {
       first10.push(fib.next().value);
   }
   console.log(first10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
   

4. 状态机实现：

   function* trafficLight() {
       while (true) {
           yield 'red';
           yield 'yellow';
           yield 'green';
       }
   }
   
   const light = trafficLight();
   console.log(light.next().value); // 'red'
   console.log(light.next().value); // 'yellow'
   console.log(light.next().value); // 'green'
   console.log(light.next().value); // 'red' (循环)
   

Generator 对象方法：

1. next(value)：恢复执行，可传值给 yield 表达式
2. return(value)：提前结束生成器
3. throw(error)：在生成器内部抛出异常

function* errorHandlingGen() {
    try {
        const a = yield 'step 1';
        const b = yield 'step 2';
        yield a + b;
    } catch (error) {
        yield 'error: ' + error.message;
    }
}

const gen = errorHandlingGen();
console.log(gen.next());                    // { value: 'step 1', done: false }
console.log(gen.throw(new Error('出错了'))); // { value: 'error: 出错了', done: false }

与 async/await 的关系：

Generator 是 async/await 的基础实现原理：

// Generator 版本
function* asyncGenerator() {
    const user = yield fetch('/api/user');
    const posts = yield fetch('/api/posts');
    return { user, posts };
}

// 等价的 async/await 版本
async function asyncFunction() {
    const user = await fetch('/api/user');
    const posts = await fetch('/api/posts');
    return { user, posts };
}

优势和特点：

• 惰性求值：只在需要时计算值
• 内存效率：适合处理大型数据集
• 控制流：精确控制函数执行流程
• 协程特性：函数执行可以暂停和恢复
• 迭代器协议：原生支持 for…of 循环

How is class inheritance implemented in ES6? What is the role of the super keyword?

考察点：原型链与构造函数继承。

答案：

ES6 的类继承通过 extends 关键字实现，底层仍基于原型链机制。super 关键字用于访问和调用父类的构造函数和方法，是实现继承的核心。

类继承基本语法：

// 父类定义
class Animal {
    constructor(name, species) {
        this.name = name;
        this.species = species;
    }
    
    speak() {
        return `${this.name} makes a sound`;
    }
    
    static getKingdom() {
        return 'Animalia';
    }
}

// 子类继承
class Dog extends Animal {
    constructor(name, breed) {
        super(name, 'Canine'); // 调用父类构造函数
        this.breed = breed;
    }
    
    speak() {
        return `${super.speak()} - Woof!`; // 调用父类方法
    }
    
    wagTail() {
        return `${this.name} is wagging its tail`;
    }
}

super 关键字的作用：

1. 在构造函数中调用父类构造函数：

   class Vehicle {
       constructor(brand, model) {
           this.brand = brand;
           this.model = model;
       }
   }
   
   class Car extends Vehicle {
       constructor(brand, model, doors) {
           super(brand, model); // 必须在使用 this 之前调用
           this.doors = doors;
       }
   }
   
   const myCar = new Car('Toyota', 'Camry', 4);
   

2. 在方法中调用父类方法：

   class Shape {
       getArea() {
           return 0;
       }
       
       describe() {
           return `This shape has area: ${this.getArea()}`;
       }
   }
   
   class Rectangle extends Shape {
       constructor(width, height) {
           super();
           this.width = width;
           this.height = height;
       }
       
       getArea() {
           return this.width * this.height;
       }
       
       describe() {
           return `Rectangle: ${super.describe()}`;
       }
   }
   

3. 在静态方法中调用父类静态方法：

   class MathUtils {
       static multiply(a, b) {
           return a * b;
       }
   }
   
   class AdvancedMath extends MathUtils {
       static power(base, exponent) {
           return Math.pow(base, exponent);
       }
       
       static multiplyAndPower(a, b, exp) {
           const product = super.multiply(a, b); // 调用父类静态方法
           return this.power(product, exp);
       }
   }
   

继承机制的底层实现原理：

// ES6 类继承等价的 ES5 实现
function Animal(name, species) {
    this.name = name;
    this.species = species;
}

Animal.prototype.speak = function() {
    return `${this.name} makes a sound`;
};

function Dog(name, breed) {
    Animal.call(this, name, 'Canine'); // 相当于 super()
    this.breed = breed;
}

// 设置原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
    return Animal.prototype.speak.call(this) + ' - Woof!'; // 相当于 super.speak()
};

继承的特殊情况处理：

1. 多层继承：

   class Animal {
       constructor(name) { this.name = name; }
       move() { return `${this.name} is moving`; }
   }
   
   class Mammal extends Animal {
       constructor(name, furColor) {
           super(name);
           this.furColor = furColor;
       }
       breathe() { return `${this.name} is breathing`; }
   }
   
   class Cat extends Mammal {
       constructor(name, furColor, breed) {
           super(name, furColor);
           this.breed = breed;
       }
       
       purr() {
           return `${super.move()} and purring`; // 可以调用祖先类方法
       }
   }
   

2. 抽象类模式：

   class AbstractShape {
       constructor() {
           if (new.target === AbstractShape) {
               throw new Error('Abstract class cannot be instantiated');
           }
       }
       
       getArea() {
           throw new Error('Must implement getArea method');
       }
   }
   
   class Circle extends AbstractShape {
       constructor(radius) {
           super();
           this.radius = radius;
       }
       
       getArea() {
           return Math.PI * this.radius * this.radius;
       }
   }
   

注意事项：

• 子类构造函数必须调用 super() 才能使用 this
• super 只能在类的方法中使用，不能在普通函数中使用
• 继承的静态方法也会被子类继承
• ES6 类继承支持内置对象的继承（如 Array、Error 等）

实际应用优势：

• 语法简洁，接近传统面向对象语言
• 自动处理原型链设置
• 更好的工具支持和代码提示
• 支持 super 关键字的便捷调用
• 内置了严格模式和合理的默认行为

What is Proxy? What functions can it implement?

考察点：对象代理与元编程。

答案：

Proxy 是 ES6 引入的强大特性，用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。它创建一个对象的代理，从而实现对该对象基本操作的拦截和自定义。

基本语法：

const proxy = new Proxy(target, handler);

常用的拦截操作（traps）：

1. 属性访问拦截（get/set）：

   const user = {
       name: 'Alice',
       age: 25
   };
   
   const userProxy = new Proxy(user, {
       get(target, property) {
           console.log(`访问属性: ${property}`);
           return target[property];
       },
       
       set(target, property, value) {
           if (property === 'age' && value < 0) {
               throw new Error('年龄不能为负数');
           }
           console.log(`设置属性: ${property} = ${value}`);
           target[property] = value;
           return true;
       }
   });
   
   console.log(userProxy.name); // "访问属性: name" -> "Alice"
   userProxy.age = 30; // "设置属性: age = 30"
   

2. 函数调用拦截（apply）：

   function sum(a, b) {
       return a + b;
   }
   
   const sumProxy = new Proxy(sum, {
       apply(target, thisArg, argumentsList) {
           console.log(`调用函数，参数:`, argumentsList);
           const result = target.apply(thisArg, argumentsList);
           console.log(`返回结果:`, result);
           return result;
       }
   });
   
   sumProxy(1, 2); // 输出调用信息和结果
   

实际应用场景：

1. 数据验证和格式化：

   function createValidatedUser(userData) {
       return new Proxy(userData, {
           set(target, property, value) {
               if (property === 'email' && !value.includes('@')) {
                   throw new Error('无效的邮箱格式');
               }
               if (property === 'age') {
                   value = parseInt(value); // 自动转换类型
               }
               target[property] = value;
               return true;
           }
       });
   }
   
   const user = createValidatedUser({});
   user.email = '[email protected]'; // 正常
   user.age = '25'; // 自动转换为数字
   

2. 响应式数据系统：

   function createReactive(data, callback) {
       return new Proxy(data, {
           set(target, property, value) {
               const oldValue = target[property];
               target[property] = value;
               callback(property, value, oldValue);
               return true;
           }
       });
   }
   
   const state = createReactive(
       { count: 0 },
       (prop, newVal, oldVal) => {
           console.log(`${prop} 从 ${oldVal} 变为 ${newVal}`);
       }
   );
   
   state.count = 1; // "count 从 0 变为 1"
   

3. API 包装和缓存：

   function createCachedAPI(apiObject) {
       const cache = new Map();
       
       return new Proxy(apiObject, {
           get(target, property) {
               if (typeof target[property] === 'function') {
                   return function(...args) {
                       const cacheKey = `${property}_${JSON.stringify(args)}`;
                       
                       if (cache.has(cacheKey)) {
                           console.log('从缓存返回:', cacheKey);
                           return cache.get(cacheKey);
                       }
                       
                       const result = target[property].apply(target, args);
                       cache.set(cacheKey, result);
                       return result;
                   };
               }
               return target[property];
           }
       });
   }
   

4. 虚拟对象和默认值：

   const defaultConfig = new Proxy({}, {
       get(target, property) {
           if (property in target) {
               return target[property];
           }
           // 提供默认值
           const defaults = {
               theme: 'light',
               language: 'en',
               timeout: 5000
           };
           return defaults[property];
       }
   });
   
   console.log(defaultConfig.theme); // 'light'
   console.log(defaultConfig.customProp); // undefined
   

5. 数组负索引访问：

   function createArrayWithNegativeIndex(arr) {
       return new Proxy(arr, {
           get(target, property) {
               if (typeof property === 'string' && /^-\d+$/.test(property)) {
                   const index = target.length + parseInt(property);
                   return target[index];
               }
               return target[property];
           }
       });
   }
   
   const arr = createArrayWithNegativeIndex([1, 2, 3, 4, 5]);
   console.log(arr[-1]); // 5
   console.log(arr[-2]); // 4
   

常用的 Handler 方法：

• get(target, property, receiver)：属性读取拦截
• set(target, property, value, receiver)：属性设置拦截
• has(target, property)：in 操作符拦截
• deleteProperty(target, property)：delete 操作拦截
• apply(target, thisArg, argumentsList)：函数调用拦截
• construct(target, argumentsList, newTarget)：new 操作拦截
• ownKeys(target)：Object.keys() 等操作拦截

Proxy 的优势：

• 提供了完整的元编程能力
• 可以拦截和自定义几乎所有的对象操作
• 性能比 Object.defineProperty 更好（Vue 3 采用）
• 支持数组索引的拦截
• 可以代理整个对象而不是单个属性

What is an Iterator? How to customize an iterator?

考察点：遍历协议与 Symbol.iterator。

答案：

迭代器（Iterator）是 ES6 引入的遍历机制，定义了一种标准的方式来产生一系列值。迭代器是一个对象，实现了迭代器协议，即具有 next() 方法。

迭代器协议：

// 迭代器对象必须实现 next() 方法
const iterator = {
    next() {
        return {
            value: someValue,  // 当前值
            done: boolean     // 是否完成
        };
    }
};

自定义迭代器实现：

1. 简单的数字迭代器：

   function createRangeIterator(start, end) {
       let current = start;
       
       return {
           next() {
               if (current < end) {
                   return { value: current++, done: false };
               } else {
                   return { done: true };
               }
           }
       };
   }
   
   const iterator = createRangeIterator(1, 4);
   console.log(iterator.next()); // { value: 1, done: false }
   console.log(iterator.next()); // { value: 2, done: false }
   console.log(iterator.next()); // { value: 3, done: false }
   console.log(iterator.next()); // { done: true }
   

2. 实现可迭代对象：

   class Range {
       constructor(start, end) {
           this.start = start;
           this.end = end;
       }
       
       // 实现 Symbol.iterator 方法
       [Symbol.iterator]() {
           let current = this.start;
           const end = this.end;
           
           return {
               next() {
                   if (current < end) {
                       return { value: current++, done: false };
                   } else {
                       return { done: true };
                   }
               }
           };
       }
   }
   
   const range = new Range(1, 5);
   
   // 可以使用 for...of 遍历
   for (const num of range) {
       console.log(num); // 1, 2, 3, 4
   }
   
   // 可以转换为数组
   const numbers = [...range]; // [1, 2, 3, 4]
   

复杂的自定义迭代器：

1. 树结构深度优先遍历：

   class TreeNode {
       constructor(value, children = []) {
           this.value = value;
           this.children = children;
       }
       
       *[Symbol.iterator]() {
           yield this.value;
           for (const child of this.children) {
               yield* child; // 委托给子节点的迭代器
           }
       }
   }
   
   const tree = new TreeNode(1, [
       new TreeNode(2, [
           new TreeNode(4),
           new TreeNode(5)
       ]),
       new TreeNode(3, [
           new TreeNode(6)
       ])
   ]);
   
   for (const value of tree) {
       console.log(value); // 1, 2, 4, 5, 3, 6
   }
   

2. 斐波那契数列迭代器：

   class FibonacciIterator {
       constructor(limit = Infinity) {
           this.limit = limit;
           this.count = 0;
           this.current = 0;
           this.next = 1;
       }
       
       [Symbol.iterator]() {
           return this;
       }
       
       next() {
           if (this.count < this.limit) {
               const value = this.current;
               [this.current, this.next] = [this.next, this.current + this.next];
               this.count++;
               return { value, done: false };
           }
           return { done: true };
       }
   }
   
   const fib = new FibonacciIterator(10);
   console.log([...fib]); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
   

3. 异步迭代器：

   class AsyncDataIterator {
       constructor(urls) {
           this.urls = urls;
           this.index = 0;
       }
       
       [Symbol.asyncIterator]() {
           return this;
       }
       
       async next() {
           if (this.index < this.urls.length) {
               try {
                   const response = await fetch(this.urls[this.index++]);
                   const data = await response.json();
                   return { value: data, done: false };
               } catch (error) {
                   return { value: error, done: false };
               }
           }
           return { done: true };
       }
   }
   
   // 使用 for await...of 遍历
   async function processData() {
       const iterator = new AsyncDataIterator(['/api/data1', '/api/data2']);
       for await (const data of iterator) {
           console.log(data);
       }
   }
   

迭代器的实用工具：

// 迭代器工具函数
class IteratorUtils {
    static map(iterable, fn) {
        return {
            *[Symbol.iterator]() {
                for (const item of iterable) {
                    yield fn(item);
                }
            }
        };
    }
    
    static filter(iterable, predicate) {
        return {
            *[Symbol.iterator]() {
                for (const item of iterable) {
                    if (predicate(item)) {
                        yield item;
                    }
                }
            }
        };
    }
    
    static take(iterable, count) {
        return {
            *[Symbol.iterator]() {
                let taken = 0;
                for (const item of iterable) {
                    if (taken >= count) break;
                    yield item;
                    taken++;
                }
            }
        };
    }
}

// 使用示例
const numbers = new Range(1, 100);
const evenNumbers = IteratorUtils.filter(numbers, x => x % 2 === 0);
const firstTen = IteratorUtils.take(evenNumbers, 10);
console.log([...firstTen]); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

迭代器的应用优势：

• 惰性求值：只在需要时产生值，节省内存
• 统一接口：提供一致的遍历方式
• 组合性：可以轻松组合和链式调用
• 无限序列：可以表示无限大的数据集合
• 异步支持：支持异步数据的迭代处理

What are the common methods of Set and Map? How to iterate through them?

考察点：API 熟悉度。

答案：

Set 和 Map 是 ES6 引入的两种新的数据结构，提供了丰富的 API 用于操作和遍历数据。

Set 常用方法：

1. 基本操作方法：

   const mySet = new Set();
   
   // 添加值
   mySet.add(1);
   mySet.add(2);
   mySet.add(2); // 重复值会被忽略
   
   // 检查是否存在
   console.log(mySet.has(1)); // true
   console.log(mySet.has(3)); // false
   
   // 删除值
   mySet.delete(2); // 返回 true
   mySet.delete(3); // 返回 false（不存在）
   
   // 获取大小
   console.log(mySet.size); // 1
   
   // 清空所有值
   mySet.clear();
   

2. Set 遍历方法：

   const colors = new Set(['red', 'green', 'blue']);
   
   // for...of 遍历
   for (const color of colors) {
       console.log(color);
   }
   
   // forEach 遍历
   colors.forEach(color => console.log(color));
   
   // 使用迭代器方法
   for (const color of colors.values()) {
       console.log(color);
   }
   
   // keys() 和 values() 在 Set 中是相同的
   for (const color of colors.keys()) {
       console.log(color);
   }
   
   // entries() 返回 [value, value] 对
   for (const [key, value] of colors.entries()) {
       console.log(key, value); // key 和 value 相同
   }
   

Map 常用方法：

1. 基本操作方法：

   const myMap = new Map();
   
   // 设置键值对
   myMap.set('name', 'Alice');
   myMap.set('age', 25);
   myMap.set(1, 'number key');
   
   // 获取值
   console.log(myMap.get('name')); // 'Alice'
   console.log(myMap.get('unknown')); // undefined
   
   // 检查键是否存在
   console.log(myMap.has('age')); // true
   
   // 删除键值对
   myMap.delete('age'); // 返回 true
   
   // 获取大小
   console.log(myMap.size); // 2
   
   // 清空所有键值对
   myMap.clear();
   

2. Map 遍历方法：

   const userMap = new Map([
       ['name', 'Alice'],
       ['age', 25],
       ['city', 'Beijing']
   ]);
   
   // for...of 遍历键值对
   for (const [key, value] of userMap) {
       console.log(`${key}: ${value}`);
   }
   
   // forEach 遍历
   userMap.forEach((value, key) => {
       console.log(`${key}: ${value}`);
   });
   
   // 遍历键
   for (const key of userMap.keys()) {
       console.log('Key:', key);
   }
   
   // 遍历值
   for (const value of userMap.values()) {
       console.log('Value:', value);
   }
   
   // 遍历键值对
   for (const [key, value] of userMap.entries()) {
       console.log(`${key} => ${value}`);
   }
   

实际应用示例：

1. Set 用于数据去重：

   // 数组去重
   const numbers = [1, 2, 2, 3, 3, 4, 5];
   const uniqueNumbers = [...new Set(numbers)]; // [1, 2, 3, 4, 5]
   
   // 字符串去重
   const text = 'hello';
   const uniqueChars = [...new Set(text)]; // ['h', 'e', 'l', 'o']
   
   // 对象数组去重（需要自定义逻辑）
   function uniqueBy(array, key) {
       const seen = new Set();
       return array.filter(item => {
           const value = item[key];
           if (seen.has(value)) {
               return false;
           }
           seen.add(value);
           return true;
       });
   }
   

2. Map 用于数据缓存：

   class Cache {
       constructor() {
           this.cache = new Map();
       }
       
       get(key) {
           return this.cache.get(key);
       }
       
       set(key, value, ttl = 60000) { // 默认1分钟过期
           const expireTime = Date.now() + ttl;
           this.cache.set(key, { value, expireTime });
       }
       
       has(key) {
           const item = this.cache.get(key);
           if (item && item.expireTime > Date.now()) {
               return true;
           }
           this.cache.delete(key); // 清理过期数据
           return false;
       }
       
       clear() {
           this.cache.clear();
       }
   }
   

性能特点：

• Set 查找性能：O(1) 时间复杂度，比 Array.includes() 更快
• Map 访问性能：O(1) 时间复杂度，适合频繁的查找操作
• 遍历顺序：保持插入顺序，这是与 Object 的重要区别

转换操作：

// Set 与 Array 转换
const array = [1, 2, 3];
const set = new Set(array);
const backToArray = [...set];

// Map 与 Object 转换
const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));
const backToObj = Object.fromEntries(map);

// Map 与 Array 转换
const mapArray = [...map]; // [['a', 1], ['b', 2]]
const mapFromArray = new Map(mapArray);

What are WeakMap and WeakSet? What are their application scenarios?

考察点：内存管理与垃圾回收。

答案：

WeakMap 和 WeakSet 是 Map 和 Set 的"弱引用"版本，它们的键或值是弱引用，不会阻止垃圾回收器回收对象，主要用于避免内存泄漏。

WeakMap 特点和使用：

1. 基本特性：

   const wm = new WeakMap();
   
   // 键必须是对象（不能是原始值）
   const obj1 = {};
   const obj2 = {};
   
   wm.set(obj1, 'value1');
   wm.set(obj2, 'value2');
   
   console.log(wm.get(obj1)); // 'value1'
   console.log(wm.has(obj2)); // true
   
   // 当对象被垃圾回收时，对应的键值对也会自动删除
   // 无法遍历 WeakMap（没有 keys()、values()、entries() 方法）
   // 无法获取大小（没有 size 属性）
   

2. 私有数据存储：

   const privateData = new WeakMap();
   
   class Person {
       constructor(name, age) {
           // 使用对象实例作为键存储私有数据
           privateData.set(this, { name, age });
       }
       
       getName() {
           return privateData.get(this).name;
       }
       
       setAge(age) {
           privateData.get(this).age = age;
       }
       
       getAge() {
           return privateData.get(this).age;
       }
   }
   
   const person = new Person('Alice', 25);
   console.log(person.getName()); // 'Alice'
   // 无法直接访问私有数据
   

3. DOM 元素关联数据：

   const elementData = new WeakMap();
   
   function attachData(element, data) {
       elementData.set(element, data);
   }
   
   function getData(element) {
       return elementData.get(element);
   }
   
   // 当 DOM 元素被删除时，相关数据也会被自动清理
   const button = document.getElementById('myButton');
   attachData(button, { clickCount: 0, lastClicked: null });
   

WeakSet 特点和使用：

1. 基本特性：

   const ws = new WeakSet();
   
   const obj1 = {};
   const obj2 = {};
   
   ws.add(obj1);
   ws.add(obj2);
   
   console.log(ws.has(obj1)); // true
   ws.delete(obj2);
   
   // 值必须是对象，不能遍历，没有 size 属性
   

2. 对象标记和状态跟踪：

   const processedObjects = new WeakSet();
   
   function processObject(obj) {
       if (processedObjects.has(obj)) {
           console.log('对象已处理过');
           return;
       }
       
       // 处理对象逻辑
       console.log('处理对象中...');
       
       // 标记为已处理
       processedObjects.add(obj);
   }
   
   const data = { id: 1, value: 'test' };
   processObject(data); // "处理对象中..."
   processObject(data); // "对象已处理过"
   

应用场景对比：

1. WeakMap 应用场景：

   // 场景1：对象metadata存储
   const metadata = new WeakMap();
   
   class Component {
       constructor(props) {
           metadata.set(this, {
               createdAt: Date.now(),
               props: { ...props },
               renderCount: 0
           });
       }
       
       render() {
           const meta = metadata.get(this);
           meta.renderCount++;
           meta.lastRendered = Date.now();
       }
   }
   
   // 场景2：缓存计算结果
   const cache = new WeakMap();
   
   function expensiveOperation(obj) {
       if (cache.has(obj)) {
           return cache.get(obj);
       }
       
       const result = performComplexCalculation(obj);
       cache.set(obj, result);
       return result;
   }
   

2. WeakSet 应用场景：

   // 场景1：循环引用检测
   function stringify(obj, seen = new WeakSet()) {
       if (seen.has(obj)) {
           return '[Circular Reference]';
       }
       
       seen.add(obj);
       
       if (typeof obj === 'object' && obj !== null) {
           const result = {};
           for (const key in obj) {
               result[key] = stringify(obj[key], seen);
           }
           return result;
       }
       
       return obj;
   }
   
   // 场景2：权限控制
   const authorizedUsers = new WeakSet();
   
   function authorize(user) {
       authorizedUsers.add(user);
   }
   
   function isAuthorized(user) {
       return authorizedUsers.has(user);
   }
   
   function performAction(user, action) {
       if (!isAuthorized(user)) {
           throw new Error('未授权访问');
       }
       // 执行操作
   }
   

与 Map/Set 的区别：

使用建议：

• 使用 WeakMap：需要以对象为键存储临时数据，且希望避免内存泄漏
• 使用 WeakSet：需要标记对象状态，且不需要遍历或计数
• 避免使用：需要遍历数据或获取集合大小时
• 内存敏感场景：处理大量临时对象关联数据时优先考虑

How does ES6 implement shallow copy and deep copy of objects?

考察点：扩展运算符、Object.assign、递归。

答案：

ES6 提供了多种实现对象拷贝的方法，包括浅拷贝和深拷贝。理解两者的区别和适用场景对于避免意外的数据修改非常重要。

浅拷贝实现方法：

1. 扩展运算符（…）：

   const original = { name: 'Alice', age: 25, hobbies: ['reading', 'music'] };
   const shallowCopy = { ...original };
   
   shallowCopy.name = 'Bob'; // 不影响原对象
   shallowCopy.hobbies.push('sports'); // 影响原对象（引用类型）
   
   console.log(original.hobbies); // ['reading', 'music', 'sports']
   

2. Object.assign()：

   const original = { name: 'Alice', profile: { age: 25, city: 'Beijing' } };
   const shallowCopy = Object.assign({}, original);
   
   shallowCopy.name = 'Bob'; // 不影响原对象
   shallowCopy.profile.age = 30; // 影响原对象（嵌套对象）
   
   console.log(original.profile.age); // 30
   

3. 数组浅拷贝：

   const originalArray = [1, 2, { name: 'Alice' }];
   
   // 方法1：扩展运算符
   const copy1 = [...originalArray];
   
   // 方法2：Array.from()
   const copy2 = Array.from(originalArray);
   
   // 方法3：slice()
   const copy3 = originalArray.slice();
   
   copy1[2].name = 'Bob'; // 影响原数组（对象引用）
   

深拷贝实现方法：

1. JSON 序列化（简单场景）：

   const original = {
       name: 'Alice',
       age: 25,
       profile: {
           city: 'Beijing',
           hobbies: ['reading', 'music']
       }
   };
   
   // 简单深拷贝（有限制）
   const deepCopy = JSON.parse(JSON.stringify(original));
   deepCopy.profile.city = 'Shanghai';
   
   console.log(original.profile.city); // 'Beijing'（不受影响）
   
   // 限制：无法处理函数、undefined、Symbol、Date 等
   

2. 递归深拷贝实现：

   function deepClone(obj, visited = new WeakMap()) {
       // 处理 null 和基本类型
       if (obj === null || typeof obj !== 'object') {
           return obj;
       }
       
       // 处理循环引用
       if (visited.has(obj)) {
           return visited.get(obj);
       }
       
       // 处理日期对象
       if (obj instanceof Date) {
           return new Date(obj);
       }
       
       // 处理正则表达式
       if (obj instanceof RegExp) {
           return new RegExp(obj);
       }
       
       // 处理数组
       if (Array.isArray(obj)) {
           const cloned = [];
           visited.set(obj, cloned);
           for (let i = 0; i < obj.length; i++) {
               cloned[i] = deepClone(obj[i], visited);
           }
           return cloned;
       }
       
       // 处理普通对象
       const cloned = {};
       visited.set(obj, cloned);
       
       for (const key in obj) {
           if (obj.hasOwnProperty(key)) {
               cloned[key] = deepClone(obj[key], visited);
           }
       }
       
       // 处理 Symbol 属性
       const symbolKeys = Object.getOwnPropertySymbols(obj);
       for (const symKey of symbolKeys) {
           cloned[symKey] = deepClone(obj[symKey], visited);
       }
       
       return cloned;
   }
   
   // 使用示例
   const complexObj = {
       name: 'Alice',
       date: new Date(),
       regex: /test/g,
       nested: { value: 42 },
       arr: [1, 2, { deep: 'value' }]
   };
   
   const deepCopy = deepClone(complexObj);
   

3. 使用 Lodash 库（生产环境推荐）：

   const _ = require('lodash');
   
   const original = { /* 复杂对象 */ };
   const deepCopy = _.cloneDeep(original);
   

实用的拷贝工具函数：

class CopyUtils {
    // 智能拷贝：根据需要选择浅拷贝或深拷贝
    static smartCopy(obj, deep = false) {
        if (deep) {
            return this.deepClone(obj);
        }
        
        if (Array.isArray(obj)) {
            return [...obj];
        }
        
        if (obj && typeof obj === 'object') {
            return { ...obj };
        }
        
        return obj;
    }
    
    // 合并对象（支持深度合并）
    static merge(target, source, deep = false) {
        const result = deep ? this.deepClone(target) : { ...target };
        
        for (const key in source) {
            if (deep && 
                result[key] && 
                typeof result[key] === 'object' && 
                typeof source[key] === 'object') {
                result[key] = this.merge(result[key], source[key], true);
            } else {
                result[key] = deep ? this.deepClone(source[key]) : source[key];
            }
        }
        
        return result;
    }
    
    static deepClone(obj) {
        // 这里使用前面实现的 deepClone 函数
        return deepClone(obj);
    }
}

// 使用示例
const original = { a: 1, b: { c: 2 } };
const shallow = CopyUtils.smartCopy(original, false);
const deep = CopyUtils.smartCopy(original, true);

性能对比和选择建议：

使用建议：

• 浅拷贝：数据结构简单，性能要求高
• 深拷贝：需要完全独立的副本，包含嵌套对象
• 生产环境：优先使用成熟的库（如 Lodash）
• 性能敏感：考虑是否真的需要深拷贝，能用浅拷贝就用浅拷贝

What is async/await? What is its relationship with Promise?

考察点：异步语法糖与错误处理。

答案：

async/await 是 ES2017（ES8）引入的异步编程语法糖，基于 Promise 构建，提供了更接近同步代码风格的异步操作写法，使异步代码更易读和维护。

与 Promise 的关系：

1. async/await 本质上就是 Promise：

   // Promise 写法
   function fetchUserData() {
       return fetch('/api/user')
           .then(response => response.json())
           .then(user => {
               return fetch(`/api/users/${user.id}/posts`);
           })
           .then(response => response.json())
           .catch(error => {
               console.error('获取数据失败:', error);
           });
   }
   
   // async/await 写法（等价）
   async function fetchUserData() {
       try {
           const response = await fetch('/api/user');
           const user = await response.json();
           const postsResponse = await fetch(`/api/users/${user.id}/posts`);
           const posts = await postsResponse.json();
           return posts;
       } catch (error) {
           console.error('获取数据失败:', error);
       }
   }
   

2. async 函数返回 Promise：

   async function getName() {
       return 'Alice'; // 等价于 return Promise.resolve('Alice')
   }
   
   // 调用 async 函数
   getName().then(name => console.log(name)); // 'Alice'
   
   // 或者在另一个 async 函数中
   async function greet() {
       const name = await getName();
       console.log(`Hello, ${name}!`);
   }
   

基本语法和用法：

1. async 函数声明：

   // 函数声明
   async function fetchData() {
       // 异步操作
   }
   
   // 函数表达式
   const fetchData = async function() {
       // 异步操作
   };
   
   // 箭头函数
   const fetchData = async () => {
       // 异步操作
   };
   
   // 对象方法
   const api = {
       async getData() {
           // 异步操作
       }
   };
   
   // 类方法
   class DataService {
       async fetchData() {
           // 异步操作
       }
   }
   

2. await 表达式：

   async function processData() {
       // await 只能在 async 函数内使用
       const data = await fetchData(); // 等待 Promise 完成
       const processed = await processStep(data);
       return processed;
   }
   
   // 错误用法：await 不能在普通函数中使用
   function normalFunction() {
       // const data = await fetchData(); // SyntaxError
   }
   

错误处理：

1. try-catch 处理：

   async function handleErrors() {
       try {
           const response = await fetch('/api/data');
           const data = await response.json();
           
           if (!response.ok) {
               throw new Error(`HTTP error! status: ${response.status}`);
           }
           
           return data;
       } catch (error) {
           console.error('操作失败:', error);
           throw error; // 重新抛出或处理
       }
   }
   

2. 混合错误处理：

   async function mixedErrorHandling() {
       try {
           const data = await fetchData().catch(err => {
               console.log('fetch 错误:', err);
               return null; // 提供默认值
           });
           
           if (data) {
               return await processData(data);
           }
           return 'default data';
       } catch (error) {
           console.error('处理错误:', error);
       }
   }
   

并发处理：

1. 并行执行多个异步操作：

   async function parallelOperations() {
       // 错误做法：串行执行
       const user = await fetchUser();
       const posts = await fetchPosts();
       const comments = await fetchComments();
       
       // 正确做法：并行执行
       const [user, posts, comments] = await Promise.all([
           fetchUser(),
           fetchPosts(),
           fetchComments()
       ]);
       
       return { user, posts, comments };
   }
   
   // 使用 Promise.allSettled 处理部分失败
   async function robustParallelOperations() {
       const results = await Promise.allSettled([
           fetchUser(),
           fetchPosts(),
           fetchComments()
       ]);
       
       const [userResult, postsResult, commentsResult] = results;
       
       return {
           user: userResult.status === 'fulfilled' ? userResult.value : null,
           posts: postsResult.status === 'fulfilled' ? postsResult.value : [],
           comments: commentsResult.status === 'fulfilled' ? commentsResult.value : []
       };
   }
   

实际应用示例：

1. API 调用链：

   class UserService {
       async getUserProfile(userId) {
           try {
               // 获取用户基本信息
               const user = await this.fetchUser(userId);
               
               // 并行获取相关数据
               const [posts, followers, following] = await Promise.all([
                   this.fetchUserPosts(userId),
                   this.fetchFollowers(userId),
                   this.fetchFollowing(userId)
               ]);
               
               return {
                   ...user,
                   postsCount: posts.length,
                   followersCount: followers.length,
                   followingCount: following.length,
                   recentPosts: posts.slice(0, 5)
               };
           } catch (error) {
               console.error('获取用户资料失败:', error);
               throw new Error('无法加载用户资料');
           }
       }
       
       async fetchUser(id) {
           const response = await fetch(`/api/users/${id}`);
           if (!response.ok) throw new Error('用户不存在');
           return response.json();
       }
   }
   

2. 文件处理：

   async function processFiles(fileList) {
       const results = [];
       
       for (const file of fileList) {
           try {
               const content = await readFile(file);
               const processed = await processContent(content);
               const saved = await saveResult(processed);
               results.push({ file: file.name, success: true, id: saved.id });
           } catch (error) {
               results.push({ file: file.name, success: false, error: error.message });
           }
       }
       
       return results;
   }
   

性能优化技巧：

// 避免不必要的串行等待
async function optimizedFlow() {
    // 立即启动所有异步操作
    const userPromise = fetchUser();
    const configPromise = fetchConfig();
    
    // 需要用户数据的操作
    const user = await userPromise;
    const postsPromise = fetchUserPosts(user.id);
    
    // 等待所有操作完成
    const [config, posts] = await Promise.all([
        configPromise,
        postsPromise
    ]);
    
    return { user, config, posts };
}

async/await 的优势：

• 可读性强：接近同步代码的写法
• 错误处理简单：统一的 try-catch 机制
• 调试友好：更好的调用栈信息
• 避免回调地狱：扁平化的代码结构
• 组合性好：易于与其他异步模式结合

What is dynamic import of modules? How to use it?

考察点：import() 语法与懒加载。

答案：

动态导入是 ES2020 引入的特性，允许在运行时按需加载模块。与静态导入不同，动态导入使用 import() 函数，返回一个 Promise，支持条件加载和懒加载。

基本语法：

// 动态导入语法
import(moduleSpecifier)
    .then(module => {
        // 使用模块
    })
    .catch(error => {
        // 处理加载错误
    });

// 使用 async/await
async function loadModule() {
    try {
        const module = await import('./module.js');
        return module;
    } catch (error) {
        console.error('模块加载失败:', error);
    }
}

主要使用场景：

1. 条件加载：

   async function loadFeature(featureName) {
       let module;
       
       switch (featureName) {
           case 'chart':
               module = await import('./charts/ChartComponent.js');
               break;
           case 'editor':
               module = await import('./editor/EditorComponent.js');
               break;
           case 'calendar':
               module = await import('./calendar/CalendarComponent.js');
               break;
           default:
               throw new Error(`未知功能: ${featureName}`);
       }
       
       return module.default;
   }
   
   // 根据用户选择加载不同功能
   document.getElementById('loadChart').addEventListener('click', async () => {
       const ChartComponent = await loadFeature('chart');
       new ChartComponent().render();
   });
   

2. 路由懒加载：

   // React Router 懒加载示例
   const routes = [
       {
           path: '/home',
           component: () => import('./components/Home.js')
       },
       {
           path: '/about',
           component: () => import('./components/About.js')
       },
       {
           path: '/contact',
           component: () => import('./components/Contact.js')
       }
   ];
   
   // Vue Router 懒加载
   const router = new VueRouter({
       routes: [
           {
               path: '/user',
               component: () => import('./views/User.vue')
           }
       ]
   });
   

3. 功能检测和降级：

   async function loadPolyfill() {
       // 检测浏览器是否支持某个特性
       if (!window.IntersectionObserver) {
           await import('./polyfills/intersection-observer.js');
       }
       
       if (!window.fetch) {
           await import('./polyfills/fetch.js');
       }
   }
   
   // 根据环境加载不同实现
   async function loadStorage() {
       if (typeof window !== 'undefined') {
           // 浏览器环境
           return import('./storage/browser-storage.js');
       } else {
           // Node.js 环境
           return import('./storage/node-storage.js');
       }
   }
   

4. 代码分割和性能优化：

   class App {
       async loadHeavyFeature() {
           // 显示加载指示器
           this.showLoading();
           
           try {
               // 动态加载大型功能模块
               const heavyModule = await import('./heavy-feature.js');
               const feature = new heavyModule.HeavyFeature();
               
               // 初始化功能
               await feature.initialize();
               this.hideLoading();
               
               return feature;
           } catch (error) {
               this.hideLoading();
               this.showError('功能加载失败');
               throw error;
           }
       }
   }
   

与静态导入的对比：

// 静态导入 - 编译时确定
import { utils } from './utils.js';
import defaultExport from './module.js';

// 动态导入 - 运行时加载
const utils = await import('./utils.js');
const defaultExport = (await import('./module.js')).default;

// 静态导入的限制
if (condition) {
    // import './module.js'; // 语法错误：不能在块级作用域中使用
}

// 动态导入的灵活性
if (condition) {
    const module = await import('./module.js'); // 完全可以
}

高级用法：

1. 批量动态导入：

   async function loadPlugins(pluginNames) {
       const plugins = await Promise.all(
           pluginNames.map(name => 
               import(`./plugins/${name}.js`)
                   .catch(err => {
                       console.warn(`插件 ${name} 加载失败:`, err);
                       return null;
                   })
           )
       );
       
       return plugins.filter(plugin => plugin !== null);
   }
   

2. 缓存机制：

   const moduleCache = new Map();
   
   async function importWithCache(moduleSpecifier) {
       if (moduleCache.has(moduleSpecifier)) {
           return moduleCache.get(moduleSpecifier);
       }
       
       const modulePromise = import(moduleSpecifier);
       moduleCache.set(moduleSpecifier, modulePromise);
       
       try {
           return await modulePromise;
       } catch (error) {
           // 如果加载失败，从缓存中移除
           moduleCache.delete(moduleSpecifier);
           throw error;
       }
   }
   

3. 模块预加载：

   class ModuleManager {
       constructor() {
           this.preloadPromises = new Map();
       }
       
       // 预加载模块但不执行
       preload(moduleSpecifier) {
           if (!this.preloadPromises.has(moduleSpecifier)) {
               const link = document.createElement('link');
               link.rel = 'modulepreload';
               link.href = moduleSpecifier;
               document.head.appendChild(link);
               
               this.preloadPromises.set(
                   moduleSpecifier, 
                   import(moduleSpecifier)
               );
           }
           return this.preloadPromises.get(moduleSpecifier);
       }
       
       // 使用预加载的模块
       async use(moduleSpecifier) {
           return await this.preload(moduleSpecifier);
       }
   }
   

注意事项：

• 动态导入总是异步的，即使模块已经加载
• 动态导入的路径可以是变量，但需要注意打包工具的处理
• 错误处理很重要，网络问题可能导致加载失败
• 考虑用户体验，提供加载状态指示
• 注意模块缓存，相同路径的模块只会加载一次

浏览器兼容性和打包工具支持：

• 现代浏览器原生支持动态导入
• Webpack、Rollup、Vite 等打包工具支持代码分割
• 可以与 Tree Shaking 结合使用优化包大小

How does ES6 implement rest parameters and spread parameters in function parameters?

考察点：…rest 与 …spread。

答案：

ES6 通过三个点（…）语法提供了剩余参数（Rest Parameters）和展开参数（Spread Parameters）功能。虽然使用相同的语法，但在不同位置有不同的含义和作用。

剩余参数（Rest Parameters）：

1. 收集多余的参数：

   // 基本用法：收集剩余参数为数组
   function sum(first, ...rest) {
       console.log('first:', first);        // 第一个参数
       console.log('rest:', rest);          // 剩余参数组成的数组
       return first + rest.reduce((a, b) => a + b, 0);
   }
   
   sum(1, 2, 3, 4, 5);
   // first: 1
   // rest: [2, 3, 4, 5]
   // 返回: 15
   

2. 替代 arguments 对象：

   // ES5 使用 arguments（类数组对象）
   function oldSum() {
       var args = Array.prototype.slice.call(arguments);
       return args.reduce(function(a, b) { return a + b; }, 0);
   }
   
   // ES6 使用剩余参数（真正的数组）
   function newSum(...numbers) {
       return numbers.reduce((a, b) => a + b, 0);
   }
   
   // 剩余参数具有数组的所有方法
   function processNumbers(...nums) {
       return nums
           .filter(n => n > 0)          // 过滤正数
           .map(n => n * 2)             // 乘以2
           .sort((a, b) => a - b);      // 排序
   }
   

3. 与普通参数结合：

   function greet(greeting, ...names) {
       return `${greeting} ${names.join(', ')}!`;
   }
   
   greet('Hello', 'Alice', 'Bob', 'Charlie');
   // "Hello Alice, Bob, Charlie!"
   
   // 剩余参数必须是最后一个参数
   function invalid(first, ...rest, last) {} // 语法错误
   

展开参数（Spread Parameters）：

1. 展开数组作为函数参数：

   function multiply(a, b, c) {
       return a * b * c;
   }
   
   const numbers = [2, 3, 4];
   
   // ES5 使用 apply
   var result1 = multiply.apply(null, numbers);
   
   // ES6 使用展开语法
   const result2 = multiply(...numbers);
   
   console.log(result2); // 24 (2 * 3 * 4)
   

2. 数学运算中的应用：

   const scores = [85, 92, 78, 96, 88];
   
   // 找出最大值和最小值
   const max = Math.max(...scores);  // 96
   const min = Math.min(...scores);  // 78
   
   // 组合多个数组
   const moreScores = [91, 87];
   const allScores = [...scores, ...moreScores]; // [85, 92, 78, 96, 88, 91, 87]
   

高级应用场景：

1. 函数重载模拟：

   function createUser(name, ...options) {
       const config = {
           name,
           age: 18,
           active: true,
           roles: ['user']
       };
       
       // 处理不同类型的参数
       options.forEach(option => {
           if (typeof option === 'number') {
               config.age = option;
           } else if (typeof option === 'boolean') {
               config.active = option;
           } else if (Array.isArray(option)) {
               config.roles = option;
           } else if (typeof option === 'object') {
               Object.assign(config, option);
           }
       });
       
       return config;
   }
   
   // 各种调用方式
   createUser('Alice');                                    // 默认配置
   createUser('Bob', 25);                                 // 指定年龄
   createUser('Charlie', 30, false);                      // 指定年龄和状态
   createUser('David', ['admin', 'user']);               // 指定角色
   createUser('Eve', 28, true, ['moderator'], {city: 'Beijing'}); // 混合参数
   

2. 柯里化函数实现：

   function curry(fn, ...fixedArgs) {
       return function(...newArgs) {
           const allArgs = [...fixedArgs, ...newArgs];
           
           if (allArgs.length >= fn.length) {
               return fn(...allArgs);
           } else {
               return curry(fn, ...allArgs);
           }
       };
   }
   
   // 使用示例
   function add(a, b, c) {
       return a + b + c;
   }
   
   const addCurried = curry(add);
   const add5 = addCurried(5);
   const add5And10 = add5(10);
   
   console.log(add5And10(15)); // 30
   

3. 事件处理器工厂：

   function createEventHandler(baseHandler, ...middlewares) {
       return function(event, ...extraArgs) {
           // 执行中间件
           for (const middleware of middlewares) {
               const result = middleware(event, ...extraArgs);
               if (result === false) {
                   return; // 中断执行
               }
           }
           
           // 执行基础处理器
           return baseHandler(event, ...extraArgs);
       };
   }
   
   // 中间件函数
   const logger = (event) => console.log('Event:', event.type);
   const validator = (event) => event.target.checkValidity();
   
   // 创建带中间件的事件处理器
   const submitHandler = createEventHandler(
       (event, formData) => {
           console.log('提交表单:', formData);
       },
       logger,
       validator
   );
   

参数解构与剩余参数结合：

function processConfig({host, port, ...settings}, ...plugins) {
    console.log('连接信息:', { host, port });
    console.log('其他设置:', settings);
    console.log('插件列表:', plugins);
    
    return {
        connection: { host, port },
        settings,
        plugins: plugins.map(plugin => plugin.name || plugin)
    };
}

processConfig(
    {
        host: 'localhost',
        port: 3000,
        debug: true,
        timeout: 5000
    },
    { name: 'auth', version: '1.0' },
    { name: 'cors', version: '2.0' },
    'logger'
);

与箭头函数的使用：

// 剩余参数在箭头函数中
const sum = (...numbers) => numbers.reduce((a, b) => a + b, 0);

// 展开参数在箭头函数调用中
const numbers = [1, 2, 3, 4, 5];
const result = sum(...numbers);

// 高阶函数应用
const pipe = (...functions) => (value) => 
    functions.reduce((acc, fn) => fn(acc), value);

const addOne = x => x + 1;
const double = x => x * 2;
const square = x => x * x;

const transform = pipe(addOne, double, square);
console.log(transform(3)); // ((3 + 1) * 2)² = 64

注意事项和最佳实践：

• 剩余参数必须是函数参数列表的最后一个
• 一个函数只能有一个剩余参数
• 剩余参数是真正的数组，具有所有数组方法
• 展开语法在函数调用中可以多次使用
• 注意与解构赋值的区别和结合使用
• 在性能敏感的场景中考虑参数数量的影响

What are default values in destructuring assignment? What should be noted?

考察点：语法细节与边界情况。

答案：

解构赋值中的默认值是当解构目标为 undefined 时使用的备用值。它提供了一种优雅的方式来处理可能缺失的数据，避免程序出错。

基本语法和使用：

1. 数组解构的默认值：

   // 基本默认值
   const [a = 1, b = 2, c = 3] = [10, 20];
   console.log(a, b, c); // 10, 20, 3
   
   // 只有 undefined 才触发默认值
   const [x = 5, y = 6] = [0, null];
   console.log(x, y); // 0, null (0和null不会触发默认值)
   
   // undefined 触发默认值
   const [m = 100, n = 200] = [undefined, undefined];
   console.log(m, n); // 100, 200
   

2. 对象解构的默认值：

   // 基本对象解构默认值
   const {name = 'Anonymous', age = 18, city = 'Unknown'} = {
       name: 'Alice',
       age: 25
   };
   console.log(name, age, city); // 'Alice', 25, 'Unknown'
   
   // 重命名与默认值结合
   const {name: userName = 'Guest', score: userScore = 0} = {name: 'Bob'};
   console.log(userName, userScore); // 'Bob', 0
   

默认值的计算时机：

// 默认值是惰性计算的，只有在需要时才执行
function getDefault() {
    console.log('计算默认值');
    return 'default';
}

const [a = getDefault()] = ['actual'];
// 不会输出 "计算默认值"，因为 a 有值

const [b = getDefault()] = [undefined];
// 输出 "计算默认值"，因为 b 是 undefined

复杂场景的默认值：

1. 嵌套解构的默认值：

   // 嵌套对象解构
   const {
       user: {
           name = 'Unknown User',
           profile: {
               age = 0,
               email = 'no-email'
           } = {}
       } = {}
   } = {
       user: {
           name: 'Alice'
           // profile 缺失，使用默认值 {}
       }
   };
   
   console.log(name, age, email); // 'Alice', 0, 'no-email'
   

2. 函数参数解构的默认值：

   // 参数解构与默认值
   function createUser({
       name = 'Anonymous',
       age = 18,
       roles = ['user'],
       settings = {theme: 'light', lang: 'en'}
   } = {}) {
       return { name, age, roles, settings };
   }
   
   // 各种调用方式
   console.log(createUser());                           // 全部使用默认值
   console.log(createUser({name: 'Alice'}));           // 部分使用默认值
   console.log(createUser({age: 25, roles: ['admin']})); // 混合使用
   

3. 数组解构中的对象默认值：

   const [
       first = {id: 1, name: 'First'},
       second = {id: 2, name: 'Second'}
   ] = [
       {id: 10, name: 'Actual First'}
       // second 使用默认值
   ];
   
   console.log(first);  // {id: 10, name: 'Actual First'}
   console.log(second); // {id: 2, name: 'Second'}
   

重要注意事项：

1. undefined vs null 的区别：

   // 只有 undefined 触发默认值
   const {a = 10, b = 20} = {a: null, b: undefined};
   console.log(a, b); // null, 20
   
   // 0, false, '', NaN 都不会触发默认值
   const {x = 1, y = 2, z = 3} = {x: 0, y: false, z: ''};
   console.log(x, y, z); // 0, false, ''
   

2. 默认值可以引用其他变量：

   // 默认值可以是表达式
   let defaultAge = 18;
   const {name, age = defaultAge * 2} = {name: 'Alice'};
   console.log(age); // 36
   
   // 默认值可以引用前面解构的变量
   const {first = 'default', second = first + '2'} = {first: 'test'};
   console.log(first, second); // 'test', 'test2'
   
   // 但不能引用后面的变量（TDZ - 暂时性死区）
   const {a = b, b = 1} = {}; // ReferenceError
   

3. 默认值与剩余参数结合：

   function processItems([first = 'default', ...rest] = []) {
       console.log('First:', first);
       console.log('Rest:', rest);
   }
   
   processItems();              // First: default, Rest: []
   processItems(['item1']);     // First: item1, Rest: []
   processItems(['a', 'b', 'c']); // First: a, Rest: ['b', 'c']
   

实际应用场景：

1. API 响应处理：

   async function fetchUserProfile(userId) {
       try {
           const response = await fetch(`/api/users/${userId}`);
           const data = await response.json();
           
           // 使用默认值处理可能缺失的字段
           const {
               name = 'Unknown User',
               email = '[email protected]',
               avatar = '/default-avatar.png',
               preferences: {
                   theme = 'light',
                   language = 'en',
                   notifications = true
               } = {},
               stats: {
                   posts = 0,
                   followers = 0,
                   following = 0
               } = {}
           } = data;
           
           return {
               name, email, avatar,
               preferences: { theme, language, notifications },
               stats: { posts, followers, following }
           };
       } catch (error) {
           // 返回完全的默认用户对象
           return {
               name: 'Unknown User',
               email: '[email protected]',
               avatar: '/default-avatar.png',
               preferences: { theme: 'light', language: 'en', notifications: true },
               stats: { posts: 0, followers: 0, following: 0 }
           };
       }
   }
   

2. 配置对象处理：

   function initializeApp(config = {}) {
       const {
           apiUrl = 'http://localhost:3000',
           timeout = 5000,
           retries = 3,
           cache: {
               enabled = true,
               ttl = 300000 // 5分钟
           } = {},
           features: {
               darkMode = false,
               analytics = false,
               notifications = true
           } = {},
           endpoints: {
               auth = '/auth',
               users = '/users',
               data = '/data'
           } = {}
       } = config;
       
       return {
           api: { url: apiUrl, timeout, retries },
           cache: { enabled, ttl },
           features: { darkMode, analytics, notifications },
           endpoints: { auth, users, data }
       };
   }
   

性能考虑和最佳实践：

• 默认值表达式只有在需要时才计算，这有助于性能
• 避免在默认值中进行复杂的计算或副作用操作
• 使用函数作为默认值时要考虑是否需要每次调用
• 合理使用嵌套解构的默认值，过度嵌套会影响可读性
• 在 TypeScript 中结合类型注解使用，提高代码的健壮性

What common methods did ES6 add to Object? Please give examples.

考察点：对象操作API的掌握。

答案：

ES6 为 Object 新增了多个实用的静态方法，这些方法提供了更强大和便捷的对象操作能力，涵盖对象创建、属性操作、比较等方面。

主要新增方法：

1. Object.assign() - 对象合并和拷贝：

   // 基本用法：浅拷贝和合并
   const target = { a: 1, b: 2 };
   const source1 = { b: 3, c: 4 };
   const source2 = { c: 5, d: 6 };
   
   const result = Object.assign(target, source1, source2);
   console.log(result); // { a: 1, b: 3, c: 5, d: 6 }
   console.log(target === result); // true (target 被修改)
   
   // 创建新对象（不修改原对象）
   const newObj = Object.assign({}, target, source1);
   
   // 克隆对象
   const clone = Object.assign({}, original);
   

2. Object.is() - 严格相等比较：

   // 与 === 的区别
   console.log(Object.is(NaN, NaN));        // true  (=== 返回 false)
   console.log(Object.is(+0, -0));          // false (=== 返回 true)
   console.log(Object.is(5, 5));            // true
   console.log(Object.is('hello', 'hello')); // true
   
   // 实际应用
   function safeComparison(a, b) {
       return Object.is(a, b);
   }
   
   // React 等框架用于判断状态是否真正改变
   if (!Object.is(prevState, nextState)) {
       // 状态确实改变了
   }
   

3. Object.setPrototypeOf() 和 Object.getPrototypeOf()：

   // 设置对象原型
   const animal = {
       makeSound() {
           console.log('Some generic sound');
       }
   };
   
   const dog = {
       name: 'Buddy'
   };
   
   Object.setPrototypeOf(dog, animal);
   dog.makeSound(); // 'Some generic sound'
   
   // 获取对象原型
   console.log(Object.getPrototypeOf(dog) === animal); // true
   
   // 检查原型链
   console.log(animal.isPrototypeOf(dog)); // true
   

4. Object.keys(), Object.values(), Object.entries()：

   const person = {
       name: 'Alice',
       age: 30,
       city: 'Beijing'
   };
   
   // 获取所有键
   const keys = Object.keys(person);
   console.log(keys); // ['name', 'age', 'city']
   
   // 获取所有值
   const values = Object.values(person);
   console.log(values); // ['Alice', 30, 'Beijing']
   
   // 获取键值对数组
   const entries = Object.entries(person);
   console.log(entries); // [['name', 'Alice'], ['age', 30], ['city', 'Beijing']]
   
   // 实际应用：对象转换
   const doubled = Object.fromEntries(
       Object.entries(person).map(([key, value]) => [
           key,
           typeof value === 'number' ? value * 2 : value
       ])
   );
   

ES6+ 后续新增的重要方法：

5. Object.fromEntries() - 从键值对创建对象（ES2019）：

   // 从 Map 创建对象
   const map = new Map([
       ['name', 'Alice'],
       ['age', 25]
   ]);
   const obj = Object.fromEntries(map);
   console.log(obj); // { name: 'Alice', age: 25 }
   
   // 从数组创建对象
   const pairs = [['a', 1], ['b', 2], ['c', 3]];
   const result = Object.fromEntries(pairs);
   console.log(result); // { a: 1, b: 2, c: 3 }
   
   // 与 Object.entries() 配合使用
   const original = { x: 1, y: 2, z: 3 };
   const transformed = Object.fromEntries(
       Object.entries(original).map(([key, value]) => [key.toUpperCase(), value * 2])
   );
   console.log(transformed); // { X: 2, Y: 4, Z: 6 }
   

6. Object.getOwnPropertyDescriptors() - 获取所有属性描述符：

   const obj = {
       name: 'Alice',
       get fullInfo() {
           return `${this.name} - ${this.age}`;
       }
   };
   
   const descriptors = Object.getOwnPropertyDescriptors(obj);
   console.log(descriptors);
   /*
   {
     name: { value: 'Alice', writable: true, enumerable: true, configurable: true },
     fullInfo: { get: [Function: get fullInfo], set: undefined, enumerable: true, configurable: true }
   }
   */
   
   // 完整克隆对象（包括属性描述符）
   const clone = Object.create(
       Object.getPrototypeOf(obj),
       Object.getOwnPropertyDescriptors(obj)
   );
   

实际应用场景：

1. 配置对象合并：

   function createConfig(userConfig = {}) {
       const defaultConfig = {
           apiUrl: 'http://localhost:3000',
           timeout: 5000,
           retries: 3,
           cache: true
       };
       
       // 合并配置，用户配置优先
       return Object.assign({}, defaultConfig, userConfig);
   }
   
   const config = createConfig({ timeout: 8000, debug: true });
   // { apiUrl: 'http://localhost:3000', timeout: 8000, retries: 3, cache: true, debug: true }
   

2. 对象转换和过滤：

   function filterObject(obj, predicate) {
       return Object.fromEntries(
           Object.entries(obj).filter(([key, value]) => predicate(key, value))
       );
   }
   
   function mapObject(obj, mapper) {
       return Object.fromEntries(
           Object.entries(obj).map(([key, value]) => [key, mapper(value, key)])
       );
   }
   
   const data = { a: 1, b: 2, c: 3, d: 4 };
   
   // 过滤偶数值
   const evenValues = filterObject(data, (key, value) => value % 2 === 0);
   console.log(evenValues); // { b: 2, d: 4 }
   
   // 将所有值乘以2
   const doubled = mapObject(data, value => value * 2);
   console.log(doubled); // { a: 2, b: 4, c: 6, d: 8 }
   

3. 深度合并工具：

   function deepMerge(target, ...sources) {
       if (!sources.length) return target;
       const source = sources.shift();
       
       if (isObject(target) && isObject(source)) {
           for (const key in source) {
               if (isObject(source[key])) {
                   if (!target[key]) Object.assign(target, { [key]: {} });
                   deepMerge(target[key], source[key]);
               } else {
                   Object.assign(target, { [key]: source[key] });
               }
           }
       }
       
       return deepMerge(target, ...sources);
   }
   
   function isObject(item) {
       return item && typeof item === 'object' && !Array.isArray(item);
   }
   

4. 对象属性统计：

   function analyzeObject(obj) {
       const entries = Object.entries(obj);
       
       return {
           keyCount: Object.keys(obj).length,
           valueTypes: entries.reduce((acc, [key, value]) => {
               const type = typeof value;
               acc[type] = (acc[type] || 0) + 1;
               return acc;
           }, {}),
           hasGetters: Object.getOwnPropertyDescriptors(obj),
           isEmpty: Object.keys(obj).length === 0
       };
   }
   
   const sample = {
       name: 'test',
       count: 42,
       active: true,
       data: null,
       get computed() { return this.count * 2; }
   };
   
   console.log(analyzeObject(sample));