前端JS-数组方法03| “朝闻道”知识分享大赛

[2201_75824342]

这是我参加朝闻道知识分享大赛的第60篇文章。

---

5、 数组位置操作

5-1 ndexOf()，lastIndexOf()

1. 两者会搜索整个数组中具有给定值的元素，并返回要查找的元素在数组中的第一个索引位置，或者在没找到返回-1；
2. 这两个方法都是接收两个参数：要查找的项和（可选的）表示查找起点位置的索引；其中，indexOf()方法从数组的开头（位置为0）开始向后查找，lastIndexOf方向则从数组的末尾开始向前查找。

var numbers = [1,2,3,4,5,4,3,2,1];
console.log(numbers.indexOf(4));  // 3
console.log(numbers.lastIndexOf(4));  // 5
console.log(numbers.indexOf(4,4));   // 5   从索引4位置往后找“4”这个元素；
console.log(numbers.lastIndexOf(4,4)) // 3  从索引4位置往前找|“4”这个元素；

 

第二个参数也可以是负数，即为数组长度加上该负数的值为查找的索引开始位置，或者从后往前定位

var numbers = [1,2,3,4,5,4,3,2,1];
console.log(numbers.indexOf(4,-5));  // 5

 

字符串也有indexOf()和lastIndexOf()方法，它们和数组的方法功能类似，也可以重写，如

var arr = [1,2,3];
arr.push(4,5);
console.log(arr);
Array.prototype.push = function(){
    for(var i=0; i<arguments.length; i++)
        this[this.length] = arguments[i] * arguments[i];
}
arr.push(6,7);
console.log(arr);

 

6、 遍历数组

数组的遍历就是通过索引挨个取出数组元素；遍历目的是为了读取所有元素或者处理所有元素；使用for循环是遍历数组最常见的方法

var cities = ["beijing","nanjing","bengbu"];
for(var i=0;i<cities.length;i++) console.log(cities[i]);
for(var a in cities) console.log(a,cities[a]);
var o ={name:"aini",age:18,sex:true,hobby:"reading"};
var keys = Object.keys(o); // 把对象的属性放到数组里返回
console.log(keys);  
var  values = [];
for(var i=0,len=keys.length;i<len;i++){
  // values[i]=o[keys[i]]
  values.push(o[keys[i]]);
}
console.log(values);

7 、遍历数组的迭代方法

7-1 forEach()

遍历数组，为每个元素调用指定的函数；该函数使用三个参数：数组元素、元素索引和数组本身；此方法没有返回值，本质上与使用for循环迭代数组一样

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,array){
    console.log(item,index,array[index]);
});

第一个参数：// 数组元素；
第二个参数：// 数组索引；
第三个元素：// 数组对象本身

 

如果只关心数组元素的值，可以只使用一个参数，额外的参数将被忽略

// 求和
var data = [1,2,3,4];
var sum = 0;
data.forEach(function(value){  //第一个参数数组元素，相当于遍历多有元素；
    sum += value;   //不会改变原数组元素；
});
console.log(sum);

（1）forEach()方法无法在所有元素都被传递给调用的函数之前终止遍历，即没有像for循环中使用的break语句；
（2）如果要提前终止，必须把forEach()方法放在try块中，并能抛出一个异常：

    function foreach(a,f,t){
    try{a.forEach(f, t);}
    catch(e){
        if(e === foreach.break) return;
        else throw e;
    }
}
foreach.break = new Error("StopIteration");

7-2 every()，some(）

1. 最相似的是every()和some()，它们都是数组的逻辑判定：用于判定数组元素是否满足某个条件；
2. 对every()，传入的函数必须对每一项都返回true，这个方法才返回true；
3. 而some()是只要传入的函数对数组中的某一项返回true，就会返回true，否则返回false
4. 一旦every()和some()确定该返回什么值时，它们就会停止遍历数组元素；
5. some()在判定函数第一次返回true后就返回true，但如果判定函数一直返回false，它将会遍历整个数组；every()恰好相反，它在判定函数第一次返回false后就返回false，但如果判定函数一直返回true，它将会遍历整个数组）。
6. 根据数学上的惯例，在空数组上调用时，every()返回true，some()返回false；

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
    return (item > 2);
});
console.log(everyResult);  // false
var someResult = numbers.some(function(item,index,array){
    return (item > 2);
});
console.log(someResult);    // true

 

