数组Array是JavaScript中最常用的类型之一,同一数组中可以保存任意类型的数据,并且它的长度是动态的,会随着数组中数据的加减自动变化。每个数组都有一个表示其长度(数组元素的个数)的length属性。并且数组元素的索引(下标)是从0开始的,所以数组最后一个元素的索引永远等于length – 1;

一     创建数组

1,使用new关键字创建

  1. var arr = new Array();

可以向Array构造函数传递参数以实现创建包含特定数据的数组,多个参数使用逗号隔开。

  需要注意的是:当参数只有一个数字时,构造函数创建的不是包含该数字的数组,而是一个长度为该数字的空数组,即arr.length = 数字。

   2,使用字面量形式创建

  1. var arr = [1,2,3];

数组元素被包含在一对“[]”中括号内,数组的每个元素之间用逗号隔开,最后一个元素后面不需要逗号。

  另外,上面已经讲过,数组的长度是动态的,这体现在可以手动的修改length值,以达到删除或增加数组长度的目的。

  1. var arr = [1,2,3];
  2. console.log(arr.length);//
  3. arr.length = 2;
  4. console.log(arr.length);//
  5. console.log(arr);//[1,2]
  6. arr.length = 3;
  7. console.log(arr.length);//
  8. console.log(arr);//[1,2,empty ]

  

  3,数组元素的访问

我们使用中括号[]加数字的形式访问数组元素。

  1. var arr = [1,2,3];
  2. console.log(arr[0]);//

通过这种方式我们也可以动态的修改某一位置的值,或向某一位置插入一个新值。

  1. var arr = [1,2,3];
  2. arr[0] = 4;
  3. console.log(arr);//[4,2,3]
  4. arr[4] = 0;
  5. console.log(arr);//[4,2,3,empty,0];

可以看到,原本arr的长度是3,但我们向下标4的位置插入了一个新值,于是数组的长度变成了5,由于下标为3的位子原来并没有值,并且我们也没有新插入,所以JavaScript自动向该位置添加了一个空值占位符。

  4,检测数组

  检测数组一般有两种方式:

  1. var arr = [];
  2. arr instanceof Array; //true
  3. Array.isArray(arr); //true

二     数组基本的遍历

  1,普通for循环    

  1. var arr = [1,2,3];
  2. for(var i = 0,len = arr.length;i < len;i++){
  3. console.log(arr[i]);
  4. //some code;
  5. }

