JavaScript 数组元素 定位+迭代+汇总 ★

目录

1、数组元素定位：indexOf()，lastIndexOf()

2、数组迭代：forEach()，every()，some()

3、数组变换：map()，filter()，reduce()

4、reduce() 方法小练习，将数组变成对象

---

1、数组元素定位：indexOf()，lastIndexOf()

1.1 indexOf() 方法：返回某个元素值在数组中的第一个匹配项的索引，如果没有找到指定的值，则返回 -1。用法如下：

array.indexOf(searchElement[,fromIndex]);

//参数说明：
//1、array：表示一个数组对象。
//2、searchElement；必需参数，要在array中定位的值。
//3、fromIndex：可选参数，用于开始搜索的数组索引。如果省路该参数，则从索引 0 处开始搜索。
//    如果 fromlndex 大于或等于数组长度，则返回 -1。如果 fromlndex 为负，则搜索从数组长度加上 fromlndex 的位置处开始。
//4、indexOf 方法是按升序素引顺序执行搜素，即从左到右进行检索。
//    检索时，会让数组元素与scarchElement参敬值进行全等比较（===）。

var ar = ["ab","cd","ef","ab","cd"];
document.write(ar.indexof("cd"));    //1
document.write(ar.indexof("cd",2));  //4
document.write(ar.indexof("gh"));    //-1
document.write(ar.indexof("ab",-2)); //3

1.2、lastIndexOf() 方法：IastIndexOf 返回指定的值在数组中的最后一个匹配项的索引。用法与 indexOf 相同。

var ar = ["ab","cd","ef","ab","cd"];
document.write(ar.lastIndexOf("cd"));    //4
document.write(ar.lastIndexOf("cd",2));  //1
document.write(ar.lastIndexOf("gh"));    //-1
document.write(ar.lastIndexOf("ab",-3)); //0

2、数组迭代：forEach()，every()，some()

在 ES 5 之前数组迭代主要使用 for 语句实现，这种方式不是很方便，为此 ECMAScript5 新增了 5 个与迭代相关的方法。

forEach()	为数组中的每个元素调用定义的回调函数。
every()	检查定义的回调函数是否为数组中的所有元素返回 true。
some()	检查定义的回调函数是否为数组的任何元素返回 true。

2.1 forEach()：为数组中的每个元素执行指定的操作，具体用法如下：

array.forEach(callbackfun[value,index,array])

//1、array：一个数组对象。
//2、callbackfun：必需参数，最多可以接收 3 个参数的函数。
//    对于数组中的每个元素，forEach 都会调用 callbackfun 函数一次。
//3、thisArg：可选参数，callbackfun 函数中的 this 关键字可引用的对象。
//    用户可以使用最多3个参数来声明回调函数。回调函数的参数说明如下：
//    value：数组元素的值、index：数组元素的数字索引、array：包含该元素的数组对象。

forEach 方法不直接修改原始数组，但回调函数可能会修改它。

//下面这个例子，使用 forEach 迭代数组 letters，然后把每个元素的值和下标索引输出显示
function ShowResults (value,index,ar){
    document.write("value:"+value);
    document.write("index:"+index);
    document.write("<br />");
}
var letters = ['a','b','c'];
letters.forEach(ShowResults);

//输出结果如下：
//value:a index:0
//value:b index:1
//value:c index:2

//下面这个例子，使用 forEach 迭代数组 numbers，然后计算数组元素的和并输出。
var numbers = [10,11,12];
var sum = 0;
numbers.forEach(
    function addNumber(value){ sum += value;}
};
document.write(sum);    //33

2.2 every()：确定数组的所有成员是否满足指定的测试。具体用法如下：

array.every(callbackfun[value,index,array])

//1、array：必需参数，一个数组对象。
//2、calbackfun：必需参数，一个接收最多3个参数的函数。
//    every方法会为array中的每个元素调用callbackfun函数，直到callbackfun返回false，或直到到达数组的结尾。
//3、thisArg：可选参数，可在calbackfun函数中为其引用this 关键字的对象。
//    如果省略thisArg，则undefined将用作this值。

如果 callbackfun 函数为所有数组元素返回 true，则返回值为 true；否则返回值为 false。如果数组没有元素，则 every 方法将返回 true。every 方法会按升序顺序对每个数组元素调用一次 callbackfun 函数，直到 callbackfun 函数返回 false。如果找到导致 callbackfun 返回 false 的元素，则 every 方法会立即返回 false。否则，every 方法返回 true。every方法不为数组中缺少的元素调用该回调函数。下面例子，检测数组 numbers 中元素是否都为偶数，并进行提示：

function CheckIfEven(value,index,ar){
    if(value % 2 == 0)
        return true;
    else
        return false;
}
var numbers = [2,4,5,6,8];
if(numbers.every(checkIfEven))
    document.write("都是偶数。");
else
    document.write("不全为偶数。");    //2 4 5不全为偶数。

2.3 some()：确定指定的回调函数是否为数组中的任何元素均返回 true。具体用法如下：

array.some(callbackfun[,thisArg])

//array：一个数组对象。

