【javascript培訓第一天】語言基礎

前言

因為公司要進行前端團隊建設，這一培訓任務就落到了我手裡，有時候會望著後端幾個工作5年甚至10年的同事，心裡還是有點虛的，虛完事情還是要做的，所以首先需要先複習複習，後面再根據最近的部落格形成PPT吧，所以“本老師”來了。。。

這次培訓的內容由CSS、javascript、jquery組成，按道理說該先寫CSS的，但是我CSS很水已經是預設的標準了，所以還是先看看js吧，希望我js不這樣水

javascript基礎資料型別 (Elementary Data Type)

這次培訓對象還是會有新人，所以還是需要介紹基礎資料型別 (Elementary Data Type)的，話說我現在也不能完全說出來呢。。。

javascript資料類型分為兩種：原始類型與物件類型原始類型：數字、字串、布爾值、null、undefined其中null與undefined代表了各自特殊類型的唯一成員物件類型：所謂物件類型便是屬性的集合，每個屬性都是由索引值對組成普通的對象時無序索引值對，有序的索引值對便是我們的數組了還有一個特殊的對象便是函數函數是具有與他相關聯的可執行代碼的對象，通過調用函數運行可執行代碼並返回結果若是使用new操作符來建立一個對象我們便稱之為建構函式每個建構函式定義了一個類——由建構函式初始化對象組合的集合（可看做物件類型的子類型）
數組是類（Array）
函數式類（Function）
日期是類（Date）
正則式類（RegExp）
類與函數貫穿js始終

數字

javascript是不區分整數與浮點數的，所有數均用浮點數表示

Math

現在我們來認識一位與數字非常有關係的對象Math，這個傢伙可以幹很多事情呢！

Math.round(0.6) 四捨五入

Math.random() 產生一個大於0小於1的偽隨機數

運算溢出

當js運算溢出時不會報錯，會使用無窮大infinity與無窮小-infinity表示；

若是出現沒有意義的運算便會返回NaN，NaN的判斷無論如何都是false（他與自身也不相等），所以判斷他要使用isNaN()函數

parseInt與parseFloat

parseInt(string, radix) radix，表示轉換的基數，也就是我們常說的2進位、8進位、10進位、16進位等。範圍從2~36，但我們在JS中一般調用該方法時，基本都是以10為基數進行轉換的。 如果該參數小於 2 或者大於 36，則 parseInt() 將返回 NaN。

parseInt這個函數非常有用的，可以將一個字串返回為整數

<script type="text/javascript">    var a = parseInt('334dd');    var b = parseInt('3d34dd');    var c = parseInt('ss3d34dd');    s = '';</script>

字串

字串是由一組16位值組成的不可變有序序列，每個字元通常來源於Unicode字元集。

字串一旦第一便不會改變，我們使用函數操作他也只是返回了新的字串，下面介紹下與字串有關的函數

var s = 'hellow world';s.charAt(0);//hs.charAt(s.length - 1);//ds.substring(1, 4);ell第2到第四的字元s.slice(1, 4);//同上s.slice(-3);//rld，最後三個字元s.indexOf('l');//2首次出現l的位置s.lastIndexOf('l');//最後一次出現l的位置，10s.indexOf('l', 3);//3在在位置3以後首次出現l的位置s.split(', ');//使用", "分割將字串變為數組，非常有用的傢伙s.replace('h', 'H');//全文字替換，支援Regexs.toUpperCase();//轉換為大寫

布爾值

布爾值只有true與false兩個，此處略去200字。。。

null和undefined

null在js中式用來描述“空值”的，使用typeof null 會返回對象（object），也就是說null為特殊的對象，但是該對象只有他一個人；

undefined表示值的空缺，表示變數沒有被初始化，比如

var a，這種情況a便是undefined，若是我們定義一個對象，但他開始沒值便可設定其為null。

封裝對象

我們前面看到s為字串，卻可以執行很多函數，這簡直就是對象的行為嘛，原因是他確實變成對象了。。。

javascript通過new String(s)，將字串轉換為對象，所以s便擁有了方法，一旦函數操作結束建立的對象便會被銷毀

數字與bool值是一樣的封裝的。

類型轉換

javascript的類型非常靈活，類型的轉換有時候便會自動發生：

10 + ' sss' //=> 10 sss'7' * '4'/281 - 'd'//NaN1 - 'd' + 's'//NaNs(注意啦)

對象字面量

對象字面量真是js中的好東西，對象字面量提供了一種方便建立新對象值的標記法：

var obj = {'name': '葉小釵',age: '秘密',sayName: function () :alert(this.name);}};

做後端開發的同學對hashtable一定不陌生，對象字面量便是標準的索引值對。

我們可以通過new Object的方式建立對象，但是這裡還是推薦以上寫法。

我們通過.或者[]的方式訪問對象：

