據(jù)Stack Overflow的2018年度調(diào)查，JavaScript連續(xù)六年成為最常用的編程語言。所以我們必須面對這樣的現(xiàn)實(shí)，JavaScript已經(jīng)成為全棧開發(fā)技能的基石，在全棧開發(fā)面試中都會(huì)不可避免地涉及到與JavaScript有關(guān)的問題。

FullStack.Cafe匯編了最常見的JavaScript面試問題和答案，希望能夠幫助讀者找到下一份夢想中的工作。

Q1：JavaScript中的強(qiáng)制轉(zhuǎn)型（coercion）是指什么？

難度：0

在JavaScript中，兩種不同的內(nèi)置類型間的轉(zhuǎn)換被稱為強(qiáng)制轉(zhuǎn)型。強(qiáng)制轉(zhuǎn)型在JavaScript中有兩種形式：顯式和隱式。

這是一個(gè)顯式強(qiáng)制轉(zhuǎn)型的例子：

var a="42";
var b=Number( a );
a; // "42"
b; // 42 -- 是個(gè)數(shù)字!

這是一個(gè)隱式強(qiáng)制轉(zhuǎn)型的例子：

var a="42";
var b=a * 1; // "42" 隱式轉(zhuǎn)型成 42 
a; // "42"
b; // 42 -- 是個(gè)數(shù)字!

Q2：JavaScript中的作用域（scope）是指什么？

難度：?

在JavaScript中，每個(gè)函數(shù)都有自己的作用域。作用域基本上是變量以及如何通過名稱訪問這些變量的規(guī)則的集合。只有函數(shù)中的代碼才能訪問函數(shù)作用域內(nèi)的變量。

同一個(gè)作用域中的變量名必須是唯一的。一個(gè)作用域可以嵌套在另一個(gè)作用域內(nèi)。如果一個(gè)作用域嵌套在另一個(gè)作用域內(nèi)，最內(nèi)部作用域內(nèi)的代碼可以訪問另一個(gè)作用域的變量。

Q3：解釋JavaScript中的相等性

難度：?

JavaScript中有嚴(yán)格比較和類型轉(zhuǎn)換比較：

• 嚴(yán)格比較（例如===）在不允許強(qiáng)制轉(zhuǎn)型的情況下檢查兩個(gè)值是否相等
• 抽象比較（例如==）在允許強(qiáng)制轉(zhuǎn)型的情況下檢查兩個(gè)值是否相等

var a="42";
var b=42;
a==b; // true
a===b; // false

一些簡單的規(guī)則：

• 如果被比較的任何一個(gè)值可能是true或false，要用===，而不是==。
• 如果被比較的任何一個(gè)值是這些特定值（0、“”或[]），要用===，而不是==。
• 在其他情況下，可以安全地使用==。它不僅安全，而且在很多情況下，它可以簡化代碼，并且提升代碼可讀性。

Q4：解釋什么是回調(diào)函數(shù)，并提供一個(gè)簡單的例子。

難度：??

回調(diào)函數(shù)是可以作為參數(shù)傳遞給另一個(gè)函數(shù)的函數(shù)，并在某些操作完成后執(zhí)行。下面是一個(gè)簡單的回調(diào)函數(shù)示例，這個(gè)函數(shù)在某些操作完成后打印消息到控制臺(tái)。

function modifyArray(arr, callback) {
 // 對arr做一些操作
 arr.push(100);
 // 執(zhí)行傳進(jìn)來的callback函數(shù)
 callback();
}
var arr=[1, 2, 3, 4, 5];
modifyArray(arr, function() {
 console.log("array has been modified", arr);
});

Q5：“use strict”的作用是什么？

難度：??

use strict出現(xiàn)在JavaScript代碼的頂部或函數(shù)的頂部，可以幫助你寫出更安全的JavaScript代碼。如果你錯(cuò)誤地創(chuàng)建了全局變量，它會(huì)通過拋出錯(cuò)誤的方式來警告你。例如，以下程序?qū)伋鲥e(cuò)誤：

function doSomething(val) {
 "use strict"; 
 x=val + 10;
}

它會(huì)拋出一個(gè)錯(cuò)誤，因?yàn)閤沒有被定義，并使用了全局作用域中的某個(gè)值對其進(jìn)行賦值，而use strict不允許這樣做。下面的小改動(dòng)修復(fù)了這個(gè)錯(cuò)誤：

