Web前端面試題總結（二）JavaScript篇

1、JavaScript 是一門什么樣的語言，它有哪些特點？

javaScript 一種直譯式腳本語言，是一種動態型別、弱型別、基于原型的語言，內置支持型別，它的解釋器被稱為 JavaScript 引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在 HTML 網頁上使用，用來給HTML 網頁增加動態功能，JavaScript 兼容于ECMA 標準，因此也稱為ECMAScript，
基 本 特 點
1．是一種解釋性腳本語言（代碼不進行預編譯），
2．主要用來向 HTML（標準通用標記語言下的一個應用）頁面添加互動行為，
3．可以直接嵌入 HTML 頁面，但寫成單獨的 js 檔案有利于結構和行為的分離，
4．跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如 Windows、Linux、Mac、Android、iOS 等），

2、javascript 的本地物件，內置物件和宿主物件？

本地物件為 array obj regexp 等可以 new 實體化內置物件為 gload Math 等不可以實體化的
宿主為瀏覽器自帶的 document,window 等

3、js 的內置物件有哪些？列舉一下 arry 和 string 的常用方法？

JavaScript 常見的內置物件有 Object,Math,String,Array,Number,Function,Boolean,JSON 等,其中 Object
是所有物件的基類,采用了原型繼承方式.
String:charAt(); charCodeAt(); indexOf(); match(); replace(); search(); slice(); toUpperCase(); toLowerCase(); 等方法
Array:shift(); unshift(); pop(); push(); concat(); reverse(); splice(); slice(); 等方法

4、例舉 3 種強制型別轉換和 2 種隱式型別轉換?

強制：parseInt()、parseFloat()、Number() 隱式：== 、console.log()、alert()

5、操作 DOM 的常用 API ?

1.節 點 查 找 document.getElementById…
2.節點創建. createElement cloneNode… 3.節點修改 appendChild insertBefore RemoveChild replaceChild…
4.元素屬性型 setAttribute getAttribute…

6、BOM 之常用 API ？

navigator：window 中封裝瀏覽器屬性和配置資訊的物件cookieEnabled：識別瀏覽器是否啟用 cookie，回傳值 true/false userAgent：保存了瀏覽器名稱和版本的字串
plugins：保存瀏覽器中所有插件資訊的集合，每個 plugin 物件的 name 屬性保存了插件的名稱
screen：保存顯示屏資訊的物件 history：保存視窗的歷史記錄堆疊 location：指代當前視窗正在訪問的 url 地址物件
location.href：保存了當前視窗正在訪問的 url 地址，設定 href 屬性為新 url，會在當前視窗打開新的地址頁面
location.search()：獲取 url 上面 ？后面的引數
location.reload()：重繪當前頁面
location.assign(url)：設定當前視窗的新 url
location.reload(true/false):true —— 無論是否更改，都獲取更新；false —— 被修改的頁面，重新獲取，未被修改的頁面，從緩沖獲取定時器：讓程式按指定時間間隔，自動執行任務，任務是所有定時器的核心

7、prop 和 attr 的區別？

對于 HTML 元素本身就帶有的固有屬性，在處理時，使用 prop 方法，
對于 HTML 元素我們自己自定義的 DOM 屬性，在處理時，使用 attr 方法，
栗子 1：

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

這個例子里a元素的 DOM 屬性有“href、target 和 class"，這些屬性就是a元素本身就帶有的屬性，也是 W3C 標準里就包含有這幾個屬性，或者說在 IDE 里能夠智能提示出的屬性，這些就叫做固有屬性，處理這些屬性時，建議使用 prop 方法，

<a href="#" id="link1" action="delete">洗掉</a>

這個例子里a元素的 DOM 屬性有“href、id 和 action”，很明顯，前兩個是固有屬性，而后面一個“action”屬性是我們自己自定義上去的，a元素本身是沒有這個屬性的，這種就是自定義的 DOM 屬性，處理這些屬性時，建議使用 attr 方法，

8、 typeof 和 instanceof 區別 ？

