ES6数组方法

最新推荐文章于 2024-04-26 09:54:36 发布

玲娜贝儿1001

最新推荐文章于 2024-04-26 09:54:36 发布

阅读量919

点赞数 5

文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/d123123666/article/details/128181223

版权

前两天学习了一下ES6中数组常用的一些方法，总结了一下它们的用法，主要有以下这八个：

1、数组遍历方法（for、forEach）

let arr = [1, 2, 3, 4, 5];
/* 第一种遍历方法 */
for (var i = 0; i < arr.length; i++) {
   console.log(arr1[i]);
}
/* 第二种遍历方法 */
for (var j in arr) {
   console.log(arr[j]);
}
/* 第三种遍历方法 */
/**
*forEach()方法接收一个回调函数，参数有三个，分别是每一项，当前项的索引、以及原数组。forEach()函数没有返回值。
*/
arr.forEach(function (a, b, arr) {
    console.log('数值' + a, '下标' + b, '数组' + arr);
/* 
a 表示数组每一项
b 表示数组每一项下标
arr 表示原始数组（一般不使用）
*/
})

2、数组方法map映射

map()不改变原数组，可以在函数内部做一些操作，返回处理后的数组。

需要注意的是：调用map()一定要把结果 return出来。如果没有 return, 则返回undefined。

let arr = [1,2,3,4]
 // item：当前项，index：当前索引，arr：原数组
const result  = arr.map((item, index, arr)=> {
      if(item >2) {
        return item
      }
    })
    console.log(result);//[3,4]

示例：判断数组所对应的的状态是否及格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        let scroe = [12, 77, 88, 99, 33, 100, 59];
        let result = scroe.map(item => item >= 60 ? '及格' : '不及格');
        console.log(scroe)//不改变原数组
        console.log(result)
    </script>
</html>

3、filter()

filter()方法：用于过滤的方法，但是也可以遍历数组，它返回符合条件的新数组，不会影响原数组。

let person = [{
  name:'zhangsan',
  age:26
},{
  name:'lisi',
  age:28
},{
  name:'wangwu',
  age:23
}]
let age = person.filter(item=> item.age === 23)
console.log(age)// [{  age: 23,  name: "wangwu"}]
//
let arr = [1,2,3,4]
 // item：当前项，index：当前索引，arr：原数组
const result = arr.filter((item, index, arr) => {
   return item <3
})
console.log(result); //  [1, 2]

4、.reduce()

reduce()方法，一般用于求和，它是一个比较特殊的方法，一共有四个参数。 reduce()方法最重要的作用就是累加的操作，将数组的每个元素从左往右依次执行累加器，返回最终的处理结果。不会影响原数组。

 let arr = [1,2,3,4]
// sum:上一次的值，item：当前值，index：当前索引，arr:原数组
const result = arr.reduce((sum, item, index, arr) => {
  return sum += item
  }, 0)
// 这里的0，是一个初始值，意思是从0开始计算
// 因为我这里做的是加法运算，所以返回的是累加的和
 console.log(result); // 10

对象里的属性求和

let person =[{
  name:'zhangsan',
  age:26
},{
  name:'lisi',
  age:28
},{
  name:'wangwu',
  age:23
}]
let age = person.reduce((num, item) =>{
 return num+ item.age;
}, 0);
console.log(age)//77

5、.find()

find()方法，用于查找数组中是否有满足条件的元素，当找到第一个满足条件的元素时，则直接返回该元素。如果都不满足条件，则返回 undefined。不会改变原数组。

let person = [{
  name:'zhangsan',
  age:26
},{
  name:'lisi',
  age:28
},{
  name:'wangwu',
  age:23
}]
let age = person.find(item => item.age === 23);
console.log(age)//{  age: 23,  name: "wangwu"}

6、.some()

检测数组中的元素是否满足某个条件。

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

let person =[{
  name:'zhangsan',
  age:26
},{
  name:'lisi',
  age:28
},{
  name:'wangwu',
  age:23
}]
let age = person.some(item => item.age > 28);
let age2 = person.some(item => item.age > 26);
console.log(age)//false
console.log(age2)//true

7、.every()

检测数组所有元素是否都符合某个条件

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

let person = [{
  name:'zhangsan',
  age:26
},{
  name:'lisi',
  age:28
},{
  name:'wangwu',
  age:23
}]
let age = person.every(item => item.age > 26);
let age2 = person.every(item => item.age > 22);
console.log(age)//false
console.log(age2)//true