JavaScript是當今最流行也是最重要的編程語言之一,使用于前端開發,回到1995年JavaScript誕生以來已有26年歷史,不斷地發展和更新,JavaScript最新版本——ES6(ECMAScript2015)大大擴展了JavaScript的功能,但ES6在現實應用中受限制。最廣泛應用的JavaScript版本是ES5,它提供了很多強大的特性。
1. 對象迭代器
var obj = {a:1, b:2, c:3}; Object.keys(obj).forEach(function(key) { console.log(key, obj[key]); });
在ES5中,我們可以使用內置函數進行迭代操作,其中最常用的是用來遍歷對象的Object.keys()
,該函數返回一個數組,其中包含對象的所有鍵值對。然后使用使用函數forEach()
對數組元素進行迭代,對于每個元素,我們傳遞一個函數調用。在上述代碼中,函數用于輸出對象的每個鍵值對。
2. Array函數
var arr = [1, 2, 3, 4, 5]; arr.forEach(function(elem) { console.log(elem); //輸出數組元素 }); var x = arr.map(function(elem) { return elem * 2; }); console.log(x); // 輸出[2, 4, 6, 8, 10]
使用ES5提供的內置Array
函數來操作數組是常見的操作,最常用的是forEach
和map
函數。forEach()
函數接受一個函數作為參數,用于處理每個元素。map()
函數接受一個函數作為參數,并返回一個新數組,在新數組中,每個元素等于原始元素乘以2。
3. 多行字符串拼接
var html = '<div>' + '<h1>JavaScript五大特性</h1>' + '<p>' + 'ES5有很多很強大的特性,包括對象迭代器、Array函數和多行字符串拼接等等' + '</p>' + '</div>'; console.log(html);
在ES5中,想要在多個行中拼接一個大字符串是十分常見的場景。使用"+=" 運算會使代碼看起來雜亂無章。ES5提供了一種新的方式,使用反斜杠,在多行中拼接一個字符串。
4. Function.call和Function.apply
function print(a, b) { console.log(a, b); } print.call(null, 1, 2); //輸出1,2 print.apply(null, [1, 2]); //輸出1,2
在ES5中,我們可以使用函數對象的call()
和apply()
方法實現在不更改當前函數上下文的基礎上調用函數。call()
方法接受期望函數上下文對象和期望的參數,而apply()
方法使用一個數組作為參數。這種技術在JavaScript編程中十分常見,尤其是在使用優秀框架如AngularJS的時候。
5. JSON.stringify()
var myObject = {name: "Adam", age: 25, hobbies: ["reading", "coding", "swimming"]}; var json = JSON.stringify(myObject); console.log(json);
在ES5中,使用JSON來序列化和反序列化JavaScript對象是一種常見的技術。JSON提供了一個方便的方法,可以將對象轉換成字符串,以便存儲或傳輸。在上述代碼中,我們可以使用JSON.stringify()
函數將對象轉換成JSON字符串,并輸出到控制臺。ES5已經在很多方面提供了很多更高效、更方便的方法去處理對象,如JQuery庫和AngularJS框架都為我們在復雜的項目中來處理JavaScript代碼提供了許多便利。