目錄

1、面向對象的特征有哪些方面

2、string是最基本的數據類型嗎？

3、float f=3.4是否正確

4、&和&&的區別

5、Math.round(11.5) 等于多少？Math.round(-11.5)等于多少？

6、switch 是否能作用在byte 上，是否能作用在long 上，是否能作用在String上？

7、用最有效率的方法計算2乘以8？

8、數組有沒有length()方法？String有沒有length()方法？

9、構造器（constructor）是否可被重寫（override）？

10、是否可以繼承String類？

11.GC是什么？為什么要有GC？

12.String s = new String(“xyz”);創建了幾個字符串對象？

13.Java 中的final關鍵字有哪些用法？

14.數據類型之間的轉換：- 如何將字符串轉換為基本數據類型？- 如何將基本數據類型轉換為字符串

15.如何實現字符串的反轉及替換？

16.如何解決跨域

17.數組（array）方法

18.js數組和對象的遍歷方式

19.==和===的區別

20.關于閉包

21.let和const的區別是什么

22.垃圾回收機制

23.數組去重的幾種方法

24.父子組件傳參

25.HTML5的特性

26.頁面之間是怎么傳參數的

27.如何在瀏覽器查看和清楚localstorage保存的數據

?28.display:none? 和visibility:hidden的區別

29.css的繼承選擇器 .one ,two?和.one>.two的區別？兩個同級類選擇器連著一起寫有什么作用

30.如何實現水平垂直居中

31.CSS的幾種居中方式

32.fixed和absolute的區別

33.css有哪些選擇符？可繼承的屬性有哪些？css3新增的偽元素有哪些？css優先級的計算

34.css3的新特性

text-decoration

顏色

?35.?移入圖片讓那個圖片慢慢放大

36.call(),apply(),bind()的區別

37.const的用法

38.Utf-8編碼漢字占多少個字節

39.關于ajax

40.js對數組的操作，包括向數組中插入刪除數據

41.promise是什么？能解決什么問題？

?42.編程：連接兩個數組并返回？

43.冒泡排序

?編輯

44.ES6新特性

45.js對數組有哪些操作方法

46.js的選擇器

47.js的數據類型

?48.減少頁面加載時間的方法

49.怎么理解模塊化開發

?50.什么是閉包，有什么作用？

