Array() 方法汇总

2019-05-21 admin

1. length属性 && 检测数组

  • length属性不是只读,可以设置该属性,从数组的末尾移除项或添加新项

  • 检测数组:

    1. 一个全局作用域下(一个网页),使用instanceof
    2. 两个以上不同的全局执行环境(网页包含多个框架),使用Array.isArray()

2. 转换方法

  • toString()
  • 返回由数组中每个值的字符串形式拼接而成的以逗号(,)分隔的字符串,实际上会调用每一项的toString()
  • toLocaleString() 返回值经常与toString()相同, 但调用的是每一项的toLocaleString()
  • valueOf() 返回数组本身

3. 栈方法 LIFO(last in first out)

  • push() 数组末尾添加任意个项,返回数组新的长度,
  • pop() 删除数组末的最后一个元素,并返回移除的项

4. 队列方法 FIFO

  • shift() 删除并返回数组第一项
  • unShift() 在数组的开头添加任意个项,并返回数组新的长度

5. 重排序方法

  • reverse() 反转数组项的顺序,该方法会改变原来的数组,而不会创建新的数组。

  • sort()

    1. 默认情况下,sort()方法按升序排列数组,通过调用每一项的toSring()再比较,因此比较的是字符串

    2. 接受一个比较函数作为参数时,比较函数接受两个参数,来指定哪个值位于哪个值得前面,

      function sortNumber(a,b) {
            return a - b
       }   //升序
      

6. 操作方法

  • concat() 可以拼接任意数组,返回新数组,不改变自身

    <script type="text/javascript">
    
    var a = [1,2,3];
    document.write(a.concat(4,5));
    
    </script>
    
  • slice() 接受两个参数,代表截取得起止位置,不包含结束位置,一个参数时默认截取到最后,参数为负数时,加上数组本身长度,注意 不影响原数组,如果起始位置小于结束位置,则返回空数组

  • splice()

    1. 删除: 两个参数 删除的第一项的位置 和 删除的项数
    2. 插入: 三个参数 起始位置、 0(删除的项数)和插入的项,若插入多项,则在后面加上插入的项
    3. 替换: 三个参数 起始位置、 删除的项数、替换的项(任意数量)

返回从数组中删除的项,没有删除时返回空数组,改变原数组

7. 位置方法

  • indexOf()

  • lastIndexOf() 都接受两个参数 查找的项和查找起点位置的索引(可选),返回查找项在数组中的位置,没找到时返回1

         let arr = ['orange', '2016', '2016'];
         arr.indexOf('orange'); //0
         arr.indexOf('o'); //-1 因为此方法不会在每一个元素的基础上再次执行 indexOf 匹配。
         arr.indexOf('2016'); //1
         arr.indexOf(2016); //-1 注意:这里不会做隐式类型转换。
    

8. 迭代方法

每个方法都接受两个参数,第一个为在每一项运行的函数,第二个为运行该函数的作用域对象(可选) 函数接受三个参数:item,index, array本身,都不会改变原数组

  • every() 传入函数的每一项都满足函数,返回true
  • some() 某一项满足函数的条件,返回true
  • forEach() 与for循环用法一致,无返回值
  • filter() 返回一个新的数组,用指定的函数确定是否在返回的数组中包含某一项
  • map() 返回一个新的数组,该数组的值对应原数组的每一项运行指定函数的返回值

9. 归并方法

  • reduce()
  • reduceRighht() 两个方法都会迭代数组的所有项,构建一个最终的返回值 接受两个参数: 每一项调用的函数 和 归并基础的初始值 函数接受四个参数: 前一个值 当前值 索引 和数组对象,该函数的返回值都会作为第一个参数传给下一项,第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项

10. ES6新增方法

  • find() 返回通过测试(函数内判断)的数组的第一个元素的值。 find() 方法为数组中的每个元素都调用一次函数执行: 如果没有符合条件的元素返回 undefined find() 对于空数组,函数是不会执行的。

