內(nèi)容提要

• JavaScript介紹
• 基本語法與基本類型
• 運算符
• 常用內(nèi)置對象
• 閉包與變量作用域
• JavaScript學(xué)習(xí)資源

學(xué)習(xí)目標(biāo)

• 掌握JavaScript基本語法
• 掌握常用內(nèi)置對象的使用
• 理解閉包的概念，掌握閉包的使用方法
  掌握JavaScipt的學(xué)習(xí)方法

1.1、JavaScript介紹

• JavaScript是一種Web腳本羽凡，廣泛用于Web應(yīng)用開發(fā)。
• JavaScript是弱類型語言，其設(shè)計簡單即湊。
  JavaScript具有跨平臺特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺下運行。

2、基本語法與類型

2.1、變量

var a = 1;

• 聲明變量a，將數(shù)值1賦值給變量a。
• 聲明變量用var，JavaScript是弱類型語言，所有變量都是用var聲明。
• var關(guān)鍵字省略，不利于表達意圖，而且容易不知不覺地創(chuàng)建全局變量，所以總是使用var命令聲明變量。

2.1、標(biāo)識符（一）

• 標(biāo)識符（identifier）是用來識別具體對象的一個名稱。最常見的標(biāo)識符就是變量名，以及后面要提到的函數(shù)名。JavaScript語言的標(biāo)識符對大小寫敏感，所以a和A是兩個不同的標(biāo)識符。

• 標(biāo)識符命名規(guī)則：
  1、第一個字符，可以是任意Unicode字母（包括英文字母和其他語言字母），以及美元符號（$）和下劃線（_）。
  2、第二個字符及后面的字符，除了Unicode字母、美元符號和下劃線，還可以用數(shù)字0-9。

2.2、標(biāo)識符（二）

2.3、基本數(shù)據(jù)類型

的數(shù)據(jù)類型共有6中：

• Undefined：值undefined，出現(xiàn)場景已聲明未賦值的變量，獲取對象不存在的屬性
• null：值null，表示對象不存在
• Number：整數(shù)，浮點數(shù)，NaN，Infinnity（1/0）
• String：字符組成的文本（比如“Hello World”）
• Boolean：true，false2個特定的值
• Object：一組無需的鍵值對集合

3、運算符

• 嚴格相等運算符（===）要求類型一樣，比較過程不執(zhí)行類型轉(zhuǎn)換。
• 相等運算符（==）比較兩個值是否相等，類型不一樣會執(zhí)行類型轉(zhuǎn)換。
• 相等運算符（=）隱藏的類型轉(zhuǎn)換，會帶來一些違反直覺的結(jié)果。

0 == ' '        //true
0 == 0        //true

2 == true        //false
2 == false        //false

以上表達式很容易出錯，因此不要使用相等運算（==），最好只使用嚴格相等運算符（===）。

4、內(nèi)置對象

4.1、字符串

• str.length，返回字符串長度

'abc'.length   // 3

• str.slice()，用于從原字符串去除子字符串并返回，不改變原字符串

'JavaScript'.slice(0,4)  // "Java"

• str.indexOf()，用于確定一個字符串在另一個字符串中的位置，返回一個整數(shù)，表示匹配開始的位置。

'hello world'.indexOf('o')  // 4
'JavaScript'.indexOf('script')  //-1  未匹配到

• str.trim()，trim方法用于去除字符串兩端的空格，返回一個新字符串，不改變原來字符串。該方法去除的不僅是空格，還包括制表符（\t、\v）、換行符（\n）和回車符（\r）。

• str.toLowerCase()，toLowerCase方法用于將一個字符串全部改為小寫，返回一個新字符串，不改變原字符串。

• str.toUpperCase()，toUpperCase方法用于將一個字符串全部改為大寫，返回一個新字符串，不改變原字符串。

'Hello World'.toLowerCase()  //  "hello world"
'Hello World'.toUpperCase()  //  "HELLO WORLD"

• STR.SPLIT()，split方法按照給定規(guī)則分割字符串，返回一個由分割出來的子字符串組成的數(shù)組。

'a|b|c'.split('|')  //["a","b","c"]

4.2、對象

• 創(chuàng)建對象

var o1 = {};
var o2 = new Object();

• 添加屬性和方法

var o = {
  p: 123,
  m: function() {...},
}

• 訪問屬性和方法

var o = {
  p: 'Hello World'
};