51.手機號的正則表達式(以1開頭的11位數字）

1、面向對象的特征有哪些方面

--抽象：抽象是將一類對象的共同特征總結溝造出來的過程，包括數據抽象和行為抽象兩方面，抽象只關注對象有哪些行為或者屬性，并不關注這些行為的細節是什么。

--繼承：繼承是從已有類型得到繼承信息創建新類的過程，提供繼承的類叫父類（超類，基類）、得到繼承的類叫子類（派生類）

--封裝：通常認為封裝是把數據的操作和操作數據的方法綁定起來，對數據的訪問只能童工已經定義的接口，可以說封裝就是隱藏一切可以隱藏的東西，只向外界提供最簡單的編程接口。舉例：可以想想普通洗衣機和全自動洗衣機的差別，明顯全自動洗衣機封裝更好因此操作起來更簡單；我們現在使用的智能手機也是封裝得足夠好的，因為幾個按鍵就搞定了所有的事情）。

--多態性：多態性是指允許不同子類型的對象對同一消息做出的不同的響應，簡單的說就是用同樣的對象引用調用同樣的方法但是做了不同的事情，實現多態需要做兩件事：1、方法重寫（子類繼承父類并重寫父類中的方法）2、對象造型（父類引用子類型對象，這樣同樣的引用調用的方法就會根據子類型的不同而表現出不同的行為）

2、string是最基本的數據類型嗎？

答：不是，Java中的基本數據類型有8個：byte、short、int、long、float、double、char、boolean；除了基本類型（primitive）和枚舉類型（enumeration type），剩下的都是引用類型（reference type）

3、float f=3.4是否正確

答：不正確，3.4是雙精度數，將雙精度型（double）賦值給浮點型（float）屬于下轉型（down--casting，也稱之為窄化）會造成精度損失，因此需要強制轉換float f=(float)3.4;或者寫成float f=3.4F

4、&和&&的區別

雖然二者都要求運算符左右兩端的布爾值都是true整個表達式的值才是true。&&之所以稱為短路運算是因為，如果&&左邊的表達式的值是false，右邊的表達式會被直接短路掉，不會進行運算。很多時候我們可能都需要用&&而不是&，例如在驗證用戶登錄時判定用戶名不是null而且不是空字符串，應當寫為：username != null &&!username.equals(“”)，二者的順序不能交換，更不能用&運算符，因為第一個條件如果不成立，根本不能進行字符串的equals比較，否則會產生NullPointerException異常。注意：邏輯或運算符（|）和短路或運算符（||）的差別也是如此。

5、Math.round(11.5) 等于多少？Math.round(-11.5)等于多少？

Math.round(11.5)的返回值是12，Math.round(-11.5)的返回值是-11。四舍五入的原理是在參數上加0.5然后進行下取整。

6、switch 是否能作用在byte 上，是否能作用在long 上，是否能作用在String上？

expr可以是byte、short、char、int、enum、String類型，但是long類型不能

7、用最有效率的方法計算2乘以8？

答： 2 << 3（左移3位相當于乘以2的3次方，右移3位相當于除以2的3次方）

8、數組有沒有length()方法？String有沒有length()方法？

答：數組沒有length()方法，有length 的屬性。String 有length()方法。JavaScript中，獲得字符串的長度是通過length屬性得到的，這一點容易和Java混淆

9、構造器（constructor）是否可被重寫（override）？

答：構造器不能被繼承，因此不能被重寫，但可以被重載。

10、是否可以繼承String類？

答：String 類是final類，不可以被繼承。

11.GC是什么？為什么要有GC？

答：GC是垃圾收集的意思，垃圾回收可以有效的防止內存泄露，有效的使用可以使用的內存

12.String s = new String(“xyz”);創建了幾個字符串對象？

答：兩個對象，一個是靜態區的”xyz”，一個是用new創建在堆上的對象。

13.Java 中的final關鍵字有哪些用法？

(1)修飾類：表示該類不能被繼承；(2)修飾方法：表示方法不能被重寫；(3)修飾變量：表示變量只能一次賦值以后值不能被修改（常量）。

14.數據類型之間的轉換：
- 如何將字符串轉換為基本數據類型？
- 如何將基本數據類型轉換為字符串

答：?
- 調用基本數據類型對應的包裝類中的方法parseXXX(String)或valueOf(String)即可返回相應基本類型；?

- 一種方法是將基本數據類型與空字符串（”"）連接（+）即可獲得其所對應的字符串；另一種方法是調用String 類中的valueOf()方法返回相應字符串

15.如何實現字符串的反轉及替換？

答：方法很多，可以自己寫實現也可以使用String或StringBuffer/StringBuilder中的方法

有一道很常見的面試題是用遞歸實現字符串反轉，代碼如下所示：

16.如何解決跨域

1、jsonp跨域

2.document.domain+iframe跨域

3.node?js中間件代理跨域

4.后端在頭部信息里面設置安全域名

17.數組（array）方法

map：遍歷數組，返回回調返回值組成的新數組

foeeach：無法break，可以用try或者catch中throw?new?error來停止

filter：過濾

some：有一項true，則整體返回true

every：有一項返回false，則整體返回false

join：通過置頂連接符生成字符串

push /?pop：末尾推入和彈出，改變原數組，返回推入/彈出項

unshift /?shift：頭部推入和彈出，改變原數組，返回操作項

sort（fn） /? reverse:排序與反轉，改變原數組

concat：連接數組，不影響數組，淺拷貝

slice（start，end）：返回截斷后的新數組，不改變原數組

splice（start，number，value）：返回刪除數組組成的數組，value插入項

indexof /?lastIndexOf（value,fromindex）:查找數組項，返回對應的下標

reduce /?reduceRignt（fn（prev，cur），defaultprev）：兩兩執行，prev為上次化簡函數的ret

18.js數組和對象的遍歷方式

1.for?in

2.for

3.foreach

4.for-fof

19.==和===的區別

==是非常嚴格意義上的相等，值相等就相等

===是嚴格意義上的相等，回你比較兩邊的數據類型和值的大小

值的引用地址都相等才相等

20.關于閉包

閉包就是能夠讀取到其他函數內部變量的函數

閉包基本上就是一個函數內部返回的一個函數

優點：

1.可以讀取函數內部的變量

2.將變量始終保持在內存中

3.可以封裝對象的私有屬性和私有方法

缺點:

比較耗費內存，使用不當會造成內存溢出的問題

21.let和const的區別是什么

let命令不存在變量提升，如果在let前使用，會導致報錯

如果塊區中存在let和const命令，就會形成封閉作用域

不允許重復聲明

const定義的是常量，不能修改，但是如果定義的是對象，可以修改對象內部的數據

22.垃圾回收機制

什么是垃圾回收

垃圾回收：古茗司儀?就是釋放占用的空間，防止內存泄露

哪些需要回收：對象是否可以被回收的兩種經典算法：引用計數法和可達性分析算法

什么時候回收:堆的新生代，老年代，永久代的垃圾回收時機，minorGC和FullGC

如何回收：三種經典垃圾回收算法-標記清除算法，復制算法，標記正路算法?及分帶收集算法

23.數組去重的幾種方法

1.定義一個新的數組，并放入原數組的第一個元素，然后將元素組一一和新數組的元素進行對比，若不同則存放在新數組中

2.先將原數組排序，在與相鄰的進行比較，如果不同則存入新數組中

?3.利用ES6的set方法

function?unique(arr){?

? ? ? ? set數據結構?他類似于數組?其他成員的值都是唯一的

? ? ? ? return Array.from(new Set(arr));

? ? ? ? 利用Array.from?將set結構轉化為數組

}

console.log(unique([1,1,1,2,2,3,3,4,5,6,7,7]))

輸出結果為：[1,2,3,4,5,6,7,]

24.父子組件傳參

父傳子-props?

在子組件中?使用選項props來聲明需要從父級接收到的數據

props的值有兩種方式

方式一：字符串數組，數組中的字符串就是傳遞時的名稱

方式二：對象，?對象可以設置傳遞時候的類型，也可以設置默認值等

當需要對props進行類型驗證等驗證時，需要對象寫法?

驗證支持的數據類型一般有以下幾種

string-Number-Boolean-Array-Object-Date-Function-Symbol

25.HTML5的特性

1.語言化標簽

通過語言化標簽?可以讓頁面又更加完善的結構?讓頁面的元素有含義，同時也利于被搜索殷勤解析

有利于SEO?主要標簽包括下面幾種

header-?表示文檔的頭部區域

footr-?表示標簽的尾部區域

nav-表示文檔導航的部分

section-?表示文檔的某一節

article-?表示文章

main-?表示文檔主要的內容區域

2.增強型表單

可以通過input的type屬性是定類型是number還是data或者url，同時還添加了placeholde和required等表單屬性

3.媒體元素

新增了audio和video兩個媒體相關標簽，可以讓開發人員不必依賴任何插件就能在網頁中嵌入瀏覽器的音頻?和視頻內容

26.頁面之間是怎么傳參數的

1.cookie傳值

缺點：cookie存儲是需要服務器支持，本地直接運行靜態文件是實現不了的，cookie能夠存儲數據到客戶端的磁盤中，特定的網頁之間是可以共享cookie中的數據

2.LocalStorage和SessionStorage傳值

優點：支持本地靜態文件，在HTML5中?新加入了一個localstorage特性，。這個特性主要是用來作為本地存儲來使用的? 解決了cookie存儲空間不足的問題 ，localstorage?中一般的瀏覽器支持的是5M?的大小?這個在不同的瀏覽器中localstorage會有所不同，比方類似的cookie?將數據存在一個公共的地方?實現頁面之間的傳值

3.get方法? url傳值

優點：速度快? cookie和localstorage都存在傳輸速度慢的情況?在一個頁面寫進去另一個頁面讀出來?有時候會讀到空值，post提交表單跳轉的方式就不行了? 因為服務端并不處理這些請求參數?連達到客戶端的機會都沒有

27.如何在瀏覽器查看和清楚localstorage保存的數據

首先?按下F12打開開發者工具?

點擊切換到application

點擊localstorage?就可以查看保存過的數據信息

?如何清楚數據

點擊上方的?clear?storage?點擊?clear?site?data?即可刪除數據

?28.display:none? 和visibility:hidden的區別

display:none? 和visibility:hidden?區別不僅僅在與?display:none? 隱藏后的元素不占用空間而visibility:hidden隱藏后元素依然占用空間??

visibility:hidden?具有繼承性? 給父元素設置visibility:hidden?子元素也會繼承這個屬性? 但是如果給子元素設置visibility:hidden?則子元素又會顯示出來? ?這個和display:none有這質的區別：父元素設置display:none; 子元素設置display:block;后子元素不會顯示

并且visibility:hidden不會影響計時器的計數 ，就算是隱藏?計時器依舊運行? display：none?賊反之

29.css的繼承選擇器 .one ,two?和.one>.two的區別？兩個同級類選擇器連著一起寫有什么作用

1.css的繼承選擇器? .one ,two?和.one>.two的區別

.one .two匹配 .one下所有包含.two的標簽? 包含所有的后代元素

.one>.two?匹配.one?下子元素中包含.two?的標簽? 只包含.one的子級元素

30.如何實現水平垂直居中

1、利用定位+margin：auto

父級設置為相對定位? 子級設置為絕對定位?并且四個定位屬性的值都設置了0 ，那么這時候如果子級沒有設置寬高，則會和父元素寬高相同? 完全覆蓋

2、利用定位+margin：負值

初始位置為方塊1的位置

當設置left、top為50%的時候，內部子元素為方塊2的位置

設置margin為負數時，使內部子元素到方塊3的位置，即中間位置

3、利用定位+transform

translate（-50%，-50%）將會將元素位子子級寬度高度的-50%

這種方法其實和最上面被否定掉的margin負值用法一樣，可以說是margin負值的替代方案，并不需要知道自身元素的寬高

31.CSS的幾種居中方式

1.內容居中

style=“text-align：center”

align=“center”

2.元素居中（只適合塊級元素）

先設置寬度再設置margin?padding

width：200px

margin：0px;

padding:0px;

3.垂直居中（只適合單獨一行垂直居中）

height和line-height設置成相同像素即可

line-height：40px;

height:40px;

4.內邊距方式居中

借助?設置相同的上下內邊距?實現垂直居中的閑過?可用在多行文本上

?5.table方式（使用與圖片居中）

首先通過display：table-cell

再借助單元格的垂直居中來達到效果

<style>

#d{

? ? ? ? display：table-cell;

? ? ? ? vertical-align:middle;

? ? ? ? height:200px;

}