在 javascript 中，判斷一個變數的型別可以用 typeof
1、數字型別、typeof 回傳的值是 number，比如說:typeof(1)，回傳值是 number 2、字串型別，typeof 回傳的值是 string，比如 typeof(“123”回傳值時 string) 3、布爾型別，typeof 回傳的值是 boolean，比如 typeof(true)回傳值時 boolean 4、物件、陣列、null 回傳的值是 object，比如 typeof(window)，typeof(document)，typeof(null)
回傳的值都是 object
5、函式型別，回傳的值是 function，比如:typeof(eval)，typeof(Date)回傳的值都是 function， 6、不存在的變數、函式或者 undefined，將回傳 undefined，比如:typeof(abc)、typeof(undefined)
都回傳 undefined
在 javascript 中，instanceof 用于判斷某個物件是否被另一個函式構造
使用 typeof 運算子時采用參考型別存盤值會出現一個問題，無論參考的是什么型別的物件，它都 回傳”object”，ECMAScript 引入了另一個 Java 運算子 instanceof 來解決這個問題，Instanceof 運算 符與 typeof 運算子相似，用于識別正在處理的物件的型別，與 typeof 方法不同的是，instanceof 方法要求開發者明確地確認物件為某特定型別

9、什么是閉包?

“閉包就是能夠讀取其他函式內部變數的函式，例如在 javascript 中，只有函式內部的子函式 才能讀取區域變數，所以閉包可以理解成“定義在一個函式內部的函式“，在本質上，閉包是將函 數內部和函式外部連接起來的橋梁，”
舉例:創建閉包最常見方式，就是在一個函式內部創建另一個函式，下面例子中的 closure 就 是一個閉包，

function func(){
var a =1 ,b = 2;
funciton closure(){ return a+b; } return closure; } 

10、說說你對原型(prototype)理解 ？

JavaScript 是一種通過原型實作繼承的語言與別的高級語言是有區別的，像 java，C#是通 過型別決定繼承關系的，JavaScript 是的動態的弱型別語言，總之可以認為 JavaScript 中所有 都是物件，在 JavaScript 中，原型也是一個物件，通過原型可以實作物件的屬性繼承，JavaScript 的物件中都包含了一個” prototype”內部屬性，這個屬性所對應的就是該物件的原型
“prototype”作為物件的內部屬性，是不能被直接訪問的，所以為了方便查看一個物件的原 型，Firefox 和 Chrome 內核的 JavaScript 引擎中提供了”proto“這個非標準的訪問器(ECMA 新 標準中引入了標準物件原型訪問器”Object.getPrototype(object)”)
原型的主要作用就是為了實作繼承與擴展物件

11、介紹下原型鏈(解決的是繼承問題嗎)？

JavaScript 原型: 每個物件都會在其內部初始化一個屬性，就是 prototype(原型) 原型鏈:
當我們訪問一個物件的屬性時，如果這個物件內部不存在這個屬性，那么他就會去 prototype 里找這個屬性，這個 prototype 又會有自己的 prototype，于是就這樣一直找下去， 也就是我們平時所說的原型鏈的概念
特點:
JavaScript 物件是通過參考來傳遞的，我們創建的每個新物件物體中并沒有一份屬于自己 的原型副本，當我們修改原型時，與之相關的物件也會繼承這一改變

12、簡單說說 js 中的繼承 ？

繼承有以下六種方法
1、原型鏈繼承 JavaScript 實作繼承的基本思想:通過原型將一個參考型別繼承另一個參考 型別的屬性和方法
2、借用建構式繼承(偽造物件或經典繼承) JavaScript 實作繼承的基本思想:在子類構造 函式內部呼叫超型別建構式， 通過使用 apply()和 call()方法可以在新創建的子類物件上執行建構式
3、組合繼承(原型+借用構造)(偽經典繼承) JavaScript 實作繼承的基本思想:將原型鏈和借 用建構式的技術組合在一塊，從而發揮兩者之長的一種繼承模式 將原型鏈和借用建構式的技術組合到一起，從而取長補短發揮兩者長處的一種繼承模式 4、型式繼承 JavaScript 實作繼承的基本思想:借助原型可以基于已有的物件創建新物件， 同時還不必須因此創建自定義的型別
5、寄生式繼承 JavaScript 實作繼承的基本思想:創建一個僅用于封裝繼承程序的函式，該 函式在內部以某種方式來增強物件，最后再像真正是它做了所有作業一樣回傳物件， 寄生式繼承是原型式繼承的加強版
6、寄生組合式繼承 JavaScript 實作繼承的基本思想:通過借用函式來繼承屬性，通過原型 鏈的混成形式來繼承方法

