常用数组方法总结

站长

2023年02月09日 00:32 · 阅读数 20

1. map 方法

数组map方法作用: 映射数组

说人话：按照某种映射关系, 把数组的每一个元素给修改了
map方法特点

2.1 回调函数执行次数 == 数组长度

2.2 回调函数内部的return
- return 新数组的元素
- 如果没有return, 则map的返回值都是undefined
2.3 map方法的返回值
- 返回映射之后的新数组

 <script>
//  需求：全场8折:  数组的每一个元素 * 0.8 
 let arr = [ 88,90,100,20,50 ]

//  完整写法
 let res =  arr.map( (item,index) => {
     return item*0.8
 } )
  console.log(res);  //  [70.4, 72, 80, 16, 40]

// 箭头函数如果形参只有一个可以省略小括号， 如果函数体只有一行可以省略大括号(必须省略return)
 let res1 =  arr.map( item=>item*0.8 )
 console.log( res1 )  //  [70.4, 72, 80, 16, 40]       
 </script>

2. filter 方法

数组 filter 方法

作用: 筛选数组

filter 方法特点

2.1 回调函数执行次数 == 数组长度

2.2 回调函数内部的return
- return true : 符合筛选条件,放入新数组中
- return false : 不符合筛选条件,不放入新数组中
2.3 filter 方法的返回值
- 返回筛选之后的新数组

<script>
// 需求: 求数组中所有大于 10 的元素

let arr = [88, 99, 1, 5, 100];

//  1.  完整写法
let res = arr.filter((item, index) => {
       //  console.log(item);  // 88,99,1,5,100
  if (item >= 10) {
    return true;
  } else {
    return false;
  }
});
console.log(res); //  [88, 99, 100]

 // 2. 精简写法
let res1 = arr.filter((item) => item >= 10);
console.log(res1);  // [88, 99, 100]
</script>

3. forEach 方法

数组forEach方法作用: 遍历数组
- 应用场景: 和 for(let i=0;i<arr.length;i++){} 功能一致
for Each方法特点

2.1 回调函数执行次数 == 数组长度

2.2 回调函数内部的return
- 没有返回值
2.3 forEach方法的返回值
- 没有返回值

<script>

let arr = [60,88,99]

   arr.forEach((item,index)=>{
       console.log(item,index)   // 60 0   88 1   99 2
   })

</script>

4. some 方法

数组some方法作用: 判断数组中是否 有符合条件 的元素
- 应用场景: 非空判断（判断多个表单元素，有没有空文本）
some方法特点

2.1 回调函数执行次数 != 数组长度

2.2 回调函数内部的return
- return true : 循环结束。找到了满足条件的元素
- return false : 循环继续。没找到，循环继续。如果所有元素全部遍历还是没找到，最终结果就是false
2.3 some方法的返回值
- true : 有符合条件的元素
- false : 没有符合条件的元素

<script>

* 举例 ： 判断数组中有没有负数
  let arr = [10,20,50,60,70,80]
 //   标准写法
//    let res = arr.some((item,index)=>{
//        if( item < 0 ){
//            return true
//        }else{
//            return false
//        }
//    })

  //简写
 let res = arr.some(item=>item < 0)
 console.log( res ) // false

</script>

5. every 方法

数组every方法作用: 判断数组中是否 所有的元素 都满足条件
- 应用场景: 开关思想 (购物车全选框)
every方法特点

2.1 回调函数执行次数 != 数组长度

2.2 回调函数内部的return
- return true : 循环继续, 满足条件,如果所有的元素全部遍历还是true,则最终的结果就是true
- return false : 循环结束。只要要到不满足条件的元素，循环结束。最终的结果false
2.3 every方法的返回值
- true : 所有的元素都符合条件
- false : 有元素不符合条件

<script>
  
* 举例 ： 判断数组中是不是都是正数
 let arr = [10,20,50,60,70,80]
   //标准写法
 let res = arr.every((item,index)=>{
     if( item >= 0 ){
         return true
     }else{
         return false
     }
 })
 console.log(res)  // true

 // 简写
 let res1 = arr.every(item=>item >= 0)
 console.log( res1 ) // true

</script>

6. findIndex 方法

数组 findIndex方法作用: 查找 元素的下标
- 数组的 findIndex 与 indexOf 异同点

相同点：功能一致，都是查找元素下标。有则返回下标，无则返回固定值-1

不同点：应用场景不同

indexOf : 查找数组中的元素都是值类型

findIndex : 查找数组中的元素都是引用类型

findIndex方法特点

2.1 回调函数执行次数 != 数组长度

2.2 回调函数内部的return
- return true : 循环结束。找到了,此时返回值就是下标
- return false : 循环继续。没找到，循环继续。如果所有元素全部遍历还是没找到, 最终结果就是 -1
2.3 findIndex 方法的返回值
- 元素下标或者 -1

<script>
  let arr = [
   {name:'张三',age:20},
   {name:'李四',age:18},
   {name:'王五',age:16},
 ]

//需求：找名字为王五的人在哪里
   let res = arr.findIndex(item=>{
       if( item.name == '老五' ){
           return true
       }else{
           return false
       }
   })
   console.log(res);  // -1

   //简写
  let res1 = arr.findIndex(item=>item.name == '王五')
  console.log(res1)   // 2
</script>

7. reduce 方法

数组reduce方法 : 数组累加器方法
- 对数组每一个元素执行一次回调函数 , 累加最后一次回调的结果
参数

第一个参数：回调 ( 上一次值 , 当前值 , 当前下标 )=>{ }
- 默认下标不是从0开始，而是从1开始。开发中一般需要设置默认值
- return 值就是下一次 sum的值

第二个参数: 初始值

一般需要设置初始值为 0, 如果不设置遇到空数组则会报错

reduce方法返回值是：最后一次 sum 的结果

<script>
  //  需求: reduce场景: 数组元素求和、求数组元素最大值
    let arr = [20,55,60]

   let res = arr.reduce( ( sum,item,index )=>{
     
        console.log( sum,item,index)  //  0 20 0    20 55 1   75 60 2
        return sum + item

    } , 0 )
   console.log(res);  //  135

  //简写
  let res1 = arr.reduce( ( sum,item )=>sum + item , 0 )
  console.log( res1 )  //  135
</script>

8. from 方法

伪数组转真数组

<script>
  // 伪数组 本质是 :对象
  let obj = {
    0: 88,
    1: 66,
    2: 33,
    3: 11,
    length: 4,
  };
 console.log(obj);  //  {0: 88, 1: 66, 2: 33, 3: 11, length: 4}

  // 伪数组转真数组   Array.from(伪数组)
  console.log(Array.from(obj));   // [88, 66, 33, 11]
</script>

9. join 方法

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

arr.join ( '分隔符' ) : 把数组每一个元素拼接成字符串

var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"

10. find 方法

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const arr = [5, 12, 8, 130, 44];

const res = arr.find(item => item > 10);

console.log(res);  //  12

11. includes 方法

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

const array1 = [1, 2, 3];
console.log(array1.includes(2));    //  true

const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));   //  true
console.log(pets.includes('at'));   //  false

转载自:https://juejin.cn/post/7095937117108305934