ES5新增函数之一: Array, JSON, String, Date浅析
次
分享:
ES5即ECMAScript 5.1,在JavaScript语言基础之上添加了很多新的特性,对现有的对象和语句进行相应的增强和规范,主要包括一些新增函数、对象类型增强,以及严格模式编程规范。
今天我们先来介绍以下几个新增的函数:
Array.isArray(obj);
Array.prototype.forEach();
Array.prototype.indexOf();
Array.prototype.lastIndexOf();
Array.prototype.filter();
Array.prototype.map();
Array.prototype.some();
Array.prototype.every();
Array.prototype.reduce();
JSON.parse();
JSON.stringify();
String.prototype.trim();
Date.now();
Date.prototype.toISOString();
下面我们就一一介绍他们的用法:
Array.isArray(obj);
显而易见,该函数用来判断一个对象是否为数组类型,如果是则返回true,否则返回false,我们可以用一个简单的数组来测试这个函数:var arr = [1, 2, 3, 4, 5];var func = function() {};console.log('is arr the Array type? ', Array.isArray(arr));console.log('is func the Array type? ', Array.isArray(func));
执行上面的代码,控制台打印如下图所示:
我们可以很容易实现一个我们自己版本的isArray函数:
Array.isArray = Array.isArray || function(obj) {return Object.prototype.toString.call(obj) === '[object Array]';};
Array.prototype.forEach();
forEach函数是定义在Array原型上的一个函数,用于实现最基本的数组遍历操作,所以我们可以直接在数组上面调用实现遍历:console.group('for each is running');[1, 2, 3, 4, 5].forEach(function(item, index, array) {console.log('the current index is: ' + index + ', value is: ' + item);});console.groupEnd();在回调函数中,前两个参数分别表示当前的元素和索引,最后一个参数是数组本身,打印时我们使用console的group和groupEnd对控制台结果分组,代码执行完毕,结果打印如下:
Array.prototype.indexOf(); &Array.prototype.lastIndexOf();
这两个函数分别用于获取指定元素在数组中第一次出现和最后一次出现时的索引,使用方法如下:
var arr = [1, 2, 3, 4, 5, 3];//indexOfvar indexOf3 = arr.indexOf(3);console.log('the index of 3 in the array: ', indexOf3);//lastIndexOfvar lastIndexOf3 = arr.lastIndexOf(3);console.log('the last index of 3 in the array: ', lastIndexOf3);
这两个函数还可以传递第二个可选的参数,表示从指定索引开始查找。上面代码的打印结果如下:
Array.prototype.filter();
filter函数会根据回调函数指定的过滤规则对原数组进行一次过滤操作,并且返回一个新的数组,包含符合过滤条件的数组元素。例如我们想要从一个数组中过滤出所有的奇数元素,就可以使用filter函数轻松实现:
var oddArr = [1, 2, 3, 4, 5].filter(function(item) {return item % 2 !== 0;});console.log('afer filter called, got a new array with odd numbers: ', oddArr);上面代码结果打印如下:
Array.prototype.map();
map函数会返回一个新数组,根据回调函数中对原数组元素的计算规则,将每个元素的计算结果映射到新数组对应的位置,相当于对数组整体上做了一次计算的映射,我们用下面简单的代码来解释这个操作:
var doubleArr = [1, 2, 3, 4, 5].map(function(item) {return item * 2;});console.log('after map called, got a new array with double numbers: ', doubleArr);如上面代码所示,我们希望将原数组每个元素都变为原来的2倍,使用map函数,获取到一个新的数组,新数组内的每个元素和原数组对应的元素都存在2倍的关系,我们可以看一下控制台的打印结果:
Array.prototype.some();
some函数会返回true如果数组内的一些元素满足指定回调函数的判定规则的话,反之如果没有任何元素满足这个规则,则返回false。例如下面这段代码我们可以判断数组内是否存在一些大于3的元素:
var someoneGreaterThan3 = [1, 2, 3, 4, 5].some(function(item) {return item > 3;});console.log('are there some elements in the array which is greater than 3? ', someoneGreaterThan3);因为数组内存在有大于3的元素,所以调用some函数预期会返回一个true,现在我们来看一下打印结果:
Array.prototype.every();
every跟some一样会返回true或false,唯一不同的是,every只有在数组内所有元素都满足判定条件时才会返回true,否则返回false。还是使用同样的数组,我们来做两次判定:
var arr = [1, 2, 3, 4, 5];var everyoneGreaterThan0 = arr.every(function(item) {return item > 0;});console.log('is that all elements are greater than 0? ', everyoneGreaterThan0);var everyoneGreaterThan3 = arr.every(function(item) {return item > 3;});console.log('is that all elements are greater than 3? ', everyoneGreaterThan3);上面代码中我们调用了两次every函数,分别判定是否所有元素大于0,是否所有元素大于3。根据我们自己的判断,分别应该返回true和false,打印结果确是如此: