常见的数组基本用法(二)

简介: 常见的数组基本用法

5. 遍历的方法有哪些?

ES5:forEacheverysomefiltermapreducereduceRight

ES6:entriesfindfindIndexkeysvalues

/*
  1.forEach方法:
      定义:对数组的每个元素执行一个给定的函数,返回值undefined。不能终止循环,除非抛出异常。
      用法:arr.forEach(function(currentValue,index,array){})
      参数:currentValue正在处理的元素
         index正在处理的元素的索引
         array正在操作的数组
*/
const arr = ['a','b','c','d']
const newArr = []
let resp = arr.forEach((ele,idx)=>{
  newArr[idx] = ele.toUpperCase()
})
console.log(newArr)//["A", "B", "C", "D"]
console.log(resp)//undefined
/*
  2.every方法:
       定义:测试数组内的所有元素是否都能通过某个指定的函数。返回Boolean。如果一个元素返回false,则立即返回false,不在继续执行。(若为空数组,直接返回true)
       用法:arr.every(function(element,index,array){})
       参数:element用于测试的元素
             index用于测试的元素的索引
             array调用every的当前数组
*/
const arr = [2,4,6,8,10]
let resp = arr.every((ele,idx)=>{
  return ele % 2 === 0
})
console.log(resp)//true
const arr1 = [2,4,6,9,10]
let resp1 = arr1.every((ele,idx)=>{
 console.log(idx)//0,1,2,3 未打印4
  return ele % 2 === 0
})
console.log(resp1)//false
/*
  3.some方法:
     定义:测试数组中是不是至少有一个元素通过了指定函数,返回Boolean。如有满足条件的值,立即返回(若为空数组,直接返回false)
     用法:arr.some(function(element,index,array){})
     参数:element正在处理的元素
        index正在处理的元素的索引
        array调用some的数组
*/
const arr = [1,2,3,4,5]
let resp = arr.some((ele,idx)=>{
  console.log(idx)//0,1,2  有满足条件的值,立即返回
  return ele >= 3
})
console.log(resp)//true
/*
  4.filter方法:
      定义:测试数组中的所有元素是否通过了指定函数,返回一个新数组。如果没有任何元素通过,则返回空数组。
      用法:arr.filter(function(element,index.array){})
      参数:element正在处理的元素
         index正在处理的元素的索引
         array调用filter的数组
*/
const words = ['spray', 'limit', 'elite',  'destruction', 'present'];
const result = words.filter((ele,idx)=>{
  return  ele.length > 6
});
console.log(result);//["destruction", "present"]
/*
  5.map方法:
     定义:为数组的每一个元素都执行一次指定的函数,返回一个新数组。
     用法:arr.map(function(element,index,array){})
     参数:element正在处理的元素
        index正在处理的元素的索引
        array调用filter的数组
*/
const sqrts = [9,16,25]
const nums = sqrts.map((ele,idx)=>{
  return Math.sqrt(ele)
})
console.log(nums)// [3, 4, 5]
/*
 6.reduce方法:
   定义:为数组中的每一个元素都执行指定函数,将其汇总的结果单个返回(从左往右)。
   用法:arr.reduce(function(accumulator, currentValue, index, array), initialValue])
      第一个参数:回调函数,四个参数,分别为:回调返回的初始值(如果没有初始值,则为数组第一个元素的值),数组中正在处理的元素,正在处理的元素的索引,调用reduce的原数组。
      第二个参数:为回调返回值的初始值。
*/
//基础用法:
const arr = [0, 1, 2, 3, 4]
let result = arr.reduce((prev, current,idx) =>{
  console.log(prev, current,idx)//0 1 1  1 2 2  3 3 3  6 4 4
 //初始值默认为数组第一个元素,索引则会从1开始,不是第0 。 
  return  prev +  current
});//无初始值
console.log(result)//10
let result1 = arr.reduce((prev, current,idx) =>{
  console.log(prev, current,idx)//10 0 0  10 1 1  11 2 2  13 3 3  16 4 4 
  return  prev +  current
},10);//初始值为10
console.log(result1)//20
//进阶用法:
//a.二位数组转一维数组
const arr = [[0, 1], [3, 2], [4, 5]]
let result = arr.reduce((prev,current,idx)=>{
  return prev.concat(current)
},[])
console.log(result)//[0, 1, 3, 2, 4, 5]
//b.计算数组中每个元素出现的次数
const names = ['Alice','Bob','Tiff','Bruce','Alice','Tom']
let result = names.reduce((allNames,name)=>{
  if(name in allNames){
     allNames[name]++
  }else{
     allNames[name] = 1
  }
  return allNames
},{})
console.log(result)//{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1, Tom: 1}
//c.根据属性对object进行分类
const peoples = [
  { name: 'Alice', age: 20 },
  { name: 'Max', age: 30 },
  { name: 'Max', age: 40 },
  { name: 'Tom', age: 50}
];
let groupByProperty = (arrs,property)=>{
    return arrs.reduce((acc,current)=>{
      let key = current[property]
      if(!acc[key]){
        acc[key] = []
      }
       acc[key].push(current)
      return acc
  },{})
}
let result = groupByProperty(peoples,'name')
console.log(result)//{"Alice":[{"name":"Alice","age":20}],"Max":[{"name":"Max","age":30},{"name":"Max","age":40}],"Tom":[{"name":"Tom","age":50}]}
/*
 7.reduceRight方法:
   定义:为数组中的每一个元素都执行指定函数,将其汇总的结果单个返回(从右往左)。
   用法:arr.reduce(function(accumulator, currentValue, index, array), initialValue])
      第一个参数:回调函数,四个参数,分别为:回调返回的初始值(如果没有初始值,则为数组最后一个元素的值),数组中正在处理的元素,正在处理的元素的索引,调用reduce的原数组。
      第二个参数:为回调返回值的初始值。
*/
const arr = [[0, 1], [3, 2], [4, 5]]
let result = arr.reduceRight((prev,current,idx)=>{
  return prev.concat(current)
},[])
console.log(result)//[4, 5, 3, 2, 0, 1]
/*
 8.find方法:
    定义:返回满足条件的第一个元素的值,否则返回undefined。
    用法:arr.find((ele,idx,array))
*/
const arr = [5, 12, 8, 130, 44];
const result = arr.find((ele,idx,array)=>{
  console.log(idx) //0 1
  return ele > 10
});
console.log(result);//12
/*
 9.findIndex方法:
    定义:返回满足条件的第一个元素的索引,没找到返回-1。
    用法:arr.findIndex((ele,idx,array))
*/
const arr = [5, 12, 8, 130, 44];
const idx = arr.findIndex((ele,idx,array)=>{
  console.log(idx) //0 1
  return ele > 10
});
console.log(idx);//1
/*
 10.entries方法:
   定义:返回一个新的Array Iterator对象,包含[key,value]键值对。有一个next方法。
   用法:arr.entries()
*/
const arr = ['1','2','3','4','5']
let iterator = arr.entries()
console.log(iterator)//Array Iterator {}
console.log(iterator.next())//{"value": [0,"1"],"done": false}
//next.done 用于指示迭代器是否完成:在每次迭代时进行更新而且都是false,直到迭代器结束done才是true。
//拓展
for(let e of iterator){
  //循环之前不要调用next方法哦,不然迭代器会从最后一次开始执行。
  console.log(e)//[0, "1"] [1, "2"] [2, "3"] [3, "4"] [4, "5"] 
}
/*
 11.keys方法:
   定义:返回一个包含数组键的Array Iterator对象。
   用法:arr.keys()
*/
const arr = ['a', 'b', 'c']
const iterator = arr.keys();
for (const key of iterator) {
  console.log(key); //0 1 2
}
/*
 12.values方法:
   定义:返回一个包含数组每个索引值的Array Iterator对象。
   用法:arr.values()
*/
const arr = ['a', 'b', 'c']
const iterator = arr.values();
for (const value of iterator) {
  console.log(value);//a b c
}
方法 返回值 是否改变原数组 指定函数是否需要return 遍历元素个数
forEach undefined 所有元素
every true/false 所有元素
some true/false 满足条件
filter 新数组 所有元素
map 新数组 所有元素
reduce 单个返回值 所有元素
reduceRight 单个返回值 所有元素
find 满足条件第一个元素 满足条件
findIndex 满足条件第一个元素的索引 满足条件
6. 其他数组方法