效率最高的遍历数组方式。

  

  2,forEach   

  1. var arr= [1,2,3];
  2. arr.forEach(function (value, index, array) {
  3. console.log(index + ":" + item + ":" + array);
  4. });
  5. /*
  6. 0:1:[1,2,3]
  7. 1:2:[1,2,3]
  8. 2:3:[1,2,3]
  9. */

  函数接受3个参数,第一个是当前处理元素的值,第二个是当前处理元素的下标,第三个是当前遍历的数组,第二三个参数是可选的。

  3,map   

  1. var arr = [1,2,3];
  2. var newArr = arr.map(function (item, index, array) {
  3. return item * item;
  4. }
  5. console.log(newArr);//[1,4,9]

函数的参数和forEach方法一致。它会把函数作用到每个遍历到的数组元素上,并返回一个新值,最终得到一个新数组并返回。

  

  4,for…in  

  1. var arr = [1,2,3];
  2. for(var index in arr){
  3. console.log(index + ":" + arr[index]);
  4. }
  5. /*
  6. 0:1
  7. 1:2
  8. 2:3
  9. */

for...in更适合遍历对象,而不是数组,而且使用它遍历数组的效率并不高。

  

  5,for…of

  1. var arr = [1,2,3];
  2. for(var item of arr){
  3. console.log(item);
  4. }
  5. //
  6. //
  7. //

  for...of是ES6的新方法,用它遍历数组比for...in稍快一点。

三   数组常用方法

 

  1,  toString(),valueOf()和join()

  数组调用toString()和valueOf()一般返回由逗号隔开的所有数组元素组成的字符串,除非你重写了它们。 

  1. var arr = [“hello”,”world”];
  2. console.log(arr.toString());//”hello,world”
  3. console.log(arr.valueOf());//”hello,world”

  join()可以接受一个字符串作为参数,用这个字符串作为分隔符。

  1. var arr = [”hello”,”world”];
  2. console.log(arr.join());//”hello,join”
  3. console.log(arr.join(“”));//”helloworld”
  4. console.log(arr.join(“&&”));//”hello&&world”

  

  2,  push()和pop(),unshift()和shift()

  push()接受任意多个参数,以逗号隔开,依次添加到数组的末尾,返回修改后数组的长度。

  pop()从数组末尾删除一项,返回被删除的元素。

  unshift()从数组开头插入任意多个元素,返回插入后数组的长度。

  shift()从数组开头删除一个元素,返回被删除的元素。

  1. var colors = ["red","blue","pink","white"];
  2. colors.push("black");//
  3. console.log(colors);//["red","blue","pink","white","black"]
  4. colors.pop();//"black"
  5. console.log(colors);//["red","blue","pink","white"]
  6. colors.unshift("green");//
  7. console.log(colors);//["green","red","blue","pink","white"]
  8. colors.shift();//"green"
  9. console.log(colors);//["red","blue","pink","white"]

  

  3,  reverse()和sort()

  reverse()会翻转数组元素的顺序。

  1. var arr = [1,2,3];
  2. arr.reverse();
  3. console.log(arr);//[3,2,1]

  sort()默认根据数组元素的字符编码排序。可以接受一个函数作为参数,该函数接受两个参数,如果第一个参数应该在第二个之后,那么返回一个正数,如果第一个和第二个位置不变,则返回0,如果第一个应该在第二个之前,那么返回一个负数。

  1. var colors = ["red","blue","pink","white"];
  2. colors.sort(function(val1,val2){
  3. if(val1 < val2){
  4. return -1;
  5. }else if(val1 == val2){
  6. return 0;
  7. }else{
  8. return 1;
  9. }
  10. });
  11. console.log(colors);["blue","pink","red","white"]

  如果想实现倒序排列,可以设置当val1小于val2时返回1,最后返回-1;如果比较的是数字,可简写为:

  1. var arr = [3,51,55,23,-1,-50,0.2];
  2. arr.sort(function(val1,val2){
  3. return val1 - val2;
  4. });
  5. console.log(arr);//[-50, -1, 0.2, 3, 23, 51, 55]

  如果想实现倒序排列,则return val2 - val1 即可;

  sort()方法在接受到函数作为参数后,会把数组的每一个值依次当做函数的参数传给它,第一次是arr[0]和arr[1],比较完后会把排在后面的那个值作为函数的第一个参数,arr[2]作为第二个参数再传给函数,依次类推,直到最后一个数组元素。

  

  4,  concat()

  接受一个或多个数组作为参数,把这些参数数组与原数组连接,形成一个新数组并返回。如果参数不是数组,也会被简单的连接到一起形成新数组。

  1. var arr = [1,2,3];
  2. var otherArr = ["hello","world"];
  3. console.log(arr.concat(otherArr));//[1,2,3,"hello","world"]

  

  5,  slice()

  接受两个数字作为参数,返回数组下标在他们之间的元素(不包含下标为第二参数的元素)组成的新数组,该方法不会改变原数组。

  1. var arr = [1,2,3,4,5];
  2. var newArr = arr.slice(0,4);
  3. console.log(newArr);//[1,2,3,4]

  

  6,  splice()

  该方法功能强大,有以下三种使用方法:

    A:删除

接受两个数字参数,第一个表示需要被删除的第一项的下标,第二个表示需要被删除的元素个数。

    B:插入

接受3个或多个参数,第一个是插入元素的起始位置,第二个是0,表示不删除原数组的任何元素,第三个是要被插入的元素,如果有多个元素需要被插入,可以继续在后面添加其他参数。

    C:替换

接受3个或多个参数,第一个是要被替换的元素的起始位置,第二个是需要被替换的元素个数,其他的的参数是替换的内容。如果想保持原数组长度不变,则替换内容的个数必须和第二个参数相等。

  1. var arr = [1,2,3,4,5];
  2. arr.splice(0,3);//从第一个元素开始删除3个元素
  3. console.log(arr);//[4,5]
  4. arr.splice(0,0,1,2,3);//从第一个元素开始删除0个,并添加1,2,3这3个元素
  5. console.log(arr);[1,2,3,4,5]
  6. arr.splice(2,2,5,5);//从第三个元素开始删除2个,并在该位置添加两个5,从结果看就像是用5替换了原数组中的3和4
  7. console.log(arr);//[1,2,5,5,5]

四   数组ES5迭代

  1,forEach(fn(value,index,array))

  forEach方法为每个数组元素调用一次函数(回调函数)。

  函数参数value表示每次迭代的数组元素,index表示其下标,array表示数组本身。参数都是可选的。

  1. var arr = ["hello","JavaScript"];
  2. numbers.forEach(function(value,index){
  3. console.log(index + ":" + value);
  4. });
  5. //0:"hello"
  6. //1:"JavaScript"

  

  2,map(fn(value,index,array))

  map方法对数组的每个元素应用回调函数,回调函数必须return。最后返回一个新数组。

  参数同上。

  1. var arr = [1,2,3];
  2. var newArr = arr.map(function(value){
  3. return value * value;
  4. });
  5. console.log(newArr);//[1,4,9]

  

  3,filter(fn(value,index,array))

  filter方法通过回调函数筛选符合条件的数组元素,回调函数必须return。最后返回一个新数组。

  参数同上。

  1. var arr = [0,99,-50,-0.1,50];
  2. var newArr = arr.filter(function(value){
  3. return value <= 0;//return ture,则返回该数组元素至新数组,false,则滤掉该数组元素
  4. });
  5. console.log(newArr);//[0,-50,-0.1]

  

  4,reduce(fn(result,value,index,array))

  reduce方法通过回调函数,使用数组元素(以数组元素为数据基础)生成一个新的值。

  注意,reduce回调函数有四个参数,第一个是必须的,它是每次执行回调函数后返回的结果,同时也是下一次执行时回调函数的第一个参数。

  当迭代到最后一个数组元素时,result将被当做最终结果返回。

  1. var arr = ['1','2','3','4','5'];
  2. var total = arr.reduce(function(result,value){
  3. return result + value;//注意:第一次执行时,result是arr[0],value是arr[1]
  4. });
  5. console.log(total);//'12345'

  还有一个与reduce对应的方法:reduceRight。它的使用和reduce完全一样,不过它是从右往左迭代。

  1. var arr = ['1','2','3','4','5'];
  2. var total = arr.reduce(function(result,value){
  3. return result + value;//注意:第一次执行时,result是arr[4],value是arr[3]
  4. });
  5. console.log(total);//'54321'

  

  5,every(fn(value,index,array)) / some(fn(value,index,array))

  every用于判断是否所有数组元素都能通过检测,而some用于检测是否有数组元素能通过检测,他们都返回true或者false。

  参数同forEach。

  1. var arr = [0,99,-50,-0.1,50];
  2. var someResult = arr.some(function(value){
  3. return value <= 0;
  4. });
  5. var everyRsult = arr.every(function(value){
  6. return value <= 0;
  7. });
  8. console.log(someResult);//true
  9. console.log(everyResult);//false

数组还有很多有用的方法,这里只列举了比较常用的一些方法,了解详细请移步MDN的标准内置对象Array

JavaScript之对象Array的更多相关文章

  1. JavaScript Number 对象 Javascript Array对象 Location 对象方法 String对象方法

    JavaScript Number 对象 Number 对象属性 属性 描述 constructor 返回对创建此对象的 Number 函数的引用. MAX_VALUE 可表示的最大的数. MIN_V ...

  2. JavaScript基础精华03(String对象,Array对象,循环遍历数组,JS中的Dictionary,Array的简化声明)

    String对象(*) length属性:获取字符串的字符个数.(无论中文字符还是英文字符都算1个字符.) charAt(index)方法:获取指定索引位置的字符.(索引从0开始) indexOf(‘ ...

  3. javascript数组的内置对象Array

    javascript的内置对象Array是用于构造数组的全局对象,数组是类似于列表的高阶对象. 创建数组的方法: 1通过字面量:var arr = [1,2,3]; 里面的参数直接作为数组里的值 2通 ...

  4. JavaScript快速入门-ECMAScript本地对象(Array)

    Array对象 Array对象和python里面的list对象一样,是用来存储多个对象值的对象,且方法和属性基本上类似. 一.属性 lenght 二.方法  1.concat()  用于连接两个或多个 ...

  5. Javascript中判断变量是数组还是对象(array还是object)

    怎样判断一个JavaScript变量是array还是obiect? 答案: 1.如果你只是用typeof来检查该变量,不论是array还是object,都将返回‘objec'. 此问题的一个可行的答案 ...

  6. javascript中的array对象属性及方法

    Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, e ...

  7. JavaScript Object对象

    目录 1. 介绍:阐述 Object 对象. 2. 构造函数:介绍 Object 对象的构造函数. 3. 实例属性:介绍 Object 对象的实例属性:prototype.constructor等等. ...

  8. 从零构建JavaScript的对象系统

    一.正统的类与继承 类是对象的定义,而对象是类的实例(Instance).类不可直接使用,要想使用就必须在内存上生成该类的副本,这个副本就是对象. 以Java为例: public class Grou ...

  9. 据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展

    在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...

随机推荐

  1. cmd指令集

    CMD指令集 win+R打开运行 输入命令 可以快速执行一些程序或者功能 cmd的指令通常在system中使用 在电脑的环境变量中path中添加环境变量 环境变量可以在cmd的黑窗口进行执行进行快速打 ...

  2. input的onchange 和oninput事件

    一个小的功能,也体现了了这几天写程序过程中的遇到的一些常发事件,准备有时间研究一下jQuery和原生js,问题的出现:使用jQuery获取到的节点到底是属于什么,有些事件 居然不能用,就如我今天用到的 ...

  3. Memcached的原理分析与配置

    一.Why Memcached? • 高并发访问数据库的痛楚:死锁! • 硬盘IO之痛:本机:AspNet:HttpRuntime.Cache • 多客户端共享缓存 • Net+Memory>& ...

  4. C++中轻量级多线程openmp

    关于其概念及使用方法: https://baike.baidu.com/item/openmp/3735430?fr=aladdin

  5. 阿里分布式事务seata入门(采坑)

    1. 阿里分布式事务seata入门(采坑) 1.1. 前言 seata是feascar改名而来,这是阿里在19年年初开源出来的分布式事务框架,当初刚出来的时候就想研究下了,一直拖到了现在,目前是0.8 ...

  6. IT人不仅要提升挣钱能力,更要拓展挣钱途径

    前几天我上班路上,和小区门口开车的师傅闲聊,发现他们虽然学历不高,但挣钱的途径不少,比如固定接送多位客户,然后能通过朋友圈拓展新客户,而且通过客户口口相传,也能不断拉到生意,算下来每月也能挣1万5出头 ...

  7. 设计模式(C#)——06桥接模式

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321       在早先,几乎每个手机的充电器接口都是不同的.每个型号的手机都有一个充电器,此时我们把充电器作为一个抽象类,抽象类中提 ...

  8. MySQL 5.7 的安装历程

    mysql5.7零基础入门级的安装教程: 安装环境:Windows 10, 64 位(联想拯救者R720) 安装版本:mysql-5.7.25-winx64 一.下载 1.进入官网 首先,下载MySQ ...

  9. 解决org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.xyfer.dao.UserDao.findById

    在使用Spring整合MyBatis的时候遇到控制台报错:org.apache.ibatis.binding.BindingException: Invalid bound statement (no ...

  10. Atcoder C - Nuske vs Phantom Thnook(递推+思维)

    题目链接:http://agc015.contest.atcoder.jp/tasks/agc015_c 题意:给一个n*m的格,蓝色的组成路径保证不成环,q个询问,计算指定矩形区域内蓝色连通块的个数 ...