JavaScript数组创建及常见方法汇总

数组不仅仅在JavaScript中扮演着非常重要的角色,而且在其它的程序语言中的重要性也是不言而喻的。数组在面试的过程中被提及的频率是非常高的,同时JavaScript中的数组与其他语言中的的数组还是有些区别的。

创建数组
  • 通过使用Array构造函数创建数组:
/*************创建一个空的数组**************/
var arr1=new Array();//创建一个空的数组
console.log(arr1);//[]
arr1[0]="张三";//设置数组下标0的值为张三
arr1[1]="李四";//设置数组下标1的值为李四
console.log(arr1);//[ '张三', '李四' ]
console.log(arr1.length);//2
/*************创建指定长度的数组************/
var arr2 = new Array(2);//创建一个长度为2的数组
arr2[0]="red";//arr2下标0的值为"red"
arr2[1]="yellow";//arr2下标1的值为"yellow"
arr2[2]="green";//arr2下标2的值为"green",arr2声明长度为2,但可以添加超过其指明长度的元素
console.log(arr2);//[ 'red', 'yellow', 'green' ]
/*********创建指定数组初始值的数组*********/
var arr3 = new Array("laoLiu","laoTie","laoWang");
console.log(arr3.length);//3
console.log(arr3);//[ 'laoLiu', 'laoTie', 'laoWang' ]
  • 通过数组字面量的形式创建数组:
//其实即为Array的简化写法
var arr1 = []; //创建一个空数组
var arr2 = [20]; // 创建一个长度为1的数组
var arr3 = ["red","yellow","green"]; // 创建一个具有初始值的数组
arr3[arr3.length] = "blue"; //下标3处(数组尾部)添加一项"blue"
arr3[1]="gold";//修改下标为1的值为"gold"

//注:数组的length属性是可修改的!
arr3.length = arr3.length-1; //将数组的最后一项删除
console.log(arr3);// ["red","gold","green"]
数组常见方法
  • push():将一个或多个元素添加到数组尾部,返回值为添加元素后的数组长度。
var arr = ["red"];
var len=arr.push("blue");//尾部添加一个元素
console.log(len,arr);//2, [ 'red', 'blue' ]
len=arr.push("gold","white");//尾部添加多个元素
console.log(len,arr);//4 ,[ 'red', 'blue', 'gold', 'white' ]
  • unshift():将一个或多个元素添加到数组头部,返回值为添加元素后的数组长度。
var arr = ["red"];
var len=arr.unshift("blue");//头部添加一个元素
console.log(len,arr);//2, [ 'blue', 'red' ]
len=arr.unshift("gold","white");//头部添加多个元素
console.log(len,arr);//4 ,[ 'gold', 'white', 'blue', 'red' ]
  • pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。
var arr = ["red","yellow","green"];
var item=arr.pop();//移除arr最后一项green
console.log(item);//green
console.log(arr.length);//2
console.log(arr);//[ 'red', 'yellow' ]
  • shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。
var arr = ["red","yellow"];
var item=arr.shift();//移除arr第一项red
console.log(item);//red
console.log(arr);//[ 'yellow' ]
item=arr.shift();//继续移除第一项
console.log(item);//yellow
console.log(arr);//[ ]
item=arr.shift();//arr已为空数组,但我还要继续shift
console.log(item);//undefined
console.log(arr);//[ ]
  • reverse():数组的元素顺序进行反转,返回结果为反转后的数组。
var arr=[2,4,6,8,10];
console.log(arr.reverse());//[ 10, 8, 6, 4, 2 ]
console.log(arr);//[ 10, 8, 6, 4, 2 ]
  • concat():连接两个或多个数组,它不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
//连接多个元素
var arr = [1,2,3];
console.log(arr.concat(4,5));//[ 1, 2, 3 , 4, 5]
console.log(arr);//[ 1, 2, 3 ]
//连接数组
var arr2 = [1,2,3];
console.log(arr2.concat([4,5],[6,7]));//[ 1, 2, 3, 4, 5, 6, 7 ]
console.log(arr2);//[ 1, 2, 3 ]
  • slice():该方法可从数组中返回选定的元素。接收一个或两个参数,即要返回的起始与结束位置。如果只有一个参数,返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,返回起始和结束之间的元素,但不包括结束位置的元素。
