JavaScript中數組進階編程實踐

JavaScript中數組進階編程實踐

今天我們來全面介紹 JavaScript 中 數組的進階使用，與EcmaScript5 Array API 實戰。

利用這些新的API 和 技巧，將提高你的開發效率 和 代碼的水平。

理解這些原生的API是 非常有必要的，假以時日，我們也可以寫出 underscore 。。。這樣的工具庫來。

Come on Baby!

先看一下 Array.prototype 的全家福。

在JavaScript 中，數組就是有順序的儲存一系列值，長度動態擴容。

,先看我們的EcmaScript 規範中的 對 Array 的定義<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PHByZSBjbGFzcz0="brush:java;">/**@param {...*} [args]@constructor*/function Array(args) {}/**@param {...*} [items]@return {Array}*/Array.prototype.concat = function(items) {};/**@param {string} [separator]@return {string}*/Array.prototype.join = function(separator) {};/**@return {*}*/Array.prototype.pop = function() {};/**@param {...*} [items]@return {Number}*/Array.prototype.push = function(items) {};/**@return {Array}*/Array.prototype.reverse = function() {};/**@return {*}*/Array.prototype.shift = function() {};/**@param {Number} [start]@param {Number} [end]@return {Array}*/Array.prototype.slice = function(start,end) {};/**@param {function} [compareFn]@return {Array}*/Array.prototype.sort = function(compareFn) {};/**@param {Number} [start]@param {Number} [deleteCount]@param {...*} [items]@return {Array}*/Array.prototype.splice = function(start,deleteCount,items) {};/**@param {...*} [items]@return {Number}*/Array.prototype.unshift = function(items) {};/**@return {Array}*/Array.prototype.valueOf = function() {};

在JavaScript 中 所有的 數組對象 都是 由Array 建構函式派生，都共用Array.prototype 上的 方法，我們來看

數組原型上的方法 是 如何使用的。

/** *@class MyEcmaScript *@description *@time 2014-09-13 11:52 *@author StarZou **/// 定義變數var obj = {name: 'obj-1'},    sayHello = function (name) {        console.log('Hello %s guy', name);    },    arr1 = [5, 6],    array = [3, '2', 1, 1, true, sayHello, arr1, 9 ], i;//// 數組的方法的使用，分為 2類/// 1、不會改變原數組的方法// Array.prototype.concat = function(items) {}; 數組合并, 產生新的數組console.log(array.concat(arr1), array); // [ 3, '2', 1, 1, true, [Function], [ 5, 6 ], 9, 5, 6 ] [ 3, '2', 1, 1, true, [Function], [ 5, 6 ], 9 ]// Array.prototype.join = function(separator) {}; 數組拼接，產生新的字串console.log(arr1.join('-')); // 5-6// Array.prototype.slice = function(start,end) {}; 數組切分，從start 位置起(下標從0開始)，不包括end位置，切分成新的數組( 即新數組的長度 = end - start)console.log(array.slice(0, 3)); // [ 3, '2', 1 ]/// 2、將改變原數組的方法// Array.prototype.pop = function() {};  彈出數組最後一個元素 ，並返回該元素console.log(array.pop()); // 9// Array.prototype.push = function(items) {}; 添加元素在數組的末尾,並返回數組的長度console.log(array.push(arr1)); // 8// Array.prototype.reverse = function() {}; 反轉數組元素console.log(array.reverse()); // [ [ 5, 6 ], [ 5, 6 ], [Function], true, 1, 1, '2', 3 ]// Array.prototype.shift = function() {}; // 移除數組第一個元素 ，並返回該元素console.log(array.shift(), '---', array); // [ 5, 6 ] '---' [ [ 5, 6 ], [Function], true, 1, 1, '2', 3 ]// Array.prototype.unshift = function(items) {}; 添加元素在數組的第一個位置，並返回數組的長度console.log(array.unshift(110)); // 8// Array.prototype.sort = function(compareFn) {}; 數組排序console.log(array.sort()); // 預設升序 排序,[ 1, 1, 110, '2', 3, [ 5, 6 ], [Function], true ]console.log(array.sort(function (one, two) {    return one < two;})); // 自訂排序 (自訂時，應考慮不同類型的元素之間的比較),  [ 110, 3, '2', 1, 1, [Function], [ 5, 6 ], true ]// Array.prototype.splice = function(start,deleteCount,items) {}; 數組最強大的方法// 從 start 位置 移除 deleteCount 給元素，並把items加在start 位置，返回被刪除的元素數組console.log(array.splice(0, 7, 120, 119), array); // [ 110, 3, '2', 1, 1, [Function], [ 5, 6 ] ] [ 120, 119, true ]

運行結果 ：

知道上面數組的操作方法之後，我們來 看 EcmaScript5 規範中的 數組新的API ， 以及如何 應用到 實踐中。

/**@param {Function} callback@param {Object} [initialValue]@return {Object}*/Array.prototype.reduce = function(callback,initialValue) {};/**@param {Function} callback@param {Object} [initialValue]@return {Object}*/Array.prototype.reduceRight = function(callback,initialValue) {};/**@param {Object} searchElement@param {number} [fromIndex]@return {number}*/Array.prototype.indexOf = function(searchElement,fromIndex) {};/**@param {Object} searchElement@param {number} [fromIndex]@return {number}*/Array.prototype.lastIndexOf = function(searchElement,fromIndex) {};/**@param {Function} callback@param {Object} [thisObject]@return {boolean}*/Array.prototype.every = function(callback,thisObject) {};/**@param {Function} callback@param {Object} [thisObject]@return {Array}*/Array.prototype.filter = function(callback,thisObject) {};/**@param {Function} callback@param {Object} [thisObject]@return {void}*/Array.prototype.forEach = function(callback,thisObject) {};/**@param {Function} callback@param {Object} [thisObject]@return {Array}*/Array.prototype.map = function(callback,thisObject) {};/**@param {Function} callback@param {Object} [thisObject]@return {boolean}*/Array.prototype.some = function(callback,thisObject) {};/**@param {Object} object@return {boolean}*/Array.prototype.isArray = function(object) {};

未完待續。。。