js面试题整理

**JS 面试题整理**

### 一、基本概念####1. var、let 和 const 的区别* `var` 是 JavaScript 中最早的变量声明方式，它有函数作用域和全局作用域。
* `let` 和 `const` 是 ES6 引入的新变量声明方式，都是块级作用域。

javascript// varvar a =10;
console.log(a); //10function fn() {
 var b =20;
 console.log(b); //20}

fn();
console.log(b); // ReferenceError: b is not defined// let 和 constlet c =30;
console.log(c); //30if (true) {
 let d =40;
 console.log(d); //40}
console.log(d); // ReferenceError: d is not definedconst e =50;
console.log(e); //50e =60; // TypeError: Assignment to constant variable.

####2. this 的指向* 在全局作用域中，`this` 指向 window 对象。
* 在函数作用域中，`this` 指向函数的调用者。

javascript// 全局作用域console.log(this); // Window { ... }

function fn() {
 console.log(this); // Window { ... }
}

fn();

// 函数作用域const obj = {
 name: '张三',
 sayHello: function () {
 console.log(`Hello, my name is ${this.name}.`);
 },
};

obj.sayHello(); // Hello, my name is 张三.

function fn2() {
 console.log(this); // Window { ... }
}

fn2.call({ name: '李四' }); // Hello, my name is 李四.

####3. call、apply 和 bind 的区别* `call` 方法用于改变函数的 this 指向，并传递参数。
* `apply` 方法与 `call` 类似，但它传递的是一个数组作为参数。
* `bind` 方法用于改变函数的 this 指向，并返回一个新函数。

javascriptfunction fn(a, b) {
 console.log(this.name + ' say hello to ' + a + ' and ' + b);
}

const obj = { name: '张三' };

fn.call(obj, '李四', '王五'); // 张三 say hello to 李四 and 王五fn.apply(obj, ['李四', '王五']); // 张三 say hello to 李四 and 王五const fn2 = fn.bind(obj);
fn2('李四', '王五'); // 张三 say hello to 李四 and 王五

####4. 箭头函数的特点* 箭头函数没有自己的 this 指向。
* 箭头函数不能用作构造函数。

javascriptconst fn = () => {
 console.log(this); // Window { ... }
};

fn();

function Fn() {
 console.log(this); // Window { ... }
}

new Fn();

####5. Promise 的使用* Promise 是 JavaScript 中用于处理异步操作的对象。
* Promise 有三个状态：pending、resolved 和 rejected。

javascriptconst promise = new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('Hello, World!');
 },2000);
});

promise.then((data) => {
 console.log(data); // Hello, World!
}).catch((error) => {
 console.error(error);
});

####6. async/await 的使用* async/await 是 JavaScript 中用于处理异步操作的语法糖。
* async/await 可以让代码看起来像同步代码一样。

javascriptasync function fn() {
 try {
 const data = await new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('Hello, World!');
 },2000);
 });
 console.log(data); // Hello, World!
 } catch (error) {
 console.error(error);
 }
}

fn();

####7. Set 和 Map 的使用* Set 是 JavaScript 中用于存储唯一值的集合。
* Map 是 JavaScript 中用于存储键值对的集合。

javascriptconst set = new Set([1,2,3,4,5]);
console.log(set); // Set {1,2,3,4,5 }

set.add(6);
console.log(set); // Set {1,2,3,4,5,6 }

const map = new Map([['a',1], ['b',2]]);
console.log(map); // Map { 'a' =>1, 'b' =>2 }

####8. Proxy 的使用* Proxy 是 JavaScript 中用于代理对象的构造函数。
* Proxy 可以让你在不改变原有代码的情况下修改对象的行为。

javascriptconst target = { name: '张三', age:30 };
const proxy = new Proxy(target, {
 get: (target, property) => {
 console.log(`Getting ${property} from ${target.name}.`);
 return target[property];
 },
});

console.log(proxy.name); // Getting name from 张三.
console.log(proxy.age); // Getting age from 张三.

####9. Reflect 的使用* Reflect 是 JavaScript 中用于操作对象的构造函数。
* Reflect 可以让你在不改变原有代码的情况下修改对象的行为。

javascriptconst target = { name: '张三', age:30 };
const reflect = new Proxy(target, {
 get: (target, property) => {
 console.log(`Getting ${property} from ${target.name}.`);
 return target[property];
 },
});

console.log(reflect.get(target, 'name')); // Getting name from 张三.

####10. WeakMap 和 WeakSet 的使用* WeakMap 是 JavaScript 中用于存储键值对的集合。
* WeakSet 是 JavaScript 中用于存储唯一值的集合。

javascriptconst weakMap = new WeakMap();
weakMap.set({ name: '张三' }, { age:30 });
console.log(weakMap.get({ name: '张三' })); // { age:30 }

const weakSet = new WeakSet();
weakSet.add({ name: '张三', age:30 });
console.log(weakSet.has({ name: '张三', age:30 })); // true

### 二、数组和字符串####1. 数组的方法* `push` 方法用于向数组中添加元素。
* `pop` 方法用于从数组中删除最后一个元素。
* `shift` 方法用于从数组中删除第一个元素。
* `unshift` 方法用于向数组中添加元素到头部。

javascriptconst arr = [1,2,3];
arr.push(4);
console.log(arr); // [1,2,3,4]

arr.pop();
console.log(arr); // [1,2,3]

arr.shift();
console.log(arr); // [2,3]

arr.unshift(1);
console.log(arr); // [1,2,3]

####2. 数组的遍历* `forEach` 方法用于遍历数组中的每个元素。
* `map` 方法用于将数组中的每个元素转换为新值。
* `filter` 方法用于过滤数组中的某些元素。
* `reduce` 方法用于将数组中的所有元素合并成一个值。

javascriptconst arr = [1,2,3];
arr.forEach((element) => {
 console.log(element); //1,2,3});

const newArr = arr.map((element) => {
 return element *2;
});
console.log(newArr); // [2,4,6]

const filteredArr = arr.filter((element) => {
 return element >1;
});
console.log(filteredArr); // [2,3]

const sum = arr.reduce((acc, current) => {
 return acc + current;
},0);
console.log(sum); //6

####3. 字符串的方法* `split` 方法用于将字符串分割成数组。
* `join` 方法用于将数组中的元素连接成字符串。

javascriptconst str = 'hello,world';
const arr = str.split(',');
console.log(arr); // ['hello', 'world']

const newStr = arr.join('-');
console.log(newStr); // hello-world

####4. 正则表达式的方法* `test` 方法用于测试字符串是否匹配某个模式。
* `exec` 方法用于执行正则表达式并返回匹配结果。

javascriptconst str = 'hello,world';
const regex = /hello/;
console.log(regex.test(str)); // trueconst match = regex.exec(str);
console.log(match); // ['hello']

####5. 数组和字符串的其他方法* `indexOf` 方法用于在数组或字符串中