JavaScript深入浅出学习笔记（五）—数组

一.数组概述

        数组是值的有序集合。每个值叫做元素，每个元素在数组中都有数字位置编著号，也就是索引。JS中的数组是弱类型的，数组中可以含有不同类型的元素。数组元素甚至可以是对象或其它数组。

        如：

二.创建数组

1.字面量

var BAT = ['Alibaba', 'Tencent', 'Baidu'];
var students = [{name:'Bosn',age:27}, {name:'Nunnly', age:3}];
var arr = ['Nunnly', 'is', 'big', 'keng', 'B', 123, true, null];
var arrInArr = [[1,2],[3,4,5]];

var commasArr1 = [1,,2];//1,undefined,2
var commasArr2 = [,,];//undefined,undefined

        size from 0 to 4,294,967,295(2^23 - 1)

 

2.new Array

var arr = new Array();
var arrWithLength = new Array(100);//undefined * 100
var arrLikesLiteral = new Array(true, false, null, 1, 2, "hi");//等价于[true, false, null, 1, 2, "hi"]

 

三.数组操作

1.元素的读写

var arr = [1,2,3,4,5];
arr[1];//2
arr.length;//5

arr[5] = 6;
arr.length;//6

delete arr[0];
arr[0];//undefined

 

2.数组元素增删（动态的，无需指定大小）

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

arr[arr.length] = 4;//equal to arr.push(4);
arr;//[1,2,3,4]

arr.unshift(0);
arr;//[0, 1, 2, 3, 4];

delete arr[2];
arr;//[0, 1, undefined, 3, 4]
arr.length;//5
2 in arr;//false

arr.length -= 1;
arr;//[0, 1, undefined, 3],4 is removed

arr.pop();//3 returned by pop
arr;//[0,1,undefined],3 is removed

arr.shift();//0 returned by shift
arr;//[1, undefined]

 

3.数组迭代

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

for(i in arr) {
      console.log(arr[i]);//1,2,3,4,5
}

Array.prototype.x = 'inherited';
for(i in arr) {
      console.log(arr[i]);//1,2,3,4,5,inherited
}

for(i in arr) {
     if(arr.hasOwnProperty(i)) {
           console.log(arr[i]);//1,2,3,4,5
     }
}

       说明：for...in...是不保证顺序的。

 

四.二维数组、稀疏数组

1.二维数组

var arr = [[0,1], [2,3], [4,5]];
var i=0,j=0;
var row;
for(;i<arr.length;i++) {
      row = arr[i];
      console.log('row' + i);
      for(j=0;j<row.length;j++) {
             console.log(row[j]);
       }
}

运行结果：

row0
0
1
row1
2
3
row2
4
5

 

2.稀疏数组

        稀疏数组并不包含有从0开始的连续索引。一般length属性值比实际元素个数大。

var arr1 = [undefined];
var arr2 = new Array(1);//第0个元素实际是不存在的
0 in arr1;//true
0 in arr2;//false
arr1.length = 100;
arr1[99] = 123;
99 in arr1;//true
98 in arr1;//false
var arr = [,,];
0 in arr;//false

 

五.数组方法

{} => Object.prototype

[] => Array.prototype

Array.prototype.join
Array.prototype.reverse
Array.prototype.sort
Array.prototype.concat
Array.prototype.slice//切片
Array.prototype.splice//胶接
Array.prototype.forEach(ES5)
Array.prototype.map(ES5)
Array.prototype.filter(ES5)
Array.prototype.every(ES5)
Array.prototype.some(ES5)
Array.prototype.reduce/reduceRight(ES5)
Array.prototype.indexOf/lastIndexOf(ES5)
Array.isArray(ES5)

1.Array.prototype.join：将数组转为字符串

var arr = [1,2,3];
arr.join();//"1,2,3"
arr.join("_");//"1_2_3"

function repeatString(str, n) {
      return new Array(n+1).join(str);
}
repeatString("a", 3);//"aaa"
repeatString("Hi", 5);//"HiHiHiHiHi"

 

2.Array.prototype.reverse：将数组逆序

var arr = [1,2,3];
arr.reverse();//reverse方法本身也会返回[3,2,1]
arr;//[3,2,1]

 

3.Array.prototype.sort：排序(默认按字母顺序排序)

var arr = ["a", "d" ,"c", "b"];
arr.sort();//["a","b","c","d"]

arr = [13,24,51,3];
arr.sort();//[13,24,3,51]
arr;//[13,24,3,51] 原数组被修改

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

实例：

arr = [{age:25}, {age:39}, {age:99}];
arr.sort(function(a,b) {
     return a.age-b.age;
});
arr.forEach(function(item) {
     console.log('age', item.age);
});

运行结果：

age 25
age 39
age 99

 

4.Array.prototype.concat：数组合并

var arr = [1,2,3];
arr.concat(4,5);//[1,2,3,4,5]
arr;//[1,2,3] 原数组未被修改

arr.concat([10,11], 13);//1,2,3,10,11,13]

arr.concat([1, [2, 3]]);//[1,2,3,1,[2,3]]

 

5.Array.prototype.slice：返回部分数组

