前端面試題匯總-其他（二）

原生js forEach()和map()區(qū)別

共同點(diǎn)：

1.都是循環(huán)遍歷數(shù)組中的每一項(xiàng)。

2.forEach() 和 map() 里面每一次執(zhí)行匿名函數(shù)都支持3個(gè)參數(shù)：數(shù)組中的當(dāng)前項(xiàng)item,當(dāng)前項(xiàng)的索引index,原始數(shù)組input。

3.匿名函數(shù)中的this都是指Window。

4.只能遍歷數(shù)組。

區(qū)別：
forEach() 沒(méi)有返回值

var arr = [12,23,24,42,1];  
var res = arr.forEach(function (item,index,input) {  
       input[index] = item*10;  
})  
console.log(res); //-->undefined;  
console.log(arr); //-->會(huì)對(duì)原來(lái)的數(shù)組產(chǎn)生改變；

map() 有返回值，可以return 出來(lái)

var arr = [12,23,24,42,1];  
var res = arr.map(function (item,index,input) {  
    return item*10;  
})  
console.log(res);//-->[120,230,240,420,10];  
console.log(arr);//-->[12,23,24,42,1]；

jQuery .each()和.each()和.each()和.map()遍歷

共同點(diǎn)：
即可遍歷數(shù)組，又可遍歷對(duì)象。
1.$.each()

沒(méi)有返回值。$.each()里面的匿名函數(shù)支持2個(gè)參數(shù)：當(dāng)前項(xiàng)的索引i，數(shù)組中的當(dāng)前項(xiàng)n。如果遍歷的是對(duì)象，k 是鍵，n 是值。

var arr=$.map( [0,1,2], function(n){  
     return n + 4;  
});  
console.log(arr);   
$.map({"name":"Jim","age":17},function(i,n){  
     console.log(i+":"+n);  
});

