摘要:因為同一時間,只能處理一個異步,這又牽扯到單線程問題了。然后控制臺默默打印了個目前前端,異步主要為前后端交互以及定時器,僅僅說前端,如果說的話,還有文件讀取等其他的方面會異步。
此篇文章完全按照我個人理解去寫。
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 的意思就是,加入 c = arr.push(1)。 c的值為 1 pop: 用法 arr.pop()// 從尾部提取數據,arr會重新變成[0], 并且返回1 unshifit: 用法 arr.unshift(1)// 往頭部新增數據,arr變成[1, 0],并返回 數組長度 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"] //3
Object.keys(obj) // age, sex
Object.values(obj) // 3, 0
其他的方法等我哪天心血來潮寫非基礎知識點的時候再寫吧
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105732.html
摘要:模塊化是隨著前端技術的發展,前端代碼爆炸式增長后,工程化所采取的必然措施。目前模塊化的思想分為和。特別指出,事件不等同于異步,回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化 目前 Vue.js 的火爆不亞于當初的 React,本人對寫代碼有潔癖,代碼也是藝術。此篇是準備篇,工欲善其事,必先利其器。我們先在代...
摘要:手把手教你做個人火的時候,隨便一個都能賺的盆滿缽滿,但是,個人沒有服務端,沒有美工,似乎就不能開發了,真的是這樣的嗎秘密花園經典的中文手冊。涵蓋前端知識體系知識結構圖書推薦以及入門視頻教程,全的簡直不要不要的了。 JavaScript 實現點擊按鈕復制指定區域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實現點擊按鈕復制區域文本的功能,不需要依賴 flash。...
摘要:做這一領域的工作,有很多網站能夠起到輔助性的作用。再加上爬蟲相對于其他熱門方向來說,更容易學。也促使更多人會優先選擇學習爬蟲。能夠代替手工完成手工無法完成的測試任務,并且可以記錄相關數據及報告。 ...
摘要:插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins譯者:jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....
閱讀 2814·2021-11-18 10:02
閱讀 3673·2021-11-15 17:59
閱讀 2306·2021-09-06 15:00
閱讀 3343·2019-08-29 16:58
閱讀 1056·2019-08-26 10:34
閱讀 1581·2019-08-26 10:15
閱讀 1286·2019-08-26 10:11
閱讀 2713·2019-08-23 18:33