前端面試題二（js篇）

時間 2019-11-09

原文原文鏈接

1.什麼是跨域？解決跨域的方法？

跨域，指的是瀏覽器不能執行其餘網站的腳本。它是由瀏覽器的同源策略形成的，是瀏覽器施加的安全限制。javascript

同源策略

- ——是瀏覽器安全策略
- ——協議名、域名、端口號必須徹底一致
- 舉例：
複製代碼

http://www.123.com/index.html 調用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 調用 http://www.456.com/server.php （主域名不一樣:123/456，跨域）

http://abc.123.com/index.html 調用 http://def.123.com/server.php （子域名不一樣:abc/def，跨域）

http://www.123.com:8080/index.html 調用 http://www.123.com:8081/server.php （端口不一樣:8080/8081，跨域）

http://www.123.com/index.html 調用 https://www.123.com/server.php （協議不一樣:http/https，跨域）

請注意：localhost和127.0.0.1雖然都指向本機，但也屬於跨域。

瀏覽器執行javascript腳本時，會檢查這個腳本屬於哪一個頁面，若是不是同源頁面，就不會被執行
複製代碼

跨域

- 違背同源策略就會產生跨域
複製代碼

解決方法

- jsonp cors websocket Node中間件代理(兩次跨域) ngix反向代理...
複製代碼

小提示：若是你回答跨域解決方案CORS，那麼面試官必定會問你實現CORS的響應頭信息Access-Control-Allow-Origin。
複製代碼

1. jsonp方法

因此JSONP的原理其實就是利用引入script不限制源的特色，把處理函數名做爲參數傳入，而後返回執行語句，仔細閱讀如下代碼就能夠明白裏面的意思了。php

補充：1) JSONP和AJAX對比html

JSONP和AJAX相同，都是客戶端向服務器端發送請求，從服務器端獲取數據的方式。但AJAX屬於同源策略，JSONP屬於非同源策略（跨域請求）
複製代碼

2)JSONP優缺點vue

SONP優勢是簡單兼容性好，可用於解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方法具備侷限性,不安全可能會遭受XSS攻擊。
複製代碼

<script>
        //建立 script 標籤
        var script = document.createElement('script');
        //設置回調函數
        function getData(data) {
            //數據請求回來被觸發的函數
            console.log(data);
        }
        //設置script的src屬性，設置請求地址
        script.src = 'http://localhost:3000?callback = getData';
        //讓script生效
        document.body.appendChild(script);
    </script>
複製代碼

2.cors (跨域資源共享 Cross-origin resource sharing)

容許瀏覽器向跨域服務器發出XMLHttpRequest請求，從而克服跨域問題，它須要瀏覽器和服務器的同時支持。java

瀏覽器端會自動向請求頭添加origin字段，代表當前請求來源。
瀏覽器端須要設置響應頭的Access-Control-Allow-Methods，Access-Control-Allow-Headers，Access-Control-Allow-Origin等字段，指定容許的方法，頭部，源等信息。
請求分爲簡單請求和非簡單請求，非簡單請求會先進行一次OPTION方法進行預檢，看是否容許當前跨域請求。

只要同時知足如下兩大條件，就屬於簡單請求node

條件1：使用下列方法之一：jquery

GET
HEAD
POST

條件2：Content-Type 的值僅限於下列三者之一：ios

text/plain
multipart/form-data
application/x-www-form-urlencoded

請求中的任意 XMLHttpRequestUpload 對象均沒有註冊任何事件監聽器； XMLHttpRequestUpload 對象可使用 XMLHttpRequest.upload 屬性訪問。nginx

4.websocket

Websocket是HTML5的一個持久化的協議，它實現了瀏覽器與服務器的全雙工通訊，同時也是跨域的一種解決方案。WebSocket和HTTP都是應用層協議，都基於 TCP 協議。可是 WebSocket 是一種雙向通訊協議，在創建鏈接以後，WebSocket 的 server 與 client 都能主動向對方發送或接收數據。同時，WebSocket 在創建鏈接時須要藉助 HTTP 協議，鏈接創建好了以後 client 與 server 之間的雙向通訊就與 HTTP 無關了。原生WebSocket API使用起來不太方便，咱們使用 Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。web

咱們先來看個例子：本地文件socket.html向 localhost:3000 發生數據和接受數據

// socket.html
<script>
    let socket = new WebSocket('ws://localhost:3000');
    socket.onopen = function () {
      socket.send('我愛你');//向服務器發送數據
    }
    socket.onmessage = function (e) {
      console.log(e.data);//接收服務器返回的數據
    }
</script>

複製代碼

// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//記得安裝ws
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
  ws.on('message', function (data) {
    console.log(data);
    ws.send('我不愛你')
  });
})

複製代碼

