数组

数组(Array)

数组(Array)是按排列的一组值.每个值的位置都有编号(从0开始)

var arr = ['a', 'b', 'c'];

a、b、c就构成一个数组,两端的方括号是数组的标志.a是0号位,b是1号位,c是2号位.

数组属于一种特殊的对象.typeof运算符会返回数组的类型是object。

typeof [1, 2, 3] // "object"

数组的创建与修改


var food = new Array('fish','chicken','chips')
var food = Array('fish','chicken','chips') //new操作符可以省略
var food = ['fish','chicken','chips']
var arr1 = [1, 2, , 3] //1,2,undefined, 3

var a = arr1[0] // 访问第1个元素 1
var b = arr1[2] // undefined
arr1[1] = 33   //设置元素
arr1[5] = 22   //此时 arr1 为1,33,undefined, 3,undefined,22

需要注意的是

var arr2 = [1, 2, 3,]  // IE8及以下是1,2,3,undefined 长度4
                       // chrome 为1,2,3 长度3  此写法不推荐

JS的数组中可以保存任意类型的数据

var arr = [
    {a: 45},                //对象
  [1, 2, 3],                //数组
  function() {return true;} //函数
  ];

JS数组的大小是可以动态调整的,即可随着数据的添加自动增长以容纳新增数据

var arr = [0,1,2]
console.log(arr.length)  //3
arr[3] = 3
console.log(arr.length)  //4
arr[99] = 99
console.log(arr.length)  //100

Array方法

遍历

var cars =['Saab','Volvo','BMW']
for(var i = 0; i< cars.length; i++){
console.log(cars[i]);
}

检测

var arr = [1, 3, 4];
arr instanceof Array //true

连接

concat() 连接数组,不会改变现有的数组,仅返回被连接数组

var food1 = ['鸡蛋','牛奶']
var food2 = ['米饭','面包']
var food3 = ['香肠','罐头']
var food4 = food1.concat(food2,food3)
console.log(food4)//"鸡蛋", "牛奶", "米饭", "面包", "香肠", "罐头"

删减

  • pop()

    删除最后一个元素,把length减1,返回所删除的元素的值(若数组已为空,则不改变数组,返回undefined)

    var arr = [2,4]
    arr1             // [2,4]
    arr.pop()        // 4
    arr              // [2]
    arr.pop()        // 2
    arr              //[]
    arr.pop()        //undefined
    arr              //[]
    
  • push()

    末尾添加一个或多个元素,并返回新的length

    var sports = ["soccer", "baseball"];
    var total = sports.push("football", "swimming");
    console.log(sports); // ["soccer", "baseball", "football", "swimming"]
                         // 原数组sports被改变
    console.log(total);  // 4
                         // 返回的是新的长度
    
  • shift()

    删除第一个元素,返回删除的元素的值(若数组已为空,则不改变数组,返回undefined)

    var food = ['rice', 'milk', 'egg']
    console.log(food)            //["rice", "milk", "egg"]
    var shifted = food.shift()
    console.log(food)            //["milk", "egg"]  原数组被改变
    console.log(shifted)         //"rice"   返回的是被删除的元素的值
    
    var empty = []
    

shifted = empty.shift()
console.log(empty) //[]
console.log(shifted) //undefined


- unshift()

数组的开头添加一个或多个元素,并返回新的length

