数据类型_array_es6新增的数组遍历方法

[1]map方法

(1)作用：以某种规则映射数组；

(2)语法

arr.map((item,index)=>{
 return 值
})

(3)返回值：map方法 不对原数组进行操作而是返回一个新数组；
示例：将数组中所有数据都保留2位小数(保留过程中四舍五入)

const arr = [0.338, 0.456, 45, 67, 77.2, 0.536, 56.78]
const newArr = arr.map(item =>item.toFixed(2))
console.log(arr) // [0.338, 0.456, 45, 67, 77.2, 0.536, 56.78]
console.log(newArr) //  ['0.34', '0.46', '45.00', '67.00', '77.20', '0.54', '56.78']

示例2：数组对象中，只需要每个元素的某个属性

 <!-- 获取每个数组元素的name属性 -->
 <script>
   let arr = [
     { name: 'chaochao', sex: '女' },
     { name: 'niuniu', sex: '男' },
     { name: 'wenwen', sex: '男' },
     { name: 'linlin', sex: '女' }
   ]
   let newArr = arr.map(item => item.name)
   console.log(newArr)  //['chaochao','niuniu','wenwen','linlin']
 </script>

注意： map方法其实返回的是一层深拷贝的数组；

 const arr = [
'a',
{
  text:'吃食',
  id:1,
  children:[
    {
      text:'水果',
      id:11,
    },
    {
      text:'零食',
      id:12,
    },
    {
      test:'肉类',
      id:13,
    }
  ]
},
{
  text:'服装',
  id:2,
  children:[
    {
      text:'春装',
      id:21
    },
    {
      text:'夏装',
      id:22
    },
    {
      text:'秋装',
      id:23
    },
    {
      text:'冬装',
      id:23
    },
  ]
}
]
const maparr = arr.map(item => item)
console.log('arr', arr)
console.log('maparr', maparr)
maparr[0] = 'b'
maparr[1].id=1111
console.log('arr', arr)
console.log('maparr', maparr)

• 第一次打印

  • 

  • map方法不对原数组进行操作而是返回一个由 (return)值 组成的新数组；

• 第二次打印

  • 

  • 可以看出，map拷贝为1层深拷贝；

    • 当我们修改数组中基本数据类型时，不会影响arr;
    • 当我们修改数组中复杂数据类型时，会影响arr;

[2]filter方法

(1)作用：以某种规则过滤数组元素

(2)语法

arr.filter((item,index)=>{
    return boolean ? ture : false
})
// 若是返回值为true，就将该数据添加到返回数组中，若不是就不添加

(3)返回值

• filter方法与map方法类似
  • filter方法 不对原数组进行操作而是返回一个新数组；
  • filter方法其实返回的是一层深拷贝的数组；
• filter方法的返回值为 过滤后的新数组；

(4) 示例

<!-- 返回性别为男的信息 -->
<script>
 let arr = [
   { name: 'chaochao', sex: '女' },
   { name: 'niuniu', sex: '男' },
   { name: 'wenwen', sex: '男' },
   { name: 'linlin', sex: '女' }
 ]
 let newArr = arr.filter(item => item.sex=='男')
 console.log(newArr) //[{ name: 'niuniu', sex: '男' },{ name: 'wenwen', sex: '男' },]
</script>

[3]forEach方法

(1)作用：相当于for循环，对数组数据做某些处理;

(2)语法

数组.forEach((item,index)=>{
  // 对数据做处理
})

(3)返回值：该方法没有返回值，对当前数组进行处理；

(4)注意点

forEach方法中的return有时不会终止循环->具体原因和解决办法可看forEach中的return，

(5)举例说明

let arr = [
 { name: 'chaochao', sex: '女' },
 { name: 'niuniu', sex: '男' },
 { name: 'wenwen', sex: '男' },
 { name: 'linlin', sex: '女' }
]
arr.forEach((item, index) => {
 item.age = 18
})
console.log(arr)

[4]some方法

(1)作用：判断数组中是否有符合条件的元素、

(2)语法

 // 循环遍历 -> 判断当前元素是否符合条件
 // 若是返回值为false -> 不符合条件 -> 继续判断
 // 若是返回值为true -> 符合条件 -> 结束循环
 arr.some(item => {
    return  boolean ? true : false
 })