数组扁平化:flatflatMap

/*
  1.flat方法:
    定义:按照指定深度递归遍历数组,并将所有元素合并到一个新数组返回。
       用法:arr.flat(depth)
       参数:depth为深度,默认为1。
 */
const arr = [1, 2, [3, 4, [5, 6]]];
let flat = arr.flat(Infinity)
console.log(flat)//[1, 2, 3, 4, 5, 6]
/*
  2.flatMap方法:
    定义:使用指定函数映射每个元素,返回压缩后的新数组。该方法效果等同于flat深度为1。
       用法:arr.flatMap(function(currentValue,index,array))
       参数:指定回调函数
 */
const arr = [[2], [4], [6], [8]]
let str = arr.flatMap((currentValue)=>{
  return currentValue
})
console.log(str)// [2, 4, 6, 8]

目录
相关文章
|
7月前
|
存储 索引 Python
leetcode-350:两个数组的交集 II(python中Counter的用法,海象运算符:=)
leetcode-350:两个数组的交集 II(python中Counter的用法,海象运算符:=)
60 0
|
算法 Java C++
27.【C/C++ 最全vector数组的用法 (详解)】(一)
27.【C/C++ 最全vector数组的用法 (详解)】
308 0
|
2月前
|
存储 算法 Java
数组的相关用法
数组的相关用法
47 0
|
7月前
|
Rust 索引 Windows
Rust 原始类型之数组array内置方法
Rust 原始类型之数组array内置方法
242 0
Rust 原始类型之数组array内置方法
|
7月前
|
存储 C#
C#基础语法(数组和函数)
C#基础语法(数组和函数)
68 1
|
7月前
|
前端开发 JavaScript Java
【面试题】 ES6中将非数组转换为数组的三种方法
【面试题】 ES6中将非数组转换为数组的三种方法
数组的解释及使用方法
数组的解释及使用方法
87 0
|
移动开发 Python Windows
超详细的字符串用法大全
超详细的字符串用法大全