es6数组的一些函数方法使用
数组函数forEach()、map()、filter()、find()、every()、some()、reduce()等
数组函数
(这里的回调函数中的index和arr都可以省略,回调函数后有参数是设置调整this指向的,这里暂时不使用)
forEach() -----循环
map()— —更新数组
filter()、includes()、find()、findIndex()— —筛选(删除)数组
some()、every()— —判断数组
reduce()— —叠加数组
arr.forEach()
遍历数组全部元素,利用回调函数对数组进行操作,自动遍历数组.length次数,且无法break中途跳出循环
因此不可控
不支持return操作输出,return只用于控制循环是否跳出当前循环
因此难操作成新数组,新值,故不作多分析
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">点击</el-button>
</div>
</section>
</template>
<script>
export default {
methods: {
get() {
let arr = [1, 2, 3, 4, 5];
arr.forEach((item, index) => {
console.log(index);
console.log(item);
console.log('-----');
})
}
}
};
</script>
arr.map()— —更新数组
1、创建新数组
2、不改变原数组
3、输出的是return什么就输出什么新数组
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">点击</el-button>
</div>
</section>
</template>
<script>
export default {
methods: {
get() {
let arr = [
{
name: 'zhangsan',
age: 17
}, {
name: 'lisi',
age: 18
}, {
name: 'wangwu',
age: 19
}, {
name: 'xiaoliu',
age: 20
}
];
let arr2 = arr.map(item => item.name);
console.log(arr2);
}
}
};
</script>
arr.join()— —生成字符串
1、生成以括号内符号分隔开的字符串
2、不改变原数组
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">点击</el-button>
</div>
</section>
</template>
<script>
export default {
methods: {
get() {
let arr = [1, 2, 3, 4, 5];
let str = arr.join('-');
console.log(str);
}
}
};
</script>
arr.filter()、includes()、find()、findIndex()— —筛选数组
一、arr.filter()
1、创建新数组
2、不改变原数组
3、输出的是判断为true的数组元素形成的新数组
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">点击</el-button>
</div>
</section>
</template>
<script>
export default {
methods: {
get() {
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.filter(item => item > 3);
console.log(arr2);
}
}
};
</script>
二、arr.includes()
只是判断数组是否含有某值,不用return,不用回调函数,输出一个true或false
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">点击</el-button>
</div>
</section>
</template>
<script>
export default {
methods: {
get() {
let arr = [1, 2, 3, 4, 5];
let result = arr.includes(3);
console.log(result);
let result2 = arr.includes(6);
console.log(result2);
}
}
};
</script>
三、arr.find()
1、不创建新数组
2、不改变原数组
3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">点击</el-button>
</div>
</section>
</template>
<script>
export default {
methods: {
get() {
let arr = [
{
name: 'zhangsan',
age: 17
}, {
name: 'lisi',
age: 18
}, {
name: 'wangwu',
age: 19
}, {
name: 'xiaoliu',
age: 20
}
];
let person = arr.find(item => item.name === 'lisi');
console.log(person);
}
}
};
</script>
四、arr.findIndex()— — 与find()相同
1、不创建新数组
2、不改变原数组
3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素序列
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">点击</el-button>
</div>
</section>
</template>
<script>
export default {
methods: {
get() {
let arr = [
{
name: 'zhangsan',
age: 17
}, {
name: 'lisi',
age: 18
}, {
name: 'wangwu',
age: 19
}, {
name: 'xiaoliu',
age: 20
}
];
let result = arr.findIndex(item => item.name === 'wangwu');
console.log(result);
let result2 = arr.findIndex(item => item.name === 'tuzi');
console.log(result2);
}
}
};
</script>
arr.some()、every()— —判断数组
(不常用)
一、some()
1、不创建新数组
2、不改变原数组
3、输出的是判断为true则马上跳出循环并return成true
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">点击</el-button>
</div>
</section>
</template>
<script>
export default {
methods: {
get() {
let arr = [1, 2, 3, 4, 5];
let result = arr.some(item => item > 4);
console.log(result);
let result2 = arr.some(item => item > 6);
console.log(result2);
}
}
};
</script>
二、every()— —与some相反
1、不创建新数组
2、不改变原数组
3、输出的是判断为false则马上跳出循环并return成false
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">点击</el-button>
</div>
</section>
</template>
<script>
export default {
methods: {
get() {
let arr = [1, 2, 3, 4, 5];
let result = arr.every(item => item > 0);
console.log(result);
let result2 = arr.every(item => item > 3);
console.log(result2);
}
}
};
</script>
嗯,就酱~~
参考 https://blog.csdn.net/kingan123/article/details/79818566
es6数组的一些函数方法使用的更多相关文章
- ES6数组及数组方法
ES6数组可以支持下面的几种写法: (1)var [a,b,c] = [1,2,3]; (2)var [a,[[b],c]] = [1,[[2],3]]; (3)let [x,,y] = [1,2,3 ...
- ES6 数组遍历方法的实战用法总结(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf)
目录 forEach every some map filter reduce && reduceRight indexOf lastIndexOf 前言 ES6原生语法中提供了非常多 ...
- ES6 数组方法拓展
ES6 数组方法拓展 1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括E ...
- ES5和ES6数组方法
ES5 方法 indexOf和lastIndexOf 都接受两个参数:查找的值.查找起始位置不存在,返回 -1 :存在,返回位置.indexOf 是从前往后查找, lastIndexOf 是从后往前查 ...
- ES6数组方法
ES6数组方法 以下方法添加到了Array.prototype对象上(isArray除外) indexOf 类似字符串的indexOf()方法 stringObject.indexOf(searchv ...
- ES6数组对象新增方法
1. Array.from() Array.from方法用于将两类对象转为真正的数组:类数组的对象( array-like object )和可遍历( iterable )的对象(包括 ES6 新增的 ...
- C语言 数组做函数参数不传数组个数的遍历方法
//数组做函数参数不传数组个数的遍历方法 #include<stdio.h> #include<stdlib.h> #include<string.h> void ...
- HP数组转JSON函数json_encode和JSON转数组json_decode函数的使用方法
这两个函数比较简单,我这里直接写例子,但是有一点一定要注意,json数据只支持utf-8格式,GBK格式的数据转换为json会报错! json_encode()用法: <?php$data =a ...
- es6 数组扩展方法
1.扩展运算符 含义: 扩展运算符,三个点(...),将一个数组转为用逗号分隔的参数顺序. 例如: console.log([1,2,3]); console.log(...[1,2,3]); 结 ...
随机推荐
- C-printf/sprintf/snprintf中的类型转换详解
源码1 #include <stdio.h> void f1() { double x = -5.5625; printf("%d\n",x); //输出为0,为什么? ...
- Jenkins插件开发资料
原文地址:http://www.ciandcd.com/?p=181 Jenkins plugin 开发: Document http://hudson-ci.org/docs/index.html ...
- pandas时间序列滑窗
时间序列数据统计-滑动窗口 窗口函数 import pandas as pd import numpy as np ser_obj = pd.Series(np.random.randn(1000), ...
- C#中怎样将List<自己定义>转为Json格式 及相关函数-DataContractJsonSerializer
对C#和.net使用List<自己定义>和Json格式相互转化的方法进行总结 关于JSON的入门介绍见http://www.json.org/ ,或者百度,这里不赘述,只是通过以下的样例会 ...
- SQL数据库规范
三范式 参考网址: http://www.cnblogs.com/linjiqin/archive/2012/04/01/2428695.html (1).第一范式(确保每列保持原子性) 每一列在某个 ...
- phpexcel图形图表(一)入门
PHPExcel - Excel的PHP处理引擎 PHPExcel 提供了一系列的 PHP语言 类,让你可以轻松地读写操作以下格式的文件:.xls/.xlsx/.csv/.ods/Gnumeric/P ...
- Python常见经典 python中if __name__ == '__main__': 的解析
当你打开一个.py文件时,经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是对象,并且所有的模块都有一个内置属性 __name__.一个 ...
- ORA-00349: failure obtaining block size for '+fra_grp01_d
有一次恢复库以后,open时报错ORA-00349,例如以下.最后通过删除这个log group解决. SQL> alter database open resetlogs; alter d ...
- shiro配置数据库连接池总结
在项目中要使用shiro做权限认证和登录许可等,现在总结一份,以备以后使用 ms sql版本 [main]ds=com.mchange.v2.c3p0.ComboPooledDataSourceds. ...
- 集合Set映射一对多(使用xml文件)
如果持久化类设置了包含实体引用的对象,则需要使用一对多关联来映射集合(Set)元素. 我们可以通过任意一个Set集合来映射这个列表对象. 下面来看看看设置对象的持久化类. 在这种情况下,一个问题可以有 ...