var arr = [1,2,3,4,5,6];
var arr2 = arr.slice(1);
var arr3 = arr.slice(1,3);
var arr4 = arr.slice(1,-2);
var arr5 = arr.slice(-3,-1);
//原数组没有发生变化
console.log(arr); //[ 1, 2, 3, 4, 5, 6 ]

//返回从下标1到数组最后的项
console.log(arr2); //[ 2, 3, 4, 5, 6 ]

//返回开始下标为1,结束下标(不包括3)之间的元素。
console.log(arr3); //[ 2, 3 ]

//下标为负数时,将负数加上数组的长度6,来替换该位置的数,所以应与arr.slice(1,4)的结果一致
console.log(arr4); //[ 2, 3, 4 ]

//负数与数组长度相加,替换位置的数字,即与arr.slice(3,5)的结果相同。
console.log(arr5); //[ 4, 5 ]
  • join():通过指定的分隔符将数组的各个元素进行连接成为一个字符串。如果不指定分隔符,则默认使用逗号作为分隔符。
var arr=["red","yellow","green"];
//指定"-"为分隔符,进行分隔
console.log(arr.join("-"));//red-yellow-green
//未指定分隔符,返回字符串默认以,进行分隔
console.log(arr.join());//red,yellow,green
//对原数组无影响
console.log(arr);//[ 'red', 'yellow', 'green' ]
  • splice():非常强大的数组方法,可以实现删除、插入和替换。返回值为一个数组,该数组为删除元素,如果没有删除任何元素,则返回一个空数组。
    删除:可以删除任意数量的元素,需要指定2个参数:要删除的第一项的位置和要删除的项数。返回的结果为删除的内容。
var arr=[2,4,6,8,10];
var arr2=arr.splice(0,2);//从下标0开始删除,删除2个元素
console.log(arr2);//[ 2, 4 ]
console.log(arr);//[ 6, 8, 10 ]

插入:可以向指定位置插入任意数量的元素,需要提供3个参数:起始位置、0(要删除的元素数量)、插入的元素

var arr=[2,3];
//从数组第2个位置插入3,4
var arr2=arr.splice(2,0,3,4);
console.log(arr2);//[]
console.log(arr);//[2,3,3,4]

替换:其实就是先删除,然后再插入

var arr=[2,3];
//将3替换为4,5
//先删除元素3,然后在3的位置插入4,5
var arr2=arr.splice(1,1,4,5);
console.log(arr2);//[3]
console.log(arr);//[ 2, 4, 5 ]
  • forEach():对数组进行遍历。参数为函数,默认有传参,参数分别为:遍历数组的元素,与元素对应的下标(索引),数组本身
var arr=[2,3,6,7,9];
arr.forEach(function(v,i,a){
    console.log(v+"|"+i+"|"+(a==arr));
})
// 结果:
// 2|0|true
// 3|1|true
// 6|2|true
// 7|3|true
// 9|4|true
  • split():把一个字符串分割为数组
var arr="day day up";
//使用空格符作为分隔符
console.log(arr.split(" "));//[ 'day', 'day', 'up' ]
//使用字符串"a"作为分隔符
console.log(arr.split("a"));//[ 'd', 'y d', 'y up' ]
console.log(arr);//"day day up"
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 4,360评论 0 5
  • join() Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串。可以指...
    lidroid本人阅读 536评论 0 3
  • 由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaS...
    2bc5f46e925b阅读 1,960评论 0 16
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,095评论 0 21
  • 直到阳光把我晒成一滩黑水 直到我被天空收留 直到我重新以水的形式 降落 到你的伞上 你的发丝上 你也不知道谁是我 ...
    粮食和花圈阅读 237评论 0 0