起因:工作用经常用到操作数组的方法,这里进行一下总结,我尽量以简洁的语言概括每个方法(api)的作用。如果您想快速定位,可以Control+F 然后搜相应的方法即可定位 ;)

ES3的数组方法


join();

  • 目的:将数组转化为字符串.
  • 参数:or可传一个参数(传超过1个的参数,默认取第一个参数), 参数为字符或字符串,参数将在数组的每个元素的间隔插入。PS: 参数无的时候,数组元素间隔为 ','.
  • 是否改变原数组: 不改变原数组, 返回一个新的字符串.
  • 逆向操作:String.split().

reverse();

  • 目的:将数组中的元素颠倒顺序.
  • 参数:无(无视参数).
  • 是否改变原数组: 改变原来的数组.

sort();

  • 目的:将数组的元素按照一定规则排序.
  • 参数:or可传一个函数(传超过1个的函数,默认取第一个函数)。PS: 参数无的时候数组元素默认按照字母表顺序排序.
  • 函数参数:
    > 你必须给sort()方法传递一个比较函数,所以一般传递俩个参数.PS:第三个参数默认undefined.
    > 假设第一个参数应该在前,你应该返回一个小于0的数值,
    > 否则,你应该返回一个大于0的数值,
    > 假设俩个值相等(也就是说他们的排序无关紧要),函数应该返回0.
    > PS:数组元素是从前到后 俩俩比较.

  • 是否改变原数组: 改变原来的数组.

concat();

  • 目的:像胶水一样,将参数粘合在数组后面.
  • 参数:字符串数组(参数不限)。
    > 当参数为数组时,粘合的是数组的元素,而非数组本身.
    > 但此方法不会扁平化数组参数(换句话说,如果你的参数是个数组,里面又嵌套了超过1个数组,这个里面的数组的元素不会被提取出来粘合,而是整个数组被粘合在新的数组后面).
  • 是否改变原数组:不改变原数组, 返回一个新的数组.

slice();

  • 目的:返回数组的一个片段或子数组.
  • 参数:or一个参数or俩个参数
    > 无参数将原样返回一个新的数组,相当于复制了一遍数组.
    > 返回的数组包含第一个参数指定的位置,到第二个参数前面一个位置之间的所有元素.
    > 如果只指定一个参数,返回的数组将包含从开始位置到结尾的所有元素.
    > 如果参数中出现负数,它表示相对于数组中的最后一个元素的位置的个数.
  • 是否改变原数组: 不改变原数组, 返回一个新的数组.

splice();

  • 目的:从数组中删除元素、插入元素、或者同时完成这俩种操作.
  • 参数:前俩个参数指定了删除,从第三个参数开始,指定拼接
    > 第二个参数指定了应该从数组中删除元素的个数,若省略,从起始点到数组结尾的所有元素都将被删除.
    > 第三个参数开始,指被拼接到原数组的元素,区别于concat(), splice()会插入数组本身而非数组的元素(会扁平化数组)

  • 是否改变原数组: 改变原来的数组.

push()和pop();

  • 目的:向数组中插入或删除元素.
  • 参数:push()方法不限制参数,并不会扁平化数组。pop()方法无视参数.
  • 行为:类似栈,从尾部插入或删除值,push()方法返回数组长度,pop()方法返回被删除的值.
  • 是否改变原数组: 改变原来的数组.

unshift()和shift();

  • 目的:向数组中插入或删除元素.
  • 参数:unshift()方法不限制参数,并不会扁平化数组,当参数为一连串元素时,参数类似于被粘合在数组的头部,而不是改变参数的顺序。shift()方法无视参数.
  • 行为:俩组方法和上面的方法类似,区别在于这组方法是在数据的头部操作.
  • 是否改变原数组: 改变原来的数组.

toString()和toLocaleString();

  • 目的::将数组的每个方法转化为字符串,并且输出用逗号分隔的字符串列表.
  • 参数:俩个方法无视参数.
  • 是否改变原数组: 不改变原数组, 返回一个新的字符串.

ES5的数组方法


