JavaScript中数组高级编程实践

今天我们来全面介绍 JavaScript 中数组的高级使用，与EcmaScript5 Array API 实战。

利用这些新的API 和技巧，将提高你的开发效率和代码的水平。

理解这些原生的API是非常有必要的，假以时日，我们也可以写出 underscore 。。。这样的工具库来。

Come on Baby!

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

在JavaScript 中，数组就是有顺序的存储一系列值，长度动态扩容。

,先看我们的EcmaScript 规范中的对 Array 的定义

/**
@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) {};

未完待续。。。

JavaScript中数组高级编程实践相关推荐

JavaScript 中的函数式编程实践
为什么80%的码农都做不了架构师?>>> 基础知识函数式编程简介说到函数式编程,人们的第一印象往往是其学院派,晦涩难懂,大概只有那些蓬头散发,不修边幅,甚至有些神经质的大学 ...
JavaScript语言精髓与编程实践(第2版)
JavaScript语言精髓与编程实践(第2版) 周爱民著 ISBN 978-7-121-15640-3 2012年3月出版定价:79元 16开 476页宣传语:以JavaScript视角看整 ...
JavaScript中的元编程
紧接上回,伴随着Reflect,Proxy降世,为js带来了更便捷的元编程! 什么是元编程?这词第一次听,有点懵,好像有点高级,这不得学一下装-进自己的知识库概念元编程是一种编程技术,编写出来的计 ...
JavaScript中数组使用总结
一. 数组的概念 1.1 什么是数组数组是指的数据的有序列表. 数组中每个值称之为数组的一个元素. 数组中的每个元素都有一个位置,这个位置称之为索引(下标.index).数组的索引是从 0 开始的 ...
java中字符串和数组如何比较_[Java教程]javascript中数组和字符串的方法比较
[Java教程]javascript中数组和字符串的方法比较 0 2016-07-19 23:00:05 ×目录[1]可索引 [2]转换 [3]拼接[4]创建[5]位置前面的话字符串和数组有很多的 ...
[乐意黎原创] JavaScript中数组使用总结
原文地址:http://blog.csdn.net/u012468376/article/details/53147098 一. 数组的概念 1.1 什么是数组数组是指的数据的有序列表. 数组中每个 ...
javascript函数式_如何以及为什么在现代JavaScript中使用函数式编程
javascript函数式 by PALAKOLLU SRI MANIKANTA 通过PALAKOLLU SRI MANIKANTA In this article, you will get a d ...
JavaScript 中数组 sort() 方法的基本使用
在日常的代码开发中,关于数组排序的操作可不少,JavaScript 中可以调用 sort 方法对数组进行快速排序. 今天,就数组的 sort 方法来学习一下,避免日后踩坑的悲惨遭遇. 概念 sort ...
javascript中数组的22种方法
前面的话数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详细 ...
php中不让数组初始化,javascript中数组与php数组初始化差异
准确来说,javascript中我们需要称之为数组对象,因为数组就是对象,不信你看: var a=[1,2,3]; //竟然会弹出object alert(typeof(a)); 之前学习php的时候 ...

JavaScript中数组高级编程实践

JavaScript中数组高级编程实践相关推荐

最新文章

热门文章