JavaScript数组(二,ES6部分)

前言

上次介绍了ES5之前发布的JS的数组方法,这次再看一下ES5中发布的JS方法。

正文

  1. indexOf()和lastIndexOf()

描述:

indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。

lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。

应用:

这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时,会使用全等操作符。

exp:

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2(5在该数组的第2位)
console.log(arr.lastIndexOf(5)); //5(从后向前,5在数组的第5位)
console.log(arr.indexOf(5,2)); //2(从第二位开始检索,任然2在第5位)
console.log(arr.lastIndexOf(5,4)); //2(从倒数第四位开始检索,5在倒数第四位)
console.log(arr.indexOf("5")); //-1(数组中没有字符"5",所以返回-1)
  1. forEach()

描述:

对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型,默认有传参,参数分别为:遍历的数组内容;第对应的数组索引,数组本身。

应用:

用于遍历数组,获得数组成员的内容,索引
,及其数组本身
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + ‘|’ + index + ‘|’ + (a === arr));
});
// 输出为:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

  1. map()

描述:

遍历一个数组,并且经过处理后返回一个新的数组。

原型:

arr.map(function(currentValue,index,arr),thisValue)

currentValue 必须 当前元素值

index 可选 当前元素的索引值

arr 可选 当前元素属于的数组对象。

exp:通过map方法返回数组元素的平方

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

注意,map()方法不会改变原数组,而是返回一个新的数组,注意function中药返回值,否则为空数组

exp2:

var arr = [1,2,3,7,9];
var arr2 = arr.map(function(x,index,a){
   x=x+1;
 });
 console.log(arr2);//[undifined,undifined,undifined,undifined,undifine]
 console.log(arr);//[1,2,3,7,9]

即使在map()的函数中改变currentValue的值,原数组的职业不会改变。而如果没有返回值,则该数组为undefined。

  1. filter()

描述:

“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。

原型:array.filter(function(currentValue,index,arr), thisValue)

currentValue 必须。当前元素的值

index 可选。当前元素的索引值

arr 可选。当前元素属于的数组对象

exp:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

该方法的注意事项和上一个方法差不多,也是不会改变原数组,并且必须要有返回值,否则数组为undefined。

  1. every()

描述: 判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true

原型:array.filter(function(currentValue,index,arr), thisValue)

currentValue 必须。当前元素的值

index 可选。当前元素的索引值

arr 可选。当前元素属于的数组对象

应用:

检测数组所有元素是否都符合指定条件(通过函数提供)。

exp:

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false
  1. some()

描述:

判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true

应用:

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

exp:

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

注意:

some() 方法会依次执行数组的每个元素:

如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。

如果没有满足条件的元素,则返回false。

  1. reduce()和 reduceRight()

描述:

这两个方法都会实现迭代数组的所有项,然后构建一个最终返回的值。reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。

原型(以reduce为例):

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

total 必需。初始值, 或者计算结束后的返回值。

currentValue 必需。当前元素

currentIndex 可选。当前元素的索引

arr 可选。当前元素所属的数组对象。

exp:

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(total, currentValue, currentIndex, arr){
return total + currenValue;
},10);
console.log(sum); //25

最后

这是ES6中提供的数组方法,对于ES6,我还没有认真研究,不过这些方法还是挺实用的,对于低版本的浏览器可能会不支持。感觉开发中还是要针对需求使用。

Powered by Hexo and Hexo-theme-hiker

Copyright © 2019 - 2024 My Wonderland All Rights Reserved.

UV : | PV :