JS基礎回顧1

JS介紹

• window:系統定義的，JavaScript最大的對象，表明瀏覽器的一個窗口
• 前端工做核心：渲染 用戶體驗 性能優化
• JavaScript是一種輕量級、解釋型的Web開發語言
  • 輕量級：比較其餘的企業級(java,c++,c#)，比較簡單不能操做系統文件。(Node.js)
  • 解釋型：無需服務器環境，直接瀏覽器解析。
• 核心組成部分
  • ECMAscript:歐洲計算機協會組織提供語法和基本對象。
  • DOM：文檔標籤結構

  • BOM：瀏覽器，瀏覽器打開的一個窗口。

    變量

• 所謂變量，就是特定時間用於保存特定值的一個名字而已，而且初始化後能夠再次改變的量。
• 變量的命名規則：字母，數字，下劃線，$符號組成，數字不能開頭。
• 變量的特色
  • 值能夠改變的
  • 同時定義多個變量
  • 寫入內存，文檔中任意的使用
  • 前置訪問不報錯，返回undefined

  • 鬆散類型：js定義變量無需考慮變量的數據類型。

    數據類型

1. js數據類型(基本類型、複雜類型(引用類型-object))

• number:數字
• string:字符串,放在引號裏面的內容都是字符串,須要先後添加引號(單引號或者雙引號)
• boolean:布爾類型(true真/false假)
• undefined:未初始化，值不存在，屬性不存在......(js特殊的數據類型)。
• null:空對象(js特殊的數據類型)。
• 對象類型-object(引用類型)

1. 檢查數據類型--typeof()方法--括號能夠省略

// console.log(typeof(num));//number,輸出的number這個值是個字符串。
// console.log(typeof str);//string

運算符

• +：字符串拼接，只要加號兩邊有一邊是字符串，加號就是拼接的做用，若同爲數字類型則運算
• 賦值運算符 = 將等式右邊的結果賦值給左邊

var num = 10;
        num = num + 20;//將上面的num+10再賦值給num;
        num += 20;//複合的賦值運算符，和上面意義是同樣，寫法更優,更合理。
        num -= 10;//num=num-10;  40
        num *= 1; //num=num*1;   40
        num /= 8; //num=num/8;   5
        num %= 2; //num=num%2;   5%2   (求餘數、取模)

• 隱式轉換：+ - * / %都具備隱式轉換(隱式轉換：看不到的，系統內部自動完成)
  • 將字符串或者布爾值轉換成數字

  // console.log(false + true);//1
  // console.log(4 - '5');//-1

  關係運算符

1. 比較運算符結果：布爾值。
2. 數字和字符串進行比較:具備隱式轉換
3. 字符串的比較遵循unicode編碼。
4. == ===

• ==:具備隱式轉換，比較的是值是否相等。(比較的核心應該是數值)
• ===:比較的是值和類型。

1. js下面的兩個特殊的類型：null和undefined

// console.log(null==undefined);//true  系統約定的。
    // console.log(null==null);//true  系統約定的。
    // console.log(undefined==undefined);//true  系統約定的。
    //其餘的任何類型的值都沒法和null或者undefined相等。

邏輯運算符

• 邏輯運算符的結果不必定是布爾值，運算時轉布爾值進行的。

1. && and --和

• 將對應得操做數轉換成布爾值，
• 若是第一個操做數爲真，繼續執行第二個操做數，結果必定是第二個操做數。
• 若是第一個操做數爲假，結果就是第一個操做數，第二個操做數跳過，稱之爲程序短路。

1. || or --或

• 若是第一個操做數爲真，第二個操做數跳過，結果必定是第一個操做數。
• 若是第一個操做數爲假，結果必定是第二個操做數的值。

1. ! not --邏輯非

• 邏輯非的結果必定是布爾值

  一元運算符

1. 只有一個操做數。 ++加1 --減1

• num++:++在操做數的後面，先讓操做數參與運算，而後在自加1

• ++num:++在操做數的前面，先讓操做數自加1，而後再參與運算

  NaN的概念及應用

• NaN:當數學計算沒法獲得數字結果，該變量的值爲NaN

• isNaN():該方法判斷num變量的值是不是NaN（不是一個數字）

  函數的返回值

• 函數都有一條return語句，return語句致使函數中止執行，並返回它的表達式的值給調用者
• 若是return語句沒有相關的表達式，則函數返回undefined
• 函數的好處
  • 函數解決代碼冗餘，一旦代碼出現冗餘，封裝函數。
  • 封裝--將多行代碼放到函數體內，造成功能。
  • 重用性--反覆使用

  • 可擴展性--利用參數將整個函數封裝的功能變的更靈活。

    預編譯

• 第一步：JS的預編譯:代碼的執行前要作的事情,或者說代碼進入瀏覽器預覽以前系統隱式操做的。(隱式的)。

1. 找var關鍵字,找到了var關鍵字提早賦值undefined給這個變量. 找function關鍵字,提早將整個函數體給這個函數名
2. 若是變量名和函數名重複,函數名優先
3. 函數的參數相似於變量，函數內部一樣作預解析，支持預解析
4. if語句和for語句裏面的變量和函數作預解析提早賦值undefined

• 第二步：JS代碼的執行（在編譯後的基礎上開始從上到下執行腳本,遇到錯誤時中斷,函數聲明跳過）

  遞歸函數

• 遞歸函數是在一個函數經過名字調用自身狀況下構成的

• 遞歸函數就函數內部調用函數自己。

  事件

onclick　　點擊事件
onload　　用戶進入某個頁面的時候觸發（onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。）
onunload　　用戶離開某個頁面的時候觸發（onload 和 onunload 事件可用於處理 cookie。）
onchange　　內容變化事件（常結合對輸入字段的驗證來使用）
onmouseover　　鼠標移動到HTML元素上方的事件
onmouseout　　鼠標移出HTML元素上方的事件
onmousedown　　鼠標按下的時候觸發的事件
onmouseup　　鼠標彈起觸發的事件（onmousedown，onmouseup和onclick區別，onclick是鼠標完成點擊事件的時候觸發的事件）
onfocus　　元素獲取焦點事件
onblur　　元素失去焦點事件
onabort　　圖像的加載失敗
ondblclick　　雙擊事件
onerror　　當加載圖像和文檔時發生錯誤
onkeydown　　鍵盤按鍵被按下發生的事件
onkeyup　　鍵盤按鍵被鬆開發生的事件
onkeypress　　鍵盤按鍵按下並鬆開發生的事件
onmousemove　　鼠標移動
onresize　　窗口或者框架被從新調整大小
onselect　　文本被選中
onreset　　重置按鈕被點擊
onsubmit　　提交按鈕被點擊

數組

• 建立數組對象的兩種方式
  • 利用構造函數建立數組對象

  var arr=new Array(123,'hello',function(){alert('我是函數')})

  • 利用字面量建立數組對象(簡寫風格)

  -var arr1=[123,'hello',function(){alert('我是函數')}]

• 區別：當數組只有一項值，並且這個值是數字，在構造函數建立方式裏面這個數字表明數組的長度。可是在字面量建立方式中依然代碼數組的一項值
• Array.isArray()：肯定括號中的某個值究竟是不是數組

// var names = ['zhangsan', 'lisi', 'wangwu'];
 // var n = null;
 // console.log(typeof n);//object  空對象
 // console.log(typeof names);//object  數組對象
 // console.log(Array.isArray(names));//true
 // console.log(Array.isArray(n));//false

數組的方法

1. push() 能夠接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改後數組的長度。
2. pop() 從數組末尾移除最後一項，減小數組的length值，而後返回移除的項
3. unshift()方法可以在數組前面添加任意個項並返回新數組的長度
4. shift() 方法可以移除數組中的第一個項並返回該項，同時將數組長度減 1
5. reverse() 方法會反轉數組項的順序
6. sort() 方法按字母表升序排列數組項
7. concat() 方法能夠基於當前數組中的全部項建立一個新數組，參數能夠是數組項或者數組--不會改變原數組
8. slice() 方法它可以基於當前數組中的一或多個項建立一個新數組。能夠接受一或兩個參數，即要返回項的索引發始和結束位置，不包括結束位置--不會改變原數組
9. splice() 方法，對數組進行刪除、插入、替換，是最強大的數組方法，返回值是截取的數組項---改變原數組

//1.刪除,第一個參數開始的索引,第二個參數表明截取的長度
        // var arr=["a", "b", "c", "d", "e", "f", "g"];
        // console.log(arr.splice(2,3));//["c", "d", "e"]
        // console.log(arr);//["a", "b", "f", "g"]

    //2.插入,第一個參數開始的索引,第二個參數表明截取的長度,從第三個參數開始，表明插入的值。
        // var arr=["a", "b", "c", "d", "e", "f", "g"];
        // console.log(arr.splice(2,0,'hehe','xixi','haha'));//添加了三項
        // console.log(arr);//["a", "b", "hehe", "xixi", "haha", "c", "d", "e", "f", "g"]

    //3.替換
        // var arr=["a", "b", "c", "d", "e", "f", "g"];
        // console.log(arr.splice(2,3,'hehe','xixi','haha'));//[ "c", "d", "e"]
        // console.log(arr);//["a", "b", "hehe", "xixi", "haha", "f", "g"]

1. join()方法，將數組轉換成對應的字符串。參數就是鏈接符
2. indexOf()/lastIndexOf()返回要查找的項在數組中的索引位置，沒找到的狀況下返回-1（從前日後/從後往前）。

• 兩個參數：要查找的數組項和表示查找起點位置的索引(可選的)

1. has(arr,60)判斷數組中是否存在60這個元素，返回布爾類型
2. 迭代方法：5個

• 兩個參數：
  • 第一個參數：要在每一項上運行的函數。
    • 此函數會接收三個參數：數組項的值、該項在數組中的位置、數組對象自己。
  • 第二個參數：（可選的）運行該函數的做用域對象（影響 this 的值）。
• every()對數組中的每一項運行給定函數，若是該函數對每一項都返回 true ，則返回 true
• some()對數組中的每一項運行給定函數，若是該函數對任意一項返回 true ，則返回 true
• filter()對數組中的每一項運行給定函數，返回該函數結果爲 true 的項組成的數組
• map() 對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。返回就是數組，不考慮true或者false
• forEach() ：對數組中的每一項運行給定函數。這個方法沒有返回值--取代for

1. 歸併

• reduce() 方法從數組的第一項開始，逐個遍歷到最後
  • 第一個參數：函數

  • 第二個參數：迭代的初始值。(可選的)

    字符串的方法

1. charAt(num):返回對應字符串索引的內容
2. charCodeAt(num):返回對應的字符串索引的內容的unicode編碼
3. String.fromCharCode(unicode編碼);將參數中的unicode編碼返回成對應的字符串的內容，多個編碼用逗號分隔
4. trim() 建立一個字符串的副本，刪除前置及後綴的全部空格，而後返回結果
5. split——根據分隔符、將字符串拆分紅數組

console.log('abcde'.split('',4))

1. substring()：用來截取字符串的內容

• 沒有參數所有截取。至關於從第0位開始截取
• 一個參數表明截取從參數的位置日後的字符串
• 兩個參數表明截取兩個參數之間的字符串，包括第一個參數的位置
• 兩個參數的時候，當第二個參數小於第一個參數，自動交換位置
• 若是是負數，當作0來處理

1. substr(start, length); 用來截取字符串的內容

• start：開始的索引，若是爲負數，從後往前進行數，包括開始的索引
• length：截取的長度

1. toUpperCase()轉換成大寫
2. toLowerCase()轉換成小寫

嚴格模式"use strict"

• 將"use strict"放在腳本文件的第一行，則整個腳本都將以"嚴格模式"運行
• 將"use strict"放在函數體的第一行，則整個函數以"嚴格模式"運行。
• 語法和行爲改變
  1. 變量顯式聲明：必定加var
  2. 禁止使用with語句(性能)
  3. 禁止this關鍵字指向全局對象
  4. 函數不能有重名的參數
  5. 禁止八進制表示法

  6. 不容許對arguments賦值,禁止使用arguments.callee

     日期對象

//var date=new Date();//Date:日期類 date：日期對象。
    //console.log(date);
    //Fri Sep 06 2019 14:57:34 GMT+0800 (中國標準時間)
    //console.log(date.toLocaleString());
    //2019/9/6 下午2:59:43

// var d=new Date();
        // console.log(d.getYear());//119   1900-2019的年份差。
        // console.log(d.getFullYear());//2019
        // console.log(d.getMonth()+1);//9
        // console.log(d.getDate());//6
        // console.log(d.getDay());//5  星期五
        // console.log(d.getHours()+':'+d.getMinutes()+':'+d.getSeconds());

定時器

1. setInterval(函數名稱，時間)；間隔定時器(反覆調用)
2. clearInterval( 定時器的返回值 ); 中止定時器
3. setTimeout(函數名稱，時間); 延時定時器，執行一次
4. clearTimeout( 定時器的返回值 ); 中止定時器

• 注意：定時器的第一個參數是函數，可是函數是由定時器來觸發的，不是自動觸發

// var num = 1;
        // var timer = window.setInterval(function () {
        //     console.log('我是定時器裏面的內容' + num);
        //     num++;
        // }, 1000);
        //每一個1s鍾執行一次內部的函數。

        // document.onclick=function(){
        //     clearInterval(timer);//timer:定時器的返回值
        // }

BOM對象

• BOM:瀏覽器的對象模型---BOM的核心就是window
• window:瀏覽器打開的一個頁面(js裏面最大的對象)
• BOM提供了不少對象，用於訪問瀏覽器的功能，這些功能與任何網頁內容無關
• window下面有不少的子對象
  • location對象:url地址欄
    • href屬性：獲取地址欄裏面的全部的信息.(讀寫的能力)
    • search屬性：獲取地址欄後面的信息，問號後面的數據，包括問號
    • hash:獲取哈希值--實現路由(單頁面應用)的核心的原理：經過hash的改變進行操做的
    • reload():刷新頁面
    • reload(true):緩存刷新
  • history：歷史記錄
    • history.go() 函數 -- 前進或後退指定的頁面數（負數後退，正數前進）
    • history.back() 函數 -- 後退一頁
    • history.forward() 函數 -- 前進一頁
    • history.length 屬性 -- history對象中緩存了多少個URL
  • navigator對象--瀏覽器版本信息等

//console.log(navigator.userAgent);
    //Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36
    //Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR)
    //Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

• 可視區寬高：clientWidth/clientHeight

• 滾動條距離：scrollTop/scrollLeft

  DOM對象

1. 獲取元素

• getElementById()： 獲取特定 ID 元素的節點--最優
• getElementsByTagName()： 獲取相同元素的節點列表，返回類數組，使用[0]來獲取(就算是一個也是類數組)
• getElementsByClassName()： 獲取相同類名的節點列表（IE8及如下不支持），返回類數組
• 查詢選擇--獲取元素的方式和css獲取元素同樣的
  • querySelector()： 經過選擇器獲取元素，若是獲取多個只返回第一個
  • querySelectorAll()： 經過選擇器獲取元素，可同時獲取多個元素，類數組

1. 元素的增刪改查

• document.createElement(元素節點的名稱)) 建立一個元素節點,元素對象存在的
• 父節點.appendChild(元素節點) 把元素節點插入到父節點的內部最後的位置
• 父節點.insertBefore(新的元素節點,存在元素節點) 在父節點內,把新的元素節點插入到已經存在的元素切點的前面
• 父節點.removeChild(node) 刪除父節點內部的子節點
• obj.cloneNode() 克隆(複製)obj節點，能夠傳一個布爾值爲參數，若是參數爲true，連同obj子元素一塊兒克隆
• 父元素.replaceChild(新添加的節點 , 被替換的節點) 替換子節點
• innerHTML：讀寫元素節點裏的內容（包括元素）,從節點起始位置到終止位置的所有內容,包括內部的元素和格式
• outerHTML：讀寫元素節點裏的內容（包括元素）,除了包含innerHTML所有內容外, 還包含元素節點自己
• innerText：讀寫某個元素節點的文本內容,全部的文本內容

