关于数组中forEach() 、map()、filter()、reduce()、some()、every()的总结

1. forEach()

let array = [1,2,3,4];

array.forEach((item, index, array) => {

  console.log(item);

});

forEach会遍历数组, 没有返回值, 不允许在循环体内写return, 不会改变原来数组的内容.

2. map()

let array = [1, 2, 3, 4];

let temp = array.map((item, index, array) => {

  return item * 10;

});

console.log(temp);  //  [10, 20, 30, 40];

console.log(array);  // [1, 2, 3, 4]

// map 遍历数组, 会返回一个新数组, 不会改变原来数组里的内容

let temp2 = array.map(String);  // 把数组里的元素都转成字符串

3. filter()

let array = [1, 2, 3, 4];

let temp = array.filter((item, index, array) => {

  return item >  3;

});

console.log(temp);  // [4]

console.log(array);  // [1, 2, 3, 4]

// filter 会过滤掉数组中不满足条件的元素, 把满足条件的元素放到一个新数组中, 不改变原数组

4. reduce()

let array = [1, 2, 3, 4];

let temp = array.reduce((x, y) => {

  console.log("x": x);

  console.log("y": y);

  return x + y;

});

console.log(temp);  // 10

console.log(array);  // [1, 2, 3, 4]

// x 是上一次计算过的值, 第一次循环的时候是数组中的第1个元素

// y 是数组中的每个元素, 第一次循环的时候是数组的第2个元素

5. every()

let array = [1, 2, 3, 4];

let bo = array.every((item, index, array) => {

  return item > 2;

});

console.log(bo);    // false;

// every遍历数组, 每一项都是true, 则返回true, 只要有一个是false, 就返回false

6. some()

let array = [1, 2, 3, 4];

let tmep = array.some((item, index, array) => {

  return item > 1;

});

console.log(temp);  // true

// 遍历数组的每一项, 有一个返回true, 就停止循环

以上6个方法IE9及以上才支持。不过可以通过babel转义支持IE低版本。

以上均不改变原数组。

some、every返回true、false。

map、filter返回一个新数组。

reduce让数组的前后两项进行某种计算,返回最终操作的结果。

forEach 无返回值。

ES6数组方法总结的更多相关文章

  1. ES6 数组方法拓展

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

  2. ES6数组方法

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

  3. ES5和ES6数组方法

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

  4. ES6 数组方法 forEach map filter find every some reduce

    1. forEach const colors = ['red', 'blue', 'green'] colors.forEach(function (params) { console.log(pa ...

  5. ES6数组的扩展--Array.from()和Array.of()

    一. Array.from() : 将伪数组对象或可遍历对象转换为真数组 1.何为伪数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为"类 ...

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

  7. 最新数组方法(包括es6)

    整理目前所用过的数组方法,学习了新增的es6方法. 1 arr.push() 从后面添加元素,返回值为添加完后的数组的长度 let arr = [1,2,3,4,5] console.log(arr. ...

  8. ES6新增的常用数组方法(forEach,map,filter,every,some)

    ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...

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

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

随机推荐

  1. Spring的注解收集

    @Scope("prototype")spring 默认scope 是单例模式scope="prototype" 可以保证 当有请求的时候 都创建一个Actio ...

  2. Python3+mitmproxy安装使用教程(Windows)(转载)

    mitmproxy 是用于MITM的proxy,MITM中间人攻击.说白了就是服务器和客户机中间通讯多增加了一层.跟Fiddler和Charles最大的不同就是,mitmproxy可以进行二次开发,尤 ...

  3. CMU Advanced DB System - MVCC

    https://zhuanlan.zhihu.com/p/40208895 Mysql的MVCC实现 https://severalnines.com/database-blog/comparing- ...

  4. spring-boot 知识集锦

    1.spring-boot项目在外部tomcat环境下部署 https://blog.csdn.net/james_wade63/article/details/51009423 https://bl ...

  5. 图片上传: ajax-formdata-upload

    传送门:https://www.cnblogs.com/qiumingcheng/p/6854933.html ajax-formdata-upload.html <!DOCTYPE html& ...

  6. tp的ajaxReturn后, 还要用echo $rt吗?

    首先你要看 ajaxReturn的原型: protected function ajaxReturn ($data, $type='', $json_option=0){ ........ switc ...

  7. CentOS 使用官方源yum安装最新nginx版本

    CentOS 使用官方源yum安装最新nginx版本 1.创建nginx.repo # vi /etc/yum.repos.d/nginx.repo 2.添加内容#如果是CentOS6,文件内容如下: ...

  8. phpstudy 首次安装后打开网站 数据库内容 中文乱码

    首次安装完成 phpstudy 后,默认的 my.ini 配置只有数据库文件位置,其他的都没有设置,这时如果想要输出数据库中的中文后,显示到页面上就会变成中文乱码 解决方法: 打开 phpstudy ...

  9. leetcode 968. Binary Tree Cameras

    968. Binary Tree Cameras 思路:如果子节点只能覆盖到父节点.当前节点,但是父节点可以覆盖到他的父节点.子节点.当前节点,所以从叶子节点往上考虑 0代表子节点没有被覆盖 1代表子 ...

  10. 【大数据】Spark On Yarn

    Spark在YARN中有yarn-cluster和yarn-client两种运行模式: I. Yarn client 在yarn-client模式下,Driver运行在Client上,通过Applic ...