《前后端面試題》專欄集合了前后端各個知識模塊的面試題，包括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）