赵工的个人空间


网络课堂部分转网页计算部分转编程演练

 JS使用技巧

首页 > 网络课堂 > JS使用技巧 > JS操作数组的常用方法
JS操作数组的常用方法

JavaScript中经常需要使用数组,一般的数组是使用数值为元素下标,也就是索引值,下标以0开始。

1.通过元素值查找索引:

如果需要在数组中查找某个元素值的下标值,可以使用indexOf()或lastIndexOf()方法。示例:

var animals=new Array('dog','bear','cat','lion','cock','cat','monkey','donkey','horse');
console.log(animals.indexOf('cat'));
console.log(animals.lastIndexOf('cat'));

两个方法都返回表示数组元素的索引(即下标),如果没有找到相同的值就返回-1。不过,indexOf()返回找到的第一个元素,lastIndexOf()返回找到的最后一个元素。两个方法还都可以接受一个开始索引,设定开始搜索的位置:

console.log(animals.indexOf('cat',2));
console.log(animals.lastIndexOf('cat',4));

与此类似,还有一个findIndex()方法:

var nums=[2,4,8,25,7,66,32,7,5];
var over=nums.findIndex(function(element){return (element>=10);});

这个方法可以接受一个回调函数,返回传入符合条件的数组第一个元素位置。还有一个find()方法,使用方法与此类似。

2. 删除或替换数组元素:

使用indexOf()及类似方法查找到元素位置后,可以使用splice()方法删除/替换数组元素。示例:

var animals=new Array('dog','bear','cat','lion','cock','cat','monkey','donkey','horse');
animals.splice(animals.indexOf('lion'),1);
animals.splice(animals.lastIndexOf('cat'),1,'duck');

splice()方法接受3个参数,第1个参数是必须的,指定拼接处的索引,第2个参数指定删除元素的数目,可选;第3个参数为一组替换元素,可选。如果索引是负值,将从数组末尾开始拼接元素。如果没有提供指定元素的数目,就从索引到末尾的所以元素都将删除。替代元素可以是一个集合,用逗号隔开。

3. 提取一个数组的一部分:

可以使用slice()方法来提取一个数组的一部分,返回一个新数组:

var animals=new Array('dog','bear','cat','lion','cock','cat','monkey','donkey','horse');
var newArr=animals.slice(4,7);

但如果数组元素是Object,两个数组都指向相同的Object,在任何数组中修改Object,都会在另一个数组中反映出来。如果数组元素只是基本数据类型,如字符串或数字,会按照数值来复制,对其中一个数组中的值进行修改,并不会影响到另一个数组中的内容。

4. 遍历数组:

一般使用forEach()方法来遍历数组,对数组中的每个元素执行相同的操作:

var charSets=['ab','bb'.'cd','ab','cc','ab','dd'];
function replaceElement(element,index,array){
  if(element=='ab') array[index]='**'; }
charSets.forEach(replaceElement);

forEach()方法可以接受回调函数,该函数有3个参数,数组元素、元素的索引和数组,只有第1个元素是必须的。这个回调函数不能有返回值。

map()方法也遍历数组,但返返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组:

var decSets=[23,56,77,21,8,99,135];
var hexSets=decSets.map(function(element){
  return element.toString(16);
});

5. 创建一个过滤后的数组:

使用Array的filter()方法可以过滤数组元素:

var charSets=['**','bb'.'cd','ab','**','ab','dd'];
var newSets=charSets.filter(function(element){
  return (element!=='**');
});

filter()方法也是将一个回调函数应用于每一个数组元素。作为参数传递给filter()方法的函数返回一个布尔值,它根据测试数组元素的结果来返回,这个返回值决定了该数组元素是否添加到一个新的数组中,如果返回true将会添加,否则将不会添加。函数有3个参数,数组元素、可选的该元素的索引和最初的数组。

6. 验证数组内容:

使用every()方法来检查每个元素符合给定的条件:

function testValue(element,index,array){
  var textExp=/^[a-zA-Z]+$/;
  return textExp.test(element);
};
var elemSets=['**','bb'.'cd','ab','**','ab','dd'];
var result=elemSets.every(testValue);

也可以使用some()方法,确保至少某些元素符合该条件:

var result=elemSets.some(testValue);

当使用every()方法时,只要该函数返回一个false值,处理就会结束,并且该方法也返回false。而some()方法将继续测试每个数组元素,直到回调函数返回true,此时不再验证其他元素,该方法返回true;然而如果回调函数测试了所有元素,没有返回true,该方法返回false。如果要求所有元素都必须满足条件,要使用every()方法,否则使用some()。回调函数接受3个参数,元素、可选的该元素索引和数组。

7. 使用数组遍历querySelectorAll()的结果:

querySelectorAll()方法返回的是一个NodeList集合,并不是数组,但可以使用forEach()方法当作数组来进行处理。

var cells=document.querySelectorAll('td+td');
[].forEach.call(cells,function(cell){
  sum+=parseFloat(cell.firstChild.data);
});

为了让forEach()和NodeList一起使用,在一个空的数组上调用该方法,然后在该对象上使用call(),从而在NodeList上模拟了一个Array的效果。

8. 使用关联数组Associative array:

如果要存储表单元素的名称和值,便于验证,就需要使用关联数组。关联数组的索引不是数值,而是元素标识符:

var elemArray=new Object();
var elem=document.forms[0].elements[0];
elemArray[elem.id]=elem.value;

遍历关联数组要把keys()和forEach()组合起来:

Object.keys(elemArray).forEach(function(key){
  var value=elemArray[key];
  console.log(value);
});

Copyright@dwenzhao.cn All Rights Reserved   备案号:粤ICP备15026949号
联系邮箱:dwenzhao@163.com  QQ:1608288659