JS基礎筆記（面試筆試有用）

時間 2019-11-15

原文原文鏈接

【if判斷‘=’和‘==’問題】千萬記着之後都寫雙等於去判斷
一、if( i = 0)和if( i == 0)

第一個是賦值操做判斷語句(這樣寫容易進入死循環除非是true和false的狀況) 第二個纔是正常狀況css

【for循環的】
一、先聲明變量後判斷終止條件再執行括號內容最後++i
二、對於for循環 i++和++i均可以使用，++i的內存應用效率更高，在轉化成彙編語言的時候，會少開闢一個變量html

【字符相加和相減的類型變化】
一、5 + '8' 和 ‘5’+‘8’打印結果爲58(最終都轉換爲string類型) 5 + 8 =13 num 類型
二、‘8’ - 5 和 ‘8’ - ‘5’ 和 8 - 5 打印結果都爲3（最終都轉換爲num類型）
三、 ‘asd’ - ‘zcx’ 打印結果未NaN(最終結果爲num類型)node

【釋放內存和銷燬變量】
一、函數調用完後，當即銷燬函數內的局部變量面試

【style和script的位置】
一、style樣式通常寫在<head></head>裏面，但實際上能夠寫在body裏面或者其餘位置，但這就會涉及到瀏覽器渲染順序問題，style標籤寫在body裏
CSS會從新渲染一次頁面，佔用必定時間，若是網頁篇幅少的話感受不出來，若是篇幅多（大量HTML）會有必定的影響，因此大頁面中不建議將style
寫進body
（就像一些電商網站，有部分CSS寫在body裏面，這是爲了方便修改源代碼，不然你還得去翻CSS好比網站左側、右側的廣告模塊，不少頁面都
要加入這個廣告，因此他就把廣告這一塊的html寫到一個文件裏，而後在加載過來。因此css也和他寫在一塊兒。）算法

【淘寶搜索框 oninput&&onpropertychange】
一、   打字label文字就消失，清空文字就顯示本來的label文字

   window.onload = function(){
function $(id){return document.getElementById(id);}
//oninput 大部分瀏覽器支持檢測用戶表單輸入內容
//onpropertychange ie678 檢測用戶表單輸入內容
$("txt").oninput = $("txt").onpropertychange = function(){
if(this.value == " ")
{
$("message").style.display = "block";
}
else
{
$("message").style.display = "none";json

}
}
}數組

二、<input type="text" placeholder="必敗的國際大牌"> 一樣獲得上面的效果 placeholder是H5 input的新屬性瀏覽器

這2種寫法避免多重判斷光標位置，是否打字等，閉包

【算法、關係、邏輯運算符的關係】
一、邏輯運算符（!,&&,||）與操做：eg var result=true&&3 //3
               var result=1&&3 //3
               var result=false&&3//false
               var result=""&&3 //"" (前面根據booler類型決定 true就取最後一個true的值 false就取false的值)app

或操做：若是第一個值爲真則結束後面的判斷（true就取第一個true的值 false就取最後一個false的值)

二、優先級----------------算術運算符》關係運算符》邏輯運算符

運算符順序

1 ()

2 !、-、++、-- (-10) 負號正號

3 *、/、%

4 +、- 10-5

5 <、<=、<、>=

6 ==、!=、===、!==、

7 &&

8 ||

9?:

10 =、+=、-=、*=、/=、%= 賦值

【window.getComputedStyle("元素", "僞類")[attr]】（僞類位置默認爲null）
一、獲取一個元素的屬性集合
用法：getComputeStyle(element,null).width

優勢：解決obj,style[attr]只能去行內樣式的缺陷

缺點：由於要獲得所有屬性集合才能取想要的值，因此是很是耗內存的操做

【eval】（通常不用，以防面試會問）
一、eval方法是開啓程序解析器的入口，對於js程序來講，當程序運行的時候，會開啓一次程序解析器，會解析對應的代碼，當咱們
使用eval函數的時候會再次開啓程序解析器，會解析eval中的內容
二、能夠用來讓瀏覽器本身識別簡單的算法運算並得出結果

三、eval原理去掉字符串的冒號，變成非string類型

【JS的數組和別的語言數組最大區別】
一、JS同一個數組能同時存放不一樣的數據類型，別的語言只能存貯相同類型的數據類型

【全選與反選得出的取反思想】
一、
btns[1].onclick = function () {
for(var i =0;i <inputs.length;i ++){
//左邊的設置值，右邊的是取值
inputs[i].checked = !inputs[i].checked;
}
}

這種方法通常是控制dom元素的屬性值，！這裏是關鍵，由於通常屬性判斷只有2個值true 和 false，用這種方法會比較簡潔;

【window.location.href】
一、頁面跳轉方法

【定時器的本質】
一、Interval定時器：在外設置1s間隔循環一次，若是裏面的程序須要2s才能運行完畢，那麼最終時間2s
（一個定時器，外面設置間隔時間，裏面也有執行時間，最終時間按長的時間計算）
二、TimeOut定時器：間隔時間+程序執行時間 = 最終時間；

這裏涉及隊列問題，有異步的思想在裏面，原理是定時器的運做會與定時器裏面的程序同時啓動，如定時器間隔1s運行1次，裏面程序2秒才能執行完程序，那麼定時器會與裏面程序同時執行（異步）當定時器1s過完後，必需要等待裏面程序執行完畢才能執行下一次定時器循環，而這裏因爲定時器的1s已經完成，因此下一次循環會馬上開啓

三、函數聲明放在定時器外面，能提升效率，避免每一次定時器循環都聲明變量開闢新的內存，這樣會耗用性能

