js基礎經常使用知識點由淺入深整理篇

此篇文章徹底按照我我的理解去寫。

1.何爲JS

先說說js幹啥的。不負責點說，js就是操做瀏覽器的。

有人可能說nodeJS，nodeJS嚴格意義上只能說是用的ES,由於他沒有dom ，也沒有bom。

簡單點說，js = EcmaScript + dom + bom

那麼就引伸到EcmaScript， dom， bom；
EcmaScript 簡稱 es， 是一種腳本語言，也就是javaScript 語法的依據，或者說標準。jS是在es的基礎上作了一些擴展。
而 常說的es6 就是 第六版 EcmaScript，正式發行與2015年，因此es6 每每也稱爲 es2015。

dom 通常就是節點，而bom 就是瀏覽器對象。
節點很好理解，就是div之流，而 瀏覽器對象也很好理解，就是url什麼的。

而後說說js單線程的事情，線程和進程這個你們自行查詢，網上有很簡潔清晰的一些描述，我高考語文不及格，不如別人說的清楚。只說單線程的運行模式。

2.單線程

單線程是從上至下運行的。目前我所知的惟一能擺脫這個順序的就是異步。

3.異步

異步的緣由若是不專業點說，就是由於瀏覽器只是js的宿主，它並非單線程的。

我曾經傻乎乎地想利用異步來實現多線程的效果，果不其然呀，我想太多了。

由於同一時間，js只能處理一個異步，這又牽扯到單線程問題了。

異步至關於只是瀏覽器借了塊地兒給js，最後運行還得跑到js裏面來。
說說我當時跑的多異步代碼呀。

let i = 0;
for(let n = 0; n < 10; n ++) {
    setTimeout(function(){while(i < 10000) {
    console.log('this is ' + n +' async');
    i ++;
    }})
}

而後控制檯默默打印了10000個 this is 0 async

目前前端，異步主要爲 先後端交互 以及 定時器，僅僅說前端，若是說nodeJS的話，還有文件讀取等其餘的方面會異步。

回調函數

回調函數就是寫在異步方法裏面的function，其原理是利用了js的單線程，異步完成-》異步處理-》處理回調函數，因此通常回調函數都是寫在異步的最後。

好比封裝一個$.ajax

function requestApi(url, method, data, cb) {
     $.ajax({
         url: url,
         type: method,
         data: data,
         success: function(res) {
             if(res.code === 1) {
                 cb(res.data);
             }
         }
     })    
 }

 而後就能夠很瀟灑地寫一個,request('apiUrl', 'get', {}, function(data){console.log(data)});

ajax 看着嫌麻煩的話，看定時器版本的

function callback(data){ console.log(data)};

setTimeout(function(){var i = 3; callback(i)}, 1000);

扯一句： nodeJS的高併發就是用異步來實現的。

而後說一下JS的基本用法。

JS的分基本數據類型 Number,String,Boolean,Undefined,Null,Symbol和 複雜數據類型 Object

因此不要再說JS中萬物皆對象了，那個就是欺騙新手的。
有人可能要說 a = '123';a.length = 3; a 明明也是一個對象，由於有length 這個屬性。
兩年前我也是這麼認爲的，實則否則。
a 就是一個 字符串 '123' ，之因此能夠寫a.length 是由於弱類型語言對玩家們要求比較寬鬆，當你寫a.length 的時候，會馬上給a包裝一個臨時對象new String(a)，而後去調用這個臨時對象的length,而後調用完成再拋掉。

Number不用講了，就是數字，幼兒園就開始學的。
String 也不用講了，就是字符，幼兒園估計也開始學了。
Boolean 是布爾值，除了true就是false，能夠看作開關。
Undefined 是一個特殊的類型，表示沒有被賦值。這個要區別於 not defined，undefined表示，能夠有，沒賦值， not defined， 表示 沒有被定義，簡稱未定義。
Null表示空對象，是一個比較牛逼的對象。
symbol通俗點講吧。就是...symbol(1) 不等於 symbol(1),這話意思就是，每個symbol都是惟一的，即使裏面傳值同樣。
Object 對象，或稱引用類型，區別於基礎對象的是在於內存方面，找個時間寫js非基礎語言分析的時候，再詳細說，若是須要了解，請自行查詢，這個涉及到一些指針，內存方面的問題，雖然本人理解得很到位，可是高考語文不及格，解釋起來比較費勁，通常狀況下我都去畫畫解釋。