總結：CORS支持全部類型的HTTP請求，是跨域HTTP請求的根本解決方案 JSONP只支持GET請求，JSONP的優點在於支持老式瀏覽器，以及能夠向不支持CORS的網站請求數據。不論是Node中間件代理仍是nginx反向代理，主要是經過同源策略對服務器不加限制。平常工做中，用得比較多的跨域方案是cors和nginx反向代理

更多方法參考：juejin.im/post/5c2399…

2.什麼是閉包？

密閉的容器,相似於set,map容器，存儲數據的
閉包是一個對象，存放數據的格式：key:value

造成的條件：

函數嵌套
內部函數引用外部函數的局部變量

閉包的優勢：

延長外部函數局部變量的生命週期

閉包的缺點：

容易形成內存泄漏

注意點：

合理使用閉包
用完閉包要及時清除(銷燬)

segmentfault.com/a/119000000…

3.axios是什麼？怎麼使用？描述使用它實現登陸功能的流程？

(一).axios是什麼？

axios 是基於 promise 用於瀏覽器和nodejs的一個http客戶端，主要用於向後臺發送請求的，還有就是在請求中作更多控制。
支持 promise
提供了一些併發的方法
提供攔截器
提供支持CSRF(跨域請求僞造)

(二).axios fetch ajax(jquery)區別

前二者都是支持promise的語法，後者默認是使用callback方式
fetch 本質上脫離的xhr 是新的語法(有本身的特性默認不傳cookie 不能像xhr這樣去監聽請求的進度)

(三).怎麼使用？

<script>
    axios.get('').then(function(){
        
    }).catch(function(){
        
    })
    
    axios.post('').then(function(){
        
    }).catch(function(){
        
    })
</script>
複製代碼

(四).描述使用它實現登陸功能的流程？

3.const,var,let區別

www.cnblogs.com/zzsdream/p/…

4.new操做符原理解析

www.cnblogs.com/lvmylife/p/…

5.promise的回調機制

juejin.im/post/5b31a4…

6.阻止冒泡，說說vue中事件的阻止冒泡以及原理

caibaojian.com/javascript-…

事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。儘管咱們能夠在 methods 中輕鬆實現這點，但更好的方式是：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

爲了解決這個問題， Vue.js 爲 v-on 提供了事件修飾符。經過由點(.)表示的指令後綴來調用修飾符。

.stop
.prevent
.capture
.self
.once

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
 
<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
 
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
 
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
 
<!-- 只當事件在該元素自己（好比不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
複製代碼

使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 @click.prevent.self 會阻止全部的點擊，而 @click.self.prevent 只會阻止元素上的點擊。

7.基本數據類型

基本類型：null、undefined、boolean、number、string、symbol
對象（Object）：引用類型
tips: NaN 也屬於 number 類型，而且 NaN 不等於自身。

8.類型的判斷

Typeof

console.log(typeof 1);                  // number
console.log(typeof 'a');                // string
console.log(typeof true);               // boolean
console.log(typeof undefined);          // undefined
console.log(typeof function fn(){});    // function
console.log(typeof {});                 // object
console.log(typeof null);               // object
console.log(typeof []);                 // object
console.log(typeof new Error());        // object

複製代碼

tips：typeof 對於基本類型，除了 null 均可以顯示正確的類型；對於對象，除了函數都會顯示 object

Object.prototype.toString

var number = 1;             // [object Number]
var string = '123';         // [object String]
var boolean = true;         // [object Boolean]
var und = undefined;        // [object Undefined]
var nul = null;             // [object Null]
var obj = {a: 1}            // [object Object]
var array = [1, 2, 3];      // [object Array]
var date = new Date();      // [object Date]
var error = new Error();    // [object Error]
var reg = /a/g;             // [object RegExp]
var func = function a(){};  // [object Function]

function checkType() {
    for (var i = 0; i < arguments.length; i++) {
        console.log(Object.prototype.toString.call(arguments[i]))
    }
}

checkType(number, string, boolean, und, nul, obj, array, date, error, reg, func)

複製代碼

9.若是判斷兩個對象是否相等

先判斷對象屬性的長度是否相等，再判斷每一個屬性的值是否相等 juejin.im/post/5c4169…

10.javascript兩個變量互換值，你瞭解多少?

blog.csdn.net/nyflxp/arti…

11.數組去重12種方法？

segmentfault.com/a/119000001…

12.this指向問題？

this 的指向取決於函數以哪一種方式調用：

做用函數調用：非嚴格模式下 this 指向全局對象，嚴格模式爲 undefined
做用方法調用：this 指向調用函數的對象
構造函數調用：this 指向 new 建立出來的實例對象
call()和apply：它們的第一個參數爲 this 的指向
補充：箭頭函數中的 this

function a() {
    return () => {
        return () => {
        	console.log(this)
        }
    }
}
console.log(a()()())

複製代碼