function doSomething(val) {
 "use strict"; 
 var x=val + 10;
}

Q6：解釋JavaScript中的null和undefined

難度：??

JavaScript中有兩種底層類型：null和undefined。它們代表了不同的含義：

• 尚未初始化的東西：undefined。
• 目前不可用的東西：null。

Q7：編寫一個(gè)可以執(zhí)行如下操作的函數(shù)。

難度：??

var addSix=createBase(6);
addSix(10); // 返回16
addSix(21); // 返回27

可以創(chuàng)建一個(gè)閉包來存放傳遞給函數(shù)createBase的值。被返回的內(nèi)部函數(shù)是在外部函數(shù)中創(chuàng)建的，內(nèi)部函數(shù)就成了一個(gè)閉包，它可以訪問外部函數(shù)中的變量，在本例中是變量baseNumber。

function createBase(baseNumber) {
 return function(N) {
 // 我們在這里訪問baseNumber，即使它是在這個(gè)函數(shù)之外聲明的。
 // JavaScript中的閉包允許我們這么做。
 return baseNumber + N;
 }
}
var addSix=createBase(6);
addSix(10);
addSix(21);

Q8：解釋JavaScript中的值和類型

難度：??

JavaScript有類型值，但沒有類型變量。JavaScript提供了以下幾種內(nèi)置類型：

• string
• number
• boolean
• null 和 undefined
• object
• symbol (ES6中新增的)

Q9：解釋事件冒泡以及如何阻止它

難度：??

事件冒泡是指嵌套最深的元素觸發(fā)一個(gè)事件，然后這個(gè)事件順著嵌套順序在父元素上觸發(fā)。

防止事件冒泡的一種方法是使用event.cancelBubble或event.stopPropagation()（低于IE 9）。

Q10：JavaScript中的let關(guān)鍵字有什么用？

難度：??

除了可以在函數(shù)級別聲明變量之外，ES6還允許你使用let關(guān)鍵字在代碼塊（{..}）中聲明變量。

Q11：如何檢查一個(gè)數(shù)字是否為整數(shù)？

難度：??

檢查一個(gè)數(shù)字是小數(shù)還是整數(shù)，可以使用一種非常簡單的方法，就是將它對1進(jìn)行取模，看看是否有余數(shù)。

function isInt(num) {
 return num % 1===0;
}
console.log(isInt(4)); // true
console.log(isInt(12.2)); // false
console.log(isInt(0.3)); // false

Q12：什么是IIFE（立即調(diào)用函數(shù)表達(dá)式）？

難度：???

它是立即調(diào)用函數(shù)表達(dá)式（Immediately-Invoked Function Expression），簡稱IIFE。函數(shù)被創(chuàng)建后立即被執(zhí)行：

(function IIFE(){
 console.log( "Hello!" );
})();
// "Hello!"

在避免污染全局命名空間時(shí)經(jīng)常使用這種模式，因?yàn)镮IFE（與任何其他正常函數(shù)一樣）內(nèi)部的所有變量在其作用域之外都是不可見的。

Q13：如何在JavaScript中比較兩個(gè)對象？

難度：???

對于兩個(gè)非原始值，比如兩個(gè)對象（包括函數(shù)和數(shù)組），==和===比較都只是檢查它們的引用是否匹配，并不會(huì)檢查實(shí)際引用的內(nèi)容。

例如，默認(rèn)情況下，數(shù)組將被強(qiáng)制轉(zhuǎn)型成字符串，并使用逗號將數(shù)組的所有元素連接起來。所以，兩個(gè)具有相同內(nèi)容的數(shù)組進(jìn)行==比較時(shí)不會(huì)相等：

var a=[1,2,3];
var b=[1,2,3];
var c="1,2,3";
a==c; // true
b==c; // true
a==b; // false

對于對象的深度比較，可以使用deep-equal這個(gè)庫，或者自己實(shí)現(xiàn)遞歸比較算法。

Q14：你能解釋一下ES5和ES6之間的區(qū)別嗎？

難度：???

