likes
comments
collection
share

常用数组方法总结

作者站长头像
站长
· 阅读数 19

1. map 方法

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

    说人话:按照某种映射关系, 把数组的每一个元素给修改了

  2. 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 方法

  1. 数组 filter 方法

作用: 筛选数组

  1. 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 方法

  1. 数组forEach方法作用: 遍历数组

    • 应用场景: 和 for(let i=0;i<arr.length;i++){} 功能一致
  2. 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 方法

  1. 数组some方法作用: 判断数组中 是否 有符合条件 的元素

    • 应用场景: 非空判断(判断多个表单元素,有没有空文本)
  2. 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 方法

  1. 数组every方法作用: 判断数组中 是否 所有的元素 都 满足条件

    • 应用场景: 开关思想 (购物车全选框)
  2. 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 方法

  1. 数组 findIndex方法作用: 查找 元素的下标

    • 数组的 findIndex 与 indexOf 异同点

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

不同点:应用场景不同

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

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

  1. 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 方法

  1. 数组reduce方法 : 数组 累加器 方法

    • 对数组每一个元素执行一次回调函数 , 累加最后一次回调的结果
  2. 参数

    第一个参数:回调 ( 上一次值 , 当前值 , 当前下标 )=>{ }

    • 默认下标不是从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
评论
请登录