1. 高級選取（第一個子節點，最後一個子節點，上一個兄弟節點，下一個兄弟節點(包含空白和不包含空白等分紅8個屬性)）

• firstChild/firstElementChild
• lastChild/lastElementChild

1. 自定義屬性的操做

• getAttribute()/獲取
• setAttribute()/設置
• removeAttribute()/刪除

1. 讀取css屬性的值

• js提供了5個經常使用的屬性詞：5個屬性詞是隻讀的,不能賦值,沒有單位
  • offsetWidth/offsetHeight:獲取盒模型的尺寸。(width+padding+border)
  • offsetLeft/offsetTop:獲取元素的位置(元素在文檔中的位置，若是沒有定位，依然也可以獲取元素的位置)
  • offsetParent：獲取定位父級元素對象，若是沒有定位父級，就是body元素
• 獲取任意的css屬性值
  • getComputedStyle:獲取任意的css屬性值。//標準瀏覽器
  • currentStyle:獲取任意的css屬性值。//IE8及如下瀏覽器
• 利用style獲取css屬性值--獲取內聯css的屬性值
• cssText利用css文本的形式,接收的值就是css代碼

1. 文檔碎片在理論上能夠提升DOM操做的執行效率，將要追加的dom操做先放置在文檔碎片中，最後在追加給對應的元素

   event對象