div{

? ? ? ? border:solid 1px lightskyblue;

}

</style>

<div id="d">

? ? ? ? <img src="? ?">

</div>

32.fixed和absolute的區別

fixed:固定定位

absolute：絕對定位

區別：

1.沒有滾動條的情況下并無差異

2.有滾動條的情況下，fixed定位不會隨滾動條的移動而移動，而absolute則會隨著滾動條的移動而移動

33.css有哪些選擇符？可繼承的屬性有哪些？css3新增的偽元素有哪些？css優先級的計算

1.id選擇器 （#id）

2.類選擇器（.classname）

3.標簽選擇器（div h1 p）

4.相鄰選擇器（h1+p）

5.子選擇器（ul>li）

6.后代選擇器（li a）

7.通配符選擇器（*）

8.屬性選擇器（a[rel="ex"]）

9.偽類選擇器（a:hover）

可繼承：font-size? 、?font-family?color?

不可繼承：border 、padding、margin、width、height

優先級就近原則-樣式定義最近者為準；*載入樣式以最后載入的定位為準；

優先級順序為：！important>id>class>tagumportant比內聯優先級高

css3新增的偽類舉例

p:first-of-type? 選擇屬于其父級元素得到首個元素的每個元素

p:last-of-type選擇屬于其父元素的最后元素的每個元素

p:only-of-type選擇屬于其父元素唯一的元素的每個元素

p:only-child選擇屬于其父元素的唯一子元素的每個元素

p:nth-child(2)選擇屬于其父元素的第二個子元素的每個元素

:enabled、:disabled控制表單控件的禁用狀態。

:checked，單選框或復選框被選中。

34.css3的新特性

一、是什么

css，即層疊樣式表（Cascading Style Sheets）的簡稱，是一種標記語言，由瀏覽器解釋執行用來使頁面變得更為美觀

二、選擇器

css3中新增了一些選擇器，主要為如下圖所示：

?三、新樣式

邊框

border-radius?創建圓角邊框

box-shadow?為元素添加陰影

border-image? 使用圖片來繪制邊框

box-shadow?設置元素陰影?設置屬性如下

水平陰影-垂直陰影-模糊距離-陰影尺寸-陰影顏色-內外陰影

其中水平陰影和垂直陰影是必須設置的

背景

新增了幾個關于背景的屬性?分別是?background-clip、background-origin、background-size和background-break

用于確定背景畫區，有以下幾種可可能的屬性

background-clip: border-box; 背景從border開始顯示

background-clip: padding-box; 背景從padding開始顯示

background-clip: content-box; 背景顯content區域開始顯示

background-clip: no-clip; 默認屬性，等同于border-box

通常情況，背景都是覆蓋整個元素的，利用這個屬性可以設定背景顏色或圖片的覆蓋范圍

text-overflow

text-overflow設置或者檢索當當前行超過指定容器的邊界時候?如何顯示屬性有兩種選擇

clip：修剪文本??

ellipsis：顯示省略符號來代表被修剪的文本

text-decoration

css3里面開始支持對文字的更深層次的渲染，具體有三個屬性可供設置