箭頭函數實際上是沒有 this 的，這個函數中的 this 只取決於他外面的第一個不是箭頭函數的函數的 this。在這個例子中，由於調用 a 符合前面代碼中的第一個狀況，因此 this 是 window。而且 this 一旦綁定了上下文，就不會被任何代碼改變。

13. js 什麼方法能夠跳出循環

break;結束循環推薦使用
return 直接跳出方法，若是僅僅只想結束循環不建議使用，因其反作用是，這個方法再也不執行
循環變量=最大值/最小值(看你循環是從高數字到低仍是低到高，高到低設置成0，低到高設置成數組的length，該方法對for in語句無效)

//循環變量低到高
var arr=[1,2,3,4,5,6,7];
for(var i=0;i<arr.length;i++)
{
  if(arr[i]==4)
   {
     //break;   //方案1
     //return;  //方法後續代碼不執行 方案2
     i=arr.length;  //方案3
   }
   console.log(arr[i]); //1,2,3
}
複製代碼

//循環變量從高到低
var arr=[1,2,3,4,5,6,7];
for(var i=arr.length-1;i>-1;i--)
{
  if(arr[i]==4)
   {
     //break;   //方案1
     //return;  //方法後續代碼不執行 方案2
     i=-1;      //方案3
   }
   console.log(arr[i]);  //7,6,5
}
複製代碼

//for in狀況
//循環變量從高到低
var arr=[1,2,3,4,5,6,7];
for(var i in arr)
{
  if(arr[i]==4)
   {
     break;//方案1
     //return;//方法後續代碼不執行 方案2
      //方案3 對此不起做用
   }
   console.log(arr[i]); //1,2,3
}
複製代碼

14. JS 中的主要有哪幾類錯誤？

1.SyntaxError解析錯誤
2.ReferenceError引用錯誤
3.RangeError範圍錯誤
4.TypeError類型錯誤
5.URIError統一資源標識符函數錯誤
6.EvalError eval()函數執行錯誤
具體列子參照：blog.csdn.net/qq_39725309…

15. JS中獲取dom元素的方法？

1.getElementById() 最經常使用的經過元素的id屬性來獲取DOM元素
2.getElementsByTagName() 經過標籤名獲取DOM元素的一個集合
3.getElementsByName() 不多用，操做表單經過元素名來獲取DOM元素集合
4.querySelector() 經過合法的CSS選擇器獲取DOM元素只獲取第一個匹配的元素
5.querySelectorAll() 經過合法的CSS選擇器來獲元素，返回的是全部符合條件的，而不是第一個符合條件的元素
6.getElementsByClassName()
具體例子參照：blog.csdn.net/letterTiger…

16. 用純JS編寫一個程序來反轉字符串

var str = "jquery";
str = str.split("");    //字符串轉爲數組，["j","q","u","e","r","y"]
str = str.reverse();    //數組反轉， ["y","r","e","u","q","j"]
str = str.join("");     //數組轉字符串，"yreuqj"
複製代碼

17. JS中如何將頁面重定向到另外一個頁面？

* location.href     //window.location.href ="https://www.xx.com/"
* location.replace  //window.location.replace ="https://www.xx.com/"

複製代碼

18. JS中的Array.splice()和Array.slice()方法有什麼區別?

var arr=[0,1,2,3,4,5,6,7,8,9];   //設置一個數組
console.log(arr.slice(2,7));    //2,3,4,5,6
console.log(arr.splice(2,7));   //2,3,4,5,6,7,8

//由此咱們簡單推測數量兩個函數參數的意義,
slice(start,end)第一個參數表示開始位置,第二個表示截取到的位置(不包含該位置)
splice(start,length)第一個參數開始位置,第二個參數截取長度
複製代碼

var x=y=[0,1,2,3,4,5,6,7,8,9]
console.log(x.slice(2,5));      //2,3,4
console.log(x);                 //[0,1,2,3,4,5,6,7,8,9]原數組並未改變

//接下來用一樣方式測試splice
console.log(y.splice(2,5));     //2,3,4,5,6
console.log(y);                 //[0,1,7,8,9]顯示原數組中的數值被剔除掉了
複製代碼

slice 和 splice雖然都是對於數組對象進行截取,可是兩者仍是存在明顯區別,函數參數上slice和splice第一個參數都是截取開始位置,slice第二個參數是截取的結束位置(不包含),而splice第二個參數(表示這個從開始位置截取的長度),slice不會對原數組產生變化,而splice會直接剔除原數組中的截取數據!

19. 如何在JS中動態添加/刪除對象的屬性？

var obj = {a:'1',b:'2'}
obj.c = '3';
console.log(obj,'1');       //{a:'1',b:'2',c:'3'}
delete obj.a
console.log(obj,'2');       //{b:'2',c:'3'}
複製代碼

20.解釋一下JS的展開操做符？

var mid = [3, 4];

var newarray = [1, 2, ...mid, 5, 6];

console.log(newarray);          // [1, 2, 3, 4, 5, 6]
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。