JavaScript:数组学习

创建

主要分为构造函数和字面量两种方式。数组本质是对象。

构造函数

  1. var a1=new Array(); 无参数,创建一空数组
  2. var a2=new Array(5); 一个数字参数,指定数组长度(由于数组长度可以动态调整,作用并不大),创建指定长度的数组
  3. var a3=new Array(4,'hello',new Date()); 有初始化数据,创建数组并初始化参数数据;这种类型不一致的情况,数组类型为object

字面量

  1. var a4=[]; 使用方括号,创建空数组,等同于调用无参构造函数
  2. var a5=[10]; 使用中括号,并传入初始化数据,等同于调用调用带有初始化数据的构造函数;这种情况是创建了一个元素的数组,这个元素的值是10;字面量不论给1还是多个参数,只有初始化值这一种含义
  3. var arr = [element0, element1, ..., elementN]; 推荐使用字面量方式

缺少指定个数,每个元素都是指定初始值的构造方法。比如,创建一个数组,一共n个元素,每个元素都初始化为false。这个需要两步,先创建一个空数组,然后来一个for循环,每个元素赋值为false

访问

  • 主要通过索引访问
  • 长度length是一个属性,是最后一个元素的索引值+1
  • 长度length可以被修改,不过这样会改变数组容量,有时会丢失数据,不推荐这样做。通常,还是把它当做一个只读属性来用比较好。
  • length=0 清空数组,没有提供清空数组的方法,就用这个来实现
  • 如果[]中给的不是正数,而是负数,或者字符,会给数组增加一个属性。
  • 索引也是数组的一个属性,[]可以放索引,也可以放其他属性,
  • 索引如果超出length,返回undefined
var arr = ["one", "two", "three"];
arr[2];  // three
arr["length"];  // 3
arr[6]; // undefined

遍历

  • 最常用的方法是for循环,仅仅是遍历,不做任何变换
var colors = ['red', 'green', 'blue'];
for (var i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

由于 for in 循环会枚举原型链上的所有属性,唯一过滤这些属性的方式是使用hasOwnProperty 函数, 因此会比普通的 for 循环慢上好多倍。 使用 for in 遍历数组被认为是不好的代码习惯并倾向于产生错误和导致性能问题。

  • forEach()方法,遍历数组并且变换,不返回新的数组,直接在原数组上操作
var a = ['a', 'b', 'c'];
a.forEach(function(element) { console.log(element);} ); 
// logs each item in turn
  • map()方法,遍历数组并且变换,不改变原数组,变换后的结果放在一个新数组中返回
var a1 = ['a', 'b', 'c'];
var a2 = a1.map(function(item) { return item.toUpperCase(); });
console.log(+a1); // logs a,b,c
console.log(+a2); // logs A,B,C

添加

  • arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度。加后面,最常用;多个元素用逗号隔开
  • arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度。加前面,有时候会用到;多个元素用逗号隔开
  • arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。加中间,相当于其他语言的插入函数;多个元素用逗号隔开。第2个参数是0,表示删除0个元素,只剩下插入功能了。

删除

  • arrayObj.pop(); //移除最后一个元素并返回该元素值。删后面,最常用;只能一个元素
  • arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移。删前面,有时候会用到;只能一个元素
  • arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素。删中间,有时候会用到;可以有多个元素。后面可选的添加元素没有,只剩下删除功能。

截取子Array

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素。

  • 原来的数组不会被修改。splice会直接修改原来的数组,这个差别很大。
var a = new Array ("a", "b", "c", "d", "e");
var b = a(1, 4); 
var c = a(1); 
console.log(a) // ["a", "b", "c", "d", "e"]
console.log(b) // ["b", "c", "d"]
console.log(c) // ["b", "c", "d", "e"]

合并

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组

  • 原来的数组不会被修改。splice会直接修改原来的数组,这个差别很大。
var a = new Array("1", "2", "3");
var b = new Array("a", "b", "c");
var c = a.concat(b);
console.log(a); // ["1", "2", "3"]
console.log(b); // ["a", "b", "c"]
console.log(c); // ["1", "2", "3", "a", "b", "c"]

排序

  • arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址
  • arrayObj.sort(); //对数组元素排序,返回数组地址,从小到大,升序排列
  • sort() 也可以带一个回调函数来决定怎么比较数组元素。这个回调函数比较两个值,并返回3个值中的一个:1, -1, 0三条分支要写全,不要图省事,否则很容易出现意想不到的逻辑问题
    例如,下面的代码通过字符串的最后一个字母进行排序:
var myArray = new Array("Wind", "Rain", "Fire");
var sortFn = function(a, b){
  if (a[a.length - 1] < b[b.length - 1]) return -1;
  if (a[a.length - 1] > b[b.length - 1]) return 1;
  if (a[a.length - 1] == b[b.length - 1]) return 0;
}
myArray.sort(sortFn); 
// sorts the array so that myArray = ["Wind","Fire","Rain"]

字符串化

arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。
toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用。
返回的字符串是新创建的,原来的数组并不会被修改

var myArray = new Array("Wind", "Rain", "Fire");
var list = myArray.join(" - "); // list is "Wind - Rain - Fire"
console.log(myArray); // ["Wind", "Rain", "Fire"]
console.log(list); // Wind - Rain - Fire

小结

  • 数组是普通的对象,并不是特殊的集合类型。和c语言一段连续的内存有本质的差别
  • length, index等都是属性,可以访问,也可以设置,不用当心数组越界。访问不存在的属性,返回一个undefined就可以了,设置一个不存在的index,添加一个属性就可以了。length, index两者的关系有对象内部维护。
  • 没有提供清空数据的方法,用length = 0;间接达到目的,这个有点特殊,个人感觉也不是很好。提供一个清空方法应该不是难事啊。
  • 数组操作的方法提供的还是比较全的,用起来应该笔记方便。合适的时候采用合适的方法。
  • splice这个方法比较特殊,又删除,又插入,而且会改变目标数组本身。功能很全,各种参数情况下表现不同,需要小心使用。
  • 数组的定义,还是用最简单的[],最方便

参考文章

数组对象(Array object)
Mozzilla的教程,写得很不错,有空多看看

javascript之数组操作
这个写得比较简洁,推荐多看看

JavaScript 数组详解
这个写得比较详细,推荐多看看

RUNOOB.COM
一个学习JavaScript等技术的网站,排版还可以

JavaScript Array 对象
很简明的W3C手册,偶尔可以查查看看

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容

  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 4,081评论 0 6
  • 数组的基本特点 数组元素是任意类型的 可能的最大索引是2^32-2,默认起始索引是 0 Javascript的数组...
    dooze阅读 482评论 0 1
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,750评论 2 17
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,065评论 1 10
  • 数组 在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于...
    南山码农阅读 195评论 0 0