//callbackfun：必需参数，最多可以接收 3 个参数的函数。
//some方法会为array中的每个元素调用callbackfun函数，直到callbackfun返回 ture，或者直到数组结尾

//thisArg：可选参数，callbackfun 函数中的 this 关键字可引用的对象。
//如果省略 thisArg，则 undefined将用作 this 值。

some 方法会按升序索引顺序对每个数组元素调用 callbackfun 函数，直到 callbackfun 函数返回 true。如找到导致 callbackfun 返回 true 的元素，则 some 方法会立即返回 true。如果回调不对任何元素返回 true，some 方法会返回 false。

下面例子，检测数组 numbers 中元素的值是否都为奇数。如果 some 方法检测到偶数，则返回 true，并提示不全是奇数，如果没有检测到偶数，则提示全部是奇数。

function CheckIfEven(value,index,ar){
    if(value % 2 == 0)
        return true;
}
var numbers = [1,15,4,10,11,22];
var evens = numbers.some(CheckIfEven);
if(evens)
    document.write("不全是奇数。");
else
    dooument.write("全是奇数");

3、数组变换：map()，filter()，reduce()

3.1 map()：对数组的每个元素调用定义的回调函数并返回包含结果的数组，（n → n）

let arr = [1,2,3,4,5];
let arr1 = arr.map(function(item){    //遍历数组的每一项，并对其进行平方操作
    return item*item;
})

let arr1 = arr.map( item => item*item ); //可以对上述函数进行箭头函数改写
console.log(arr1);    //[1,4,9,16,25]    map方法不会改变原数组


let arr = [0,1,2,2,3,3,3,4,4,5,5,6];
let arr2 = arr.map((i)=>{
  return {0:'周日',1:'周一',2:'周二',3:'周三',4:'周四',5:'周五',6:'周六'}[i]
})
console.log(arr2); //['周日', '周一', '周二', '周二', '周三', '周三', '周三', '周四', '周四', '周五', '周五','周六']

3.2 filter()：返回数组中的满足回调函数中指定的条件的元素，（n 变少）

let arr = [1,2,3,4,5,6];
let arr1 = arr.filter(function(item){    //遍历数组，并对各元素进行条件过滤
    if(item % 2 === 0)
        return true;
    else
        return false;
})

let arr1 = arr.filter(item => item%2===0);    //可对上述函数进行箭头函数改写
console.log(arr1);    //[2,4,6]


let scores = [95,91,59,55,42,82,72,85,67,66,55,91];    //找出成绩大于60的
let scores1 = scores.filter( n => n>= 60 );
console.log(scores1); //[95,91,82,72,85,67,66, 91]

3.3 reduce()：数组内元素调用指定回调函数，返回值是累计结果，并且此返回值在下一次调用该函数时作为参数：（n 变 1）

let arr = [1,2,3,4,5,6];

let sum = 0;
for(let i=0;i<arr.length;i++){    //对数组元素进行求和
    sum += arr[i];
}

let sum = arr.reduce((sum,item)=>{ return sum+item },0);    //可对上述代码进行改写，0代表sum的初始值
console.log(sum);    //21

（·）通过 reduce() 方法改写上面的 map() 方法的例子，将数组的数字每一项进行平方操作：

let arr = [1,2,3,4,5];
let arr1 = arr.map(function(item){    //通过map()遍历数组的每一项，并对其进行平方操作
    item = item*item;
})
let arr1 = arr.map( item => item*item ); //可以对上述函数进行箭头函数改写

//用reduce实现map，[]表示result的初始值
let arr1 = arr.reduce((result, item)=>{ return result.concat(item*item)},[]);
//这里之所以用concat()方法，是因为push()方法的返回值不是一个数组，而是数组push元素后的length

console.log(arr1);    //[1,4,9,16,25]

（·）通过reduce() 方法改写上面的 filter() 方法的例子，将数组中的偶数项提取从出来：

​let arr = [1,2,3,4,5,6];
let arr1 = arr.filter(function(item){    //遍历数组，并对各元素进行条件过滤
    if(item % 2 === 0)
        return true;
    else
        return false;
})
let arr1 = arr.filter(item => item%2===0);    //可对上述函数进行箭头函数改写


​let arr1 = arr.reduce((arr1,item)=>{ return item%2===0 ? arr1.concat(item) : arr1},[]);    //改写
​let arr1 = arr.reduce((arr1,item)=>{ return arr1.concat(item%2===0 ? item : [])},[]);    //进一步改写
console.log(arr1);    //[2,4,6]

4、reduce() 方法小练习，将数组变成对象

let arr = [
    {名称:'动物',id:1,parent:null},
    {名称:'狗',id:2,parent:1},
    {名称:'猫',id:3,parent:1}
}
//----------------------将上述数组转化为如下对象-------------------------------------------------------------
{
    id:1,名称:'动物',children:[
        { id:2,名称:'狗',children:null },{ id:3,名称:'猫',children:null }
    ]
}
//----------------------------------------------------------------------------------------------------------

arr.reduce((result,item) => {
    if(item.parent===null){
        result.id = item.id;
        result['名称'] = item['名称'];
    }else{
        result.children.push(item);
        delete item.parent;
        item.children = null;
    }
    return result;
},{id:null,children:[]});