数组在我目前学习过的编程语言中都可以见到, 形形色色的方法也数不胜数, 不过功能都一样, 最多也就是方法名稍稍有所不同, 老外也没个准啊, 如果英语比较好的同学对于学习方法(method)来说是很快的, 因为基本都可以翻译出来, 不过也要勤加锻炼, 总体来说, 英语水平不怎么影响编程技术, 看看API的话, 认识点简单的词汇, 就差不多了.

  数组对象

  文中一再的把数组和对象一起说, 是因为数组具有对象的一切特性, 更准确的说数组属于一类对象, 一类继承自Array.prototype的对象, 所以在原型链上具有大量的方法以供数组对象使用, 数组和对象略有不同, 比如对象的属性是无序的, 而数组的元素(其实也是属性)是有序的, 而且数组元素只可以通过索引的方式访问. JS中的数组是弱类型的, 所以在数组中可以存放任意类型的元素, 这个在之前都有简单的介绍, 这里就不过多解释了, 二维数组也不再赘述了, 这里主要说数组的方法与特性


  var array = [1, 2, "wang", {x : 1}, [1, 2], function(){document.write("hello")}];

  array[0];  //1

  array["2"];  //wang

  array[3].x;  //1

  array["5"]();  //hello


  不要以为我索引是不是写错了, 之前也说过, 索引其实就是对象的key值, 所以是可以这样使用的, 由你选择, 写出来也是为了让大家有多理解和体会.

  数组的方法

  数组作为一种有序的数据的结合, 因其特性需要大量的方法对数组进行编辑, 毕竟数组的增删性能太差了, 不可能每次都由我们自己来写逻辑方法, 所以我们只需要使用原型链上提供的大量已经封装好的方法即可.

  通用兼容的方法主要有join(数组转字符串), reverse(逆序), sort(排序), concat(数组的拼接), splice(数组的截取), splice(数组的截去和拼接), 这些是主要的不太需要考虑兼容性的方法, ES5之后的方法虽然应该也全部兼容了, 所以还是提一下, forEach(遍历), map(元素编辑), filter(元素过滤), every/some(数组条件判断), reduce(两两元素操作), indexOf(索引查找), isArray.

  下面全部用代码举例解释下每个方法

  join方法


  var array = [1, 2, 3];

  array.join();  //"1, 2, 3"

  array.join("_");  //"1_2_3"


  这个方法主要是将数组中的元素使用参数连接成字符串, 使用率还是很广的.

  reverse方法

  明确一下, 这个并不是排序, 而是把数组中的元素按照逆序排列, 这个方法修改的是原数组对象, 而不是copy出来一个对象作为返回值.


  var array = [1, 3, 2];

  array.reverse();  //[2, 3, 1];

  array;  //[2, 3, 1], 原数组被修改了


  sort方法

  这个是一个排序方法, 默认的时候会将元素toString, 然后比较字符串, 一般采取通过一个闭包作为参数来修改排序的顺序, 所以排序在不适用函参时是不可靠的. 这个方法也会修改原素组.


  var array = [13, 24, 51, 3];

  array.sort();  //[13, 24, 3, 51]

  /*

   *每个元素转化成字符串后只会比较字符串里面的第一个元素, 所以就会出现这种情况, 3被排到了第三个

   */

  array.sort(function(a, b){return a - b;});  //[3, 13, 25, 51]

  /*

   *通过闭包比较数组中的每个元素, 然后修改排序

   */

  array;  //[3, 13, 25, 51], 原数组被修改了.


  concat方法

  数组拼接方法, 能够在数组的尾部拼接想要的参数, 可以是任何类型, 如果拼接的是数组, 会进行一次拉齐操作, 如果是一个二维数组, 那么只会拉齐一次数组, 也就是数组中的元素会保存原来的特性, 原本是一维数组元素, 还会是一位数组元素, 原本是二维, 也还是二维, 这个方法会返回一个数组, 而并不修改原数组.


  var array = [1, 2, 3];

  array.concat(4, 5);  //[1, 2, 3, 4, 5]

  array;  //[1, 2, 3], 原数组并没有被修改

  array.concat([10, 11], 13);  //[1, 2, 3, 10, 11, 13], 参数中的数组被拉齐, 保持元素维数.

  array.concat([1, [2, 3]]);  //[1, 2, 3, 1, [2, 3]], 参数中的数组被拉齐, 保持元素维数. 2和3原本就是二维数组的元素, 现在还是2维数组元素.


  slice方法

  slice方法主要完成的是数组元素的截取, 留下自己想要得到的元素的数组, slice()里面的参数决定了, 截取的具体坐标, 这个方法也并不会修改原数组, 而是以copy一个新数组作为返回值, 代码示例.


  var array = [1, 2, 3, 4, 5];

  array.slice(1, 3);  //[2, 3], 以索引为1的元素为开始, 索引为3的元素结束, 左闭右开

  array.slice(1);  //[2, 3, 4, 5], 以索引为1的元素开始, 截取到最后

  array.slice(1, -1);  //[2, 3, 4], 负数的坐标代表从右侧开始, 但是是没有0坐标的, 所以-1也就是array[4], 所以也可以理解为截取到数组长度减1.

  array.slice(-4, -3);  //[2], 遵从上面的理解, 数组长度减4到减3也就是, array.slice(1, 2), 所以结果是[2].


  splice方法

  slice方法是对数组的截取, 而splice是截去自己不想要的部分, 留下所求的, 也是对原数组直接进行操作, 而splice也可以在截去不想要的部分后拼接上自己想要的元素, 代码示例.


  var array = [1, 2, 3, 4, 5];

  var secondArray = array.splice(2);  //return [3, 4, 5], 截去的元素将会以一个数组作为返回值.

  array;  //[1, 2]

  secondArray;  //[3, 4, 5]


  var array = [1, 2, 3, 4, 5];

  var secondArray = array.splice(2, 2);  //return [3, 4]

  array;  //[1, 2, 5]

  secondArray;  //[3, 4];


  var array = [1, 2, 3, 4, 5];

  var secondArray = array.splice(1, 1, 'a', 'b');  //return[2], 同时在原数组上拼接上'a', 'b', 两个元素

  array;  //[1, 'a', 'b', 3, 4, 5]

  secondArray;  //[2]


  下面的方法都是ES5中才具有的.

  forEach方法

  forEach方法和for in很像, 属于遍历的方法, 它的作用主要是遍历数组中的每一个元素, forEach()和sort很像, 是需要一个闭包来作为函数的参数, 而闭包函数内部是有三个参数的, 下面代码距离逐一介绍.


  var array = [1, 2, 3, 4, 5];

  array.forEach(function(element, index, array){

      document.write("array[" + index + "]" + " : " + element + "<br />");

  });

  输出结果为:

  array[0] : 1
  array[1] : 2
  array[2] : 3
  array[3] : 4
  array[4] : 5


  function()中的参数名可以任意, 这是闭包的特性, 这里不详细解释, 简单说下参数都是干嘛的, 第一个参数是遍历的元素, 也就是数组中每个元素的值, 第二个参数就是数组的索引, 第三个参数就是数组本身.

  map方法

  这个方法是对数组中的元素进行逐一的处理, 返回一个新的数组, 原数组不改变.


  var array = [1, 2, 3];

  var secondArray = array.map(function(x){

    return x + 10;

  });

  array;  //[1, 2, 3]

  secondArray;  //[11, 12, 13];


  filter方法

  filter是个过滤器方法, 它能够将你想要过滤筛选的元素挑选出来, 返回一个新的数组.


  var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  var secondArray = array.filter(function(x, index){

    return index <= 3 || x >= 8;  

  });

  array;  //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

  secondArray;  //[1, 2, 3, 4, 8, 9, 10]


  这个方法中的函参中的参数x是元素的值, index是索引, 闭包参数的含义是只返回索引小于等于3或者值大于等于8的元素. 完成了数组过滤器的效果.

  every/some方法

  这两个方法主要的作用是遍历判断数组中的元素是否符合条件, every要求的是每一个元素都要符合要求, some要求的是只要有一个符合条件就可以, 这两个方法给我一种逻辑或, 逻辑与的感觉. 而且这个也具有逻辑与和逻辑或的短路效应, 所以一旦确定结果, 遍历也会终止.


  var array = [1, 2, 3, 4, 5];

  array.every(function(x){

    return x < 10;  //判断是不是每个元素都小于10

  });  //true

  array.every(function(x){

    return x < 3;  //判断是不是每个元素都小于3

  });  //false

  array.some(function(x){

    return x == 1;  //判断是不是有元素等于1

  });  //true

  array.some(function(x){

    return x > 100;  //判断是不是有元素大于100

  });  //false


  reduce/reduceRight方法

  reduce方法主要是负责两两元素的操作的, 比如做累加, 比如做比较, 都可以通过reduce.


  var array = [1, 2, 3];

  var result = array.reduce(function(x, y){

    return (x + y);

  });  //6

  array;  //[1, 2, 3], 原数组未修改

  var array = [3, 9 , 6];


  这里的流程是首先1和2进入, 然后得到的结果作为下一次的x参数, 然后再一次是3和3进入, 最后得到了6


  var max = array.reduce(function(x, y){

    document.write(x + ' | ' + y);

    return (x > y ? x : y);

  });

  // 3 | 9

  // 9 | 6

  max;  //9


  输出结果很明确了, 就不再赘述了.

  reduceRignt的特性和reduce是一样的, 只是并不是从左往右, 而是从右往左, 感兴趣的同学自己写一下就知道了.

  indexOf方法

  indexOf方法是获取元素在数组中第一次出现的索引位置, 如果数组中没有会返回-1, 方法中第一个参数是要查找的元素, 第二个参数是可选的, 是指从哪个索引位置开始查找, 最后返回的会是元素在数组中的索引.


  var array = [1, 2, 3, 2, 1];

  array.indexOf(2);  //1, 说明array[1] = 2

  array.indexOf(99);  //-1, 说明数组中并没有99这个元素

  array.indexOf(1, 1);  //4, 从索引为1开始查找1这个元素, 那么只有第四个是

  array.indexOf(1, -3);  //4, 数组长度为5, 也就是说从array[2]开始查找元素索引, 所以还是4

  array.indexOf(2, -1);  //-1, 数组长度为5, 也就是从array[4]开始查找元素索引, 所以没有, 所以-1


  还有一个方法是lastIndexOf(), 这个和indexOf是一样的, 只是是从后往前查找索引, 和reduceRight一样, 感兴趣的同学自己试一试.

  isArray类方法

  准确来说并不是类方法, 因为JS中并没有类, 但是为了让大家好理解我才这么说, 上面的方法都是在Array.prototype上的, 所以用对象直接就可以调用, 而这个方法是Array构造器上的方法, 所以需要使用Array来进行调用, 它起的作用主要是判断一个对象是否是数组对象, 如果是数组对象则返回true.


  var array = [1, 2, 3, 4, 5];

  Array.isArray(array);  //true


  数组的常用的方法差不多就是这么多, 希望对大家的学习能有帮助.