• ECMAScript 5（ES5）：ECMAScript的第5版，于2009年標(biāo)準(zhǔn)化。這個(gè)標(biāo)準(zhǔn)已在所有現(xiàn)代瀏覽器中完全實(shí)現(xiàn)。
• ECMAScript 6（ES6）或ECMAScript 2015（ES2015）：第6版ECMAScript，于2015年標(biāo)準(zhǔn)化。這個(gè)標(biāo)準(zhǔn)已在大多數(shù)現(xiàn)代瀏覽器中部分實(shí)現(xiàn)。

以下是ES5和ES6之間的一些主要區(qū)別：

• 箭頭函數(shù)和字符串插值：

const greetings=(name)=> {
 return `hello ${name}`;
}
const greetings=name=> `hello ${name}`;

• 常量

常量在很多方面與其他語言中的常量一樣，但有一些需要注意的地方。常量表示對值的“固定引用”。因此，在使用常量時(shí)，你實(shí)際上可以改變變量所引用的對象的屬性，但無法改變引用本身。

const NAMES=[];
NAMES.push("Jim");
console.log(NAMES.length===1); // true
NAMES=["Steve", "John"]; // error

• 塊作用域變量。

新的ES6關(guān)鍵字let允許開發(fā)人員聲明塊級別作用域的變量。let不像var那樣可以進(jìn)行提升。

• 默認(rèn)參數(shù)值

默認(rèn)參數(shù)允許我們使用默認(rèn)值初始化函數(shù)。如果省略或未定義參數(shù)，則使用默認(rèn)值，也就是說null是有效值。

// 基本語法
function multiply (a, b=2) {
 return a * b;
}
multiply(5); // 10

• 類定義和繼承

ES6引入了對類（關(guān)鍵字class）、構(gòu)造函數(shù)（關(guān)鍵字constructor）和用于繼承的extend關(guān)鍵字的支持。

• for…of操作符

for…of語句將創(chuàng)建一個(gè)遍歷可迭代對象的循環(huán)。

• 用于對象合并的Spread操作

const obj1={ a: 1, b: 2 }
const obj2={ a: 2, c: 3, d: 4}
const obj3={...obj1, ...obj2}

• promise

promise提供了一種機(jī)制來處理異步操作結(jié)果。你可以使用回調(diào)來達(dá)到同樣的目的，但是promise通過方法鏈接和簡潔的錯(cuò)誤處理帶來了更高的可讀性。

const isGreater=(a, b)=> {
return new Promise ((resolve, reject)=> {
 if(a > b) {
 resolve(true)
 } else {
 reject(false)
 }
 })
}
isGreater(1, 2)
.then(result=> {
 console.log('greater')
})
.catch(result=> {
 console.log('smaller')
})

• 模塊導(dǎo)出和導(dǎo)入

const myModule={ x: 1, y: ()=> { console.log('This is ES5') }}
export default myModule;
import myModule from './myModule';

Q15：解釋JavaScript中“undefined”和“not defined”之間的區(qū)別

難度：???

在JavaScript中，如果你試圖使用一個(gè)不存在且尚未聲明的變量，JavaScript將拋出錯(cuò)誤“var name is not defined”，讓后腳本將停止運(yùn)行。但如果你使用typeof undeclared_variable，它將返回undefined。

在進(jìn)一步討論之前，先讓我們理解聲明和定義之間的區(qū)別。

“var x”表示一個(gè)聲明，因?yàn)槟銢]有定義它的值是什么，你只是聲明它的存在。

var x; // 聲明x
console.log(x); //輸出: undefined

“var x=1”既是聲明又是定義（我們也可以說它是初始化），x變量的聲明和賦值相繼發(fā)生。在JavaScript中，每個(gè)變量聲明和函數(shù)聲明都被帶到了當(dāng)前作用域的頂部，然后進(jìn)行賦值，這個(gè)過程被稱為提升（hoisting）。

當(dāng)我們試圖訪問一個(gè)被聲明但未被定義的變量時(shí)，會(huì)出現(xiàn)undefined錯(cuò)誤。

var x; // 聲明
if(typeof x==='undefined') // 將返回 true

當(dāng)我們試圖引用一個(gè)既未聲明也未定義的變量時(shí)，將會(huì)出現(xiàn)not defined錯(cuò)誤。

console.log(y); // 輸出: ReferenceError: y is not defined

Q16：匿名和命名函數(shù)有什么區(qū)別？

難度：???

