從零開始學習前端JAVASCRIPT — 二、JavaScript基礎ES5

1：ES5簡介

ECMAScript 5.1 (或僅 ES5) 是ECMAScript(基於JavaScript的規範)標準的修正。 與HTML5規範進程本質相似，ES5經過對現有JavaScript方法添加語句和原生ECMAScript對象作合併實現標準化。

---

2：嚴格模式的意義

　　相對於正常模式而言：

1：消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲。

2：消除代碼運行的一些不安全之處，保證代碼運行的安全。

3：提升編譯器效率，增長運行速度。

4：爲將來新版本的Javascript作好鋪墊。

"嚴格模式"體現了Javascript更合理、更安全、更嚴謹的發展方向，包括IE 10在內的主流瀏覽器，都已經支持它，許多大項目已經開始全面擁抱它。

---

3：進入嚴格模式

進入「嚴格模式」的標誌，書寫這行語句："use strict";

老版本的瀏覽器會把它看成一行普通字符串，加以忽略。

---

4：如何調用嚴格模式

"嚴格模式"有兩種調用方法，適用於不一樣的場合。

針對整個腳本文件：將"use strict"放在腳本文件的第一行，則整個腳本都將以"嚴格模式"運行。若是這行語句不在第一行，則無效，整個腳本以"正常模式"運行。若是不一樣模式的代碼文件合併成一個文件，這一點須要特別注意。

針對單個函數：將"use strict"放在函數的第一行，則整個函數以"嚴格模式"運行。

腳本文件的變通寫法：由於第一種調用方法不利於文件合併，因此更好的作法是，借用第二種方法，將整個腳本文件放在一個當即執行的匿名函數之中。

eg:

// a.js (組員a的js代碼引入嚴格模式)
/*	'use strict';
	var a = 4;
	var b = 3;
	console.log(a + b);*/
// b.js（組員b的js代碼引入正常模式）
/*
	var c = 6;
	var d = 7;
	console.log(c + d);*/
//項目上線代碼合併(若是直接合並代碼，組員b的代未按照嚴格模式規範來coding，語法可能發生各類問題)。
//解決方案：將代碼分別封裝進入兩個匿名自執行函數
(function () {
	'use strict';
	var a = 4;
	var b = 3;
	console.log(a + b);
})();
(function () {
	var c = 6;
	var d = 7;
	console.log(c + d);
})();

---

5：嚴格模式改變語法和行爲

嚴格模式對Javascript的語法和行爲，都作了一些改變。

1：全局變量顯式聲明。

在正常模式中，若是一個變量沒有聲明就賦值，默認是全局變量。嚴格模式禁止這種用法，全局變量必須顯式聲明。所以，嚴格模式下，變量都必須先用var命令聲明，而後再使用。

javascrip中的變量講解中函數內部不加關鍵字var定義的全局變量若是引入嚴格模式，運行程序將會檢查出語法錯誤。採用顯示聲明全局變量。

2：函數形參不容許重複。

3：禁止使用with語句。

4：禁止函數內部this關鍵字指向全局對象，this指向undefined。

5：函數必須聲明在頂層。

未來Javascript的新版本會引入「塊級做用域"。爲了與新版本接軌，嚴格模式只容許在全局做用域或函數做用域的頂層聲明函數。也就是說，不容許在非函數的代碼塊內聲明函數。

// if(1){function a(){}} else {function a() {}}

---

6：ES5新增函數方法

this是函數內部默認內置的一個變量（注：新增方法IE6/7/8均不支持，此處針對是正常的模式的說明。嚴格模式中this在全局環境中不能指向window，指向undefined）

1：全局環境中，this指向的是window

2：在函數內部，this指向的是window

3：在方法內部，this指向的是方法的擁有者

bind方法：改變了函數內部上下文的this。返回值是函數。在調用返回函數時，傳入的實參是在bind中傳入參數的基礎上日後排的。