text-fill-color? 設置文字內部的填充顏色

text-stroke-color? 設置文字邊界的填充顏色

text-stroke-width?設置文字邊界的寬度

顏色

css3新增了新的顏色表示方式rgba與hala

rgba分為兩部分? rgb為顏色值 a為透明度

hala?分為四部分 h為色相 s為飽和度 l為亮度 a為透明度

五、transform 轉換

transform 轉換允許旋轉?縮放傾斜和平移元素

transform-origin? ?轉換元素位置（圍繞那個點進行轉換）默認值為（x,y,z:(50%,50%,0)

使用方式：

transform:translate(120px,50%)? ? 平移

transform：scale（2,0.5）縮放

transform：rotate（0.5turn）?旋轉

transform：skew（30deg,20deg）傾斜

六、animation動畫

animation也有很多屬性

animation-name?動畫名稱

animation-duration?動畫持續時間

animation-timing-function? 動畫時間函數

animation-delay?動畫延遲時間

animation-iteration-count? 動畫執行次數?可以設置為一個證書?也可以設置為infinite（無限循環）

animation-direction?動畫執行方向

animation-play-state?動畫播放狀態

animation-fill-mode?動畫填充模式

七、漸變

linear-gradient? 線性漸變

radial-gradient?徑向漸變

?35.?移入圖片讓那個圖片慢慢放大

<body>
? ? <div class="box">
? ? ? ? <div class="img">
? ? ? ? ? ? 圖片
? ? ? ? </div>
? ? </div>
</body>
?

<style>
? ? body {
? ? ? ? width: 100vw;
? ? ? ? height: 100vh;
? ? ? ? display: flex;
? ? ? ? justify-content: center;
? ? ? ? align-items: center;
? ? }

? ? .box {
? ? ? ? width: 300px;
? ? ? ? height: 300px;
? ? ? ? border: 1px solid black;
? ? ? ? position: relative;
? ? }

? ? .img {
? ? ? ? width: 300px;
? ? ? ? height: 300px;
? ? ? ? background-color: red;
? ? ? ? font-size: 24px;
? ? ? ? line-height: 300px;
? ? ? ? text-align: center;
? ? ? ? position: absolute;
? ? ? ? transform-origin: right center;
? ? ? ? animation: animate 3s linear;/*使用動畫*/
? ? }

? ? /*圖片的運動動畫*/
? ? @keyframes animate {
? ? ? ? from {
? ? ? ? ? ? transform: scale(0);
? ? ? ? ? ? left: -110%;
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: scale(1);
? ? ? ? ? ? left: 0;
? ? ? ? }
? ? }
</style>

36.call(),apply(),bind()的區別

call 、bind 、 apply?這三個函數的第一個參數都是?this?的指向對象，第二個參數差別就來了

call的參數是直接放進去的，第二個第三個第N個參數全都是用逗號分隔，直接放到后面

apply的所有參數必須放在一個數組里面傳進去

bind?除了返回的函數以外，他的參數和call一樣

37.const的用法

第一、常變量

void?main（void）{

? ? ? ? const?int i=10；// i和j都用作常變量

? ? ? ? int? const j=20;

? ? ? ? i=15;? //錯誤? ?常量不能改變

? ? ? ? j=25; //錯誤? ?常量不能改變

}

第二、指針

const跟指針一起使用的時候有兩種方法

con示意圖可用來限制指針不可變，也就是說指針指向的內存地址不可變?但可以隨意改變該地址指向的內存的內容

38.Utf-8編碼漢字占多少個字節

英文字母和中文漢字在不同字符集編碼下的字節數

英文字母：

字節數：1? ? ?編碼：GB2312

字節數：1? ? ?編碼：GBK

字節數：1? ? ?編碼：GB18030

字節數：1? ? ?編碼：ISO-8859-1

字節數：1? ? ?編碼：UTF-8

字節數：4? ? ?編碼：UTF-16

字節數：2? ? ?編碼：UTF-16BE

字節數：2? ? ?編碼：UTF-16LE

中文漢字：

字節數：2? ?編碼：GB2312

字節數：2? ?編碼：GBK

字節數：2? ?編碼：GB18030

字節數：1? ?編碼：ISO-8859-1

字節數：3? ?編碼：UTF-8

字節數：4? ?編碼：UTF-16

字節數：2? ?編碼：UTF-16BE

字節數：2? ?編碼：UTF-16LE

39.關于ajax

定義：

ajax：即異步Javascript和XML? ajax是一種用于創建快速動態網頁的技術，通過在后臺與服務器進行少量的數據交換，ajax可以使網頁實現異步更新?這意味著可以在不重新加載整個網頁的情況下?對網頁得到某部分進行更新，而傳統網頁（不使用ajax）如果需要更新內容則需要重新加載整個網頁

同步與異步的區別

同步提交：當用戶發送請求時，當頁面不可以使用，服務器響應頁面到客戶端，響應完成，用戶才可以使用頁面

異步提交：當用戶發送請求?當前頁面可以繼續使用 ，當異步請求的數據響應給頁面，頁面吧數據顯示出來

ajax的工作原理

客戶端發送請求，請求交給XHR，xhr把請求提交給服務，服務器進行業務處理，服務器響應數據交給xhr對象，xhr對象接收數據，由JavaScript把數據寫到頁面上；如下圖所示

實現ajax的基本步驟
要完整的實現一個ajax異步調用和局部刷新，通常需要一下幾個步驟

1.創建xmlhttpRequest對象，也就是創建一個異步調用的對象

2.創建一個新的http請求，并指定該請求得到方法，url及驗證信息

創建http請求可以使用XMLHttpRequest對象的open（）方法，語法代碼如下

XMLHttpRequest.open(method,URL,flag,name,password);

代碼中的參數解釋如下所示

method：該參數用于指定http的請求方法，一共有get，post，head，put,delete五種方法

url:該參數用于指定http請求的URL地址，可以使絕對的URL，也可以是相對的URL

flag:該參數為可選，參數為布爾型，該參數用于指定是否使用異步方式，true表示異步，false表示同步，默認為true