【元素的類型判斷nodeType】
一、nodeType = 1 爲元素節點
二、nodeType = 2 爲屬性節點
三、nodeType = 3 爲文本節點

四、用法****************** （能夠在循環內判斷nodeType類型去添加不一樣節點類型）

【array.srot()】（面試可能會問）
一、sort（）原理是經過ascII編碼順序去排列，是按照數組的值的首字母或者首位數字去進行由大到小排列，因此是不精準的
若是須要按順序由大到小或者小到大完整排列，必須在sort()括號裏添加一個參數去判斷比較a,b值大小，

************* 詳情查看W3C

【document.body】
一、若是在用 document.body.appendChild(); 生成的元素會插在<script></script>的後邊

(緣由是瀏覽器解析的時候會把<script></script>標籤放到body內)

【innerHTML和value】
一、獲取文本，<input>和<textarea> 必須用.value

【offsetLeft的位置】
一、offsetLeft是相對於有定位(不管相對定位仍是絕對定位)的父盒子(offsetParent) 沒有就找body去找位置

【json的一些注意事項】
一、json是無序的，不能用下標去表示
二、訪問裏面的值，能夠用點語法，也能夠用[]
若是用json['key'] 那麼json裏面的鍵值對的鍵能夠用引號也能夠不用引號都能獲取

若是用json.key 怎麼取值都能獲取,但不能寫成json.'key';

三、反正想着獲取的key值是不是字符串就能夠選擇相對應的方法

【抽取工具類的緣由】（面試）
一、提升代碼擴展性，能夠舉 12.7最後一個例子 json----myfn的例子去解釋（是一個由獲取id tagname 到 for循環的抽取例子）

這個封裝的each方法，只是做了聲明和調用，因此賦值在調用each的時候才真正完成一個函數的調用

【右鍵事件】
一、document.oncontextmenu = function(e){} document是最大的事件源

e是事件源兼容ie的方法 var e = e || event;

二、return false;能清空默認右鍵事件而且不影響自定義事件

【e.currentTarget】
一、用來獲取當前的事件源是誰相似於this

【for循環的另外一種寫法】（思想一致）（遍歷最裏層盒子到頁面邊的距離）
一、   var box2 = document.getElementsByTagName('div')[2];
   var sum = 0;
   for( var i = box2; i.offsetParent; i = i.offsetParent){
    sum += i.offsetLeft + i.offsetParent.clientLeft;
    }
    console.log(sum);

【offset和client前綴】
一、offsetWidth,offsetHeight 是 content + padding + border 的距離

************************ document.body.offsetHeight 獲取標籤高度

offsetLeft,offsetTop 是到最近的有定位的父級的距離（不包含該父級的邊框）

二、clientWidth,clientHeight 是 content + padding 的距離

********************* document.body.clientHeight 獲取頁面視口高度（與上面不同）

clientLeft,clientTop 是該元素border的厚度

三、parentNode和offsetParent parentNode是找父盒子（最深找到HTML標籤） offsetParent是找有定位的父盒子（最深只找到body標籤）

【獲取屏幕分辨率（就是顯示屏的）】
一、window.screen.width / window.screen.height

【閉包的原理】
一、閉包的做用:延長局部變量的生命週期（同時，弊端就會大量佔用內存）

二、需求1:想要在函數外面（另一個函數中）訪問某一個函數內部的局部變量

【for循環內部的一些原理】
一、在for循環遍歷按鈕時，若是要在按鈕輸出變量i，會獲得最後的i值，這是由於按鈕、定時器等都是延時操做，只要有延時操做最終輸出的變量都是i值，
由於在按鈕點擊或者觸發定時器的時候外層的for循環已經完成。（基本我接觸到的裏面任何函數操做都是延時操做,除了閉包)

   eg:   var div = document.getElementsByTagName('div');
       for( var i = 0; i < div.length; ++i){
       (function(a){
       div[i].onmouseover = function(){
       console.log(a);
        }
       })(i)
       }

******************這裏閉包裏面的div[i] 爲何能獲取i的值，就是由於外面的閉包不是延時操做，因此能夠遍歷全部的div;

【btn.onclick = function(){}】
一、爲何這裏的匿名函數funtion(){} 不能傳入普通參數進行操做，是由於這裏的參數是表明前面btn的onclick事件源，
   btn.onclick = function(a){
   console.log(a); //返回ClickEvent{} （表明事件源）
   }

btn.onclick 等於號後面是一個函數體，要有click出發纔會執行，全部不該該有小括號當即調用，因此也不存在有普通參數傳遞的緣由，但事件參數a會一直存在

【字符操做】
一、（獲取數字） indexOf('string') 括號裏放獲取位置的字符從左向右順序，沒有該字符就返回-1；
else:(lastIndexOF('strinig')) 從右向左找，但返回的數字也是從左向右

二、（獲取字符） charAt()       括號裏放對應字符的位置去獲取相應字符
三、       charCodeAt()       去對應字符的Unicode編碼普通編碼‘0-127編號’ 中文的編碼是大於127 並且中文佔2個字符的位置
                   **********Unicode和askcII

【ClientY和PageY（不兼容IE）】
一、e.ClientY 只能獲取視覺上的頁面頂部
二、e.PageY 獲取頁面最頂部，不論是否有滾動條

【for裏面定義的變量是全局變量】
一、for裏面定義的變量是全局變量

二、var a = 1;
var a = 2; //第二個var被自動忽略 console.log(a); //2 ********************************JS容錯率很高，當檢測到第一個var a的時候會向內存開闢一個空間，後邊的重複聲明a都會自動忽略var 這是引擎處理程序問題，要了解要本身百度【透明度兼容】一、opacity: 0.4; W3C瀏覽器二、filter: alpha(opacity:40); 兼容IE