o.p  // "Hello World"
o['p']  //  "Hello World"

• 增加屬性和方法

var o = {};
o.p = 1;
o.f = unction () {...}

• 修改屬性和方法

var o = {
p: 'Hello World'
};
o.p = 'abc';

• 刪除屬性和方法

var o = {p: 1};
delete o.p  //  true
o.p  //  undefined

4.3、數(shù)組

• 創(chuàng)建數(shù)組

var arr = [];
var arr = [1, 2];

• 獲取數(shù)組元素

arr.push()，push仿佛用于在數(shù)組的末端添加一個或多個元素，并返回添加新元素后的數(shù)組長度。注意，該方法會改變源數(shù)組。

var a = [];

a.push(1)  //  1
a.push('a')  //  2
a.push(true, {})  //4
a  //  [1, 'a', true, {}]

arr.pop()，pop方法用于刪除數(shù)組的最后一個元素，并返回該元素。注意，飯方法同樣會改變數(shù)組。

var a = ['a', 'b', 'c'];
a.pop()  //  'c'
a  //  ['a', 'b']
s.

arr.join()，join方法以參數(shù)作為分隔符，將所有數(shù)組成員組成一個字串返回。如果不提供參數(shù)，默認用逗號分隔。

var a = [1, 2, 3, 4];

a.join(' ')  //  '1 2 3 4'
a.join(' | ')  //   "1 | 2 | 3 | 4"
a.join()  //  "1,2,3,4" 

arr.shift，shift方法用于刪除數(shù)組的第一個元素，并返回該元素。注意，該方法會改變原來數(shù)組。

var a = ['a', 'b', 'c'];
a.shift()  // 'a'
a  //  ['b', 'c']

arr.unshift()，unshift方法用于在數(shù)組的第一個位置添加元素，并返回添加新元素后的數(shù)組長度。注意，該方法會改變原來數(shù)組。

for...in遍歷數(shù)組

var a = [1, 2, 3];
for (var i in a) {
  console.log(a[i]);
}
//  1
//  2
//  3

4.4、函數(shù)

• 聲明函數(shù)

function print(s){
  console.log(s);
}

var print = function(s) {
  console.log(s);
};

function命令聲明的代碼塊，就是一個函數(shù)。function明龍后面是函數(shù)名，函數(shù)名后面是一對括號，里面是傳入函數(shù)的參數(shù)。函數(shù)體放在大括號里面。

• 函數(shù)調(diào)用

print();

4.5、Math

• Math.abs()，方法返回參數(shù)值的絕對值。

Math.abs(1)  //  1
Math.abs(-1)  //  1

• Math.min()，Math.max()，接受多個參數(shù)，返回其中最大（最小）的參數(shù)。

Math.max(2, -1, 5)  //  5
Math.min(2, -1, 5)  //  -1

• Math.floor()，Math.ceil()，Math.round()，分別對參數(shù)進行向下取整、向上取整、四舍五入

Math.floor(3.2)  //  3
Math.floor(-3.2)  //  -4
Math.ceil(3.2)  //  4
Math.ceil(-3.2)  //  -3

• Math.random，返回0到1之間的一個隨機數(shù)，可能等于0，但是一定小于1。

Math.random() 

• 任意范圍的隨機整數(shù)生成函數(shù)

function getRandomInt(min,max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomInt(1, 6)  //  5

4.6、JSON格式

JSON格式，是一種用于數(shù)據(jù)交換的文本格式，格式規(guī)則：

1、復(fù)合類型的值只能是數(shù)組或?qū)ο螅荒苁呛瘮?shù)、正則表達式對象、日期對象。
2、簡單類型的值只有四種：字符串、數(shù)值（必須以十進制表示）、布爾值和null（不能使用NaN、Infinity、-Infinity和undefined）。
3、字符串必須使用雙引號表示，不能使用單引號。
4、對象的鍵名必須放在雙引號里面。
5、數(shù)組或?qū)ο笞詈笠粋€成員的后面，不能有逗號。
6、數(shù)值前不能加0.

JSON格式描述的文件，本身是個字符串，并非對象。

4.7、JSON對象

JSON對象，用于對JSON進行解析和序列化