var obj = {
	name: '張三'
};
var name = '李四';
function hello(x, y) {
	var name = '王五';
	console.log(arguments); 
        //輸出三個參數,參數的排序是先排bind中的參數,接着是調用參數的實參，則參數:
        //arguments[0]=6,arguments[0]=7,arguments[0]=9
        console.log(this.name); //張三 
        console.log(x + y); //13 
}
 var newHello = hello.bind(obj, 6); 
//打印函數的調用能夠看出返回值是函數,調用返回函數時,傳入的參數則爲bind方法的參數,拼接調用返回函數的實參
newHello(7, 9);    

  

var obj={name:"小明"}
var name ="全局變量";
function helloworld () {
	var name = "局部變量";
	console.log("this.name="+this.name+"||"+"name="+name);
}
helloworld();
//this指向window對象，helloworld()至關於window調用,this指向函數的調用者window,故this.name="全局變量"
console.log("————————————————我是分割線————————————————")
var newhelloworld=helloworld.bind(obj);
newhelloworld();
//bind方法改變函數內部上下文的this指向對象obj,故輸出this.name="小明"

釋義：函數與方法

　　函數（function）是能夠執行的javascript代碼塊，由javascript程序定義或javascript實現預約義。函數能夠帶有實際參數或者形式參數，用於指定這個函數執行計算要使用的一個或多個值，並且還能夠返回值，以表示計算的結果。

　　方法（method）是經過對象調用的javascript函數。也就是說，方法也是函數，只是比較特殊的函數。假設有一個函數是fn，一個對象是obj，那麼就能夠定義一個method：
　　
      obj.method = fn;

　　obj.method();    //定義以後的調用

雖然區別對待函數和方法比較有用，但實際比較起來，它們之間並無想象中那麼大的差異。這樣講吧，函數是能夠用函數直接量定義，也就是函數能夠直接儲存在變量之中，由於函數和字符串、數值同樣也是數據類型。假如儲存函數的變量是全局變量，也便是window對象的一個屬性。所以，當你調用這個函數時，實際上也是調用window對象的一個方法。因此在函數和方法之間並無技術上的區別，真正的差異在於設計和目的，方法是用來對this對象進行操做的，this對象是方法的一個重要屬性，當this對象出如今方法主體內部，this值就指向調用該方法的對象。而函數一般是獨立的，並不須要常用this對象。

function Rect(w, h){    //使用this對象，避免本身調用本身
    this.width = w;
    this.height = h;
}
function area(){
    return this.width * this.height;
}
var r = new Rect(4, 5);
r.area = area;    //將函數賦值給對象的屬性，來定義方法

var result = r.area();    //20 

函數與方法 

---

7：ES5新增數組方法

1：forEach方法：遍歷數組。第二個參數爲可選的上下文參數（改變this指向）。 

形參釋義：v:表明value　　k:表明key　　arr:表明array數組

forEach方法中的function回調支持3個參數，第1個是遍歷的數組內容；第2個是對應的數組索引，第3個是數組自己。forEach不會遍歷空位置的內容。如：[1, , 3]，只會遍歷1和3。

// 數組對象新增的方法
var arr = [1, 4, 7, 9];
// forEach方法
// 語法：arr.forEach(function (v, k, arr) {}, context);
arr.forEach(function (v, k, arr) {
	 console.log(this);//小明
	 console.log(v, k, arr);
}, '小明');

2：map方法：將數組映射成新數組。回調函數須要有返回值。 

var newArr = arr.map(function (v) {
	return v * 2;
});

3：filter方法：指數組過濾後，返回過濾後的新數組。 filter的callback函數須要返回布爾值true或false。 

// 語法：arr.filter(function (v, k, arr) {}, context)
var newArr = arr.filter(function (v) {
	if(v > 5) {
		return true;//返回true將值添加到新的數組
	}
　　　　 else {
		return false;//返回false將值不添加新的數組

} });

 

4：some方法：指是否「某些項」合乎條件。返回布爾值。只要數組中有一項符合條件，則返回true。 

// 語法：arr.some(function (v, k, arr) {}, context)
var bool = arr.some(function (v) {
	if(v > 10) {
		return true;//只要進入此語句接收到的返回值true，不然爲false
	} else {
		return false;
	}
});

