数组函数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数组的一些函数方法使用的更多相关文章

  1. 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 ...

  2. ES6 数组遍历方法的实战用法总结(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf)

    目录 forEach every some map filter reduce && reduceRight indexOf lastIndexOf 前言 ES6原生语法中提供了非常多 ...

  3. ES6 数组方法拓展

    ES6 数组方法拓展 1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括E ...

  4. ES5和ES6数组方法

    ES5 方法 indexOf和lastIndexOf 都接受两个参数:查找的值.查找起始位置不存在,返回 -1 :存在,返回位置.indexOf 是从前往后查找, lastIndexOf 是从后往前查 ...

  5. ES6数组方法

    ES6数组方法 以下方法添加到了Array.prototype对象上(isArray除外) indexOf 类似字符串的indexOf()方法 stringObject.indexOf(searchv ...

  6. ES6数组对象新增方法

    1. Array.from() Array.from方法用于将两类对象转为真正的数组:类数组的对象( array-like object )和可遍历( iterable )的对象(包括 ES6 新增的 ...

  7. C语言 数组做函数参数不传数组个数的遍历方法

    //数组做函数参数不传数组个数的遍历方法 #include<stdio.h> #include<stdlib.h> #include<string.h> void ...

  8. HP数组转JSON函数json_encode和JSON转数组json_decode函数的使用方法

    这两个函数比较简单,我这里直接写例子,但是有一点一定要注意,json数据只支持utf-8格式,GBK格式的数据转换为json会报错! json_encode()用法: <?php$data =a ...

  9. es6 数组扩展方法

    1.扩展运算符 含义: 扩展运算符,三个点(...),将一个数组转为用逗号分隔的参数顺序. 例如: console.log([1,2,3]); console.log(...[1,2,3]);   结 ...

随机推荐

  1. C-printf/sprintf/snprintf中的类型转换详解

    源码1 #include <stdio.h> void f1() { double x = -5.5625; printf("%d\n",x); //输出为0,为什么? ...

  2. Jenkins插件开发资料

    原文地址:http://www.ciandcd.com/?p=181 Jenkins plugin 开发: Document http://hudson-ci.org/docs/index.html ...

  3. pandas时间序列滑窗

    时间序列数据统计-滑动窗口 窗口函数 import pandas as pd import numpy as np ser_obj = pd.Series(np.random.randn(1000), ...

  4. C#中怎样将List&lt;自己定义&gt;转为Json格式 及相关函数-DataContractJsonSerializer

    对C#和.net使用List<自己定义>和Json格式相互转化的方法进行总结 关于JSON的入门介绍见http://www.json.org/ ,或者百度,这里不赘述,只是通过以下的样例会 ...

  5. SQL数据库规范

    三范式 参考网址: http://www.cnblogs.com/linjiqin/archive/2012/04/01/2428695.html (1).第一范式(确保每列保持原子性) 每一列在某个 ...

  6. phpexcel图形图表(一)入门

    PHPExcel - Excel的PHP处理引擎 PHPExcel 提供了一系列的 PHP语言 类,让你可以轻松地读写操作以下格式的文件:.xls/.xlsx/.csv/.ods/Gnumeric/P ...

  7. Python常见经典 python中if __name__ == '__main__': 的解析

    当你打开一个.py文件时,经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是对象,并且所有的模块都有一个内置属性 __name__.一个 ...

  8. ORA-00349: failure obtaining block size for &#39;+fra_grp01_d

    有一次恢复库以后,open时报错ORA-00349,例如以下.最后通过删除这个log group解决.   SQL> alter database open resetlogs; alter d ...

  9. shiro配置数据库连接池总结

    在项目中要使用shiro做权限认证和登录许可等,现在总结一份,以备以后使用 ms sql版本 [main]ds=com.mchange.v2.c3p0.ComboPooledDataSourceds. ...

  10. 集合Set映射一对多(使用xml文件)

    如果持久化类设置了包含实体引用的对象,则需要使用一对多关联来映射集合(Set)元素. 我们可以通过任意一个Set集合来映射这个列表对象. 下面来看看看设置对象的持久化类. 在这种情况下,一个问题可以有 ...