name：該參數為可選參數，用于輸入用戶名?如果服務器需要驗證? 則必須使用該參數

password：該參數為可選，用于輸入密碼。若服務器需要驗證，則必須有該參數

3.設置響應http請求狀態變化的函數

4.發送http請求

在經過以上幾個步驟的設置之后，就可以將HTTP請求發送到Web服務器上去了。發送HTTP請求可以使用XMLHttpRequest對象的send()方法，其語法代碼如下

XMLHttpRequest.send(data);

5.獲取異步調用返回的數據

如果XMLHttpRequest對象的readyState屬性值等于4，表示異步調用過程完畢，就可以通過XMLHttpRequest對象的responseText屬性或responseXml屬性來獲取數據

但是，異步調用過程完畢，并不代表異步調用成功了，如果要判斷異步調用是否成功，還要判斷XMLHttpRequest對象的status屬性值，只有該屬性值為200，才表示異步調用成功，因此，要獲取服務器返回數據的語句，還必須要先判斷XMLHttpRequest對象的status屬性值是否等于200，如以下代碼所示

6.使用JavaScript和DOM實現局部刷新

40.js對數組的操作，包括向數組中插入刪除數據

1.檢查數組的API代碼如下

<script>

let?value=[1,2,3,4,5,6]

console.log(Array.isArray(value))? //?輸出為true

</script>

2.轉換方法將數組array轉換為以逗號隔開的字符串

<script>

let?array=['你好','hello','世界','word'];

console.log(array.toString())? //?輸出為? ? 你好，hello，世界嗎，Word

</script>

3.棧，隊列方法分別實現先進先出，后進先出的效果

<script>

? ? ? ? let?array = [1,2,3,4,5];

? ? ? ? array.push(6);? //將6壓入數組?從后開始

? ? ? ? console.log(array)? //輸出為123456

? ? ? ? array.unshift(0)? //將0放入在數組的最前面

? ? ? ? console.log(array)? //輸出為0123456

? ? ? ? array.shift()? //刪除第一個? ?輸出結果為123456（刪除了0）

? ? ? ? array.pop? //?刪除末尾一個? ? 輸出結果為12345（刪除了6）

</script>

?4.重排序方法，sort方法根據設定的規則進行排序（如果調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（如有必要），以便進行比較。）reverse進行倒敘

<script>

? ? ? ? let?array = [1,2,4,10,20,50,6,8,9]

????????console.log(array.sort())? //輸出為[1,10,2,20,4,50,6,8,9]

? ? ? ? 此時并不是從大大小排列，?sort自帶的接口可以實現此功能

? ? ? ? array.sort(function(a,b){

? ? ? ? return a-b

})

console.log(array)? //輸出為[1,2,4,6,8,9,10,20,50]

array.sort(function(a,b){
? ? ? return b-a
? ? })
? ? console.log(array);//輸出為[50, 20, 10, 9, 8, 6, 4, 2, 1]可以實現倒敘的方法
? ? array.reverse();
? ? console.log(array)//reverse也可以實現倒敘排列的方法

</script>

5.concat用于連接字符串并建立副本? slice方法切割數組? 接收兩個參數，標志其實位置與結束位置，這兩種方法不會影響原數組? splice方法可用于刪除?插入?替換? 三個參數（第一個參數表示需要操作的位置，第二個參數-需要刪除的項數? 第三個參數-需要插入的項)

<script>

? ? ? ? let arr=[1,2,3,4];

? ? ? ? let arr1=[5,6,7,8];

? ? ? ? console.log(arr.concat(arr1)) //concat?方法會將arr和arr1組合在一起

? ? let arr2 = [1, 2, 5, 9, 7, 10];
? ? console.log(arr2.slice(1, 4))//slice方法會將數組切割基本原則是含頭不含尾，就是只會包含第一? ? ? 個參數下標的值
? ? //而不包含第二個參數個數的所有個數尾部會被去掉
? ? arr2.splice(2, 1);//選擇刪除的是下標為2的值并且只刪除一個
? ? console.log(arr2)//輸出為 [1, 2, 9, 7, 10]
? ? arr2.splice(2, 1, "yellow")//這里也可是實現替換的操作將下標為2的一個值替換為字符串yellow
? ? console.log(arr2)//輸出為[1, 2, "yellow", 7, 10]
? ? arr2.splice(2, 0, 12, 20)//此時是插入的操作在下標為2的位置刪除0個值插入12,20并且會插入到? ? ? 第一個參數下標的前面位置

</script>

6.位置方法：indexOf和lastIndexOf，查找目標的索引位置，沒有則為0。可設置第二個參數代表查找開始的位置

<script>
? ? let arr = [1, 2, 5, 4, 8, 69]
? ? console.log(arr.indexOf(9))//如果數組中沒有此元素的話就會返回-1
? ? console.log(arr.indexOf(2))//如果此數組中有此元素的話就會返回此元素的下標
? ? console.log(arr.indexOf(2, 0))//此時第二個參數可以定義開始查找的位置。
? ? //indexOf一般用于判斷條件中尤其是沒有此下標時返回-1的用法可以用來作為數組排序等等的判斷條件
? ? //if(arr.indexOf==-1){arr1.push(xxxx)}
? </script>

7.join（）方法

<script>
? ? let arr = [1, 2, 3, 4];
? ?document.write(arr.join("*"))//可以使數組中的元素以特定的字符連接
? ?document.write(arr.join())//不傳參數時，可以將數組中的值轉為字符串
? </script>

8.reduce可以用來數組求和的操作

<script>
? ? let arr = [1, 2, 3, 4];
? ? function sum(total, num) {
? ? ? return total + num;
? ? }
? ? console.log(arr.reduce(sum));//此時的reduce可以做到求和的操作
? </script>

9.push()方法，可以將數組末尾添加元素

<script>
? ? let arr = [1, 2, 3, 4];
? ? arr.push(5)
? ? console.log(arr) //輸出為 [1,2,3,4,5]
? </script>

41.promise是什么？能解決什么問題？