5：every方法：全部項都必須合乎條件。返回布爾值。   

// 語法：arr.every(function (v, k, arr) {}, context)
var bool = arr.every(function (v) {
	if(v > 0) {
		return true;
	} else {
		return false;//只要進入此語句接收到的返回值false，不然爲true

} }); 

語法：array.every(callback, [ thisobject]); 必須每一項都要符合條件，不然返回false。 

6：indexOf方法：返回整數索引值，若是沒有匹配（嚴格匹配），返回-1。 fromIndex可選，表示從這個位置開始搜索，若缺省或格式不合要求，使用默認值0。 

var arr=[1,4,7,9];
arr.indexOf(7,-2) 
 //2  從-2的位置開始從左向右查找7，下標爲2 
arr.indexOf(4,-2) 
 //-1 從-2的位置從左向右開始查找4，未找到4   輸出-1

 

7：lastIndexOf方法：從數組的末尾開始查找，而不是從開頭。還有一個不一樣就是fromIndex的默認值是array.length - 1而不是0。 

// lastIndexOf：在數組中查找某個元素。從右往左

var arr = [1, 4, 7, 9, 8, 7, 10];

var iIndex = arr.lastIndexOf(7, 4);  
//從數組值爲8的位置4，從右向左查找  返回數組下標註   返回值爲2

console.log(iIndex);　

8：reduce方法：歸併。遞歸減小。

 reduce語法：arr.reduce(function (previous, current, index, arr) {}, initialValue);

callback函數接受4個參數：以前值、當前值、索引值以及數組自己。initialValue參數可選，表示初始值。

1》若指定，則看成最初使用的previous值；

 案例：

var arr = [1, 4, 7, 9];

var result = arr.reduce(function (previous, current) {
console.log(previous, current);
return previous + current;
}, 10);

console.log(result); //結果爲31

 結果列表：

 

解析：previous值：initialValue初始值 10，current值：數組的第一個元素arr[0]=1，緊接着進行迭代current值即當前值  ，最終結果爲數組arr元素值得和加初始值，則爲31

2》若是缺省，則使用數組的第一個元素做爲previous初始值，同時current日後排一位，相比有initialValue值少一次迭代。

案例：

var arr = [1, 4, 7, 9];

var result = arr.reduce(function (previous, current) {
console.log(previous, current);
return previous + current;
});

console.log(result); //結果爲21

結果列表：

解析：previous值：initialValue初始值爲數組arr[0]=1，current值：數組的第一個元素arr[1]=4，緊接着進行迭代current值即當前值  ，最終結果爲數組arr元素值得和加初始值，則爲21

1：由於initialValue不存在，所以一開始的previous值等於數組的第一個元素。

2：從而current值在第一次調用的時候就是2。

3：最後兩個參數爲索引值index以及數組自己array。

9：reduceRight方法：和reduce用法相似，實現上差別在於reduceRight是從數組的末尾開始實現。

 案例： 

var arr = [1, 4, 7, 9];

var result = arr.reduceRight(function (previous, current) {
	console.log(previous, current);
	return previous + current;
}, 10);

console.log(result);

結果列表：

 

10：Array.isArray()：判斷一個變量是否爲數組。

---

8：ES5新增字符串方法

　　trim方法：去除字符串首尾的空白字符。 

// trim：忽略字符串左右兩側的空格。

var str = '  hello world  ';

console.log(str.trim());//值：hello world

---

9：ES5新增JSON(javascript object notation)對象方法 

1：JSON.stringify：將對象轉換成JSON格式的字符串。

var obj = {
    name: '張三',
     hello: function () {
        console.log('hello world!')
    }
};
console.log(JSON.stringify(obj));   
//將對象屬性轉換成字符串，函數直接省略 

2：JSON.parse：將一個JSON格式的字符串轉換成對象。(字符串內對應對象的鍵必須用雙引號，單引號有問題)

var str = '{"name": "張三", "age": 28, "hello":{"child": "李四"}}';
//嚴格按照對象的屬性進行建立字符串，字符串內可包含對象的屬性及嵌套的對象，不能包含函數
console.log(JSON.parse(str));