《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux... 。
文章目录
- 一、本文面试题目录
-
-
- [31. 什么是类数组对象？如何将其转换为真正的数组？](#31. 什么是类数组对象？如何将其转换为真正的数组？)
- [32. 箭头函数与普通函数有哪些区别？](#32. 箭头函数与普通函数有哪些区别？)
- [33. 什么是解构赋值？举例说明数组和对象的解构](#33. 什么是解构赋值？举例说明数组和对象的解构)
- [34. 如何检查对象是否具有某个属性？](#34. 如何检查对象是否具有某个属性？)
- [35. 什么是原型继承？如何实现原型继承？](#35. 什么是原型继承？如何实现原型继承？)
- [36. 什么是函数的返回值？不写return时函数返回什么？](#36. 什么是函数的返回值？不写return时函数返回什么？)
- [37. 什么是模板字符串？它有哪些特点？](#37. 什么是模板字符串？它有哪些特点？)
- [38. 如何获取对象的所有属性名？](#38. 如何获取对象的所有属性名？)
- [39. 什么是默认参数？如何设置函数的默认参数？](#39. 什么是默认参数？如何设置函数的默认参数？)
- [40. 什么是剩余参数？它与arguments有何区别？](#40. 什么是剩余参数？它与arguments有何区别？)
- [41. 如何遍历对象的属性？](#41. 如何遍历对象的属性？)
- [42. 什么是Promise？它有哪些状态？](#42. 什么是Promise？它有哪些状态？)
- [43. Promise的链式调用有什么作用？](#43. Promise的链式调用有什么作用？)
- [44. Promise.all()和Promise.race()的区别是什么？](#44. Promise.all()和Promise.race()的区别是什么？)
- [45. 什么是async/await？它有什么优势？](#45. 什么是async/await？它有什么优势？)
-
- 二、150道面试题目录列表
一、本文面试题目录
31. 什么是类数组对象？如何将其转换为真正的数组？
类数组对象是具有length属性，且属性为非负整数的对象，如函数的arguments对象、DOM元素集合等。它们不能直接使用数组的方法。
转换为真正数组的方法：
- 使用Array.from()：
Array.from(arguments) - 使用扩展运算符：
[...arguments] - 借助数组的slice方法：
Array.prototype.slice.call(arguments)
示例代码：
javascript
function test() {
// arguments是类数组对象
const arr1 = Array.from(arguments);
const arr2 = [...arguments];
const arr3 = Array.prototype.slice.call(arguments);
console.log(Array.isArray(arr1)); // true
}
test(1, 2, 3);32. 箭头函数与普通函数有哪些区别？
- 箭头函数没有自己的this，继承外层作用域的this。
- 箭头函数不能作为构造函数，不能用new调用。
- 箭头函数没有arguments对象，可通过剩余参数...args获取参数。
- 箭头函数不能使用yield，不能作为生成器函数。
- 箭头函数没有prototype属性。
示例代码：
javascript
const arrowFunc = () => {
console.log(this); // 继承外层this
};
function normalFunc() {
console.log(this); // 取决于调用方式
}
// new arrowFunc(); // 报错，箭头函数不能作为构造函数33. 什么是解构赋值？举例说明数组和对象的解构
解构赋值是一种快速从数组或对象中提取值并赋值给变量的语法。
- 数组解构：按位置匹配赋值
javascript
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3
const [x, , y] = [4, 5, 6]; // 跳过第二个元素
console.log(x, y); // 4 6
const [p, q = 10] = [7]; // 设置默认值
console.log(p, q); // 7 10- 对象解构：按属性名匹配赋值
javascript
const { name, age } = { name: 'Tom', age: 20 };
console.log(name, age); // Tom 20
const { id: userId, score = 60 } = { id: 101 }; // 重命名并设默认值
console.log(userId, score); // 101 6034. 如何检查对象是否具有某个属性？
- 使用in运算符：
'属性名' in 对象，返回布尔值，包括继承的属性。 - 使用对象的hasOwnProperty()方法：
对象.hasOwnProperty('属性名')，只检查自身属性，不包括继承的。 - 直接访问属性：若属性值为undefined，可能是属性不存在或值为undefined，不够准确。
示例代码：
javascript
const obj = { a: 1 };
console.log('a' in obj); // true
console.log('toString' in obj); // true（继承自Object.prototype）
console.log(obj.hasOwnProperty('a')); // true
console.log(obj.hasOwnProperty('toString')); // false35. 什么是原型继承？如何实现原型继承？
原型继承是利用原型链让一个对象继承另一个对象的属性和方法。实现方式是将子构造函数的原型指向父构造函数的实例。
示例代码：
javascript
function Parent() {
this.parentProp = 'parent';
}
Parent.prototype.parentMethod = function() {
console.log('parent method');
};
function Child() {
this.childProp = 'child';
}
// 实现原型继承
Child.prototype = new Parent();
Child.prototype.constructor = Child; // 修复constructor指向
const child = new Child();
console.log(child.parentProp); // parent
child.parentMethod(); // parent method36. 什么是函数的返回值？不写return时函数返回什么？
函数的返回值是函数执行完成后通过return语句返回的结果。若函数中不写return，或return后没有值，函数默认返回undefined。
示例代码：
javascript
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // 5
function sayHi() {
console.log('Hi');
// 没有return
}
console.log(sayHi()); // undefined
function emptyReturn() {
return;
}
console.log(emptyReturn()); // undefined37. 什么是模板字符串？它有哪些特点？
模板字符串是用反引号``包裹的字符串，特点：
- 可换行，保留换行符和空格。
- 可通过${}嵌入变量或表达式。
- 可嵌套使用。
示例代码：
javascript
const name = 'Alice';
const age = 25;
const str = `Name: ${name}, Age: ${age + 5}
This is a new line`;
console.log(str);
// 输出：
// Name: Alice, Age: 30
// This is a new line| No. | 大剑师精品GIS教程推荐 |
|---|---|
| 0 | 地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】 |
| 1 | Openlayers 【入门教程】 - 【源代码+示例 300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 4 | Cesium 【入门教程】 - 【源代码+综合教程 200+】 |
| 5 | threejs【中文API】 - 【源代码+图文示例200+】 |
| 6 | Shader 编程 【图文示例 100+】 |
38. 如何获取对象的所有属性名？
- Object.keys()：返回对象自身可枚举属性名组成的数组。
- Object.getOwnPropertyNames()：返回对象自身所有属性名（包括不可枚举的，除Symbol属性）组成的数组。
- Object.getOwnPropertySymbols()：返回对象自身所有Symbol属性名组成的数组。
示例代码：
javascript
const obj = { a: 1, [Symbol('b')]: 2 };
Object.defineProperty(obj, 'c', { value: 3, enumerable: false });
console.log(Object.keys(obj)); // ['a']
console.log(Object.getOwnPropertyNames(obj)); // ['a', 'c']
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(b)]39. 什么是默认参数？如何设置函数的默认参数？
默认参数是在函数定义时为参数指定默认值，当调用函数时未传递该参数或传递undefined时，使用默认值。
示例代码：
javascript
function greet(name = 'Guest', message = 'Hello') {
console.log(`${message}, ${name}!`);
}
greet('Bob'); // Hello, Bob!
greet(); // Hello, Guest!
greet(undefined, 'Hi'); // Hi, Guest!40. 什么是剩余参数？它与arguments有何区别？
剩余参数用...变量名表示，用于收集函数的剩余参数，返回一个数组。
区别：
- 剩余参数是数组，可直接使用数组方法；arguments是类数组对象。
- 剩余参数只包含未被显式声明的参数；arguments包含所有参数。
- 箭头函数没有arguments，但可以使用剩余参数。
示例代码：
javascript
function sum(...nums) {
return nums.reduce((acc, cur) => acc + cur, 0);
}
console.log(sum(1, 2, 3)); // 6
const arrowSum = (...nums) => nums.reduce((acc, cur) => acc + cur, 0);41. 如何遍历对象的属性？
- for...in循环：遍历对象自身和继承的可枚举属性（不含Symbol属性）。
- Object.keys()结合forEach：遍历自身可枚举属性。
- Object.getOwnPropertyNames()结合forEach：遍历自身所有属性（含不可枚举）。
示例代码：
javascript
const obj = { a: 1, b: 2 };
// for...in
for (const key in obj) {
if (obj.hasOwnProperty(key)) { // 过滤继承的属性
console.log(key, obj[key]);
}
}
// Object.keys()
Object.keys(obj).forEach(key => {
console.log(key, obj[key]);
});42. 什么是Promise？它有哪些状态？
Promise是用于处理异步操作的对象，有三种状态：
- pending（进行中）：初始状态，既不是成功也不是失败。
- fulfilled（已成功）：操作完成，会调用then()方法的回调。
- rejected（已失败）：操作失败，会调用catch()方法的回调。
状态一旦改变就不会再变，只能从pending变为fulfilled或rejected。
示例代码：
javascript
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('成功'); // 从pending变为fulfilled
// reject('失败'); // 从pending变为rejected
}, 1000);
});
promise.then(res => console.log(res)).catch(err => console.log(err));43. Promise的链式调用有什么作用？
Promise的链式调用可以解决回调地狱问题，使异步操作按顺序执行，每个then()返回一个新的Promise对象，可继续调用then()或catch()。
示例代码：
javascript
fetchData1()
.then(data1 => {
console.log(data1);
return fetchData2(data1); // 返回新的Promise
})
.then(data2 => {
console.log(data2);
return fetchData3(data2);
})
.then(data3 => console.log(data3))
.catch(err => console.log('出错了：', err));44. Promise.all()和Promise.race()的区别是什么？
- Promise.all(iterable)：接收一个可迭代对象，当所有Promise都fulfilled时，返回一个fulfilled的Promise，结果是所有结果的数组；只要有一个rejected，就返回rejected的Promise，结果是第一个rejected的原因。
- Promise.race(iterable)：接收一个可迭代对象，返回第一个改变状态的Promise的结果（无论是fulfilled还是rejected）。
示例代码：
javascript
const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.reject(3);
Promise.all([p1, p2]).then(res => console.log(res)); // [1, 2]
Promise.all([p1, p3]).catch(err => console.log(err)); // 3
Promise.race([p1, p2]).then(res => console.log(res)); // 1（p1先fulfilled）45. 什么是async/await？它有什么优势？
async/await是基于Promise的语法糖，使异步代码看起来像同步代码，更易读、易维护。
- async用于声明异步函数，函数返回一个Promise。
- await用于等待一个Promise对象，只能在async函数中使用。
优势：代码结构清晰，避免链式调用，错误处理更简单（可使用try/catch）。
示例代码：
javascript
async function fetchData() {
try {
const res1 = await fetchData1();
const res2 = await fetchData2(res1);
console.log(res2);
} catch (err) {
console.log(err);
}
}