不改变原数组

  • findIndex() 和find()差不多,默认返回的是索引。

  • includes() 与String的includes()一样,接收2参数,查询的项以及查询起始位置,返回true或false

  • keys() 对数组索引的遍历

  • values() 对数组项的遍历

  • entries() 对数组键值对的遍历

     let arr=['w','b'];
    for(let a of arr.entries()){
        console.log(a)
    }//结果:[0,w],[1,b]
    for(let [i,v] of arr.entries()){
        console.log(i,v)
    }//结果:0 w,1 b
    
  • fill() 数组填充

     let arr=['w','b'];
     arr.fill('i')//结果:['i','i'],改变原数组
    

new Array(3).fill(‘k’).fill(‘r’,1,2)//结果:[‘k’,‘r’,‘k’],第三个数组表示填充的结束位置,前开后闭区间

- Array.from() 
  把带有lenght属性类似数组的对象转换为数组,也可以把字符串等可以遍历的对象转换为数组,它接收2个参数,转换对象与回调函数

Array.from({'0':'w','1':'b',length:2})//["w", "b"],返回数组的长度取决于对象中的length,故此项必须有!
Array.from({'0':'w','1':'b',length:4})//["w", "b", undefined, undefined]
Array.from({'0':'w','1':'b',length:1})//["w"]
let divs=document.getElementsByTagName('div');
Array.from(divs)//返回div元素数组
Array.from('wbiokr')//["w", "b", "i", "o", "k", "r"]
Array.from([1,2,3],function(x){
        return x+1
    })//[2, 3, 4],第二个参数为回调函数

【完】
作者简介:郑佳欢,芦苇科技web前端实习生,公司部分作品:口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端领域框架、交互设计、图像绘制、数据分析等研究。 一起并肩作战: [zhengjiahuan@talkmoney.cn](mailto:yemao@talkmoney.cn) 访问 [www.talkmoney.cn](http://www.talkmoney.cn/) 了解更多

[转载]原文链接:https://segmentfault.com/a/1190000019246367

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65426.html

文章标题:Array() 方法汇总

相关文章
jQuery给多个不同元素添加class样式的方法
本文实例讲述了jQuery给多个不同元素添加class样式的方法。分享给大家供大家参考。具体分析如下: jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class &lt;!DOCTYPE html&gt;...
2017-03-22
JavaScript将字符串转换成字符编码列表的方法
本文实例讲述了JavaScript将字符串转换成字符编码列表的方法。分享给大家供大家参考。具体如下: JavaScript将字符串转换成字符编码列表,例如foo转换成 [112,111,111] 方法 1: JavaScript 1.6 A...
2017-03-21
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta cha...
2017-03-21
nodejs搭建本地服务器并访问文件的方法
安装node:https://nodejs.org/en/download/ 在本地建立目录:f:/nodetest,在该目录下新建index.html作为我们将要访问的内容。新建server.js作为node开启的入口: $ cd f:&...
2017-03-13
JavaScript实现模仿桌面窗口的方法
本文实例讲述了JavaScript实现模仿桌面窗口的方法。分享给大家供大家参考。具体如下: 这里使用JS模仿了桌面窗口的移动、八个方向的缩放、最小化、最大化和关闭,以及 双击缩小放大窗口、改变窗口大小的预览效果等功能。 &lt;!DOCTY...
2017-03-27
4种方法帮你的网站创建更丰富的Web体验
现在的网站已经从一个简单的文本页面开始进化了很多,我们可以制作出丰富的视觉效果来增加用户在桌面浏览器和移动浏览器的体验。 今天这篇文字就给大家分享4个实用的方法,来帮助你创建更好的Web体验。 对于那些还在用IE6的朋友,我只想说一句:go...
2016-01-13
jscript读写二进制文件的方法
本文实例讲述了jscript读写二进制文件的方法。分享给大家供大家参考。具体实现方法如下: var bin = new Array(256); for(var i=0;i&lt;256;i++){ bin[i]=String.fromC...
2017-03-22
JavaScript实现将xml转换成html table表格的方法
本文实例讲述了JavaScript实现将xml转换成html table表格的方法。分享给大家供大家参考。具体如下: function ConvertToTable(targetNode) { &#x2F;&#x2F; if the ta...
2017-03-22
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
本文实例讲述了JS常见创建类的方法。分享给大家供大家参考,具体如下: Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引...
2017-04-05
回到顶部