13、介紹 this 各種情況？

this 的情況:
1、以函式形式呼叫時，this 永遠都是 window 2、以方法的形式呼叫時，this 是呼叫方法的物件 3、以建構式的形式呼叫時，this 是新創建的那個物件 4、使用 call 和 apply 呼叫時，this 是指定的那個物件 5、箭頭函式:箭頭函式的 this 看外層是否有函式
如果有，外層函式的 this 就是內部箭頭函式的 this
如果沒有，就是 window
6、特殊情況:通常意義上 this 指標指向為最后呼叫它的物件，這里需要注意的一點就是
如果回傳值是一個物件，那么 this 指向的就是那個回傳的物件，如果回傳值不是一個物件那么 this 還是指向函式的實體

14、陣列中的 forEach 和 map 的區別?

forEach 和 map 的相同點
相同點 都是回圈遍歷陣列中的每一項
forEach 和 map 方法里每次執行匿名函式都支持 3 個引數，引數分別是 item(當前每一項)， index(索引值)，arr(原陣列)
匿名函式中的 this 都是指向 window 只能遍歷陣列 都不會改變原陣列 區別：
map 方法
1.map 方法回傳一個新的陣列，陣列中的元素為原始陣列呼叫函式處理后的值
2.map 方法不會對空陣列進行檢測，map 方法不會改變原始陣列， 3.瀏覽器支持:chrome、Safari1.5+、opera 都支持，IE9+, 若 arr 為空陣列，則 map 方法返 回的也是一個空陣列，
forEach 方法
1.forEach 方法用來呼叫陣列的每個元素，將元素傳給回呼函式
2.forEach 對于空陣列是不會呼叫回呼函式的， 無論 arr 是不是空陣列，forEach 回傳的都是 undefined，這個方法只是將陣列中的每一項作為 callback 的引數執行一次

15、for in 和 for of 的區別 ？

1、推薦在回圈物件屬性的時候使用 for…in，在遍歷陣列的時候的時候使用 for…of
2、for…in 回圈出的是 key，for…of 回圈出的是 value
3、注意，for…of 是 ES6 新引入的特性，修復了 ES5 引入的 for…in 的不足
4、for…of 不能回圈普通的物件，需要通過和 Object.keys()搭配使用

16、Call 和 apply，bind 的區別 ？

call 方法呼叫一個函式, 其具有一個指定的 this 值和分別地提供的引數(引數的串列)， 注意:該方法的作用和 apply() 方法類似，只有一個區別，就是 call()方法接受的是若干個 引數的串列，而 apply()方法接受的是一個包含多個引數的陣列
方法呼叫一個具有給定 this 值的函式，以及作為一個陣列(或類似陣列物件)提供的引數， 注意:call()方法的作用和 apply() 方法類似，區別就是 call()方法接受的是引數串列，而 apply() 方法接受的是一個引數陣列
bind()方法創建一個新的函數，當這個新的函式被呼叫時，其 this 置為提供的值，其引數 串列前幾項，置為創建時指定的引數序列

17、New 運算子具體干了什么呢?

1、創建一個空物件: 并且 this 變數引入該物件,同時還繼承了函式的原型
2、設定原型鏈 空物件指向建構式的原型物件
3、執行函式體 修改建構式 this 指標指向空物件,并執行函式體
4、判斷回傳值 回傳物件就用該物件,沒有的話就創建一個物件

18、用 js 實作隨機選取 10–100 之間的 10 個數字，存入一 個陣列并排序？

