1、some方法

1)some() 方法测试是否至少有一个元素通过由提供的函数实现的测试。

2)参数列表:

arr.some(callback(element[, index[, array]])[, thisArg])
callback:匿名回调
element:数组内的每个元素
Index:索引
array:数组的引用 3)功能
some() 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”
(即可转换为布尔值 true 的值)。如果找到了这样一个值,some() 将会立即返回 true并终止遍历。否则,some() 返回 false
callback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。
返回值:boolean 4)例程:
 <div id="app">
<p v-if="list1.some((el)=>{
return el>=6
})">隐藏内容</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list1: [1,2,3,4,5,6,7,8]
},
methods: {}
})
</script>

2、findIndex方法

1)findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

2)参数列表:同1

3)功能:

findIndex方法对数组中的每个数组索引0~length-1(包括)执行一次callback函数,直到找到一个callback函数返回真实值(强制为true)的值。如果找到这样的元素,findIndex会立即返回该元素的索引。如果回调从不返回真值,或者数组的length为0,则findIndex返回-1。 与某些其他数组方法(如Array#some)不同,在稀疏数组中,即使对于数组中不存在的条目的索引也会调用回调函数。即寻找数组中被函数验证通过的第一个元素的索引

返回值:Number

4)例程:

<div id="app">
<p @click="test(list1)">点击内容</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list1: [{
id: 1,
name: "cc"
}, {
id: 2,
name: "cc"
}, {
id: 3,
name: "cc"
}]
},
methods: {
test: (arr) => {
console.log(arr.findIndex((el, index) => {
return el.id === 3
}))
}
}
})
</script>

3、filter
1)filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
2)参数列表同1
3)功能:用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。
返回true表示保留该元素(通过测试),false则不保留。与findIndex的区别是前者返回所有满足函数验证的所有元素组成的新数组
,后者则只是满足验证的第一个元素。
返回值:Array
4)例程:
<script>
var vm = new Vue({
el: '#app',
data: {
list1: [{
id: 1,
name: "cc1"
}, {
id: 2,
name: "cc2"
}, {
id: 3,
name: "cc1"
}, {
id: 4,
name: "cc1"
}]
},
methods: {
test: (arr) => {
console.log(arr.filter((el, index) => {
return el.name==="cc1"
}))
}
}
})
</script>

4、forEach

1)forEach() 方法对数组的每个元素执行一次提供的函数。

2)参数列表同1

3)forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)。

返回值 undefined

4)例程

 <div id="app">
<p @click="test(list1)">点击内容</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list1: [{
id: 1,
name: "cc1"
}, {
id: 2,
name: "cc2"
}, {
id: 3,
name: "cc1"
}, {
id: 4,
name: "cc1"
}]
},
methods: {
test: (arr) => {
arr.forEach((el, index) => {
console.log(++el.id)
})
}
}
})
</script>


 

es6新增的数组遍历方式的更多相关文章

  1. JS几种数组遍历方式总结

    JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代 ...

  2. JS几种数组遍历方式以及性能分析对比

    前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...

  3. JS 中的数组遍历方式效率比较

    JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代码如下: ; j < ...

  4. 前端面试之ES6新增了数组中的的哪些方法?!

    前端面试之ES6新增了数组中的的哪些方法?! 我们先来看看数组中以前有哪些常用的方法吧! 1 新增的方法! 1 forEach() 迭代遍历数组 回调函数中的三个参数 value: 数组中的每一个元素 ...

  5. es6新增的数组方法和对象

    es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map let arr=[1,2,3,4,3,2,1,2]; 遍历数组最简洁直接的方法法 for (let value ...

  6. ES6新增的数组方法

    ES6新增:(IE9级以上支持) 1.forEach():遍历数组,无返回值,不改变原数组. 2.map():遍历数组,返回一个新数组,不改变原数组. 3.filter():过滤掉数组中不满足条件的值 ...

  7. Collection、Map、数组 遍历方式

    结论:无论是数组还是Collection for each 都是一个非常好的选择 一.for each底层实现 对于Collection,for each是隐式调用Iterator实现的,效率比显示调 ...

  8. ES6 新增的数组的方法

    给定一个数组 let list = [ // wu: 武力 zhi:智力 { id: 1, name: '张飞', wu: 97, zhi: 10 }, { id: 2, name: '诸葛亮', w ...

  9. ES6新增的数组的方法

    forEach forEach()会遍历数组, 循环体内没有返回值,forEach()循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引, ...

随机推荐

  1. HTTP max-age与Expires的分别

    主要重点在于我们要明白一个相对(Expires)一个绝对(max-age). 分别 max-agemax-age是HTTP/1.1中,他是指我们的web中的文件被用户访问(请求)后的存活时间,是个相对 ...

  2. Centos安装Samba共享服务器

    安装Samba 查看Samba是否已安装 1.# rpm -qa | grep samba

  3. 企业级代码托管Gitlab

    Gitlab概述: 一个利用Ruby on Rails开发的开元应用程序,从而实现一个代码托管项目仓库,可以通过web界面进行访问公开的或者私有的项目 Ruby on Rails是一个可以使开发,部署 ...

  4. nginx+keepalived实现 负载均衡 高可用

    Vip: 192.168.220.18 Rip1:192.168.220.2 Rip:192.168.220.3 Rip可以配置在一个服务器上通过ip做虚拟主机 1 rs上配置环境 2 配置应用 Yu ...

  5. 获取Form表单数据转化成JSON对象

    $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() ...

  6. BZOJ1497 [NOI2006]最大获利 网络流 最小割 SAP

    原文链接http://www.cnblogs.com/zhouzhendong/p/8371052.html 题目传送门 - BZOJ1497 题意概括 有n个站要被建立. 建立第i个站的花费为pi. ...

  7. js将时间戳转为时间格式

    时间戳转时间格式 //分钟 let timeM= parseInt(msg/1000/60%60); if(timeM<10){ timeM="0"+timeM; } //秒 ...

  8. Python 主、次(major,minor)版本号获取

    Python  主.次(major,minor)版本号获取 import sys sys.version_info sys.version_info.major sys.version_info.mi ...

  9. 关闭selinux服务

    vim /etc/selinux/config 将SELINUX=disabled 执行setenforce 0

  10. Flutter - Migrate to AndroidX

    一段时间没玩Flutter,今天打开一个项目编译了一下,突然发现不能编译了,出现 Launching lib\main.dart on Nokia X6 in debug mode... FAILUR ...