JavaScript小結

JavaScript小結

最近時間有餘，小結一下當前我所學到的，所用到的，所理解的JavaScript，若有錯誤，請留言指正，萬分感激！

1、什麼是JavaScript？

首先JavaScript就是咱們常說的js，能夠大體分爲兩類，一類是遵循ECMA 262標準的js基礎語法，另外一類則是遵照W3C標準的操做DOM和BOM的API。

js是一種弱類型的，普遍應用於客戶端的腳本語言，與java這種編譯型語言不一樣，js是解釋型語言，這一點和python同樣，在代碼執行前不會預先編譯成字節碼文件，而是經過解釋器（瀏覽器內置的js引擎）邊解釋邊執行，可是在瀏覽器執行一段 script 以前，會將在函數做用域內的全部變量聲明都提高到頂部，而且值爲undefined（函數聲明除外，整個函數體將都提高到頂部）。

2、遵循ECMA 262 標準的JavaScript

1. 數據類型

　　4種基本數據類型： number，string，undefined,boolean,以及複雜的object類型和function類型,以下：

typeof(1) // number
typeof('') // string
typeof(undefined) //undefined
typeof(true) // boolean
typeof(null) // object
typeof({}) // object
typeof([]) // object
typeof(console.log) //function

　　2.數據類型轉換

　　js中數據類型轉換分爲強制類型轉換和隱式類型轉換（弱類型語言）。

　　1).強制轉換：

　　利用js提供的 parseInt（），parseFloat（）,Number()，String()，Boolean()函數進行數據類型轉換。前二者分別是對整形和浮點型進行轉換，對數據從前日後，將數字進行轉換，若是第一位就不是數字，返回NaN（number 類型的一種）。

        parseInt("123");//123

        parseInt("+123");//123

        parseInt("-123");//123

        parseInt("12.3元")//12

        parseInt("abc");//NaN

        parseInt([1,2])//1

        parseInt([1,2,4])//1

        parseInt("  ");//NaN        

　　該方法還能夠將其餘進制類型數據轉換成整形，取決去parseInt()的第二個參數，如：

 parseInt("AA",16);//170

 parseInt("10",2);//2

 parseInt("10",8);//8

 

　　 Number()就是將數據轉換成number類型，非number的返回NaN，Boolean（）將空，0，undefined，'' ,"" 轉換成false，其它則爲true，String（）將數據轉換成字符串。

Number("11.2元") // 11.2
Number("") // 0
Number("開發") //NaN

Boolean（0） //false
Boolean（undefined） //false
Boolean（''） //false

String (false) // "false"
String(Null) //" Null"

 

 　　2).隱式類型轉換：

　　JS中隱式類型轉換指數據類型和字符串之間的轉換，數字類型與字符串類型進行四則運算時，會進行隱式類型轉換，「+」時，會默認將數字類型進行String（），變成字符串，「-」，「%」，「/」，「*」時，會對字符串進行Number（）操做，變成數字類型，以下：

11 + "11" // "1111"
11 - "11"  // 0
11 * "0" // 0
11 % "11" // 1
11 / "11" // 1

 

　　3. "==" 和 "===" 的區別

　　"==" 判斷，若是類型相同，則進行 "===" 判斷，若是不一樣，則會進行一次類型準換，轉換成相同類型再比較。

　　"==="判斷，若是類型不一樣，直接false。

　　通常狀況下，js中都用"==="，只有以下圖作判斷時，能夠用"=="：

var a
if( a == null ) {
   // 這裏a表示能夠是null 或者是 undefined
   // a === null || a === undefined    
}

 　　4. 數組

　　　建立數組的三種方式：

let arr1 = [1,2,3] //方式一
let arr2 = new Array(1,2,3) // 方式二
let arr3 = new Array(3) // 方式三
arr3[0] = 1
arr3[1] = 2
arr3[2] = 3
console.log(arr1,arr2,arr3)

 

　　　遍歷數組，for，while，do...while,for in,forEach 等，除forEach外，其餘方式能夠經過 break，continue，return（必須在函數中使用，不然報沒法捕獲異常: Illegal return statement):

var arr = [1,3,7,6,4,5]
for (let i = 0,len = arr.length; i < len; i++) {
    console.log(arr[i])  // 1 3 7 6 4 5
}
for (let i = arr.length - 1; i >= 0; i--) {
    console.log(arr[i]) // 5 4 6 3 4 1
}
for(let index in arr){
    console.log(index,arr[index]) // 1 3 7 6 4 5
}


arr.forEach(item =>{
    console.log(item) // 1 3 7 6 4 5
})

　　數組中經常使用的方法：

arr = [1,5,7,4,6]
// map :遍歷數組，將數組中每一元素做爲參數提供給函數調用，結果做爲一個新的數組返回
let mapArr = arr.map(item => item*2)
console.log(mapArr)

// forEach: 遍歷數組，將數組中的每個元素執行以提供的函數，沒有返回值，直接改變原數組，注意和map的區別
arr.forEach(item => item*2)
console.log(arr)