• JSON.parse()，此方法接受一個JSON字符串，返回解析后的JavaScript對下那個，通常為Object或Array。

    var shipData = '[{"name":"Richelieu","shipClass":"Battleship"},{"name":"Missouri","shipClass":"Battleship"}]';
    var ship = JSON.parse(shipData);

    console.log(ship[0].name);  //  Richelieu
    console.log(ship[0].shipClass);  //  Battleship

    console.log(ship[1].name);  //  Missouri
    console.log(ship[1].shipClass);  //  Battleship

• JSON.stringfy()，此方法可接受一個JavaScript值并轉(zhuǎn)化為JSON字符串，此字符串可被JSON.parse還原。

var ships = [{
      "shipName": "Missouri",
      "shipClass": "Battleship",
      "number": 63
    }, {
      "shipName": "Richelieu",
      "shipClass": "Battleship",
      "number": 3
    }, {
      "shipName": "Enterprise",
      "shipClass": "Carrier",
      "number": 6
    }];

    JSON.stringify(ships);
    console.log(ships);

4.8、正則表達式

正則表達式（regular expression）是一種表達文本模式（即字符串結(jié)構(gòu)）的方法，有點像字符串的模板，常常用作按照“給定模式”匹配文本的工具。

新建正則表達式

var telRegex1 = /^1[3|5|7|8]\d{9}$/;  //  字面量形式

var telRegex2 = new RegExp('/^1[3|5|7|8]\d{9}$/');  //  構(gòu)造函數(shù)形式

• 考慮到書寫的便利和直觀，實際應(yīng)用中，基本上都采用字面量的寫法。
• 有一點需要注意，使用構(gòu)造函數(shù)創(chuàng)建正則表達式時，傳入的參數(shù)是字符串形式的，在字符串內(nèi)部，\本身也是一個轉(zhuǎn)義符，因此需要在使用一個\來對其進行正則表達式的轉(zhuǎn)義。

4.8.1、元字符

4.8.2、修飾符

• g修飾符：g修飾符表示全局匹配（global），加上它以后，正則對象將匹配全部符合條件的結(jié)果，主要用于搜索和替換。

var regex = /b/g;
var str = 'abba';

regex.test(str);  //  true
regex.test(str);  //  true
regex.test(str);  //  false

• i修飾符：默認情況下，正則對象區(qū)分字母大小寫，加上i修飾符以后表示忽略大小寫（ignorecace）* m修飾符*：加上m修飾符以后，'^' 和'$'還會匹配行首和行尾，即^和$會識別換行符（\n）。

4.8.2、正則對象方法

• test()，正則對象的test對象接收一個字符竄，表示測試字符串，返回一個布爾值，表示此字符串是否滿足匹配條件。

testRegex1('12323213216');  //  true
testRegex2('12323278616');  //  false
testRegex3('12743265416');  //  false

• exec()，正則對象的exec方法，可以返回匹配結(jié)果。如果發(fā)現(xiàn)匹配，就返回一個數(shù)組，成員是每一個匹配成功的子字符串，否則返回null。

var ipReg = /(\d{1,3}\.){3}(\d{1,3})/
var ipStr = 'My ip is "192.168.118.47", please tell me yours.';

ipReg.exec(ipStr);  //  ["192.168.118.47", '118", "47"]

5、閉包與變量作用域

5.1、變量作用域

JavaScript有兩張作用域：全局作用域和函數(shù)作用域。函數(shù)內(nèi)可以直接讀取全局變量，但是，在函數(shù)外部無法讀取函數(shù)內(nèi)部聲明的變量。

var n = 999;

function f1() {
  console.log(n);
}
f1()  //  999

function f1() {
  cvar n = 999;
}
console.log(n);

5.2、閉包

在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取內(nèi)部變量，因此可以吧閉包簡單理解成“定義在一個函數(shù)內(nèi)部的函數(shù)”。閉包最大的特點，就是他可以“記住”誕生的環(huán)境。

function f1(){
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}
var result = f1();
result();  //  999

閉包的最大用處有兩個，一個是可以去函數(shù)內(nèi)部的變量，另一個用處，是封裝對象的私有屬性和方法。

  function Ship(){
    var shipName;
    var setShipName = function(name){
      this.shipName = name;
    }

    var getShipName = function(){
      console.log(this.shipName);
    }

    return{
      reShipName: shipName,
      reSetShipName: setShipName,
      reGetShipName: getShipName
    }
  }
  var ship1 = Ship();
  ship1.reSetShipName("Missouri");
  ship1.reGetShipName()  //  Missouri