var foo=function() { // 賦給變量foo的匿名函數(shù)
 // ..
};
var x=function bar(){ // 賦給變量x的命名函數(shù)bar
 // ..
};
foo(); // 實(shí)際執(zhí)行函數(shù)
x();

Q17：Javascript中的“閉包”是什么？舉個(gè)例子？

難度：????

閉包是在另一個(gè)函數(shù)（稱為父函數(shù)）中定義的函數(shù)，并且可以訪問在父函數(shù)作用域中聲明和定義的變量。

閉包可以訪問三個(gè)作用域中的變量：

• 在自己作用域中聲明的變量；
• 在父函數(shù)中聲明的變量；
• 在全局作用域中聲明的變量。

var globalVar="abc";
// 自調(diào)用函數(shù)
(function outerFunction (outerArg) { // outerFunction作用域開始
 // 在outerFunction函數(shù)作用域中聲明的變量
 var outerFuncVar='x'; 
 // 閉包自調(diào)用函數(shù)
 (function innerFunction (innerArg) { // innerFunction作用域開始
 // 在innerFunction函數(shù)作用域中聲明的變量
 var innerFuncVar="y";
 console.log( 
 "outerArg=" + outerArg + "\n" +
 "outerFuncVar=" + outerFuncVar + "\n" +
 "innerArg=" + innerArg + "\n" +
 "innerFuncVar=" + innerFuncVar + "\n" +
 "globalVar=" + globalVar);
 // innerFunction作用域結(jié)束
 })(5); // 將5作為參數(shù)
// outerFunction作用域結(jié)束
})(7); // 將7作為參數(shù)

innerFunction是在outerFunction中定義的閉包，可以訪問在outerFunction作用域內(nèi)聲明和定義的所有變量。除此之外，閉包還可以訪問在全局命名空間中聲明的變量。

上述代碼的輸出將是：

outerArg=7
outerFuncVar=x
innerArg=5
innerFuncVar=y
globalVar=abc

Q18：如何在JavaScript中創(chuàng)建私有變量？

難度：????

要在JavaScript中創(chuàng)建無法被修改的私有變量，你需要將其創(chuàng)建為函數(shù)中的局部變量。即使這個(gè)函數(shù)被調(diào)用，也無法在函數(shù)之外訪問這個(gè)變量。例如：

function func() {
 var priv="secret code";
}
console.log(priv); // throws error

要訪問這個(gè)變量，需要?jiǎng)?chuàng)建一個(gè)返回私有變量的輔助函數(shù)。

function func() {
 var priv="secret code";
 return function() {
 return priv;
 }
}
var getPriv=func();
console.log(getPriv()); //=> secret code

Q19：請解釋原型設(shè)計(jì)模式

難度：????

原型模式可用于創(chuàng)建新對象，但它創(chuàng)建的不是非初始化的對象，而是使用原型對象（或樣本對象）的值進(jìn)行初始化的對象。原型模式也稱為屬性模式。

原型模式在初始化業(yè)務(wù)對象時(shí)非常有用，業(yè)務(wù)對象的值與數(shù)據(jù)庫中的默認(rèn)值相匹配。原型對象中的默認(rèn)值被復(fù)制到新創(chuàng)建的業(yè)務(wù)對象中。

經(jīng)典的編程語言很少使用原型模式，但作為原型語言的JavaScript在構(gòu)造新對象及其原型時(shí)使用了這個(gè)模式。

Q20：判斷一個(gè)給定的字符串是否是同構(gòu)的

難度：????

如果兩個(gè)字符串是同構(gòu)的，那么字符串A中所有出現(xiàn)的字符都可以用另一個(gè)字符替換，以便獲得字符串B，而且必須保留字符的順序。字符串A中的每個(gè)字符必須與字符串B的每個(gè)字符一對一對應(yīng)。

• paper和title將返回true。
• egg和sad將返回false。
• dgg和add將返回true。