了解JavaScript 数组对象及其方法的更多相关文章

  1. javascript 数组对象及其方法

    数组声明:通过let arr = new Array(); 或者 let arr = []; 数组对象可调用的方法: 1)find方法,使用情况是对数组进行筛选遍历,find方法要求某个函数(A)作为 ...

  2. JavaScript数组对象常用方法

    JavaScript数组对象常用方法 方法 形式 返回值 是否改变原数组 描述 concat -items: ConcatArray[] 追加之后的数组 否 连接两个或更多的数组,并返回结果.注意 c ...

  3. javascript数组对象排序

    javascript数组对象排序 JavaScript数组内置排序函数 javascript内置的sort函数是多种排序算法的集合 JavaScript实现多维数组.对象数组排序,其实用的就是原生的s ...

  4. js 判断数组包含某值的方法 和 javascript数组扩展indexOf()方法

    var  questionId = []; var anSwerIdValue = []; ////javascript数组扩展indexOf()方法 Array.prototype.indexOf ...

  5. JavaScript 中有关数组对象的方法

    JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象 ...

  6. JavaScript数组对象方法

    数组的方法:首先,数组的方法有数组原型方法,也有从object对象继承来的方法.这里只详细说明一下数组的原型方法. (1)join:把数组中的所有元素放入一个字符串.元素通过指定的分隔符进行分隔. 例 ...

  7. javaScript定义对象的方法

    转自souhu新闻http://news.sohu.com/20110215/n279335637.shtml? javascript定义对象的几种简单方法 1.构造函数方式,全部属性及对象的方法都放 ...

  8. Javascript数组求和的方法总结 以及由斐波那契数列得到的启发

    一次面试中,面试官要求用三种不同的Javascript方法进行一个数字数组的求和,当时思来想去只想到了使用循环这一种笨方法,因此面试比较失败,在这里总结了六种Javascript进行数组求和的方法,以 ...

  9. JavaScript 数组对象的去重

    JavaScript数组去重 1.原型去重法.通过prototype找到数组的源性对象Array,在数组的原型上添加unique()方法.需要使用的时候使用 点 " . " 进行连 ...