function randomNub(aArray, len, min, max) {
if (len >= (max - min)) {
return '超過' + min + '-' + max + '之間的個數范圍' + (max - min - 1) + '個 的總數';
}
if (aArray.length >= len) {
aArray.sort(function(a, b) {
return a - b
});
return aArray;
}
var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
for (var j = 0; j < aArray.length; j++) {
if (nowNub == aArray[j]) {
randomNub(aArray, len, min, max);
return;
}
}
aArray.push(nowNub);
randomNub(aArray, len, min, max);
return aArray;
}
var arr=[];
randomNub(arr,10,10,100);

19、已知陣列 var stringArray = [“This”,“is”, “Baidu”,“Campus”]，Alert 出”This is Baidu Campus”

var stringArray = ["This", "is", "Baidu", "Campus"] alert(stringArray.join(""))

20、已知有字串 foo=”get-element-by-id”,寫一個 function 將其轉化成駝峰 表示法”getElementById”

function combo(msg){
var arr=msg.split("-");
for(var i=1;i<arr.length;i++){ arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1); }
msg=arr.join("");
return msg;
}```

##  21、有這樣一個 URL: http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫 一段 JS 程式提取 URL 中的各個 GET 引數(引數名和引數個數不確定)，將其按 key-value 形式回傳到一個 json 結構中，如{a: "1", b: "2", c: "", d: "xxx", e: undefined}

```javascript
function serilizeUrl(url) {
var urlObject = {};
if (/\?/.test(url)) {
var urlString = url.substring(url.indexOf("?") + 1); var urlArray = urlString.split("&");
for (var i = 0, len = urlArray.length; i < len; i++) { var urlItem = urlArray[i];
var item = urlItem.split("=");
urlObject[item[0]] = item[1];
}
return urlObject; }
return null;
}

22、寫一個 function，清除字串前后的空格，(兼容所有 瀏覽器)

//使用自帶介面 trim()，考慮兼容性:
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+/, "").replace(/\s+$/,"");
}
}
// test the function
var str = " \t\n test string ".trim(); alert(str == "test string"); // alerts "true"

23、判斷一個字串中出現次數最多的字符，統計這個次數

 var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){ json[str.charAt(i)] = 1;
}else{ json[str.charAt(i)]++;
} };
var iMax = 0; var iIndex = ''; for(var i in json){
if(json[i]>iMax){ iMax = json[i]; iIndex = i;}}
alert('出現次數最多的是：'+ iIndex + '出現'+ iMax +'次')

24、Split()和 join()的區別?

Split()是把一串字符(根據某個分隔符)分成若干個元素存放在一個陣列里 即切割成陣列的形式;
join() 是把陣列中的字串連成一個長串，可以大體上認為是 Split()的逆操作

25、js 陣列去重，能用幾種方法實作？

