前端面试题-JS进阶

**前端面试题 - JS进阶**

### 一、闭包和作用域1.什么是闭包?

 function outer() {
 let x =10;
 return function inner() {
 console.log(x);
 }
 }

 const f = outer();
 f(); // 输出:10 

**答案:**闭包是指一个函数可以访问其外部作用域中的变量。

2.什么是作用域?

 let x =10;
 function outer() {
 let y =20;
 function inner() {
 console.log(x, y);
 }
 return inner;
 }

 const f = outer();
 f(); // 输出:1020 

**答案:** 作用域是指一个变量的可访问范围。

3.闭包和作用域的区别在哪里?

 let x =10;
 function outer() {
 let y =20;
 return function inner() {
 console.log(x); // 这里访问的是外部作用域中的x let z =30; // 这里定义了一个新的变量z，属于inner函数的作用域 console.log(z);
 }
 }

 const f = outer();
 f(); // 输出:1030 

**答案:**闭包是指一个函数可以访问其外部作用域中的变量，而作用域则是指一个变量的可访问范围。

### 二、this和call/apply/bind1.什么是this?

 function outer() {
 let x =10;
 return function inner() {
 console.log(this.x);
 }
 }

 const f = outer();
 f(); // 输出: undefined 

**答案:** this指向当前函数的执行环境。

2. call和apply的区别在哪里?

 let x =10;
 function outer() {
 return function inner(thisArg) {
 console.log(this.x);
 }
 }

 const f = outer();
 f.call({x:20}); // 输出:20 f.apply({x:30}); // 输出:30 

**答案:** call和apply都是用于改变this指向的函数，但call是直接传递参数，而apply则需要传递一个数组作为参数。

3. bind的作用是什么?

 let x =10;
 function outer() {
 return function inner(thisArg) {
 console.log(this.x);
 }
 }

 const f = outer();
 const g = f.bind({x:20});
 g(); // 输出:20 

**答案:** bind用于改变this指向，并返回一个新的函数。

### 三、Promise和async/await1.什么是Promise?

 function outer() {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve(10);
 },1000);
 });
 }

 const f = outer();
 f.then(value => console.log(value)); // 输出:10 

**答案:** Promise是指一个异步操作的结果。

2. async/await的作用是什么?

 function outer() {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve(10);
 },1000);
 });
 }

 async function main() {
 const value = await outer();
 console.log(value); // 输出:10 }

 main();
 

**答案:** async/await用于简化Promise的使用。

3. Promise.all和Promise.race的区别在哪里?

 function outer() {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve(10);
 },1000);
 });
 }

 const f = outer();
 const g = outer();

 Promise.all([f, g]).then(values => console.log(values)); // 输出: [10,10]
 Promise.race([f, g]).then(value => console.log(value)); // 输出:10 

**答案:** Promise.all用于等待所有Promise完成，而Promise.race则是指等待第一个Promise完成。

### 四、Set和Map1.什么是Set?

 const s = new Set([1,2,3]);
 console.log(s); // 输出: Set {1,2,3}
 

**答案:** Set是一个集合，用于存储唯一的值。

2.什么是Map?

 const m = new Map();
 m.set('a',10);
 m.set('b',20);
 console.log(m); // 输出: Map { 'a' =>10, 'b' =>20 }
 

**答案:** Map是一个键值对的集合，用于存储关联数据。

3. Set和Map的区别在哪里?

 const s = new Set([1,2,3]);
 console.log(s); // 输出: Set {1,2,3}

 const m = new Map();
 m.set('a',10);
 m.set('b',20);
 console.log(m); // 输出: Map { 'a' =>10, 'b' =>20 }
 

**答案:** Set用于存储唯一的值，而Map则是用于存储关联数据。

### 五、Proxy和Reflect1.什么是Proxy?

 const target = {
 get: function() {
 return10;
 }
 };

 const proxy = new Proxy(target, {});
 console.log(proxy.get()); // 输出:10 

**答案:** Proxy是一个代理对象，用于拦截和修改目标对象的行为。

2.什么是Reflect?

 Reflect.get(proxy, 'get');
 

**答案:** Reflect是一个反射对象，用于操作Proxy的行为。

3. Proxy和Reflect的区别在哪里?

 const target = {
 get: function() {
 return10;
 }
 };

 const proxy = new Proxy(target, {});
 console.log(proxy.get()); // 输出:10 Reflect.get(proxy, 'get');
 

**答案:** Proxy用于拦截和修改目标对象的行为，而Reflect则是用于操作Proxy的行为。

### 六、Symbol和WeakMap1.什么是Symbol?

 const s = Symbol();
 console.log(s); // 输出: Symbol()
 

**答案:** Symbol是一个独特的值，用于表示不可变的属性名。

2.什么是WeakMap?

 const m = new WeakMap();
 m.set({},10);
 console.log(m.get({})); // 输出:10 

**答案:** WeakMap是一个键值对的集合，用于存储关联数据，并且可以使用弱引用。

3. Symbol和WeakMap的区别在哪里?

 const s = Symbol();
 console.log(s); // 输出: Symbol()

 const m = new WeakMap();
 m.set({},10);
 console.log(m.get({})); // 输出:10 

**答案:** Symbol用于表示不可变的属性名，而WeakMap则是用于存储关联数据。

### 七、Generator和AsyncIterator1.什么是Generator?

 function* outer() {
 yield10;
 yield20;
 }

 const f = outer();
 console.log(f.next().value); // 输出:10 console.log(f.next().value); // 输出:20 

**答案:** Generator是一个生成器函数，用于产生一系列的值。

2.什么是AsyncIterator?

 async function* outer() {
 yield10;
 yield20;
 }

 const f = outer();
 for await (const value of f) {
 console.log(value); // 输出:10,20 }
 

**答案:** AsyncIterator是一个异步生成器函数，用于产生一系列的值。

3. Generator和AsyncIterator的区别在哪里?

 function* outer() {
 yield10;
 yield20;
 }

 const f = outer();
 console.log(f.next().value); // 输出:10 console.log(f.next().value); // 输出:20 async function* outer() {
 yield10;
 yield20;
 }

 const f = outer();
 for await (const value of f) {
 console.log(value); // 输出:10,20 }
 

**答案:** Generator用于产生一系列的值，而AsyncIterator则是用于产生异步的一系列的值。

### 八、Class和Object1.什么是Class?

 class Person {
 constructor(name) {
 this.name = name;
 }

 sayHello() {
 console.log(`Hello, my name is ${this.name}.`);
 }
 }

 const person = new Person('John');
 person.sayHello