随机推荐

  1. 关于Linux和Windows下部署mysql.data.dll的注册问题

    mysql ado.net connector下载地址: http://dev.mysql.com/downloads/connector/net/ 选择版本: Generally Available ...

  2. ucos实时操作系统学习笔记——任务间通信(消息)

    ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...

  3. 再来说说 LaTeX

    在我的上一篇随笔中,我提到了 Markdown.LaTeX 和 MathJax.这几个东西对目前的网络技术文章的写作.展示都有深远的影响.在上一篇中,我还给出了一份 LaTeX 语法的学习资料.在这一 ...

  4. [Javascript] 爬虫 模拟新浪微博登陆

     概述: 由于业务需要,要编写爬虫代码去爬去新浪微博用户的信息. 虽然在网上能找到不少信息,但由于新浪微博改版,其登陆机制进行了修改,故很多老的文章就不适合用了. 经过一番摸索,成功模拟新浪微博的登陆 ...

  5. ubuntu 启动MySql和安装python的MySQLdb模块

    ubuntu一般会自己预安装mysql,你只需 /etc/init.d/mysql start|stop|restart|reload|force-reload|status  命令便可以实现mysq ...

  6. 设置Fn键 笔记本直接按F1-F12 无须按Fn键 Fn+F12改F12(联想小新300为例)

    最近公司给配的笔记本联想小新300 80RT  i7-6500U 4G内存 500G机械,后加装120G固态+4G内存 这样就感觉还不错了. 在使用这本子的时候,去了Win10,强行装了Win7.无线 ...

  7. 关于js中的this之判断this

    this绑定规则的优先级顺序 new操作符绑定 > 显示绑定 > 隐式绑定 > 默认绑定   所以在判断函数在某个调用位置应用的是哪条规则,可以按下列这样的顺序   if(函数在ne ...

  8. SSH框架整合(代码加文字解释)

    一.创建数据库并设置编码. A) create database oa default character set utf8. 二.MyEclipse工程 A) 在Myeclipse里创建web工程, ...

  9. CentOS 6.8 安装TigerVNC 实现 Linux 远程桌面

    CentOS 6.8 有默认的安装的 vnc 位于端口 5900 : 系统->首选项->远程桌面 勾选[共享]的选项,  取消勾选[安全]的选项, 然后防火墙添加 5900 端口 基本就可 ...

  10. 将WordPress安装在网站子目录的相关问题

    May182013 将WordPress安装在网站子目录的相关问题 作者:xieyc   发布:2013-05-18 00:11   字符数:3423   分类:站长   阅读: 12,054 次   ...