7-3 filter()方法

（1）返回的是数组元素是调用的数组的一个子集；
（2）回调函数是用来逻辑判定的，该函数返回true或false；如果返回的是true或真值，则该函数处理的数组元素就被添加到返回的子集数组中；
  (3）filter()方法会跳过稀疏数组中缺少的元素，它的返回数组总是密集的

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item,index,array){
    return item>2;
});
console.log(filterResult);
var evenResult = numbers.filter(function(value,index){
    return index % 2 == 0;  // [1, 3, 5, 3, 1] index是索引
});
console.log(evenResult);
// 压缩稀疏数组
var sparse = [1,,,4];
var dense = sparse.filter(function(){
    return true;  //过滤稀疏元素
});
console.log(dense);
// 压缩并删除undefined和null元素
var sparse = [1,null,3,undefined,,6];
var dense = sparse.filter(function(v){
    return v !== undefined && v != null;
});
console.log(dense);

 

7-4 map()

（1） 将调用的数组的每个元素传递给回调函数，并将调用的结果组成一个新数组返回；
（2） 其不会修改原始数组，如果是稀疏数组，返回的也是相同方式的稀疏数组，即具有相同的长度、

相同的缺失元素；

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item,index,array){
    return item*2;
});
console.log(mapResult);
var a = [1,null,3,undefined,5];
var b = a.map(function(v){
    return v * v;
});
console.log(b);

 

不做任何处理

var spare = [1,,4,null,undefined,NaN,6];
var dense = spare.map(function(v,i,a){
});
console.log(dense);

 

返回所有数组元素

var dense = spare.map(function(v,i,a){
 return v;
});
console.log(dense);

 

能处理的元素进项处理，空元素返回空元素

var spare = [1,,4,null,undefined,NaN,6];
var dense = spare.map(function(v,i,a){
 return v*v;  //进行数据类型转换，由于null和undefined不能进行数据类型转换});
console.log(dense)     //，所以都返回NaN

 

7-5 reduce()和reduceRight()

（1） reduce()和reduceRight()；这两个方法都会迭代数组的所有项，然后构建一个最终返回的值；
（2）reduce()方法从数组的第一项开始，逐个遍历到最后；而reduceRight则从数组的最后一项开始，向前遍历到第一项；
（3） 这两个方法都接收两个参数：调用的函数callbackfn和作为归并基础的初始值initialValue（可选的）；
（4） 这个函数接收4个参数：前一个值、当前值、项的索引和数组对象；其返回的任何值都会作为第一个参数自动传给下一项；第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项

使用reduce()方法可以执行求数组中所有值之和的操作，如

// 求和
var values = [1,2,3,4];
var sum = values.reduce(function(prev,cur,index,array){
    return prev + cur;
});
console.log(sum);   // 10

 

reduce()方法的第二个参数initialValue是回调函数的第一个参数previousValue的初始值；如：

// 把以上所有示例添加第二个参数，如：
var values = [1,2,3,4];
var sum = values.reduce(function(prev,cur){
    return prev + cur;
},2);  // 12

pre不是第一项，而是给pre赋一个值，cur从第一项开始迭代

 

在空数组上，不带初始值参数的reduce()将导致类型异常；如果数组只有一个元素并且没有指定初始值，或者一个空数组并且指定了一个初始值，该方法只是简单的返回那个值而不会调用回调函数；

var a = [];
// var b1 = a.reduce(function(x,y){return x + y});  //no initial value  会报错
// var b2 = a.reduce(function(x,y){return x + x});  //也会报错
var b3 = a.reduce(function(x,y){return x + y},3); //只返回初始值
​
console.log(b3);  // 3

（1）使用reduce()还是reduceRight()，主要取决于要从哪头开始遍历数组；除此之外，它们完全相同。
（2）reduce()和reduceRight()是典型的函数式编程；有些地方，会把其回调函数称为化简函数，这个化简函数的作用就是用某种方法把两个值组合或化简为一个值，并返回化简后的值；如以上的示例，化简函数通过各种方法，组合了两个值