1.回調地域? 代碼不好維護?錯誤處理非常麻煩?不能同意處理錯誤

2.多個請求并發? 基于回調（之前寫的并發讀取文件，自定義定時器）

promise是一個人類，類用的時候?只需要new?

1.new Promise()是需要傳遞的一個執行器函數，exector這個函數默認就會執行（立即執行）

2.每個promise（）都有三個狀態? pending等待狀態 ? fullfiled?成功狀態? rejected?失敗狀態

3.默認創建一個promise是等待狀態? 默認提供給你兩個函數? resolve讓promise變成成功狀態

rejected讓promise變成失敗狀態

4.每個promise的實例都具備一個then方法? then方法中傳遞兩個參數? （1）成功的回調 （2）失敗的回調

5.如何讓一個promise?變成失敗狀態? reject（）可以拋出一個錯誤

6.如果多次調用成功或者失敗，都只會執行一次?一旦狀態變化就不能再變成成功或者失敗

7.自己實現基本的promise?語法commonjs規范?可以在一個模塊中?導出一個變量?另一個模塊來引用

?42.編程：連接兩個數組并返回？

<script>
? ? let joinTwoArrays = (arr1, arr2) => {
? ? ? ? return arr1.concat(arr2);
? ? }

? ? let arr1 = [1, 2, 3, 4, 5];
? ? let arr2 = [6, 7, 8, 9, 0];
? ? let arr3 = joinTwoArrays(arr1, arr2);
? ? console.log(arr3); //輸出結果為[1,2,3,4,5,6,7,8,9,0]
</script>

43.冒泡排序

冒泡排序的原理：
每一趟只能確定將一個數歸位。即第一趟只能確定將末位上的數歸位，第二趟只能將倒數第 2 位上的數歸位，依次類推下去。如果有 n 個數進行排序，只需將 n-1 個數歸位，也就是要進行 n-1 趟操作。

而 “每一趟 ” 都需要從第一位開始進行相鄰的兩個數的比較，將較大的數放后面，比較完畢之后向后挪一位繼續比較下面兩個相鄰的兩個數大小關系，重復此步驟，直到最后一個還沒歸位的數。
?

?public static int[] bubbleSort(int[] arr) {
? ? ?if (arr == null || arr.length < 2) {
? ? ? ? ? return arr;
? ? ?}
? ? for (int i = 0; i < arr.length - 1; i++) {
? ? ? ? ?boolean isSorted ?= true;//有序標記，每一輪的初始是true
? ? ? ? ?for (int j = 0; j < arr.length -i - 1; j++) {
? ? ? ? ? ? ?if (arr[j + 1] < arr[j]) {
? ? ? ? ? ? ? ? ?isSorted ?= false;//有元素交換，所以不是有序，標記變為false
? ? ? ? ? ? ? ? ?int t = arr[j];
? ? ? ? ? ? ? ? ?arr[j] = arr[j+1];
? ? ? ? ? ? ? ? ?arr[j+1] = t;
? ? ? ? ? ? ?}
? ? ? ? ?}
? ? ? ? ?//一趟下來是否發生位置交換，如果沒有交換直接跳出大循環
? ? ? ? ?if(isSorted )
? ? ? ? ? ? ? break;
? ? ?}
? ? ?return arr;
}

44.ES6新特性

let?和const命令

var?之前寫js變量的時候?只有一個關鍵字?var

但是var有一個問題 ，就是定義的變量有時候會成為全局變量

例如

for （var?i=0；i<5;i++）{

? ? ? ? console.log(i)

}

console.log('循環外：'+i)

輸出結果為：

可以看出?再循環外部也可以獲取到變量i?的值，顯然變量的作用域范圍太大了。在做復雜頁面的時候?會帶來很大的問題

let??

let?所聲明的變量?只在let所在的代碼塊內有效

例如：

for （let i=0；i<5;i++）{

? ? ? ? console.log(i)

}

console.log('循環外：'+i)

輸出結果為：

這樣就把變量的i?的作用域控制在了循環內部

const?

const聲明的變量時常量，不能被修改，類似于Java中的final關鍵字

例如

const a=10;

console.log("a=",a)

//給a?重新賦值

a=20

console.log("a=",a)

輸出結果為

可以看到變量a的值是不能被修改的

詳情?請見如下鏈接

http://t.csdn.cn/rpCSY

45.js對數組有哪些操作方法

1.concat（）? ?用于連接兩個或者多個數組?該方法不會改變現有的數組，僅會返回被連接數組的一個副本

?2.join（）方法用于把數組中的所有元素放入一個字符串，元素是通過指定的分隔符進行分割的，使用“，”分割?不改變原數組

3.push（）方法可向數組的末尾添加一個或多個元素，并返回新的長度。末尾添加，返回的是長度，會改變原數組。

4.pop() 方法用于刪除并返回數組的最后一個元素。返回最后一個元素，會改變原數組

5.shift() 方法用于把數組的第一個元素從其中刪除，并返回第一個元素的值。返回第一個元素，改變原數組。

6.unshift() 方法可向數組的開頭添加一個或更多元素，并返回新的長度。返回新長度，改變原數組。

7.slice()
返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。返回選定的元素，該方法不會修改原數組。

?

8.?splice() 方法可刪除從 index 處開始的零個或多個元素，并且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數組。

9.、sort 排序
按照 Unicode code 位置排序，默認升序

10.reverse() 方法用于顛倒數組中元素的順序。返回的是顛倒后的數組，會改變原數組

?

11.?indexOf 和 lastIndexOf
都接受兩個參數：查找的值、查找起始位置
不存在，返回 -1 ；存在，返回位置。indexOf 是從前往后查找， lastIndexOf 是從后往前查找。
indexOf

12.every
對數組的每一項都運行給定的函數，每一項都返回 ture,則返回 true

?

?13.some
對數組的每一項都運行給定的函數，任意一項都返回 ture,則返回 true

?

?14.forEach 數組遍歷

46.js的選擇器

1.原生js選擇器