var arr = [1,2,3,4,5];
arr.slice(1,3);//[2,3] 原数组未被修改
arr.slice(1);//[2,3,4,5]
arr.slice(1, -1);//[2,3,4]，从下标为1的元素到倒数第一个元素（左闭右开）
arr.slice(-4, -3);//[2]，从倒数第四个元素到倒数第三个元素，即第二个元素到第三个元素，左闭右开即第二个元素

 

6.Array.prototype.splice：数组拼接

var arr = [1,2,3,4,5];
arr.splice(2);//returns [3,4,5]
arr;//[1,2];

arr = [1,2,3,4,5];
arr.splice(2,2);//returns [3,4]
arr;//[1,2,5];

arr = [1,2,3,4,5];
arr.splice(1,1,'a','b');//return [2]
arr;//[1,"a", "b", 3, 4, 5]

 

7.Array.prototype.forEach：数组遍历[IE9及以上才支持]

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a) {
      console.log(x + '|' + index + '|' + (a === arr));
});

运行结果：

1|0|true
2|1|true
3|2|true
4|3|true
5|4|true

 

8.Array.prototype.map：数组映射

var arr = [1, 2, 3];
arr.map(function(x) {
     return x + 10;
});//[11, 12, 13]
arr; //[1, 2, 3] 原数组未被修改

 

9.Array.prototype.filter：数组过滤

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter(function(x, index) {
       return index%3 === 0 || x >= 8;
});//returns [1, 4, 7, 8, 9, 10]
arr; //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 原数组未被修改

 

10.Array.prototype.every：数组判断，检查数组中的每一个元素都符合某一个条件

var arr = [1, 2, 3, 4, 5];
arr.every(function(x) {
      return x<10;
}); //true
arr.every(function(x) {
     return x < 3;
}); //false

 

11.Array.prototype.some：数组判断，检查数组中是否有任一个元素符合某一个条件

var arr = [1, 2, 3, 4, 5];
arr.some(function(x) {
      return x === 3;
}); //true
arr.some(function(x) {
      return x === 100;
});//false

 

12.Array.prototype.reduce/reduceRight：把数组的元素两两操作获得一个值，reduceRight和reduce是一样的，只是是从右边去遍历的。

var arr = [1, 2, 3];
var sum = arr.reduce(function(x,y) {
    return x+y
}, 0);//6
arr;//[1,2,3]  原数组未被修改 

        上面实例中，reduce方法内部的函数表示的是对这个数组里面的元素进行两个两个的相加操作，第二个参数是可选的，传参时表示最开始的第一个x是什么样的值，如果这个值不传的话，第一个元素指向第一个元素，第二个元素指向第二个元素...，在这里首先把0和1传进来，0和1相加等于1，这个1作为下一个x，2作为下一个y，相加结果是3，即第一次结果作为下一次的x，在这里第三次，即就是3和3相加，结果为6。

var arr = [3, 9, 6];
var max = arr.reduce(function(x, y) {
      console.log(x + "|" + y);
      return x>y?x:y;
});
//3|9
//9|6
max;//9

        reduceRight实例：

arr = [3, 9, 6];
var max = arr.reduceRight(function(x, y) {
      console.log(x + "|" + y);
      return x>y?x:y;
});
//6|9
//9|3
max;//9

 

13.Array.prototype.indexOf/lastIndexOf：数组检索

var arr = [1, 2, 3, 2, 1];
arr.indexOf(2); //1，元素2在第一个
arr.indexOf(99); //-1
arr.indexOf(1, 1); //4，查找元素1，从第二个元素开始查找
arr.indexOf(1, -3); //4，查找元素1，从倒数第三个元素开始
arr.indexOf(2, -1); //-1，查找元素2，从最后一个元素开始找，找不到
arr.lastIndexOf(2); //3，从右到左查找
arr.lastIndexOf(2,-2); //3，倒数第二个元素开始，从右到左查找
arr.lastIndexOf(2,-3); //1，倒数第三个元素开始，从右到左查找

 

14.Array.isArray：判断是否为数组

Array.isArray([]);//true

   注意：之前的方法都是Array.prototype上的，可以直接调用，但是isArray是Array构造器对象上的属性性，必须用Array.isArray方式去调用。

   当然，除了Array.isArray外，我们也可以用如下方法判断是否为数组。

[] instanceof Array;//true
({}).toString.apply([]) === '[object Array]';//true
[].constructor === Array;//true

        [].constructor判断对象的构造器是不是Array，要注意的是constructor是可以修改的，如果不是直接的数组（如从数组继承而来的对象的话），constructor这种判断方式就失效了，但instanceof Array依然返回true。

 

六.数组小结

1.数组VS一般对象

        相同：都可以继承；数组是对象，对象不一定是数组；都可以当做对象添加删除属性。

        不同：数组自动更新length；按索引访问数组常常比访问一般对象属性明显迅速；数组对象继承Array.prototype上的大量数组操作方法。

 

2.字符串和数组

var str = "hello world";
str.charAt(0);//"h"
str[1];//e

Array.prototype.join.call(str, "_");
//"h_e_l_l_o__w_o_r_l_d"

        我们可以理解字符串是种类数组的东西，当然字符串并不是数组，没有join等数组方法，但可以Array.prototype.join.call方式去操作字符串。

 

视频学习地址：http://www.imooc.com/view/277