(3)举例说明

let arr = [
  { name: 'chaochao', sex: '女' },
  { name: 'niuniu', sex: '男' },
  { name: 'wenwen', sex: '男' },
  { name: 'linlin', sex: '女' }
]
let bol = arr.some((item, index) => {
  // 判断该数组中是否有男生
  return item.sex === '男'
})
console.log(bol) //true

[5]every方法

(1)作用：判断数组中的元素是否全部符合条件；

(2)语法

arr.every(item=>{
  return 表达式/变量
})

(3)返回值

循环遍历数组，每个元素 return 值

• 若是 return true -> 当前元素符合条件 -> 继续遍历；
• 若是 return false -> 当前元素不符合条件 -> 终止

(4)举例说明

let arr = [
  { name: 'chaochao', sex: '女' },
  { name: 'niuniu', sex: '男' },
  { name: 'wenwen', sex: '男' },
  { name: 'linlin', sex: '女' }
]
let bol = arr.every((item, index) => {
  // 判断该数组中是否全部为男生
  return item.sex === '男'
})
console.log(bol) //false

[6]findIndex方法

(1)作用：查找数组有没有符合条件的元素，若是有，返回第一个符合元素的下标，若是没有返回false

(2)语法

数组.findIndex((item,index)=>{
  if(boolean){
    // 为true, 结束执行，返回当前元素的索引
    // 若是为false,继续执行
  }
})

(3)举例说明

let arr = [
  { name: 'chaochao', sex: '女' },
  { name: 'niuniu', sex: '男' },
  { name: 'wenwen', sex: '男' },
  { name: 'linlin', sex: '女' }
]
let index = arr.findIndex((item, index) => {
  // 返回第一个男生的索引
  return item.sex === '男'
})
console.log(index) //1

[7]includes方法

作用：判断该数组中是否有符合条件的元素，有则返回true，没有返回false

array.includes(searchElement, fromIndex)
// searchElement:需要寻找的元素
// fromIndex： 从哪个下标开始寻找，默认下标0

注： includes方法只能判断数组中是否存在某个元素，对于更加灵活的场景使用some方法更加合适。

应用场景：可以用于检查元素是否存在、权限检查、黑白名单过滤等。

• 案例-权限检查

  // 此方法用于检查用户是否拥有删除权限
  function hasPermission(userPermissions){
    return userPermissions.includes('delete')
  }
  const arr = ['read', 'write', 'delete'] // 某用户的权限
  console.log(hasPermission(arr)) // true-可以进行操作
  

[8]reduce方法

/**
pre:函数上一次计算的结果，最初值为init;
cur:遍历的当前元素；
index:当前元素的索引
arr:原数组
*/
arr.reduce(function(pre,cur,index,arr){
// 每次遍历的return值将作为下次循环的pre
return XXX
}，init)

reduce方法接收两个参数

• [1]回调函数function
• [2]初始值 init(可选)：若是不提供init，则函数从索引 1 开始执行，跳过第一个元素，并将第一个元素作为起始累积值；注意：如果数组为空或仅有1个元素 且 并没有提供init，则会报错。
• 执行过程： reduce方法会遍历数组中的每一个元素，每遍历一次就会执行一次回调函数。当遍历完之后会将最后的结果返回出去。

举例说明

• 示例1: 对数组进行求和

  const sum = arr.reduce(function(pre, cur){
    return pre+cur
  }, 0)
  console.log(sum) // 10
  

• 示例2: 求乘积

  const product = arr.reduce(function(pre, cur){
    return pre * cur
  }, 1)
  console.log(product) // 24
  

• 示例3:数组扁平化(将二维数组转换为一维数组)

  const newArr = arr.reduce(function(pre, cur){
    return pre.concat(cur)
  }, [])
  console.log(newArr) // [0, 1, 2, 3, 4, 5]
  

• 示例4:统计数组中各个元素出现的次数

  let arr = 'helloworld'.split('')
  const obj = arr.reduce(function(pre, cur){
    pre[cur] ? pre[cur]++ : pre[cur] = 1
    return pre
  }, {})
  console.log(obj) // {h: 1, e: 1, l: 3, o: 2, w: 1 ...}