• 在觸發DOM上的某個事件時，會產生一個事件對象event,這個對象包含着全部事件相關的信息
• 標準瀏覽器的事件對象是事件處理函數中的一個隱藏的（第一個）參數，能夠經過參數獲取事件對象
• 老版本的IE瀏覽器默認自帶event對象，無需再次聲明

1. button屬性:它是一個數字，表明鼠標按鍵

• 0表明鼠標按下了左鍵
• 1表明按下了滾輪
• 2表明按下了右鍵

1. which屬性：獲取鼠標和鍵盤的按鍵對應得Unicode編碼。(低版本瀏覽器不支持)

• 1表明鼠標按下了左鍵
• 2表明按下了滾輪
• 3表明按下了右鍵

1. clientX,clientY：鼠標相對於可視區的位置
2. pageX,pageY：鼠標相對於文檔的位置
3. offsetX,offsetY：鼠標相對於操做元素(鼠標點擊元素)到元素邊緣(左上)的位置
4. screenX，screenY：顯示屏的距離
5. keyCode和which 獲取鍵盤上按鍵對應的unicode編碼(which有兼容問題)

// var oBox=document.querySelector('.box');
// document.onkeydown=function(ev){
//     var ev = ev || window.event;
//     if(ev.keyCode===65){
//         oBox.style.left=oBox.offsetLeft-5+'px';
//     }else if(ev.keyCode===68){
//         oBox.style.left=oBox.offsetLeft+5+'px';
//     }else if(ev.keyCode===87){
//         oBox.style.top=oBox.offsetTop-5+'px';
//     }else if(ev.keyCode===83){
//         oBox.style.top=oBox.offsetTop+5+'px';
//     }
// }


//ev.keyCode===13 && ev.ctrlKey//組合鍵

事件流和事件冒泡

1. 事件流：事件流描述的是從頁面中接收事件的順序

• 網景：netscape 事件捕獲
• 微軟：microsoft 事件冒泡，事件由最具體的元素先接收，逐級向上傳播到最不具體元素，直到document
• 冒泡：具體-->最不具體的
• 捕獲：最不具體-->具體的

1. 事件冒泡

• 取消冒泡：讓當前操做的具體元素對象（冒泡元素）的事件不會冒泡到父級（外層）

if(ev.stopPropagation){
            ev.stopPropagation();
        }else{
            ev.cancelBubble=true;
            }

瀏覽器的默認行爲

• 常見的默認行爲：a的連接 鼠標右鍵 圖片
• 阻止瀏覽器的默認行爲
  • ev.preventDefault(); 標準瀏覽器阻止默認事件,DOM事件使用此方法取消默認事件
  • ev.returnValue = false; 非標準瀏覽器（IE8）阻止默認事件
  • return false; 退出執行, 全部觸發事件和動做都不會被執行. 能夠用來替代 preventDefault

//     var ev=ev||window.event;
    //     ev.returnValue=false;
    //     ev.preventDefault();
    //     return false