JavaScript常問面試題及答案總結大全
面試題：延遲加載JS有哪些方式?
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
?
延遲加載：async、defer
例如: <script defer type="text/javascript" src='script.js'></script>defer：等html全部解析完成，才會執(zhí)行js代碼，順次執(zhí)行js腳本。
async：async是和html解析同步的（一起的)，不是順次執(zhí)行js腳本（誰先加載完誰先執(zhí)行)。
面試題：JS數據類型有哪些?
基本類型: string、number、boolean、undefined、null、symbol,bigint
引用類型：object
?
NaN是一個數值類型，但是不是一個具體的數字。
面試題：null和undefined的區(qū)別
1. 作者在設計js的都是先設計的nul1（為什么設計了null：最初設計js的時候借鑒了java的語言)
2． null會被隱式轉換成0，很不容易發(fā)現錯誤。
3. 先有null后有undefined,出來undefined是為了填補之前的坑。
?
具體區(qū)別：JavaScript的最初版本是這樣區(qū)分的：null是一個表示"無"的對象（空對象指針)，轉為數值時為0;undefined是一個表示”無”的原始值，轉為數值時為NaN。
面試題：JS數據類型考題
<script type="text/javascript">
console.log( true + 1 ); // 2
console.log( 'name'+true ); //nametrue
console.log( undefined + 1 ); //NaN
console.log( typeof(undefined + 1 )); //number
console.log( typeof null ); //Object
//字符串和其他類型相加，變成連接的形式
alert(typeof(NaN)); // number
alert(typeof(undefined)) // undefined
alert(typeot(null)) // Object
</script>面試題：==和===有什么不同
== ：比較的是值
string == number || booleanll number ....都會隱式轉換
通過valueOf轉換(valueOf()方法通常由JavaScript在后臺自動調用，并不顯示地出現在代碼中。)
=== ：除了比較值，還比較類型
console.log( 1 =='1' ); // true console.log( true == 1 ); // true console.log( null == undefined ); // true console.log( [1,2] == '1,2' ) // true
面試題：JS微任務和宏任務
1．js是單線程的語言。
2．js代碼執(zhí)行流程： 同步執(zhí)行完 ==》 事件循環(huán)
同步的任務都執(zhí)行完了，才會執(zhí)行事件循環(huán)的內容
進入事件循環(huán)：請求、定時器、事件 ···
3. 事件循環(huán)中包含： 【微任務、宏任務】
微任務：promise.then
宏任務：setTimeout...要執(zhí)行宏任務的前提是清空了所有的微任務
流程：同步 ==》 事件循環(huán)【微任務和宏任務】 ==》 微任務 ==》 宏任務 ==》 微任務...
面試題：JS作用域考題
1. 除了函數外，js是沒有塊級作用域。
2. 作用域鏈：內部可以訪問外部的變量，但是外部不能訪問內部的變量。
注意：如果內部有，優(yōu)先查找到內部，如果內部沒有就查找外部的。
3. 注意聲明變量是用var還是沒有寫（window.)
4. 注意：js有變量提升的機制【變量懸掛聲明】
5. 優(yōu)先級：聲明變量>聲明普通函數>參數>變量提升
?
面試的時候怎么看：
1．本層作用域有沒有此變量【注意變量提升】
2．注意：js除了函數外沒有塊級作用域
3．普通聲明函數是不看寫函數的時候順序
// 考題一：
function c(){
var b = 1;
function a(){
console.log( b ); // undefined
var b = 2;
console.log( b ); //2
}
a();
console.log( b ); // 1
}
c();// 考題二：
var name = 'World!';
(function(){
if (typeof name ==='undefined'){
var name ='Jack':
console.log('Goodbye'+ name): // Goodbye Jack
}else{
console.log('Hello'+name):
}
})()// 考題三
var bar = 1;
function test(){
console.log( bar ); // undefine
var bar = 2;
console.log( bar ); // 2
}
test();
function fun( a ){
var a = 10;
functibn a(){}
console.log( a ); // 10
}
fun( 100 );// 考題四：
function fun(){
var a = 2;
function a(){}
console.log( a ); // 2
}
fun();
function fun(){
console.log( a ); // f a(){}
var a = 10;
function a(){}
}
fun();
function fun(){ // var a
a=10;
console.log( a ); // 10
var a = 20;
console.log( a ); // 20
}
fun();面試題：JS對象考題
JS對象注意點：
1. 對象是通過new操作符構建出來的，所以對象之間不相等
2. 對象注意：引用類型
3. 對象的key都是字符串類型
4. 對象如何找屬性|方法
先在對象本身找===>構造函數中找===>對象原型中找===>構造函數原型中找 ===>對象上一層原型查找
// 面試題一： console.log( [1,2,3] === [1,2,3] ); // true
// 面試題二：
var obj1= {
a：'hellow‘
}
var obj2 = obj1
obj2.a = 'world'
console.log(obj1) //{a:'world'}
(function(){
console.log(a) // undefinud
var a=1
})();// 面試題三：
var a = {};
var b = {
key:'a'
}
var с = {
key:'c"
}
a[b] ='123';
a[c] ='456';
console.log( a[b] ) // '456'面試題：JS作用域+this指向+原型考題
// 考題一：
function Foo({
getName= function(){console.log(1)}//注意是全局的window.
return this;
}
Foo.getName = function()(console.log(2))
Foo.prototype.getName = function()(console.log(3)}
var getName = function()(console.log(4))
function getName(){
console.log(5)
}
Foo.getName(); // 2
getName(); // 4
Foo().getName(); // 1
getName(); // 1
new Foo().getName(); // 3// 考題二：
var o ={
a:10,
b:{
fn:function(){
console.log(this.a ); // undefined
console.log(this) // {fn:f}, 代表對象
}
}
}
o.b.fn();面試題：JS判斷變量是不是數組，你能寫出哪些方法
方法一：isArray
var arr = [1,2,3];
console.log(Array isArray( arr ) );
方法二：instancerof
var arr = [1,2,3];
console.log( arr instanceof Array);
方法三：原型prototype
console.log( Object.prototype.toString.call(arr).indexOf('Array') > -1):
方法四：isPrototypeOf()
console.log( Array.prototype.isPrototypeof(arr))
方法無：constructor
console.log( arr.constructor.toString().indexof('Array') > -1）面試題：slice是干嘛的、splice是否會改變原數組
1.slice是來截取的
參數可以寫slice(3)、slice(1,3)、slice(-3)
返回的是一個新的數組
2．splice功能有：插入、刪除、替換
返回：刪除的元素
該方法會改變原數組
面試題：JS數組去重
方式一：new Set
var arr1 = [1,2,3,2,4,1];
console.log( Array.from( new Set(arr1))); // [1,2,3,4]
console.log( [...new Set(arr1)] ); // [1,2,3,4]
function unique(arr){
return [...new Set(arr)]
}
console.log(unique(arr1) ); // [1,2,3,4]方式二：indexOf
var arr2 = [1,2,3,2,4,1];
function unique( arr ){
var brr = [];
for( var i=0;i<arr.length;i++){
if( brr.indexOf(arr[i]) == -1){
brr.push( arr[i] );
}
}
return brr;
}
console.log( unique(arr2) ); // [1,2,3,4]方式三：sort
var arr3 = [1,2,3,2,4,1];
function unique( arr ){
arr = arr.sort();
var brr = [];
for(var i=0;i<arr.length;i++){
if(arr[i] !== arr[i-1]){
brr.push( arr[i] );
}
}
return brr;
}
console.log( unique(arr3) ); // [1,2,3,4]面試題：找出多維數組最大值
function fnArr(arr){
var newArr = [];
arr.forEach((item,index)=>{
newArr.push(Math.max(...item))
})
return newArr; // [5, 27, 39, 1001]
}
console.log(fnArr([
[4,5,1,3],
[13,27,18,26],
[32,35,37,39],
[1000,1001,857,1]
]))面試題：給字符串新增方法實現功能
/*考題：
1.給字符串對象定義一個addPrefix函數，當傳入一個字符串str時，它會返回新的帶有指定前
綴的字符串，例如：
console.log("world".addPrefix("hello")
控制臺會輸出:：“helloworld"
*/
String.prototype.addPrefix = function(str){
return str + this;
}
console.log('world'.addPrefix('hello')) // helloworld面試題：找出字符串出現最多次數的字符以及次數
var str = 'helloworld'
var obj={};
for(var i=0;i<str.length;i++){
//charAt() 方法可返回指定位置的字符。
var char = str.charAt(i);
if( obj[char]){
obj[char]++;
}else{
obj[char] = 1;
}
}
console.log( obj ); // {h: 1, e: 1, l: 3, o: 2, w: 1, …}
//統計出來最大值
var max = 0;
for( var key in obj ){
if( max < obj[key] ){
max = obj [key];
}
}
//拿最大值去對比
for( var key in obj ){
if(obj[key] == max ){
console.log('最多的字符是' + key); //最多的字符是l
console.log('出現的次數是' + max); // 出現的次數是3
}
}面試題：new操作符具體做了什么
1. 創(chuàng)建了一個空的對象
2. 將空對象的原型，指向于構造函數的原型
3. 將空對象作為構造函數的上下文（改變this指向）
4. 對構造函數有返回值的處理判斷
5. 如果構造器中沒有返回對象，則返回上面的創(chuàng)建出來的對象
面試題：閉包
1．閉包是什么
閉包是一個函數加上到創(chuàng)建函數的作用域的連接，閉包“關閉”了函數的自由變量。
2. 閉包可以解決什么問題【閉包的優(yōu)點】
2.1內部函數可以訪問到外部函數的局部變量
2.2閉包可以解決的問題
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
(function(i){
lis[i].onclick = function(){
alert(i);
}
})(i)
}
3. 閉包的缺點
3.1 變量會駐留在內存中，造成內存損耗問題。
解決：把閉包的函數設置為null
3.2 內存泄漏【ie】 ==> 可說可不說，如果說一定要提到ie
面試題：原型鏈
1. 原型可以解決什么問題 對象共享屬性和共享方法 2. 誰有原型 函數擁有：prototype 對象擁有：__proto__ 3.對象查找屬性或者方法的順序 先在對象本身查找 --> 構造函數中查找 --> 對象的原型 --> 構造函數的原型中 --> 當前原型的原型這找 4．原型鏈 4.1 是什么？：就是把原型串聯起來 4.2 原型鏈的最頂端是null 每個對象（Object）都有一個私有屬性指向另一個名為原型（prototype）的對象。原型對象也有一個自己的原型，層層向上直到一個對象的原型為 null。根據定義，null 沒有原型，并作為這個原型鏈（prototype chain）中的最后一個環(huán)節(jié)。
隱式原型
原型鏈
面試題：JS繼承有哪些方式
// 方法一：ES6
class Parent{
constructor(){
this.age = 18;
}
}
class Child extends Parent{
constructor({
super();
this.name ='張三';
}
}
let o1 = new Child();
console.log( o1,o1.name,o1.age );//方法二：原型鏈繼承（實現了共享）
function Parent(){
this.age = 20;
}
function Child(){
this.name= '張三'
}
Child.prototype = new Parent();
let o2 = new Child();
console.log( o2,o2.name,o2.age ); // {name:'張三',age:20},'張三'，20// 方法三：借用構造函數（實現不了共享）
function Parent(){
this.age = 20;
}
function Child(){
Parent.call(this);
this.name= '張三';
}
let o3 = new Child();
console.log( o3,o3.name,o3.age ); // {name:'張三',age:20} '張三' 20// 方法四：組合式繼承（既可以實現共享，也可以解決原型鏈問題）
function Parent(){
this.age = 20;
}
function Child(){
Parent.call(this);
this.name= '張三';
}
Child.prototype = new Parent();
let o4 = new Child();
console.log( o4,o4.name,o4.age ); // {name:'張三',age:20} '張三' 20說一下call、apply、bind區(qū)別
共同點：功能一致
可以改變this指向語法：函數.call()、函數.apply()、函數.bind()
區(qū)別：
1. call、apply可以立即執(zhí)行。bind不會立即執(zhí)行，因為bind返回的是一個函數需要加入()執(zhí)行
2．參數不同：apply第二個參數是數組。call和bind有多個參數需要挨個寫。
var str='你好';
varobj={str:'這是obj對象內的str'}
function fun(){
console.log( this, this.str );
}
//fun.call（obj）; // call立即執(zhí)行
//fun.apply(obj）; // apply立即執(zhí)行
fun.bind(obj)(); // 執(zhí)行結果為函數
fun. bind(obj) ; // bind不會立即執(zhí)行，因為bind返回的是函數
fun();
var str ='你好';
varobj={str:'這是obj對象內的str'}
function fun( name, age ){
this.name = name;
this.age = age;
console.log( this,this.str );
}
fun.call(obj,‘張三',18); // {str:'這是obj對象內的str'，name：'張三',age:18} '這是obj對象內的str'
fun.apply(obj,['張三',88]);// {str:'這是obj對象內的str'，name：'張三',age:88} '這是obj對象內的str'
fun.bind(obj,['張三',88])();// {str:'這是obj對象內的str'，name：['張三',88],age:undefined} '這是obj對象內的str'
fun.bind(obj,'張三',88)();// {str:'這是obj對象內的str'，name：'張三',age:88} '這是obj對象內的str'場景
// apply
var arr1= [1,2,4,5,7,3,321];
console.log(Math.max.apply(null,arr1))
// bind
var btn = document.getElementById('btn');
var h1s = document.getElementById('h1s');
btn.onclick = function(){
console.log( this.id );
}.bind(h1s)sort背后原理是什么?
V8引擎sort函數只給出了兩種排序InsertionSort和QuickSort，數量小于10的數組使用InsertionSort，比10大的數組則使用QuickSort。
之前的版本是：插入排序和快排，現在是冒泡
鏈接：
https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js
var arr1= [12,11,1,23,'45','34',21,'b','a','ab','bc'];
console.log( arrl.sort()); // [1,11,12,21,23,'34'，'45','a','ab'，'b'，'bc']
var arr2= [12,111,11,1,23,'45','34',21];
var arr3 = arr2.sort(function( a, b ){
return b-a;
})
console.log( arr3 ); // [111,'45','34',23,21,12,11,1]
var arr4 = [
{name:'zhangsan',age:18},
{name:'lisi',age:2},
{name:'wangwu',age:50},
];
function compare(age){
return function(a,b){
var val1 = alage];
var val2 = b[age];
return val1 - val2;
}
}
var arr5 = arr4.sort(compare('age'));
console.log( arr5 );// {name:'wangwu',age: 50}
// {name:'zhangsan',age: 18}
// {Rname:'lisi',age:2} 深拷貝和淺拷貝
共同點：復制
1. 淺拷貝：只復制引用，而未復制真正的值。
2. 深拷貝：是復制真正的值(不同引用)
// 1、淺拷貝
var arr1= ['a','b','c','d'];
var arr2 = arr1;
arr1[0]='你好嗎';
arr2[1]='還行';
console.log( arr1, arr2 ); // ['你好嗎'，‘還行','c','d']
var obj1 = {a:1,b:2}
var obj2 = Object.assign(obj1);
obj1.a = '100';
obj2.b = '你怎么養(yǎng)';
console.log( obj1,obj2); // {a:'100',b:'你怎么養(yǎng)'}// 2、深拷貝
var obj3 = {
a:1,
b:2
}
var obj4 = JSON.parse(JSON.stringify( obj3));
obj3.a = '100′;
obj4.b = '你怎么陽'
console.log( obj3, obj4 ); // {a: '100'，b:2}{a:1,b:'你怎么陽'}// 遞歸形式
var obj5 ={
a:1,
b:2,
arr:['a','b','c','d']
}
function copyObj( obj ){
if（Array.isArray(obj){
var newObj = [];
}else{
var newObj = {};
}
for( var key in obj ){
if( typeof obj[keyl =object' ){
newObj[key] = copyObj(obj[keyl);
}else{
newObj[key] = obj[key];
}
}
return newObj;
}
console.log(copyObj(obj5));面試題:localStorage、sessionStorage、cookie的區(qū)別
公共點：在客戶端存放數據
區(qū)別：
1．數據存放有效期
sessionStorage ：僅在當前瀏覽器窗口關閉之前有效?！娟P閉瀏覽器就沒了】
localStorage ：始終有效，窗口或者瀏覽器關閉也一直保存，所以叫持久化存儲。
cookie ：只在設置的cookie過期時間之前有效，即使窗口或者瀏覽器關閉也有效。2. localStorage、sessionStorage不可以設置過期時間
cookie有過期時間，可以設置過期（把時間調整到之前的時間，就過期了）3.存儲大小的限制
cookie存儲量不能超過4k
localStorage、sessionStorage不能超過5M****根據不同的瀏覽器存儲的大小是不同的。
總結
到此這篇關于JavaScript常問面試題及答案總結的文章就介紹到這了,更多相關JS常問面試題內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了利用微信小程序實現實時圓形進度條的方法，文中給出了詳細的示例代碼，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-02-02
常見的瀏覽器存儲方式（cookie、localStorage、sessionStorage）
今天我們從前端的角度了解一下瀏覽器存儲，我們常見且常用的存儲方式主要由兩種：cookie、webStorage（localStorage和sessionStorage）。本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-05-05
這篇文章主要介紹了如何防止回車(enter)鍵提交表單的方法,需要的朋友可以參考下2014-05-05
寫了個獲取多個tagname節(jié)點集合的小方法。類似于jQuery的$(‘iput,select,textarea’,'#form’)的效果，返回是按節(jié)點在原有文檔流中的順序返回的2013-09-09
這篇文章主要介紹了JS加載解析Markdown文檔過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
ajax 同步請求和異步請求的差異分析，需要的朋友可以參考下。2011-07-07
淺談laytpl 模板空值顯示null的解決方法及簡單的js表達式
今天小編就為大家分享一篇淺談laytpl 模板空值顯示null的解決方法及簡單的js表達式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本文將結合實例代碼，介紹Bootstrap5的斷點與容器的具體使用，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2021-07-07
JavaScript創(chuàng)建對象的七種方式(推薦)
JavaScript創(chuàng)建對象的方式有很多，通過Object構造函數或對象字面量的方式也可以創(chuàng)建單個對象，顯然這兩種方式會產生大量的重復代碼，并不適合量產。接下來介紹七種非常經典的創(chuàng)建對象的方式，他們也各有優(yōu)缺點2017-06-06
這篇文章主要為大家詳細介紹了原生JS面向對象實現打磚塊小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09