数组API与遍历方法：find与findIndex-优快云博客

本文探讨数组的find和findIndex方法，它们在查找元素时略有不同。findIndex()返回符合条件的元素索引，而find()则返回元素本身。回调函数接收value、index和arr作为参数。如果未找到符合条件的元素，findIndex()返回-1，find()返回undefined。

 //数组我们从以下几个维度去学习
        //作用
        //参数
        //是否改变原数组
        //返回值

        //增加修改和删除 --改变原数组

        // 1.push();  
        // 作用:在数组末尾增加数据，可以是一个也可以是多个
        // 参数:数据，多个用逗号隔开
        // 是否改变原数组：改变
        // 返回值：返回增加后数组的长度

        var arr1 = [1, 2, 3];
        var resArr1 = arr1.push(4, 5, 6);
        console.log(arr1);
        console.log(resArr1);


        // 2.pop();
        // 作用:在数组末尾删除一个数据
        // 参数:无
        // 是否改变原数组：改变
        // 返回值：返回删除的数据
        var arr2 = [1, 2, 3];
        var resArr2 = arr2.pop();
        console.log(arr2);
        console.log(resArr2);

        // 3.unshift();
        // 作用:在数组开头增加数据，可以是一个也可以是多个
        // 参数:数据，多个用逗号隔开
        // 是否改变原数组：改变
        // 返回值：返回增加后数组的长度
        var arr3 = [1, 2, 3];
        var resArr3 = arr3.unshift("哈哈", {
            name: "哈哈"
        });
        console.log(arr3);
        console.log(resArr3);

        // 4.shift();
        // 作用:在数组开头删除一个数据
        // 参数:无
        // 是否改变原数组：改变
        // 返回值：返回删除的数据
        var arr4 = [1, 2, 3];
        var resArr4 = arr4.shift();
        console.log(arr4);
        console.log(resArr4);

        //5.其它方式
        //增加的其它方式(末尾增加)
        var arr5 = [1, 2, 3];
        arr5[arr5.length] = 1000;
        console.log(arr5);

        //删除的其它方式（删除数组末尾最后一项）
        var arr6 = [1, 2, 3];

        //length可读可写的属性
        console.log(arr6.length);
        // arr6.length = 100;
        // console.log(arr6);
        arr6.length--;
        console.log(arr6);


        //6.splice();  数组的增加  修改 和删除
        //(1)splice();  默认截取数组末尾  n:开始的索引
        //将截取的部分以一个新的数组进行返回
        //改变原数组
        var arr7 = [10, 20, 30, 40];
        var resArr7 = arr7.splice(1);
        console.log(arr7); //[10]
        console.log(resArr7); //[20,30,40]

        //(2)splice(n,m); //n:开的索引  m：个数
        //将截取的部分以一个新的数组进行返回
        //改变原数组
        var arr8 = [10, 20, 30, 40, 1, 2, 3, 4, 100];
        var resArr8 = arr8.splice(3, 3);
        console.log(arr8); //[10, 20, 30, 3, 4, 100]
        console.log(resArr8); //[40,1,2]

        //(3)splice(n,m,content...)  //n:开的索引  m：个数  content...:替换的内容  修改
        //作用：将截取的部分以content...进行替换
        //将截取的部分以一个新的数组进行返回
        //改变原数组
        var arr9 = [10, 20, 30, 40, 1, 2, 3, 4, 100];
        var resArr9 = arr9.splice(3, 3, "哈哈", {
            name: "哈哈"
        }, "嘿嘿");
        console.log(arr9);//[10,20,30,"哈哈",{name:"哈哈"}，"嘿嘿",3,4,100]
        console.log(resArr9);//[40,1,2]


        //(4)splice(n,0,content..);    增加 从哪个索引开始就会增加到那个索引的前边
        //将截取的部分以一个新的数组进行返回
        //改变原数组
        var arr10 = [10, 20, 30, 40, 1, 2, 3, 4, 100];
        var resArr10 = arr10.splice(3, 0, "哈哈", {name: "哈哈"}, "嘿嘿");
        console.log(arr10);//[10, 20, 30, "哈哈", {…}, "嘿嘿", 40, 1, 2, 3, 4, 100]
        console.log(resArr10);  //[]

  // 不兼容  IE6-8
        //1.indexOf(search,idnex)  首次出现的索引/lastIndexOf(search,index);  最后一次出现的索引

        var arr = [1,2,3,4,1,5];
        console.log(arr.indexOf(1,2));
        console.log(arr.lastIndexOf(3));


        //2.slice(starIndex,endIndex);  数组截取   endIndex:不包含结束索引
        //不改变原数组
        //返回值：把截取的内容以一个新的数组返回
        var arr1 = [1,2,3,4,1,5,100,200];
        var resArr1 = arr1.slice(1,5);
        console.log(resArr1);
        console.log(arr1);

        //3.concat(数据...);  数据的拼接
        //不改变原数组
        //返回一个新的数组
        var arr2 = [1,2,3,4,1,5,100,200];
        var arr3 = ["哈哈","嘿嘿"]
        var resArr4 = arr2.concat(arr3,"你好",[100,200,300]); 
        console.log(resArr4);

        //4.reverse();
        //改变原数组
        //返回值：改变后的数组
        var arr5 = [1,2,3,4];
        var resArr5 = arr5.reverse();
        console.log(arr5);
        console.log(resArr5);


        //5.join("连接符");  将数组转为字符串

 var arr = [100, 200, 10, 20, 30, 10, 2, 3, 1, 7, 888];
        //迭代：循环遍历

        //函数式（关心实现细节）
        //声明式 （不需要关心实现细节使用就好）

        //IE6~8不兼容
        //都不会改变原数组
        //every:判断一个数组中的数据是否都符合条件都符合返回true 否则返回false
        var resBoool = arr.every(function (value, index, array) {
            console.log(value, index, array)
            return value > 1;
        });
        console.log(resBoool);

        //some:判断一个数组中的数据是否都符合条件只要有一个符合就返回true 否则就返回fasle 
        var resBoool1 = arr.some(function (value, index, array) {
            console.log(value, index, array)
            return value > 1000;
        });
        console.log(resBoool1);

        //filter  过滤数组中的数据 将符合条件的以一个新的数组返回
        var resArr1 = arr.filter(function (value, index, array) {
            console.log(value, index, array)
            return value % 2 == 0;
        });
        console.log(resArr1);

        //map：迭代当前数组，会返回一个新的数组
        console.log(arr);
        var resArr2 = arr.map(function (value, index) {
            console.log(value, index);
            //将原来数据扩大10倍
            return value * 10;
        });
        console.log(resArr2);

        //forEach：迭代当前数组  undefined 没有返回值
        //参数:function(value,index,array){...}
        var resArr3 = arr.forEach(function (value, index) {
            // console.log(value, index);
            // //将原来数据扩大10倍
            // return value * 10;
        });
        console.log(resArr3);

        //Array.isArray(数据);  判断是否一个数组   IE6~8不兼容 类方法
        //返回值布尔值
        console.log(Array.isArray([]));
        console.log(Array.isArray([1,2,"哈哈"]));
        console.log(Array.isArray({}));
        console.log(Array.isArray(1));

		find() //该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。

		//	以下代码在myArr数组中查找元素值大于4的元素，找到后立即返回。返回的结果为查找到的元素：
	
		const myArr=[1,2,3,4,5,6];
		var v=myArr.find(value=>value>4);
		console.log(v);// 5