1、使用 es6 set 方法 [...new Set(arr)] let arr = [1,2,3,4,3,2,3,4,6,7,6]; 
let unique = (arr)=> [...new Set(arr)]; 
unique(arr);//[1, 2, 3, 4, 6, 7]
2、利用新陣列 indexOf 查找 indexOf() 方法可回傳某個指定的元素在陣列中首次出現的位置， 如果沒有就回傳-1，
3、for 雙重回圈 通過判斷第二層回圈，去重的陣列中是否含有該元素，如果有就退出第二層回圈，如果沒有 j==result.length 就相等，然后把對應的元素添加到最后的陣列里面， 
let arr = [1,2,3,4,3,2,3,4,6,7,6]; 
let result = []; for(var i = 0 ; i< arr.length; i++) {
for(var j = 0 ; j < result.length ; j++)
 { if( arr[i] === result[j]){
break;};};
if(j == result.length){
result.push(arr[i]); };};
console.log(result);
4、利用 for 嵌套 for，然后 splice 去重 functionunique(arr){ for(vari=0; i<arr.length;
i++){ for(varj=i+1; j<arr.length; j++){ if(arr[i]==arr[j]){ //第一個等同于第二個，splice 方法洗掉第二個 arr.splice(j,1); j--; } } } returnarr; }
5、利用 filter 
let arr = [1,2,3,4,3,2,3,4,6,7,6]; 
let unique = (arr) => {     
 return arr.filter((item,index) => { 
 return arr.indexOf(item) === index;
   }) }; unique(arr);
6、let arr = [1,2,3,4,3,2,3,4,6,7,6]; 
let unique = (arr) => { return arr.filter((item,index) => {
return arr.indexOf(item) === index;
}) }; unique(arr);
7、利用 Map 資料結構去重 
let arr = [1,2,3,4,3,2,3,4,6,7,6]; 
let unique = (arr)=> { let seen = new Map();
return arr.filter((item) => {
return !seen.has(item) && seen.set(item,1);
});
}; unique(arr);

26、談談你對 Javascript 垃圾回識訓制的理解?

1、標記清除(mark and sweep)
這是 JavaScript 最常見的垃圾回收方式，當變數進入執行環境的時候，比如函式中宣告一個變數， 垃圾回收器將其標記為“進入環境”，當變數離開環境的時候(函式執行結束)將其標記為“離開 環境” 垃圾回收器會在運行的時候給存盤在記憶體中的所有變數加上標記，然后去掉環境中的變數以及被 環境中變數所參考的變數(閉包)，在這些完成之后仍存在標記的就是要洗掉的變數了
2、參考計數(reference counting)
在低版本 IE 中經常會出現記憶體泄露，很多時候就是因為其采用參考計數方式進行垃圾回收，引 用計數的策略是跟蹤記錄每個值被使用的次數，當宣告了一個 變數并將一個參考型別賦值給該 變數的時候這個值的參考次數就加 1，如果該變數的值變成了另外一個，則這個值得參考次數減 1，當這個值的參考次數變為 0 的時 候，說明沒有變數在使用，這個值沒法被訪問了，因此可以 將其占用的空間回收，這樣垃圾回收器會在運行的時候清理掉參考次數為 0 的值占用的空間
在 IE 中雖然 JavaScript 物件通過標記清除的方式進行垃圾回收，但 BOM 與 DOM 物件卻是通過引 用計數回收垃圾的，也就是說只要涉及 BOM 及 DOM 就會出現回圈參考問題

27、js 如何處理防抖和節流？

在進行視窗的 resize、scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限 制，會加重瀏覽器的負擔，導致用戶體驗非常糟糕
此時我們可以采用 debounce(防抖)和 throttle(節流)的方式來減少呼叫頻率，同時又不 影響實際效果
函式防抖: 函式防抖(debounce):當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式 才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時 如下，持續觸發 scroll 事件時，并不執行 handle 函式，當 1000 毫秒內沒有觸發 scroll 事件時， 才會延時觸發 scroll 事件

function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout); timeout = setTimeout(fn, wait);
} } // 處理函式 function handle() { console.log(Math.random()); }
// 滾動事件 
window.addEventListener('scroll', debounce(handle, 1000));

函式節流(throttle):當持續觸發事件時，保證一定時間段內只呼叫一次事件處理函式 節流通俗解釋就比如我們水龍頭放水，閥門一打開，水嘩嘩的往下流，秉著勤儉節約的優 良傳統美德，我們要把水龍頭關小點，最好是如我們心意按照一定規律在某個時間間隔內 一滴一滴的往下滴
如下，持續觸發 scroll 事件時，并不立即執行 handle 函式，每隔 1000 毫秒才會執行一次 handle 函式

var throttle =function(func, delay) {
var prev = Date.now(); return function() {
var context = this;
var args = arguments; var now = Date.now();
if (now - prev >= delay) { func.apply(context, args); prev = Date.now();
}
} }
function handle() {console.log(Math.random());} window.addEventListener('scroll', throttle(handle, 1000)); 

總結:
函式防抖:將幾次操作合并為一此操作進行，原理是維護一個計時器，規定在 delay 時間后 觸發函式，但是在 delay 時間內再次觸發的話，就會取消之前的計時器而重新設定，這樣一 來，只有最后一次操作能被觸發
函式節流:使得一定時間內只觸發一次函式，原理是通過判斷是否到達一定時間來觸發函 數
區別:
函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理 函式，而函式防抖只是在最后一次事件后才觸發一次函式，比如在頁面的無限加載場景下， 我們需要用戶在滾動頁面時，每隔一段時間發一次Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求資料，這樣的場景，就適合用節流 技術來實作

28、如何判斷 JavaScript 的資料型別?

JavaScript 資料型別一共有 7 種:
Undefined、Null、Boolean、String、Symbol、Number、Object
除了 Object 之外的 6 種屬于原始資料型別，有時，我們還會細分 Object 的型別，比如 Array， Function，Date，RegExp 等
判斷方法
1、typeof
typeof 可以用來區分除了 Null 型別以外的原始資料型別，物件型別的可以從普通物件里面 識別出函式:

typeof undefined // "undefined" typeof null // "object"
typeof 1 // "number"
typeof "1" // "string"
typeof Symbol() // "symbol" typeof function() {} // "function" typeof {} // "object"

問題一:typeof 不能識別 null，如何識別 null?
答案:如果想要判斷是否為 null，可以直接使用===全等運算子來判斷(或者使用下面的 Object.prototype.toString 方法):

 let a = null
a === null // true

問題二:typeof 作用于未定義的變數，會報錯嗎? 答案:不會報錯，回傳"undefined"，
問題三:typeof Number(1)的回傳值是什么?
答案:“number”，注意 Number 和 String 作為普通函式呼叫的時候，是把引數轉化為相 應 的原始資料型別，也就是類似于做一個強制型別轉換的操作，而不是默認當做建構式 調 用，注意和 Array 區分，Array(…)等價于 new Array(…)

typeof Number(1) // "number" typeof String("1") // "string" Array(1, 2, 3)
// 等價于
new Array(1, 2, 3)

2、instanceof
instanceof 不能用于判斷原始資料型別的資料:

3 instanceof Number // false '3' instanceof String // false true instanceof Boolean // false

instanceof 可以用來判斷物件的型別:

var date = new Date()
date instanceof Date // true
var number = new Number() number instanceof Number // true var string = new String()
string instanceof String // true

需要注意的是，instanceof 的結果并不一定是可靠的，因為在 ECMAScript7 規范中可以通 過自定義 Symbol.hasInstance 方法來覆寫默認行為，
3、Object.prototype.toString

 
Object.prototype.toString.call(undefined).slice(8, -1) // "Undefined"
Object.prototype.toString.call(null).slice(8, -1) // "Null"
Object.prototype.toString.call(3).slice(8, -1) // "Number" 
Object.prototype.toString.call(new Number(3)).slice(8, -1)//"Number"
Object.prototype.toString.call(true).slice(8, -1)//"Boolean" 
Object.prototype.toString.call('3').slice(8, -1) //"String" 
Object.prototype.toString.call(Symbol()).slice(8, -1) //"Symbol"

4、Array.isArray
Array.isArray(value)可以用來判斷 value 是否是陣列:

 
Array.isArray([]) // true
Array.isArray({}) // false
(function () {console.log(Array.isArray(arguments))}()) // false

29、創建物件有幾種方法

1、字面量物件 // 默認這個物件的原型鏈指向 object
var o1 = {name: ‘01’};
2、通過 new Object 宣告一個物件
var o11 = new Object({name: ‘011’});
3、使用顯式的建構式創建物件
var M = function(){this.name=‘o2’};
var o2 = new M();
o2.proto=== M.prototype
o2 的建構式是 M
o2 這個普通函式，是 M 這個建構式的實體
4、object.create()

var P = {name:'o3'};
var o3 = Object.create(P);

30、=== 和 ==的區別?

區別：
===: 三個等號我們稱為等同符，當等號兩邊的值為相同型別的時候，直接比較等號兩邊 的值，值相同則回傳 true，若等號兩邊的值型別不同時直接回傳 false，也就是說三個等號 既要判斷值也要判斷型別是否相等
==:兩個等號我們稱為等值符，當等號兩邊的值為相同型別時比較值是否相同，型別不同 時會發生型別的自動轉換，轉換為相同的型別后再作比較，也就是說兩個等號只要值相等就可以，

寫給看到最后的你

親愛的朋友，感謝你看到了最后，如果有技術不成熟的地方請多多指點，感謝！如果你覺得不錯，可以點贊+評論+關注任選哦，比心??????