如果DOM元素中有id值大多數瀏覽器支持直接使用方法

<div id="box">

</div>
<script>
box.οnclick=function(){//可以直接調用id為box的dom元素
? ? console.log(1111)
}
</script>

2.如果沒有id值的話有多種選擇方法

let box=document.getElementById("這里是dom元素的id值");
let box=document.getElementsByClassName("這里是class值")//注意返回的是數組元素
let box=document.getElementsByTagName("這里是標簽名")//注意返回的是標簽名的所有值可能是數組
querySelector():返回文檔中匹配指定css選擇器的第一個元素
querySelectorAll():返回文檔中匹配指定css選擇器的所有元素
getElementsByName(name): 返回文檔中name屬性為name值的元素，因為name屬性值不是唯一的，所以查詢到的結果有可能返回的是一個數組，而不是一個元素。

3.jQuery選擇器

內容
基本選擇器有ID選擇器、類選擇器、標簽選擇器、通用選擇器，事件的添加方法如下：
$(...).事件名(function() { });
屬性樣式有：

? ? $(...).css("border","1px solid red")
? ? $(...).css({...})
? ? $(...).css("border")
? ? $(...).attr(屬性名,值)
? ? $(...).html() innerHTML
? ? $(...).text() innerText
? ? $(...).val() value值
? ? $(...).addClass()增加
? ? $(...).removeClass() 移除
? ? $(...).toggleClass()開關**

$("#box")//這里選擇的是一個id為box的元素
$(".box")//這里選擇的是一個class為box的元素
$("#box ul")//這里選擇的是一個id為box的元素里面的所有ul元素
$(".box ul")//這里選擇的是一個class為box的元素里面的所有ul元素
$("*")//可以使用此方法選中所有的元素
$("div")//這里是選中了所有的div元素

47.js的數據類型

一、數據類型簡介：

1.JavaScript（以下簡稱js）的數據類型分為兩種：原始類型（即基本數據類型）和對象類型（即引用數據類型）；

2.js常用的基本數據類型包括undefined - - (未定義)、null- - (空的)、number - - (數字)、boolean- - (布爾值)、string- - (字符串)、Symbol - - (符號)；

3.js的引用數據類型也就是對象類型Object- - (對象)，比如：array - - （數組）、function - - （函數）、data - - （時間）等；

二、各個數據類型的概念

基本數據類型存放在棧中 引用數據類型存放在堆中。

1.基本數據類型

Undefined：
取undefined一個值。
表示變量不含有任何值。是未定義的狀態。

string：

①字符串類型中的單雙引號作用一樣；

②字符串有length屬性，可以取得字符串的長度：

?let one = 'Hello world'
? console.log(one.length) // 輸出長度：11

③字符串的值是不可變的，要改變一個字符串的值，首先要銷毀原來的字符串，再用另一個包含新值得字符串區填充該字符串；

④字符串轉換：

String()，轉型函數，適用于任何數據類型（兩個例外：null，undefined轉換后為null和undefined）

toString()方法可以把一個邏輯值轉換為字符串，并返回結果（兩個例外：null、undefined沒有toString()方法）

let ab = 'hello world'
? let bc = null
? let cd = undefined
? console.log(ab.toString()) ?// 輸出：hello world
? // console.log(bc.toString()) ?// 報錯
? // console.log(cd.toString()) ?// 報錯
? console.log(String(ab)) ?// 輸出：hello world
? console.log(String(bc)) ?// 輸出：null
? console.log(String(cd)) ?// 輸出：undefined

Boolean:
只有倆個值：true或false。
布爾值常用在條件測試中。比如說判斷1>2是不是對的，是對的就返回true，是錯的就返回false，然后我們就可以根據返回的結果去做倆種不同的操作。

Null：只有一個值。null是表示一個空對象指針，這也是typeof操作符檢測 null 值時會返回 object 的原因。

Number:
數字（數字可以帶小數點也可以不帶）、NaN、Infinity

2.引用數據類型

引用類型可以添加屬性和方法：

引用類型的賦值是對象引用：

?48.減少頁面加載時間的方法

1、減少http請求（合并文件、合并圖片）

2、優化圖片文件，減小其尺寸，特別是縮略圖，一定要按尺寸生成縮略圖然后調用，不要在網頁中用resize方法實現，雖然這樣看到的圖片外形小了，但是其加載的數據量一點也沒減少。曾經見過有人在網頁中加載的縮略圖，其真實尺寸有10M之巨…普通圖像、icon也要盡可能壓縮后，可以采用web圖像保存、減少顏色數等等方法實現。

3、圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）

4、 壓縮Javascript、CSS代碼：一般js、css文件中存在大量的空格、換行、注釋，這些利于閱讀，如果能夠壓縮掉，將會很有利于網絡傳輸。這方面的工具也有很多，可以在百度里搜索一下關鍵字“css代碼壓縮”，或者“js代碼壓縮”將會發現有很多網站都提供這樣的功能，當然了你也可以自己寫程序來做這個工作，如果你會的話。就拿我們這個網站來說吧。剛開始上傳這個網站的時候，我的很多Css代碼都沒有壓縮，后面發現了這個問題，我就上網找了相關的網站的壓縮代碼的功能，最后就把很多CSS文件都壓縮了。這個壓縮比率還是比較高的，一般都有百分五十左右。這個代碼壓縮對于網頁的加載還是很有用的。

5、 服務器啟用gzip壓縮功能：將要傳輸的文件壓縮后傳輸到客戶端再解壓，在網絡傳輸 數據量會大幅減小。在服務器上的Apache、Nginx可直接啟用，也可用代碼直接設置傳輸文件頭，增加gzip的設置，也可從 負載均衡設備直接設置。不過需要留意的是，這個設置會略微增加服務器的負擔。服務器性能不是很好的網站，要慎重考慮。

6.標明高度和寬度（如果瀏覽器沒有找到這兩個參數，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。 當瀏覽器知道了高度和寬度參數后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續加載后面的內容。從而加載時間快了，瀏覽體驗也更好了。）