obj.nameobj['name']若是要判斷對象是否包含某個屬性，使用：obj.hasOwnProperty('age'

序列化對象（Json）

我們若是序列化對象字面量，他便會變成一個一般的字串，我們親切的稱呼他為json串！

json串是個神奇的傢伙，他可以將資料表中二維的資料轉化為一個字串，傳到前端後，他又會還原為二維，

所以我們資料表中某個普通的欄位，搞不好包含的就是一個二維對象！

數組

js中的數組無比的靈活！！！因為他可以隨意的裝東西，而且他的長度便會也是非常靈活的。

初始化

var arr = [];var arr = new Array();

length

數組的長度是個神奇的東東：

<script type="text/javascript">    [ ].length; //0    ['a', 1, function () { } ].length; //3    var arr = [1, 2, 3, 4, 5]; //5個元素    arr.length = 3; //arr = [1, 2, 3]    arr.length = 0; //arr = []    arr.length = 6; //相當於arr = new Array(6)</script>

動態添加數組項

var arr = [];arr[arr.length] = 1;...arr.push(1);...

數組遍曆這些便不說了。。。我們來看看數組的函數
join

該函數與字串的spilt對應，可以將一個數轉換為字串，很不錯的傢伙

var arr = [1, 2, 3];arr.join();//'1,2,3'arr.join(';');//'1;2;3'

reverse

用於翻轉數組

sort

這個傢伙我們一定要記住他，因為他很常用的：

<script type="text/javascript">    var arr = [1, 4, 562, 43, 4346, 433, 645];    arr.sort();    var ss = arr.join();    var s ='';</script>

我們當然會遇到更複雜的情況，比如我們要為年齡排序了，而我們數組也不是那麼單一的：

<script type="text/javascript">    var arr = [{ name: '葉小釵', age: 123 }, { name: '一頁書', age: 456 }, { name: '素還真', age: 222 }, {name: '素續緣', age: 14}];    arr.sort(function (a, b) {        return a.age - b.age;    });    var s ='';</script>

concat()

建立並返回一個新數組：

var a = [1, 2];a.concat(3, 4);//1,2,3,4a.concat([2], [3, 3]); //1,2,2,3,3a.concat(4, [5, [6, 7]]);//1,2,3,4,5,[6,7]

slice()

返回指定數組的片段：

var arr = [1, 2, 3, 4, 5];a.slice(0, 3);//1,2,3a.slice(3);//4,5a.slice(1, -1);//2,3,4a.slice(-3, -2);//3//負數便是相對於最後一個元素的位置

splice()

..................................

 

函數

函數式js的核心（其實函數是任何語言的核心）。這傢伙有很多故事，我們下一次再來討論他。 

變數與範圍變數聲明

js使用var 申明變數：

var a = 1;

var a = 1,

　　b = 2;

重複聲明 

重複聲明一個變數時無害的，若重複聲明且賦值的話，這個就和簡單的指派陳述式一樣了：

<script type="text/javascript">    var s;    var s = 'a';    var s = { 1: '' };    //以上語句相當於    var s;    s = 'a';    s = { 1: '' };</script>

變數範圍

範圍即程式原始碼中定義這個變數的地區。

在函數內的變數具有局部變數的特性，不會被外部變數訪問。

申明提前

javascript中沒有塊級範圍（{}），javascript擁有函數範圍，在函數中任何位置定義的變數都會是有意義的，一種有意思的事情便是我在後面定義的變數其實前面就可以用了：

<script type="text/javascript">    var a = 'outer';    (function () {        alert(a);//undefind        var a = 'inner';        alert(a);//inner    })();</script>

也許有朋友對此感到疑惑，其實他是這個意思了：

<script type="text/javascript">//    var a = 'outer';    (function () {        alert(a); //undefind        var a = 'inner';        alert(a); //inner        //代碼相當於        var a;        alert(a); //undefind        a = 'inner';        alert(a); //inner    })();</script>

所以，我們有些團隊在聲明變數時候都要求將變數全部聲明到函數頭部。

 

運算子||

或用於if條件判斷沒有什麼說的，但是我們在賦值運算中可能會有不同的用法：

function (a) {a = a || {};}//此處若是a不存在便初始化a為對象以免報錯

這個用法是非常有用的。

in運算子

in用於判斷一個屬性是否在對象中：

var obj = {x: 1, y: 2};'x' in obj;//true'z' in obj;//falsefor (var k in obj) {//遍曆對象}

instanceof運算子

該操作符用於判斷某個對象是否屬於某類：

var d = new Date();d instanceof Date; //trued instanceof Object;//trued instanceof Number;//false//有一次面試我因為不忘記了這傢伙導致那次面試非常被動，面試官直接認為我是菜鳥，實習崗位都不給。。。很受打擊

 

eval運算子

eval這個傢伙很強大！！！他相當於一個冬天js編譯器，可以將你的字串作為js執行，當然安全性效率會有一定問題。

eval('2+3');//5function a() {alert('aa');}eval('a();');

 

typeof運算子

typeof用於判斷一個對象的類型：

typeof undefined; //undefindtypeof null; //objecttypeof true; //booleantypeof 1; //或者NaN;numbertypeof 'sss'; //stringtypeof function () { }; //function

 

delete運算子

用於刪除對象的屬性，後面還是介紹這裡便不多說了。

結語

最近新租了個房子，環境不行，網線太短，我只能撅著寫部落格，撅著看書，我那個難受啊！

所以最近寫起來不自覺就有點心浮氣躁，現在是腰酸背痛的，就暫時到這裡吧。。。。