isIsomorphic("egg", 'add'); // true
isIsomorphic("paper", 'title'); // true
isIsomorphic("kick", 'side'); // false
function isIsomorphic(firstString, secondString) {
 // 檢查長度是否相等，如果不相等, 它們不可能是同構(gòu)的
 if (firstString.length !==secondString.length) return false
 var letterMap={};
 for (var i=0; i < firstString.length; i++) {
 var letterA=firstString[i],
 letterB=secondString[i];
 // 如果letterA不存在, 創(chuàng)建一個(gè)map，并將letterB賦值給它
 if (letterMap[letterA]===undefined) {
 letterMap[letterA]=letterB;
 } else if (letterMap[letterA] !==letterB) {
 // 如果letterA在map中已存在, 但不是與letterB對應(yīng)，
 // 那么這意味著letterA與多個(gè)字符相對應(yīng)。
 return false;
 }
 }
 // 迭代完畢，如果滿足條件，那么返回true。
 // 它們是同構(gòu)的。
 return true;
}

Q21：“Transpiling”是什么意思？

難度：????

對于語言中新加入的語法，無法進(jìn)行polyfill。因此，更好的辦法是使用一種工具，可以將較新代碼轉(zhuǎn)換為較舊的等效代碼。這個(gè)過程通常稱為轉(zhuǎn)換（transpiling），就是transforming + compiling的意思。

通常，你會(huì)將轉(zhuǎn)換器（transpiler）加入到構(gòu)建過程中，類似于linter或minifier。現(xiàn)在有很多很棒的轉(zhuǎn)換器可選擇：

• Babel：將ES6+轉(zhuǎn)換為ES5
• Traceur：將ES6、ES7轉(zhuǎn)換為ES5

Q22：“this”關(guān)鍵字的原理是什么？請?zhí)峁┮恍┐a示例。

難度：????

在JavaScript中，this是指正在執(zhí)行的函數(shù)的“所有者”，或者更確切地說，指將當(dāng)前函數(shù)作為方法的對象。

function foo() {
 console.log( this.bar );
}
var bar="global";
var obj1={
 bar: "obj1",
 foo: foo
};
var obj2={
 bar: "obj2"
};
foo(); // "global"
obj1.foo(); // "obj1"
foo.call( obj2 ); // "obj2"
new foo(); // undefined

Q23：如何向Array對象添加自定義方法，讓下面的代碼可以運(yùn)行？

難度：????

var arr=[1, 2, 3, 4, 5];
var avg=arr.average();
console.log(avg);

JavaScript不是基于類的，但它是基于原型的語言。這意味著每個(gè)對象都鏈接到另一個(gè)對象（也就是對象的原型），并繼承原型對象的方法。你可以跟蹤每個(gè)對象的原型鏈，直到到達(dá)沒有原型的null對象。我們需要通過修改Array原型來向全局Array對象添加方法。

Array.prototype.average=function() {
 // 計(jì)算sum的值
 var sum=this.reduce(function(prev, cur) { return prev + cur; });
 // 將sum除以元素個(gè)數(shù)并返回
 return sum / this.length;
}
var arr=[1, 2, 3, 4, 5];
var avg=arr.average();
console.log(avg); //=> 3

Q24：什么是JavaScript中的提升操作？

難度：????

提升（hoisting）是JavaScript解釋器將所有變量和函數(shù)聲明移動(dòng)到當(dāng)前作用域頂部的操作。有兩種類型的提升：

• 變量提升——非常少見
• 函數(shù)提升——更常見

無論var（或函數(shù)聲明）出現(xiàn)在作用域的什么地方，它都屬于整個(gè)作用域，并且可以在該作用域內(nèi)的任何地方訪問它。

var a=2;
foo(); // 因?yàn)閌foo()`聲明被"提升"，所以可調(diào)用
function foo() {
 a=3;
 console.log( a ); // 3
 var a; // 聲明被"提升"到foo()的頂部
}
console.log( a ); // 2

Q25：以下代碼輸出的結(jié)果是什么？

難度：????

0.1 + 0.2===0.3

這段代碼的輸出是false，這是由浮點(diǎn)數(shù)內(nèi)部表示導(dǎo)致的。0.1 + 0.2并不剛好等于0.3，實(shí)際結(jié)果是0.30000000000000004。解決這個(gè)問題的一個(gè)辦法是在對小數(shù)進(jìn)行算術(shù)運(yùn)算時(shí)對結(jié)果進(jìn)行舍入。

Q26：請描述一下Revealing Module Pattern設(shè)計(jì)模式

難度：?????

暴露模塊模式（Revealing Module Pattern）是模塊模式的一個(gè)變體，目的是維護(hù)封裝性并暴露在對象中返回的某些變量和方法。如下所示：

