ES6数组新增的几个方法

2017年03月24日 13:38:04 tang15886395749 阅读数:10461 标签: ES6数组新增方法 更多

个人分类: js相关
 

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

1、forEach()

var arr = [1,2,3,4];
arr.forEach((item,index,arr) => {
console.log(item) //结果为1,2,3,4
})
//forEach遍历数组,无返回值,不改变原数组,仅仅只是遍历、常用于注册组件、指令等等。

2、map()

var arr = [1,2,3,4];
arr.map((item,index,arr) => {
return item*10 //新数组为10,20,30,40
})
//map遍历数组,返回一个新数组,不改变原数组的值。

3、filter()

var arr = [1,2,3,4];
arr.filter((item,index,arr) => {
return item > 2 //新数组为[3,4]
})
//filter过滤掉数组中不满足条件的值,返回一个新数组,不改变原数组的值。

4、reduce()

var arr = [1,2,3,4];
arr.reduce((result,item,index,arr) => {
console.log(result) // 1 3 6 result为上次一计算的结果
console.log(item) // 2 3 4
console.log(index) // 1 2 3
return result+item //最终结果为10
})
//reduce 让数组的前后两项进行某种计算。然后返回其值,并继续计算。不改变原数组,返回计算的最终结果,从数组的第二项开始遍历。

5、some()

var arr = [1,2,3,4];
arr.some((item,index,arr) => {
return item > 3 //结果为true
})
//遍历数组每一项,有一项返回true,则停止遍历,结果返回true。不改变原数组

6、every()

var arr = [1,2,3,4];
arr.every((item,index,arr) => {
return item > 1 //结果为false
})
//遍历数组每一项,每一项返回true,则最终结果为true。当任何一项返回false时,停止遍历,返回false。不改变原数组

以上6个方法均为ES6语法,IE9及以上才支持。不过可以通过babel转意支持IE低版本。 
以上均不改变原数组。 
some、every返回true、false。 
map、filter返回一个新数组。 
reduce让数组的前后两项进行某种计算,返回最终操作的结果。 
forEach 无返回值。

es6 新的数组操作的更多相关文章

  1. 包括ES6在内的数组操作(待更)

    下面是我对ES6和古老的JS(ES3)一些数组操作的总结,附带了一些我曾经用上的. map处有待更内容. 贴一下有借鉴的网站:https://segmentfault.com/a/1190000002 ...

  2. ES6新特性-------数组、Math和扩展操作符(续)

    三.Array Array对象增加了一些新的静态方法,Array原型上也增加了一些新方法. 1.Array.from 从类数组和可遍历对象中创建Array的实例 类数组对象包括:函数中的argumen ...

  3. ES6之数组操作

    es6中对于数组操作添加了4种方法: 1.map —— 映射(一个对应一个) 2.reduce —— 汇总(多个出来一个) 3.filter —— 过滤 4.forEach —— 迭代/循环. 1.m ...

  4. js数组操作find查找特定值结合es6特性

    js数组操作find查找特定值结合es6特性

  5. js 使用ES6 实现从json中取值并返回新的数组或者字符串

    1.获取的json数据是这样的: data:[ { 'Id': '1', 'Phone': '123456', 'Name': '张三', }, { 'Id': '2', 'Phone': '7894 ...

  6. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  7. 总结常见的ES6新语法特性

    前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...

  8. 常见ES6新属性

    ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=& ...

  9. ES6新特性:Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

随机推荐

  1. Java Web学习(六)HttpServletRequest(客户端请求)

    一.定义 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象提供的方法,可以获得客户端请求的所有 ...

  2. 怎样优雅的实现INotifyPropertyChanged

    第一 安装nuget包 PropertyChanged.Fody. 第二 在类的上方加上 [PropertyChanged.AddINotifyPropertyChangedInterface] 类似 ...

  3. Java知识系统回顾整理01基础07类和对象01引用

    一.引用的定义 引用的概念,如果一个变量的类型是 类类型,而非基本类型,那么该变量又叫做引用. 二.引用和指向 new Hero(); 代表创建了一个Hero对象 但是也仅仅是创建了一个对象,没有办法 ...

  4. Jupyter 绘图怎么显示中文

    1. 简单加2行代码即可. import matplotlib.pyplot as plt plt.rcParams['font.sans-serif'] = [u'SimHei'] plt.rcPa ...

  5. python图像的绘制

    转载:https://blog.csdn.net/haoji007/article/details/52063168 实际上前面我们就已经用到了图像的绘制,如: io.imshow(img) 这一行代 ...

  6. matlab中strcmpi比较字符串(不区分大小写)

    来源:https://ww2.mathworks.cn/help/matlab/ref/strcmpi.html?searchHighlight=strcmpi&s_tid=doc_srcht ...

  7. Activity常用方法

    setContentView(r.layout.xxxx);//设置布局文件 getViewById(r.id.xxxx);//获取指定控件 getString(r.string.xxxx);//获取 ...

  8. 《穷查理年鉴》朋友 & 爱人 & 相处 (关于他人)

    朋友 017.物以类聚,人以群分. 018.没有什么比拥有谨慎而忠诚的朋友更好的人. 019.人有三个忠实的朋友:老妻.老狗和现钞. 020.旅行者须有猪鼻.鹿腿与驴背. 028.聪明的人才触及他人的 ...

  9. STM32F103C8T6-CubeMx串口收发程序详细设计与测试(1)——CubeMx生成初始代码

    STM32F103C8T6-CubeMx串口收发程序详细设计与测试(1)--CubeMx生成初始代码 关键词:STM32F103C8T6 CubeMX UART 详细程序设计 1.开发环境 (1)ST ...

  10. 学习Jmeter,这一篇就够了

    Jmeter在软件测试中的常用功能,看完你应该就会了 1.Jmeter的下载安装 1.1  Jmeter的官方网址是:http://jmeter.apache.org/:下载最新的包到本地进行解压,路 ...