var ary = [12,23,24,42,1];
var res = ary.forEach(function (item,index,input) {
input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(ary);//-->會(huì)對(duì)原來(lái)的數(shù)組產(chǎn)生改變；

以上內(nèi)容轉(zhuǎn)自 https://blog.csdn.net/andy4021/java/article/details/88359092

js將如何將偽數(shù)組轉(zhuǎn)為真數(shù)組

偽數(shù)組就是像數(shù)組的對(duì)象,舉個(gè)例子:

obj={
    "0":"abc",
    "1":18,
    length:2
}

這個(gè)就是偽數(shù)組,含有l(wèi)ength屬性

  1. [].slice.call(obj) 這個(gè)等于Array.protype.slice.call(obj)
    var newArr=[].slice.call(obj)
    slice會(huì)把通過(guò)索引位置獲取新的數(shù)組，該方法不會(huì)修改原數(shù)組，只是返回一個(gè)新的子數(shù)組.call會(huì)把this的指向改為傳進(jìn)去的obj
  2. Array.form(obj),ES6的新語(yǔ)法
    var newArr=Array.from(obj)
  3. 使用擴(kuò)展運(yùn)算符,也是ES6的語(yǔ)法
    var newArr= [...obj]
    以上內(nèi)容轉(zhuǎn)自https://blog.csdn.net/sinat_19594515/article/details/101025056

div水平垂直居中的六種方法

方法一:

絕對(duì)定位方法：不確定當(dāng)前div的寬度和高度，采用 transform: translate(-50%,-50%); 當(dāng)前div的父級(jí)添加相對(duì)定位（position: relative;）

div{
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

方法二:

絕對(duì)定位方法：確定了當(dāng)前div的寬度，margin值為當(dāng)前div寬度一半的負(fù)值

圖片展示： 如方法一的圖片展示

代碼如下：

div{
    width:600px;
    height: 600px;
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-300px;
}

方法三：

絕對(duì)定位方法：絕對(duì)定位下top left right bottom 都設(shè)置0

圖片展示： 如方法一的圖片展示

代碼如下：

<div class="child">我是子級(jí)</div>
/**css**/
div.child{
    width: 600px;
    height: 600px;
    background: red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

方法四:

flex布局方法：當(dāng)前div的父級(jí)添加flex css樣式

<!--html-->
<div class="box">
    <div class="child">child</div>
</div>
1
/**css**/
.box{
    height:800px;
    -webkit-display:flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    border:1px solid #ccc;
}
div.child{
    width:600px;
    height:600px;
    background-color:red;
}

方法五:

table-cell實(shí)現(xiàn)水平垂直居中: table-cell middle center組合使用

<!--html-->
<div class="table-cell">
    <p>我愛(ài)你</p>
</div>
/**css**/
.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border:1px solid #666;
}

方法六:

絕對(duì)定位：calc() 函數(shù)動(dòng)態(tài)計(jì)算實(shí)現(xiàn)水平垂直居中

<!--html-->
<div class="calc">
    <div class="child">calc</div>
</div>
/**css**/
.calc{
  position: relative;<br>  border: 1px solid #ccc;<br>  width: 400px;<br>  height: 160px;
}
.calc .child{
  position: absolute;<br>  width: 200px;<br>  height: 50px;
  left:-webkit-calc((400px - 200px)/2);
  top:-webkit-calc((160px - 50px)/2);
  left:-moz-calc((400px - 200px)/2);
  top:-moz-calc((160px - 50px)/2);
  left:calc((400px - 200px)/2);
  top:calc((160px - 50px)/2);
}

以上內(nèi)容轉(zhuǎn)自https://www.cnblogs.com/a-cat/p/9019184.html

前端如何優(yōu)化網(wǎng)站性能

1、減少 HTTP 請(qǐng)求數(shù)量

在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過(guò) HTTP 進(jìn)行通信。瀏覽器與服務(wù)器需要經(jīng)過(guò)三次握手，每次握手需要花費(fèi)大量時(shí)間。而且不同瀏覽器對(duì)資源文件并發(fā)請(qǐng)求數(shù)量有限（不同瀏覽器允許并發(fā)數(shù)），一旦 HTTP 請(qǐng)求數(shù)量達(dá)到一定數(shù)量，資源請(qǐng)求就存在等待狀態(tài)，這是很致命的，因此減少 HTTP 的請(qǐng)求數(shù)量可以很大程度上對(duì)網(wǎng)站性能進(jìn)行優(yōu)化。

CSS Sprites：國(guó)內(nèi)俗稱(chēng) CSS 精靈，這是將多張圖片合并成一張圖片達(dá)到減少 HTTP 請(qǐng)求的一種解決方案，可以通過(guò) CSS background 屬性來(lái)訪問(wèn)圖片內(nèi)容。這種方案同時(shí)還可以減少圖片總字節(jié)數(shù)。

合并 CSS 和 JS 文件：現(xiàn)在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請(qǐng)求數(shù)量，可以通過(guò)這些工具再發(fā)布前將多個(gè) CSS 或者 多個(gè) JS 合并成一個(gè)文件。

采用 lazyLoad：俗稱(chēng)懶加載，可以控制網(wǎng)頁(yè)上的內(nèi)容在一開(kāi)始無(wú)需加載，不需要發(fā)請(qǐng)求，等到用戶操作真正需要的時(shí)候立即加載出內(nèi)容。這樣就控制了網(wǎng)頁(yè)資源一次性請(qǐng)求數(shù)量。

控制資源文件加載優(yōu)先級(jí)

瀏覽器在加載 HTML 內(nèi)容時(shí)，是將 HTML 內(nèi)容從上至下依次解析，解析到 link 或者 script 標(biāo)簽就會(huì)加載 href 或者 src 對(duì)應(yīng)鏈接內(nèi)容，為了第一時(shí)間展示頁(yè)面給用戶，就需要將 CSS 提前加載，不要受 JS 加載影響。

一般情況下都是 CSS 在頭部，JS 在底部。

利用瀏覽器緩存

瀏覽器緩存是將網(wǎng)絡(luò)資源存儲(chǔ)在本地，等待下次請(qǐng)求該資源時(shí)，如果資源已經(jīng)存在就不需要到服務(wù)器重新請(qǐng)求該資源，直接在本地讀取該資源。

減少重排（Reflow）

基本原理：重排是 DOM 的變化影響到了元素的幾何屬性（寬和高），瀏覽器會(huì)重新計(jì)算元素的幾何屬性，會(huì)使渲染樹(shù)中受到影響的部分失效，瀏覽器會(huì)驗(yàn)證 DOM 樹(shù)上的所有其它結(jié)點(diǎn)的 visibility 屬性，這也是 Reflow 低效的原因。如果 Reflow 的過(guò)于頻繁，CPU 使用率就會(huì)急劇上升。

減少 Reflow，如果需要在 DOM 操作時(shí)添加樣式，盡量使用 增加 class 屬性，而不是通過(guò) style 操作樣式。

減少 DOM 操作

圖標(biāo)使用 IconFont 替換

網(wǎng)頁(yè)從輸入網(wǎng)址到渲染完成經(jīng)歷了哪些過(guò)程

1、輸入網(wǎng)址；

2、發(fā)送到DNS服務(wù)器，并獲取域名對(duì)應(yīng)的web服務(wù)器對(duì)應(yīng)的ip地址；

3、與web服務(wù)器建立TCP連接；

4、瀏覽器向web服務(wù)器發(fā)送http請(qǐng)求；

5、web服務(wù)器響應(yīng)請(qǐng)求，并返回指定url的數(shù)據(jù)（或錯(cuò)誤信息，或重定向的新的url地址）；

6、瀏覽器下載web服務(wù)器返回的數(shù)據(jù)及解析html源文件；

7、生成DOM樹(shù)，解析css和js，渲染頁(yè)面，直至顯示完成；

jQuery獲取的dom對(duì)象和原生的dom對(duì)象有何區(qū)別

js原生獲取的dom是一個(gè)對(duì)象，jQuery對(duì)象就是一個(gè)數(shù)組對(duì)象，其實(shí)就是選擇出來(lái)的元素的數(shù)組集合，所以說(shuō)他們兩者是不同的對(duì)象類(lèi)型不等價(jià)。

  • 原生DOM對(duì)象轉(zhuǎn)jQuery對(duì)象

var box = document.getElementById('box');

var $box = $(box);
  • Query對(duì)象轉(zhuǎn)原生DOM對(duì)象：

var $box = $('#box');

var box = $box[0];

jQuery如何擴(kuò)展自定義方法


(jQuery.fn.myMethod=function () {

      alert('myMethod');

})

// 或者：

(function ($) {

        $.fn.extend({

            myMethod : function () {

                  alert('myMethod');

            }

        })

})(jQuery)

使用：

$("#div").myMethod();

以上部分內(nèi)容轉(zhuǎn)自：前端小醬

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容