var Exposer=(function() {
 var privateVariable=10;
 var privateMethod=function() {
 console.log('Inside a private method!');
 privateVariable++;
 }
 var methodToExpose=function() {
 console.log('This is a method I want to expose!');
 }
 var otherMethodIWantToExpose=function() {
 privateMethod();
 }
 return {
 first: methodToExpose,
 second: otherMethodIWantToExpose
 };
})();
Exposer.first(); // 輸出: This is a method I want to expose!
Exposer.second(); // 輸出: Inside a private method!
Exposer.methodToExpose; // undefined

它的一個(gè)明顯的缺點(diǎn)是無法引用私有方法。

英文原文：https://www.fullstack.cafe/blog/top-26-javascript-interview-questions-and-answers-in-2019

加米谷大數(shù)據(jù)培訓(xùn)機(jī)構(gòu)，小班教學(xué)創(chuàng)始人面授，10月22日成都大數(shù)據(jù)開發(fā)零基礎(chǔ)班預(yù)報(bào)名進(jìn)行中...

言

JsBarcode是一個(gè)用JavaScript編寫的條形碼生成器。它支持多種條形碼格式，可在瀏覽器和Node.js中使用。如果你在項(xiàng)目中使用了jquery也可以使用jquery，但它不是依賴項(xiàng)。

github

https://github.com/lindell/JsBarcode

支持的條形碼種類

• CODE128
• CODE128 (automatic mode switching)
• CODE128 A/B/C (force mode)
• EAN
• EAN-13
• EAN-8
• EAN-5
• EAN-2
• UPC (A)
• UPC (E)
• CODE39
• ITF
• ITF
• ITF-14
• MSI
• MSI10
• MSI11
• MSI1010
• MSI1110
• Pharmacode
• Codabar

瀏覽器中使用舉例

• 通過svg、canvas、img都可以

<svg id="barcode"></svg>
<!-- or -->
<canvas id="barcode"></canvas>
<!-- or -->
<img id="barcode"/>

JsBarcode("#barcode", "Hi!");
// or with jQuery
$("#barcode").JsBarcode("Hi!");

JsBarcode("#barcode", "1234", {
 format: "pharmacode",
 lineColor: "#0aa",
 width:4,
 height:40,
 displayValue: false
});

• 你也可以使用一些自定義的配置

JsBarcode("#barcode", "1234", {
 format: "pharmacode",
 lineColor: "#0aa",
 width:4,
 height:40,
 displayValue: false
});

• 更高級的用法

JsBarcode("#barcode")
 .options({font: "OCR-B"}) // Will affect all barcodes
 .EAN13("1234567890128", {fontSize: 18, textMargin: 0})
 .blank(20) // Create space between the barcodes
 .EAN5("12345", {height: 85, textPosition: "top", fontSize: 16, marginTop: 15})
 .render();

• 直接在html標(biāo)簽中使用

<svg class="barcode"
 jsbarcode-format="upc"
 jsbarcode-value="123456789012"
 jsbarcode-textmargin="0"
 jsbarcode-fontoptions="bold">
</svg>

初始化還是需要的

JsBarcode(".barcode").init();

安裝使用

• 瀏覽器使用

你可以下載完整的支持所有受支持的條形碼，也可以下載特定的條形碼，根據(jù)自己的需要進(jìn)行下載，具體的下載地址可以到github下載。

瀏覽器引入

<script src="JsBarcode.all.min.js"></script>

使用broser或者npm包管理

bower install jsbarcode --save
npm install jsbarcode --save

• nodejs使用

首先你的安裝jsbarcode和canvas

npm install jsbarcode
npm install canvas

使用簡單案例

var JsBarcode=require('jsbarcode');
// Canvas v1
var Canvas=require("canvas");
// Canvas v2
var { createCanvas }=require("canvas");
// Canvas v1
var canvas=new Canvas();
// Canvas v2
var canvas=createCanvas();
JsBarcode(canvas, "Hello");

所有配置項(xiàng)

總結(jié)

JSBarcode是一個(gè)條形碼JavaScript中的條形碼生成插件，支持瀏覽器端和nodejs，在很多業(yè)務(wù)場景下都可以使用到，非常的簡單實(shí)用！希望對你有所幫助！