// filter: 過濾數組中的元素，將符合條件的結果，造成一個新的數組並返回。
let filterArr = arr.filter(item => item > 5)
console.log(filterArr)

// sort: 排序
let sortArr = arr.sort((a,b) => a-b)
console.log(sortArr)

// find: 查找符合條件的第一個元素，並返回
let findEle = arr.find(item => item > 4)
console.log(findEle)

// some:判斷數組元素至少有一個符合條件，返回true
let someArr = arr.some(item => item > 6)
console.log(someArr) // true

//every: 判斷數組中的元素是否所有符合條件
let everyArr = arr.every(item => item > 2)
console.log(everyArr) //false

// concat：合併數組
arr1 = [1]
arr.concat(arr1) // [1,5,7,4,6,1]

// push :數組末尾添加元素
// pop（）: 刪除數組最後一位元素
// shift：刪除第一個元素
// unshift： 像數組首部添加一個或多個元素
// isArray（）：判斷對象是不是數組
// toString: 轉換成字符串
// join（）：轉換成字符串（可設置元素之間的間隔）
// splice（開始的位置，刪除的個數，元素）:數組切割
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.splice(2, 0 'haha')
let arr2 = arr.splice(2, 3)
let arr1 = arr.splice(2, 1 'haha')
console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一個元素
console.log(arr2) //[1, 2] 刪除三個元素
console.log(arr3) //[1, 2, 'haha', 4, 5] 替換一個元素

　　5.對象

　　對象的建立方式：

// 建立對象

var obj1 = {}
function Fn(){
    this.name = '小明'
} 
var obj2 = new Fn();
var obj3= Object.create({});
console.log(obj1,obj2,obj3) 

　　遍歷對象有兩種方式：for / in ，Object.keys()

for (let i in obj){          // 同時會把原型鏈上可枚舉的屬性遍歷
    console.log(i)
    console.log(obj[i])
}
console.log(Object.keys(obj))// 輸出對象屬性名

　　  6.原型鏈

　　　　咱們在建立一個對象的時候，js便給這個對象建立了一個原型對象，能夠經過 對象名.__proto__ 方式訪問該對象的原型對象，咱們稱這個爲對象的隱式原型對象。

　　　　js中全部的函數均可以做爲構造函數，全部的函數都有一個 ‘prototype’屬性，咱們稱之爲顯式原型對象。

　　　　一個對象的隱式原型對象 與構建這個對象的函數的原型對象相等。

　　　　咱們在查找對象的屬性時候，若是對象的原生屬性不包含，會繼續在該對象的原型鏈上去查找。

function Fn ( name ){
    this.name = name
}
var o1 = new Fn('zhuangsan')
o1.__proto__ === Fn.prototype //true
Fn.prototype.html = 'html'
console.log(o1.html) // 'html'

var o2 = new Object()
o2.__proto__ === Object.prototype // true

Object.prototype.constructor === Object  // true

 　　　　經過原型鏈，咱們能夠在對象原型鏈上封裝一些方法來操做DOM

 

　　　7.閉包

　　　　當前做用域沒有聲明的變量，作爲自由變量，會向聲明它的做用域查找；當行成閉包時，函數即便執行結束，也不會當即銷燬。

　　　　閉包的兩種使用場景： 1）函數做爲返回值  2）函數做爲參數被引用

// 1.案例 當兩次輸入同一值時返回false

function fn (){
  let _list = []
  return function (n) {
    if(_list.indexOf(n) < 0){ 
       _list.push(n)
       return true;
    }else{
       return false;
    }
   }       
}
var f = fn()
f(5)  // true 
f(5)  // false

 在上面代碼中，_list聲明在fn函數中，但在它的返回函數中調用了該變量，在執行 f 時，f 中未定義_list,會向定義它的父級做用域查找，而且由於造成閉包，執行結束後，函數棧不會被銷燬。

3、遵循W3C標準的 web-api

　　1）操做DOM

 1 // 獲取DOM 節點
 2 var id = document.getElementById('ID')
 3 var classs = document.getElementsByClassName('className')
 4 var tags = document.getElementsByTagName('TagName')
 5 var selectors = document.querySelectorAll('p') // 獲取頁面全部 p 標籤
 6 // 建立 DOM 節點
 7 var dom = document.createElement('NodeName')
 8 doc.appendChild(dom)
 9 doc.append(dom)
10 
11 // 改變DOM屬性
12 document.getElementBy('id').attr = ...
13 
14 // js 事件 addEventListener(type,function,boolean)
15 // mouseover 鼠標移上
16 // mouseout 鼠標移出
17 // click 點擊
18 // mousedown 鼠標點下
19 // mouseup 鼠標彈起 
　 

　　2) 操做BOM

 1     // Navigator
 2     navigator.UserAgent // 瀏覽器信息
 3 
 4     //loaction
 5     loaction.href // http://www.baidu.com
 6     loaction.host // 域名 ： www.baidu.com
 7     loaction.port // 端口 （http 默認 80，https默認 443）
 8     loaction.search // ?後的內容
 9     loaction.hash // #後的內容
10     loaction.pathname 
11 
12     // location
13     location.forward（） // 前進
14     location.back（）// 後退