数组函数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. oracle 创建一个用户,并且设定只能访问指定的对象

    出处:http://www.cnblogs.com/BetterWF/archive/2012/07/03/2574416.html 今天在开发接口时候,需要给接口开发公司提供一个ORACLE 用户, ...

  2. sql笔记 获取指定数据库下的所有表

    SELECT Name FROM 数据库名称..SysObjects Where XType='U' ORDER BY Name XType='U' 标识查询用户创建的表 S为系统创建的表

  3. js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域

    js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...

  4. Xilinx FPGA 学习笔记

    一.时序设计 方法1.通过状态机来实现,通过verilog控制FPGA,让它该快的时候快,该慢的时候慢. 方法2.FPGA中运行CPU 把逻辑控制顺序复杂的事情用C代码来实现,而实时处理部分用veri ...

  5. VS项目名称修改

    阅读数:11141 VS中新建一个项目,如果开发工作都接近尾声,客户来要求更换项目的名称,差不多要变更整个解决方案中项目名称,引用等等,这个工作量还是很大的.上网搜索解决方法,还实验了专门的修改项目名 ...

  6. ubuntu 12.04 install gcc 4.8

    http://askubuntu.com/questions/271388/how-to-install-gcc-4-8-in-ubuntu-12-04-from-the-terminal sudo ...

  7. 集成学习1-Boosting

    转自http://blog.csdn.net/lvhao92/article/details/51079018 集成学习大致分为两类,一类串行生成.如Boosting.一类为并行化.如Bagging和 ...

  8. 试题系列四(袋中有6红球 3黄球 3绿球,从中取6个球,求所有拿到球的颜色的可能 c(12,6))

    1.袋中有6红球 3黄球 3绿球,从中取6个球,求所有拿到球的颜色的可能 c(12,6) #include<stdio.h> int main(int argc, char** argv) ...

  9. c++ simple class template example: Stack

    main.cpp #include "Stack.h" #include <iostream> using namespace std; class Box { pub ...

  10. cookie细节

    设置cookie时,不像设置session,可以马上生效,它的生效时间是下一次请求页面.