JavaScript-数组操作方法

JS数组

1.1创建数组

var arr = [] 字面量形式
var arr = new Array() 构造器形式 (可以省略new)

只传入一个数字参数：
var arr = new Array(100) 表示创建一个名为arr的长度为100的新数组

传入多个参数：
var arr = new Array(1,2,3) 等同于 var arr = [1, 2, 3]

1.2 数组操作

1.2.1 数组元素读写

var arr = [1, 2, 3, 4, 5]

• 查

arr[1];  //2
arr.length;  //5

• 增

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

• 删（用delete时的情况）被删除的元素值变为undefined，索引号也被删除，但被删除的元素仍然占据一个位置，数组长度不变

delete arr[0];
arr[0];   //undefined
//用in操作符来判断索引号在数组中是否存在
0 in arr;  //false 表示索引号也被删除
arr;    //[undefined, 2, 3, 4, 5, 6]
arr.length;  //5

1.2.2 数组元素增删

除了上面用索引号的方法增删外，还有四种增删数组头尾元素的方法

arr.pop()  尾部删除  也可以用 arr.length = arr.length - 1
arr.push() 尾部增加  也可以用 arr[arr.length]
arr.shift() 头部删除
arr.unshift() 头部增加

1.2.3数组迭代

for循环迭代

for循环最常用的地方是利用索引来遍历数组：

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

for … in

for循环的一个变体是for … in循环，它可以把一个对象的所有属性依次循环出来：
（注意：for in 会把原型链上面的属性也循环出来）

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

要过滤掉对象继承的属性，用 if语句 + hasOwnProperty() 来实现：

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

for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后，for … in循环将带来意想不到的意外效果,for … in循环将把name包括在内，但Array的length属性却不包括在内。

a.name = 'Hello';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}

for … of 循环 完全修复上面的问题，它只循环集合本身的元素：

var a = ['A', 'B', 'C'];
a.name = "hello";
for(var x of a) {
    console.log(x);  //'A', 'B', 'C'
}

1.3 二维数组

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

1.4 稀疏数组

数组元素的索引不一定要连续的，它们之间可以有空缺。每个javaScript数组都有一个length属性。针对非稀疏数组，该属性就是数组元素的个数；针对稀疏数组，length比所有元素的个数要大。

1.5 数组方法

1.5.1 join() 将数组转化为字符串 原数组未被修改

join()方法是一个非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：

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('Hi', 3);   /// "HiHiHi"

1.5.2 reverse() 将数组逆序 原数组被修改

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

1.5.3 sort() 排序 原数组被修改

默认按照字母顺序排序

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

数字在排序时是转化成字符串再进行排序，所以开头是3的数字排在了开头是5的数字的前面，这和我们想要的效果不一致。

arr = [13, 24 ,51, 3];
arr.sort();   //[13, 24, 3, 51]
arr;  //[13, 24, 3, 51]   

所以我们要自己编写一个函数，用来实现数字排序

arr = [13, 24 ,51, 3]
arr.sort(function(a, b) {
    return a - b  //升序排列
    return b - a  //逆序排列
})

比较对象中的数值大小

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

1.5.4 concat() 数组合并 原数组未被修改

concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array：

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]]

1.5.5 slice() 返回部分数组 原数组未被修改 对应字符串操作str.substring(x,y)

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表示逆序的第一个元素5
arr.slice(-4, -3);  //[2]
arr;  //[1,2,3,4,5]

1.5.6 splice() 数组拼接 原数组被修改

splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

从这里开始下面的这些方法，都是 ECMA5 的新特性，IE9+支持

1.5.7 forEach() 数组遍历

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
var arr = [1,2,3,4,5];
arr.forEach(function(x, index, a) {
console.log(x + ‘|’ + index + ‘|’ + (a === arr));
});

//result 第一个参数是数组的成员，第二个是索引，第三个是数组本身
1|0|true
2|1|true
3|2|true
4|3|true
5|4|true

1.5.8 map() 数组映射 原数组未被修改

var arr = [1,2,3];

arr.map(function(x) {
  return x + 10;
});  // [11,12,13]

arr;  //[1,2,3]  原数组未被修改

1.5.9 filter() 数组过滤 原数组未被修改

筛选出来索引号是模3为0的，或者大于等于8的元素

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

1.5.10 every & some 数组判断

every() 数组中是否每一个元素都符合某条件

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

arr.every(function(x) {
    return x < 3;
}); //false

some() 数组中是否存在某元素符合某条件

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

arr.some(function(x) {
    return x === 100;
});  //false

1.5.11reduce & reduceRight

reduce() 数组元素进行两两操作,最终得到一个值

运行逻辑： 传入的第二个参数0，作为第一次运算操作的x，数组第一个元素作为y，得到的结果成为下一次运算的x，数组的下一个元素作为下一次运算的y。
即 0+1=1 1+2=3 3+3=6 ，最终输出 6
如果不传入第二个参数，则第一次运算的x和y分别是数组的第一个和第二个元素

var arr = [1,2,3];
var sum = arr.reduce(function(x, y) {
    return x + y
}, 0); //6
arr;  // [1,2,3]

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()和reduce()的区别是： 从右到左进行遍历

1.5.12 indexOf & lastIndexOf 数组索引

indexOf 从左向右找

var arr = [1,2,3,2,1];
arr.indexOf(2); //1     找2，结果为索引为1的位置
arr.indexOf(99); //-1   找不到返回-1
arr.indexOf(1, 1); //4  找1，从索引为1的地方开始找，结果为索引为5的位置
arr.indexOf(1, -3);//4  找1，从倒数第3个元素的地方开始向左找，结果仍为索引为5的位置
arr.indexOf(2, -1);//-1  找2,从最右开始往左找，找不到

lastIndexOf 从右向左找

arrlastIndexOf(2); //3  找2 从最右开始往左找，结果为索引为3的位置
arrlastIndexOf(2, -2); //3 找2,从倒数第2个元素开始找，结果为索引为3的位置
arrlastIndexOf(2, -3); //1 找2,从倒数第2个元素开始找，结果为索引为1的位置

1.5.13 Array.isArray() 判断是否为数组

上面的方法都是在 Array.prototype这个原型对象上，而isArray是在Array构造器上的，所以必须用Array这个构造器对象 + .isArray的方式来进行调用

Array.isArray([]); //true

判断是否是数组的其他方法

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