經常使用的對象方法（String 對象，Array 對象， 還有字典）；
String對象 區別於 string ，string 是字符串，string對象是Object，具體解釋能夠看上面的

這裏假設 a  = '123456', b = '1|2|3|4'
charAt:用法 a.charAt(1) // 2 至關於 a[1]
split :用法 b.split('') //[1,2,3,4] 表示拆分，split 的括號裏面寫拆分依據
replace: 用法 b.replace(/\|/g, '')// 1234 表示替換，通常狀況下兩個參數，前面的是一個正則，表示須要篩選的內容，後面的是替換內容或者處理方法，這個方法是string對象裏面最牛逼的方法，牛逼到正則玩得溜就能夠批處理不少東西，正則的話，我有寫過一個簡版教程，勉強能看一下。
indexOf:用法 a.indexOf(3)// 2 尋找知足條件的第一個字符串的位置
lastIndexOf:用法 和a.lastIndexOf(3)//2 意思和indexOf相反，是最後一個的位置

注意： string 全部的方法均不會改變原string對象，也就是說，全部的提取，都須要一個新的變量去接受，好比 xx = a.chartAt(1);

Array 對象 簡稱數組 實質是也是一個對象，索引爲0 ~ n
開發中用的最多的對象，經常使用方法
假設 arr = [0]; arrs = [1,2,3,4,5]//語法糖，空數組

push：用法 arr.push(1)// 往尾部新增數據，arr 會變成[0, 1] 而且返回1 ，返回1 的意思就是，加入 c = arr.push(1)。 c的值爲 1
pop: 用法 arr.pop()// 從尾部提取數據，arr會從新變成[0], 而且返回1
unshifit: 用法 arr.unshift(1)// 往頭部新增數據，arr變成[1, 0],並返回 1
shift： 用法 arr.shift(1)// 從頭部提取數據，arr 變成 [0], 並返回1
join： 用法 arrs.join('|')// 拆分並以|區別 ，返回 1|2|3|4|5
concat: 用法 arr.concat(arrs)// 合併，合併內容能夠是各類類型數據，這裏返回 [0,1,2,3,4,5]
find:用法 arrs.find( data => data > 3) // 返回4 表示第一個知足條件的
fingIndex: 用法 arr.findIndex(data => data > 3) 返回 3 表示第一個知足條件的數字的索引
Index 和 lastIndex 和 string 用法相同
some: 用法 arrs.some(data => data > 3) // 返回true 或者 false ，表示有沒有知足條件的，若是有的話，返回true，

這個some和 find 操做方面比較騷氣，通常配合其餘操做，之因此說操做，是由於他一旦判斷到有，就會當即中止後面的遍歷，若是這裏寫
arrs.some(data => {console.log(data);return data > 3}; //1 2 3 4 不會去打印5,能夠用於break 操做
forEach: 用法 arrs.forEach(data => console.log(data));//1 2 3 4 5 相似於批處理,好像不能break
，無返回值
map: 用法和forEach 同樣，可是會有返回值，把批處理的方法每一次結果封裝成數組返回，若是處理中不寫return ,則返回一堆[undefined, undefined]
reduce: 這個方法比較複雜，一共兩個參數，前面是方法，後面是初始值（能夠不寫），前面的方法須要倆個參數。簡單點說呀，就是從默認值或者從數組第一個值（取決於有沒有默認值）每次處理兩個值，這兩個值呢，
第一個是上一次處理完成返回的值，第二個是新值。
arrs.reduce(function(a, b) {console.log(a, b);return a + b}, 10);
打印就是 // 10 1 , 11 2 , 13 3, 16 4 ,20 5  最後返回一個25

arr 的 pop ,shift,push ,unshift方法會改變原數組， 其餘不改變原來數組的方法通常還有第三個參數，至關於bind ，用來改變this指向

Object ，或者說JSON， 或者說字典我實在是編不下去了，形式就是key: value 的格式主要用於完成數據結構與算法。假設 obj = {age: 3};經常使用方法通常都比較牛逼，這裏只要會 obj.sex = 0;obj['age'] //3Object.keys(obj) // age, sexObject.values(obj) // 3, 0其餘的方法等我哪天心血來潮寫非基礎知識點的時候再寫吧