map();

  • 目的:将数组的每个元素传递给指定的函数,并返回一个数组,它包含该函数的返回值.
  • 参数:一个带有return的函数(函数中的return的值将被传递给新数组).
  • 是否改变原数组: 不改变原数组,返回一个新数组。PS: 如果原数组是个稀疏数组,返回的也是相同方式的稀疏数组,它具有相同的长度,相同的稀缺元素.

filter();

  • 目的:将数组的每个元素传递给指定的函数,并返回一个数组,它包含该函数的返回值.
  • 参数:一个带有return的函数(函数中的返回值如果为true或者能转化为true的值,就被添加到这个数组).
  • 是否改变原数组: 不改变原数组,返回一个新数组,新数组是原数组的子集。PS: 如果原数组是个稀疏数组,和上面不一样,它返回的数组总是稠密的.

every()和some();

  • 目的:对数组元素应用指定的函数判定.
  • 参数:二者都需要一个函数.
    > every() 返回true需要满足的条件为:数组中所有元素在函数判定下都为true则返回true,否则返回false. (PS:跟他的的汉语意思一样,每个)
    > some() 返回true需要满足的条件为:数组中有一个元素在函数判定下为true则返回true, 否则返回false. ((PS:跟他的的汉语意思一样,一些)
    > note: 执行every() 时,若有一个参数为false,则返回,忽略执行后面的参数.
    > note: 而some() 则相反,若有一个参数为true, 则返回, 忽略执行后面的参数.
  • 对于空数组every() 返回true, some()返回 false.

reduce()和reduceRight();(不太常用,偏用于数学计算)

  • 目的:使用指定的函数将数组元素进行组合,生成单个值.
  • 参数:reduce() 函数的第一个参数是执行化简操作的函数.第二个是传递给函数的初始值(如果无,函数将把数组中的第一个元素作为其初始值).
    > 空数组上,不带初始值参数调用此函数将会报错.
    > 如果只有一个元素且没有指定初始值,或者有一个空数组并且指定了一个初始值,reduce() 只是简单地返回那个值而不会调用化简函数.
    > reduceRight()reduce() 作用一样, 区别在于它执行的顺序是从右到左.
  • 是否改变原数组: 不改变原数组,返回一个新数组。

indexOf()和lastIndexOf()

  • 目的:搜索数组中具有给定值的元素。
  • 参数:第一个参数指的是需要搜索的值,返回则找到第一个元素的索引或者如果没有找到就返回-1.
    第二个参数是可选的,它指定数组中的一个索引,表示从哪里开始搜索,可以是负数,它代表相对于数组末尾的个数。最后一个元素是-1,倒数第二个元素为-2,以此类推...
  • lastIndexOf() 指从前往后查询. lastIndexOf() 指从后往前查询.

ES6的数组方法


Array.from();

  • 目的:将类数组对象和可遍历对象转化为数组.
  • 参数:上述对象以及第二个参数。第二个参数类似于数组中的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组.
  • 用法:const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj) )(); (兼容写法).

Array.of();

  • 目的:将一组值转化为数组.
  • 参数:无或无限(无时返回一个空数组).

copyWithin();

  • 目的:在数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员).
  • 参数:target(必须): 从该位置开始替换数据.
    > start(可选):从该位置开始读取数据.
    > end(可选):到该位置的前一个位置.
  • 是否修改原数组:修改原数组.

find()和findIndex();

  • 目的:在数组内部, 找到第一个符合条件的数组成员.
  • 参数:回调函数接受三个参数,分别表示当前值,当前位置,原数组.
    俩个方法都接受第二个参数用来绑定函数中的this的值.(绑定作用域).
  • PS: 这两个方法都可以发现NaN,弥补了数组的IndexOf() 方法的不足。

fill();

  • 目的:如其意,填充一个数组.
  • 参数:第一个参数表示被填充的元素.
    第二个参数表示填充的起始位置.
    第三个参数表示填充的结束位置(指定位置之前一个).

ES7的数组方法

includes();

  • 目的:表示某个数组是否包含给定的值,与字符串的includes()方法类似.
  • 参数:第一个参数表示要查找的数,第二个参数表示搜索的起始位置,返回一个布尔值.
  • 意义:推荐使用这个而不是indexOf()因为后者会对NaN造成误判.