```js
var arr = [1, 2];
arr.unshift(0)      //3
arr                 //[0, 1, 2]
arr.unshift(-2, -1) //   5
arr                 //[-2, -1, 0, 1, 2]
arr.unshift( [-3] ) //6
arr                 //[[-3], -2, -1, 0, 1, 2]
  • splice()

    添加/删除元素,然后返回被删除的元素

    array.splice(start, deleteCount, item1,item2...)
    
    
    • start​
      从数组的哪一位开始修改内容。如果超出了数组的长度,则从数组末尾开始添加内容;
      如果是负值,则表示从数组末位开始向左计数

    • deleteCount
      表示要移除的数组元素的个数,为整数
      如果 deleteCount 是 0,则不移除元素。这种情况下,至少应添加一个新元素.
      如果 deleteCount 大于start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。

    • itemN
      要添加进数组的元素。如果不指定,则 splice() 只删除数组元素。

    • 返回值
      由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

    var food = ['鸡蛋','牛奶','米饭','面包','香肠']
    
    //从第 2 位开始删除 0 个元素,插入 '罐头'
    var removed = food.splice(2, 0,'罐头')
    food       //["鸡蛋", "牛奶", "罐头", "米饭", "面包", "香肠"]
    removed    //[] 什么也没删除 返回的是空数组
    
    //从第 3 位开始删除 1 个元素
    removed = food.splice(3, 1)
    food      //["鸡蛋", "牛奶", "罐头", "面包", "香肠"]
    removed   //["米饭"]
    
    //从第 2 位开始删除 1 个元素,然后插入 '面条'
    //删除一个 插入一个 实际上相当于替换
    removed = food.splice(2, 1, '面条');
    food      //["鸡蛋", "牛奶", "面条", "面包", "香肠"]
    removed   //["罐头"]
    
    //从第 0 位开始删除 2 个元素,然后插入 "包子", "饺子" 和 "烤肉"
    removed = food.splice(0, 2, "包子", "饺子", "烤肉")
    food      //["包子", "饺子", "烤肉", "面条", "面包", "香肠"]
    removed   //["鸡蛋", "牛奶"]
    
    //从第 3 位开始删除 后面所有元素
    removed = food.splice(3, Number.MAX_VALUE);
    food      //["包子", "饺子", "烤肉"]
    removed   //["面条", "面包", "香肠"]
    
    //在从后面数第二个元素 删除一个元素' 插入'烤鸭','烧鸡'
    removed = food.splice(-2,1,'烤鸭','烧鸡')
    food      //["包子", "烤鸭", "烧鸡", "烤肉"]
    removed   //饺子
    

    ** 以上五种方法都会对原数组进行修改 **

  • slice()

    从已有的数组中选取元素存入到新数组中,返回新数组(不会改变原数组)

    arrayObject.slice(start,end)
    

    从star开始(包括star)在end结束(不包括end)

    var food = ['鸡蛋','牛奶','米饭','面包','香肠']
    var breakfast = food.slice(0,1)
    food      //['鸡蛋','牛奶','米饭','面包','香肠']
    breakfast //['鸡蛋','牛奶']
    
    

转换

  • join()

把所有元素放入一个字符串,通过传入的参数连接各元素,不改变原数组
如果传入的参数是空字符串,那么数组中的所有元素将被直接连接。
如果省略传入的参数,默认用逗号连接

  • toString()

把数组转换为字符串,并返回结果,不改变原数组

var acter1 = ['特朗普','克林顿','桑德斯']
var acter2 = acter1.toString()
var acter3 = acter1.join('++')
acter1          //["特朗普", "克林顿", "桑德斯"]
acter2          //"特朗普,克林顿,桑德斯"
acter3          //"特朗普++克林顿++桑德斯"
typeof acter1   //"object"
typeof acter2   //"string"
typeof acter3   //"string"
  • split
    把一个字符串分割成字符串数组
stringObject.split(separator,howmany)
- separator
必需,字符串或正则表达式,从该参数指定的地方分割stringObject.
如果把空字符串 ("") 用作 separator,那么 stringObject 中的**每个字符之间**都会被分割。
- howmany
可选,该参数指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。
如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。
- 返回值
返回一个由字符串元素组成的数组。
该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。
** 返回的数组中的字串不包括 separator 自身 **
但是,如果 separator 是包含子表达式的正则表达式,那么返回的数组中包括与这些子表达式匹配的字串(但不包括与整个正则表达式匹配的文本)

var str1 = 'a-b,ds-d,-,asd,ds-ad,';
var str2 = str1.split(',');
var str3 = str1.split('-');
console.log(str1); //"a-b,ds-d,-,asd,ds-ad,"
                   //split()方法不改变原字符串
console.log(str2); //["a-b", "ds-d", "-", "asd", "ds-ad", ""]
console.log(str3); //["a", "b,ds", "d,", ",asd,ds", "ad,"]
console.log(typeof str3[2]); //分割后形成的新数组的元素是字符串    

** String.split() 执行的操作与 Array.join 执行的操作是相反的 **

排序

  • reverse()
    方法用于颠倒数组中元素的顺序

  • sort()
    方法用于对数组的元素进行排序

    arr.sort([compareFunction])
    
  • compareFunction
    可选.用来指定按某种顺序进行排列的函数。
    如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序
    如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序

    • 记 a 和 b 是两个将要被比较的元素:
    • compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
    • compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。
      备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);
    • 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
    • compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
  • 返回值
    对数组的引用。
    请注意,数组在原数组上进行排序,不生成副本

var fruit = ['cherries', 'apples', 'bananas'];
    fruit.sort(); // ['apples', 'bananas', 'cherries']

var scores = [1, 10, 2, 21];
    scores.sort(); // [1, 10, 2, 21]


var things = ['word', 'Word', '1 Word', '2 Words'];
    things.sort(); // ['1 Word', '2 Words', 'Word', 'word']
  • 比较函数格式如下:
function compare(a, b) {
  if (a小于b) {
    return -1;
  }
  if (a大于b) {
    return 1;
  }
  //a等于 b
  return 0;
}

希望比较数字而非字符串,比较函数可以简单的以 a 减 b,如下的函数将会将数组升序排列

function compareNumbers(a, b) {
  return a - b;
}
sort 方法可以使用 函数表达式 方便地书写:

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

// [1, 2, 3, 4, 5]

** 这两种方法都会使原数组发生改变 **


参考资料:

  1. MDN
  2. W3school
  3. 阮一峰. JavaScript 标准参考教程(alpha)
  4. Nicholas C.Zakas. JavaScript高级程序设计[M]. 第1版. 人民邮电出版社, 2012.

此文是作者学习中记录的笔记
限于作者当前水平,出现错误在所难免,望读者指正
本文版权归作者所有,转载务必说明作者及本文地址

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

推荐阅读更多精彩内容