回调函数有三个参数。value：当前的数组元素。index：当前索引值。arr：被查找的数组。查找索引值为4的元素：

const myArr=[1,2,3,4,5,6];
var v=myArr.find((value,index,arr)=>{
    return index==4
});
console.log(v);// 5

findIndex()
findIndex()与find()的使用方法相同，只是当条件为true时findIndex()返回的是索引值，而find()返回的是元素。如果没有符合条件元素时findIndex()返回的是-1，而find()返回的是undefined。findIndex()当中的回调函数也是接收三个参数，与find()相同。

const bookArr=[
    {
        id:1,
        bookName:"三国演义"
    },
    {
        id:2,
        bookName:"水浒传"
    },
    {
        id:3,
        bookName:"红楼梦"
    },
    {
        id:4,
        bookName:"西游记"
    }
];
var i=bookArr.findIndex((value)=>value.id==4);
console.log(i);// 3
var i2=bookArr.findIndex((value)=>value.id==100);
console.log(i2);// -1

//1.sort(function(a,b){
    //   return a - b;   升序
    // })方法   a,b:数组的后一项  和  前一项

    //sort(function(a,b){
    //   return b - a;   降序
    // })方法   a:数组的后一项   b: 前一项

    //返回值：排序后的数组
    //改变原来数组