关于ES3、ES5、ES6以及ES7所有数组的方法(api)的总结的更多相关文章

  1. ES5和ES6新的操作数组的方法(常用)

    // 普通的for循环// var arr = ['张飞', '赵云', '马超', '刘备']// for (var i = 0; i < arr.length; i++) {// conso ...

  2. [js]es6语法: 字符串和数组的方法

    s的方法 根据index取value: 取首尾项,arr[0], arr[arr.length-1] 根据value取index(判断是否包含子字符串): s.indexOf 栗子: 'maotai' ...

  3. 关于 ES5 & ES6 数组遍历的方法

    ES5 数组遍历方法 1.for 循环 , , , , ] ; i < arr.length; i++) { console.log(arr[i]) } 2.forEach , , , , ] ...

  4. ES6入门概览二--数组

    一 数组 1. Array.from() 将两类对象转为真的数组 : 类似数组的对象(伪数组,如arguments.document.getElementsByTagNames等)和可遍历对象(包括E ...

  5. ES6、ES7、ES8、ES9、ES10

    ES6新特性(2015) ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化.两个发布版本之间时间跨度很大,所以ES6中的特性比较多.在这里列举几个常用 ...

  6. ES6、ES7、ES8、ES9、ES10新特性

    ES6新特性(2015) ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化.两个发布版本之间时间跨度很大,所以ES6中的特性比较多. 在这里列举几个常 ...

  7. ES6之数组扩展方法【一】(相当好用)

    form 转化为真正的数组 先说一下使用场景,在Js中,我们要经常操作DOM,比如获取全部页面的input标签,并且找到类型为button的元素,然后给这个按钮注册一个点击事件,我们可能会这样操作: ...

  8. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  9. 简述ES5 ES6

    很久前的某一天,一位大神问我,你知道ES6相对于ES5有什么改进吗? 我一脸懵逼的反问,那个啥,啥是ES5.ES6啊. 不得不承认与大神之间的差距,回来深思了这个问题,结合以前的知识,算是有了点眉目. ...

随机推荐

  1. ASP.NET MVC 表单submit()

    HTML代码 <form id="frmLogin"> <div class="form-group has-feedback"> &l ...

  2. asp.net 自带的缓存

    本文导读:在.NET运用中经常用到缓存(Cache)对象.有HttpContext.Current.Cache以及HttpRuntime.Cache,HttpRuntime.Cache是应用程序级别的 ...

  3. MOSS(Microsoft Office Sharepoint Server)升级2013遇到的PDF权限问题及解决方案

    最近公司MOSS从2007升级到了2013,遇到了一个很呕心的问题: 为了保护公司资料安全,我们一直使用RMS给文档增加权限(信息权限管理 (IRM)),只有公司内部员工可以阅读.RMS加权限的范围仅 ...

  4. FreeBSD 查看硬件信息

    systat 能实时查看各种信息 systat -pigs 默认值CPU systat -iostat 硬盘IO systat -swap 交换分区 systat -mbufs 网络缓冲区 systa ...

  5. (转)学习使用Jmeter做压力测试(一)--压力测试基本概念

    一.性能测试的概念 性能测试是通过自动化的测试工具模拟多种正常峰值及异常负载条件来对系统的各项性能指标进行测试.负载测试和压力测试都属于性能测试,两者可以结合进行. 通过负载测试,确定在各种工作负载下 ...

  6. eclipse安装svn

  7. 代码阅读工具:Source Navigator和Source Insight

    (摘自http://www.cnblogs.com/yc_sunniwell/archive/2010/08/25/1808322.html) 一.Source Insight实用技巧: Source ...

  8. java布局学习 (二)

    前文中介绍了FlowLayout和BorderLayout 本文我们将会继续介绍java中的布局方式 (3)GridLayout 网格布局 这种布局会将整个容器划分成M行*N列的网格. 如下图:    ...

  9. c#中按键小技巧

    以后会补充其他的内容

  10. 一个可拖拽的DIV框框

    http://codepen.io/lrelia/pen/bEyLB 使用了JQuery UI库, draggable来自于JQuery UI库