7、網址后面加上“/”:對服務器而言，不加斜杠服務器會多一次判斷的過程，加斜杠就會直接返回網站設置的存放在網站根目錄下的默認頁面。

8、在文件頭部放置css樣式的定義

9、文件末尾放Javascript腳本
網頁文件的載入是從上到下加載的，很多Javascript腳本執行效率較低，或者在網頁前面都不需要執行的，如果將這些腳本放置到頁面比較靠前的位置，可能導致網站內容載入速度下降或加載不了，將這些腳本放置在網頁文件末尾，一定要放 置在前面的腳本要改用所謂的“后載入”方式加載，在主體網頁加載完成后再加載，防止其影響到主體網頁的加載速度。

10、 Ajax采用緩存調用
Ajax調用都采用緩存調用方式，一般采用附加特征參數方式實現，注意其中的<script src=”xxx.js?{VERHASH}”，{VERHASH}就是特征參數，這個參數不變化就使用緩存文件，如果發生變化則重新下載新文件或更新信息。

11、 盡可能減少DCOM元素
這個很好理解，就是盡可能減少網頁中各種<>元素數量，例如<table>的冗余很嚴重，而我們完全可以用<div>取代之。

12、 使用多域名負載網頁內的多個文件、圖片

13、 使用CDN

14、在服務器端配置control-cache last-modify-date

15、在服務器配置Entity-Tag if-none-match

轉自一下鏈接

http://t.csdn.cn/Zrhn9

49.怎么理解模塊化開發

一、什么是模塊化

所謂的模塊化開發就是封裝細節，提供使用接口，彼此之間互不影響，每個模塊都是實現某一特定的功能。模塊化開發的基礎就是函數

二、實現模塊化--用函數封裝

?上面的函數func1()和func2()，組成一個模塊。使用的時候，直接調用就行了。這種做法的缺點很明顯：”污染”了全局變量，無法保證不與其他模塊發生變量名沖突，而且模塊成員之間看不出直接關系。

三、實現模塊化--使用對象封裝

為了解決上面的缺點，可以把模塊寫成一個對象，所有的模塊成員都放到這個對象里面。

上面的函數func1()和func2(),都封裝在obj對象里。使用的時候，就是調用這個對象的屬性。

obj.func1(); 這樣做也是有問題的，變量可以被外面隨意改變而導致不安全。比如，年齡被修改成負數

obj.age=-100;

四、實現模塊化--立即執行函數寫法

使用”立即執行函數”（immediately-invoked FunctionExpression，IIFE），可以達到不暴露私有成員的目的。這個也是閉包處理的一種方式。

?使用上面的寫法，外部代碼無法讀取內部的age變量

console.log(obj.age);//undefined

五、實現模塊化-放大模式

如果一個模塊很大，必須分成幾個部分，或者一個模塊需要繼承另一個模塊，這時就有必要采用”放大模式”（augmentation）。在原有的基礎上擴展更多的方法。

var obj=(function(mod){
? ? ?mod.func3=function(){
? ? ? ? ?//...
? ? ?};
? ? ?return mod;//方便方法連續調用
})(obj)
六、實現模塊化-寬放大模式（Loose augmentation）

在瀏覽器環境中，模塊的各個部分通常都是從網上獲取的，有時無法知道哪個部分會先加載。如果采用上面的寫法，第一個執行的部分有可能加載一個不存在空對象，這時就要采用”寬放大模式”。

var obj=(function(mod){
? ? ?//...
? ? ?return mod;
})(window.obj||{});//確保對象不為空

與”放大模式”相比，”寬放大模式”就是”立即執行函數”的參數可以是空對象，解決了非空的問題

七、實現模塊化--輸入全局變量

獨立性是模塊的重要特點，模塊內部最好不與程序的其他部分直接交互。為了在模塊內部調用全局變量，必須顯式地將其他變量輸入模塊。

(function(window,undefined){
? ...
})(window);
?

這事Jquery框架的源碼，將window對象作為參數傳入，這樣做除了保證模塊的獨立性外，還使得模塊之間的依賴關系變得明顯。

?參考自：http://t.csdn.cn/7MJ5Q

?50.什么是閉包，有什么作用？

什么是閉包，閉包的作用? 閉包的應用

答：函數執行，形成私有的執行上下文，使內部私有變量不受外接干擾，起到了保護和保存的作用

?閉包（closure）就是能蚣讀取其他函數內部變量的函數，在Javascript中，只有函數內部的子函數才能讀取局部變量，所以閉包可以理解成“定義在一個函數內部的函數”，在本質上，閉包是將函數內部和函數外部鏈接起來的橋梁（閉包最典型的應用是實現回調函數（callback））

作用：

保護-避免命名沖突

保存-解決循環綁定引發的索引問題

應用:

設計模式中的單例模式

for循環中的保留i的操作

防抖和節流

函數顆粒化

缺點：

會出現內存泄露

1.常駐內存，會增大內存的使用量，使用不當很容易造成內存泄露

2.還有一個非常嚴重的問題，那就是內存浪費的問題。這個內存浪費不僅僅是因為他是常駐內存，更重要的是 ，對閉包的使用不當會造成無效內存的產生

優點：

1.保護函數內變量的安全

2.在內存中維持一個變量（用的太多就變成了缺點-因為占內存）

3.邏輯連續，當閉包作為另一個函數調用的參數時，避免你脫離當前的邏輯而單獨編寫額外的邏輯

4.方便調用上下文的局部變量

5.加強封裝性，可以打到對變量的保護作用

51.手機號的正則表達式(以1開頭的11位數字）

let?phone = 13715945478； //亂寫一個

let?reg=/^1[3][4][5][7][8][0-9]{9}$/;

console.log(phone,reg.test(phone)?'正確的手機號'：'不正確的手機號'

輸出結果為

?

^1 -?以1開頭

[3][4][7][5][8] -表示第二位是3或4或5或7或8的任意一位

[0-9]{9}$? -表示以0-9任意9位數字結尾

總結

以上是生活随笔為你收集整理的Js面试题（总结）持续取经更新……的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。