Javascript面试题及详细答案150道之（031-045）

《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。

前后端面试题-专栏总目录

一、本文面试题目录

31. 什么是类数组对象？如何将其转换为真正的数组？

类数组对象是具有length属性，且属性为非负整数的对象，如函数的arguments对象、DOM元素集合等。它们不能直接使用数组的方法。
转换为真正数组的方法：

• 使用Array.from()：Array.from(arguments)
• 使用扩展运算符：[...arguments]
• 借助数组的slice方法：Array.prototype.slice.call(arguments)

示例代码：

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属性。

示例代码：

const arrowFunc = () => {console.log(this); // 继承外层this
};
function normalFunc() {console.log(this); // 取决于调用方式
}
// new arrowFunc(); // 报错，箭头函数不能作为构造函数

33. 什么是解构赋值？举例说明数组和对象的解构

解构赋值是一种快速从数组或对象中提取值并赋值给变量的语法。

• 数组解构：按位置匹配赋值

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

• 对象解构：按属性名匹配赋值

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 60

34. 如何检查对象是否具有某个属性？

• 使用in运算符：'属性名' in 对象，返回布尔值，包括继承的属性。
• 使用对象的hasOwnProperty()方法：对象.hasOwnProperty('属性名')，只检查自身属性，不包括继承的。
• 直接访问属性：若属性值为undefined，可能是属性不存在或值为undefined，不够准确。

示例代码：

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')); // false

35. 什么是原型继承？如何实现原型继承？

原型继承是利用原型链让一个对象继承另一个对象的属性和方法。实现方式是将子构造函数的原型指向父构造函数的实例。

示例代码：

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 method

36. 什么是函数的返回值？不写return时函数返回什么？

函数的返回值是函数执行完成后通过return语句返回的结果。若函数中不写return，或return后没有值，函数默认返回undefined。

示例代码：

function add(a, b) {return a + b;
}
console.log(add(2, 3)); // 5function sayHi() {console.log('Hi');// 没有return
}
console.log(sayHi()); // undefinedfunction emptyReturn() {return;
}
console.log(emptyReturn()); // undefined

37. 什么是模板字符串？它有哪些特点？

模板字符串是用反引号``包裹的字符串，特点：

• 可换行，保留换行符和空格。
• 可通过${}嵌入变量或表达式。
• 可嵌套使用。

示例代码：

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属性名组成的数组。

示例代码：

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时，使用默认值。

示例代码：

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，但可以使用剩余参数。

示例代码：

function sum(...nums) {return nums.reduce((acc, cur) => acc + cur, 0);
}
console.log(sum(1, 2, 3)); // 6const arrowSum = (...nums) => nums.reduce((acc, cur) => acc + cur, 0);

41. 如何遍历对象的属性？

• for…in循环：遍历对象自身和继承的可枚举属性（不含Symbol属性）。
• Object.keys()结合forEach：遍历自身可枚举属性。
• Object.getOwnPropertyNames()结合forEach：遍历自身所有属性（含不可枚举）。

示例代码：

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。

示例代码：

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()。

示例代码：

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）。

示例代码：

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)); // 3Promise.race([p1, p2]).then(res => console.log(res)); // 1（p1先fulfilled）

45. 什么是async/await？它有什么优势？

async/await是基于Promise的语法糖，使异步代码看起来像同步代码，更易读、易维护。

• async用于声明异步函数，函数返回一个Promise。
• await用于等待一个Promise对象，只能在async函数中使用。

优势：代码结构清晰，避免链式调用，错误处理更简单（可使用try/catch）。

示例代码：

async function fetchData() {try {const res1 = await fetchData1();const res2 = await fetchData2(res1);console.log(res2);} catch (err) {console.log(err);}
}

二、150道面试题目录列表

文章序号	Javascript面试题150道
1	Javascript面试题及答案150道（001-015）
2	Javascript面试题及答案150道（016-030）
3	Javascript面试题及答案150道（031-045）
4	Javascript面试题及答案150道（046-060）
5	Javascript面试题及答案150道（061-075）
6	Javascript面试题及答案150道（076-090）
7	Javascript面试题及答案150道（091-105）
8	Javascript面试题及答案150道（106-120）
9	Javascript面试题及答案150道（121-135）
10	Javascript面试题及答案150道（136-150）