当前位置:网站首页 > Vue.js开发 > 正文

数组方法js(数组方法map)



1. map:

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。

例:

let data = {items:[{name:"张三",age:"22",class:"三年一班",sex:0},{name:"李四",age:"25",class:"三年二班",sex:1}]}

       titile:item.name,

       class:item.class,

       age:item,age,

       sex:item.sex==0?'男':'女'

   }

})

还有一种写法:

let dataInfo = data.items.map(item=>( {

       titile:item.name,

       class:item.class,

       age:item,age,

       sex:item.sex==0?'男':'女'

   }))

console.log(dataInfo);返回值是处理后的数组

2. filter:

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意: filter() 不会对空数组进行检测。

注意: filter() 不会改变原始数组。

例:

let data = {items:[{name:"张三",age:22,class:"三年一班",sex:0},{name:"李四",age:25,class:"三年二班",sex:1}]}

let dataInfo = data.filter(age=>{

     return age!=22;

})

console.log(dataInfo);

3. some

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

some() 方法会依次执行数组的每个元素:

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

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。

例:

let data = {items:[{name:"张三",age:22,class:"三年一班",sex:0},{name:"李四",age:25,class:"三年二班",sex:1}]}

let dataInfo = data.items.some(v=>{

    return v>22

})

console.log(dataInfo);//true

4. every

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。

every() 方法使用指定函数检测数组中的所有元素:

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

注意: every() 不会对空数组进行检测。

注意: every() 不会改变原始数组。

例:

let data = {items:[{name:"张三",age:22,class:"三年一班",sex:0},{name:"李四",age:25,class:"三年二班",sex:1}]}

let dataInfo = data.items.every(v=>{

    return v>22

})

console.log(dataInfo);//false

5. reduce

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

reduce() 可以作为一个高阶函数,用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

例:

let numbers = [1,2,3,4,5]

let result = numbers.reduce((sum, num)=> {
    return sum + Math.round(num);
}, 12);

reduce接收两个参数,第一个参数是一个函数,第二个参数是一个初始值,可省略。

函数的计算过程可以是两个数值相加、相减、相乘等所有可进行运算的方法。

console.log(result);//结果:27

6. forEach()

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。

 
  

输出结果:

index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25


7.slice

arrayObject.slice(start,end)
start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

8.splice

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。 item1, ..., itemX 可选。向数组添加的新项目。

9.split

字符串分割成数组

"2:3:4:5".split(":") //将返回["2", "3", "4", "5"] "|a|b|c".split("|") //将返回["", "a", "b", "c"]

10.join

把数组连接成字符串

 
  

11.entries

 
  

 

 

 

 

 

 

 

 

 

到此这篇数组方法js(数组方法map)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • pcie4.0x1速度(pcie4.0速度是多少)2025-10-06 14:36:06
  • vuecli2升级3(vuecli升级到3.0)2025-10-06 14:36:06
  • vue 安装脚手架(vue2.0脚手架的安装)2025-10-06 14:36:06
  • vue2和vue3区别v-if v-for(vue2和vue3区别详细介绍)2025-10-06 14:36:06
  • 前端跨域解决方案vue(vue项目跨域是前端做还是后端做)2025-10-06 14:36:06
  • pcie5.0电源线(pcie5.0电源线向下兼容吗)2025-10-06 14:36:06
  • vue路由守卫面试题(vue的路由守卫实现原理)2025-10-06 14:36:06
  • redhat9配置ip地址(redhat7.6配置ip地址)2025-10-06 14:36:06
  • ubuntu16.04安装cmake(ubuntu16.04安装教程)2025-10-06 14:36:06
  • redhat enterprise最新版镜像文件dvd下载(redhat7.4下载镜像)2025-10-06 14:36:06
  • 全屏图片