JS数组 简介
数组对象的作用是:使用单独的变量名来存储一系列的值。
在JS中,数组也是一种对象
JS中的数组是弱类型的,一个数组中可以包含不同类型的元素,甚至是其他对象或数组。
简单的 Array 对象参考手册:http://www.w3school.com.cn/js/js_obj_array.asp
完整的 Array 对象参考手册:http://www.w3school.com.cn/jsref/jsref_obj_array.asp
创建数组的方法
字面量
var arr = [
'白小明',
[1, 2, 3],
{
name : 'bxm',
age : 20
},
null
];
console.log(arr[0]);
console.log(arr[1][1]);
console.log(arr[2].age);
console.log(arr[3]);
new Array (注意:new可以省略)
var arr1 = new Array(); // 如果调用构造函数 Array() 时没有使用参数,那么返回的数组为空,length 字段为 0。
var arr2 = new Array(100); // 当调用构造函数时只传递给它一个数字参数,该构造函数将返回具有指定个数、元素为 undefined 的数组。
var arr3 = new Array(true, null, 2, 'hi'); // 当其他参数调用 Array() 时,该构造函数将用参数指定的值初始化数组。
多维数组
// 二维数组,99乘法表
var arr = []
for (var i = 1; i <= 9; i++) {
arr[i] = [];
for (var j = 1; j <= i; j++) {
arr[i][j] = j + '×' + i + '=' + i*j;
document.write(arr[i][j] + ' ');
}
document.write('<br>');
}
稀疏数组
稀疏数组表示索引是不连续的的数组。
var arr = new Array();
arr[3] = 100;
console.log(3 in arr); // true
console.log(2 in arr); // false
console.log(arr.length); // 4
console.log(arr[2]); // undefined
console.log(arr[3]); // 100
console.log(arr[4]); // undefined
数组元素的增删
入栈(入队) push()
var arr = new Array(true, null, 2, 'hi');
arr3.push("elem"); // 在数组尾部添加一个元素
出栈 pop()
var arr = new Array(true, null, 2, 'hi');
arr.pop()
出队 shift()
var arr = new Array(true, null, 2, 'hi');
arr.shift(); // 移除数组头部的元素
unshift()
var arr = new Array(true, null, 2, 'hi');
arr.unshift('haha'); // 在数组头部添加一个元素
delete
var arr = new Array(true, null, 100, 'hi');
delete arr[2]; // 长度不变,删除的位置变为 undefined
// 注意:
// 与 arr[2] = undefined; 不等价
// 前者 console.log(100 in arr); 返回false
// 后者 console.log(100 in arr); 返回true
arr[arr.length]
var arr = new Array(true, null, 2, 'hi');
arr[arr.length] = 'hello'; // arr[arr.length] 总是指向数组最后一个元素的下一个,所以可以通过这种方式赋值。相当于 arr.push('hello')
arr.length -=1;
var arr = new Array(true, null, 2, 'hi');
arr.length -= 1; // 删除最后一个元素
检测数组
instanceof
var arr = new Array(true, null, 2, 'hi');
console.log(arr instanceof Array);
更好的方法:Array.isArray()
var arr = new Array(true, null, 2, 'hi');
console.log(Array.isArray(arr));
常用的数组方法
join():将数组转化为字符串,通过指定的分隔符进行分隔
var arr = [5, 2 ,3];
console.log(arr.join());
console.log(arr.join('-'));
toString():把数组转换为字符串,用逗号分隔,并返回结果。
返回值与没有参数的 join() 方法返回的字符串相同。
var arr = [1, 2 ,3, 4, 5];
console.log(arr.toString()); // 1,2,3,4,5
concat():数组合并
注意:该方法不会改变原数组
var arr = [5, 2 ,3];
console.log(arr.concat([100, 6]));
console.log(arr.concat([100, 6, [1, 2]]));
slice(start, end):返回数组的片段
注意:该方不会改变原数组
var arr = [5, 2 ,3, 15, 666];
console.log(arr.slice(1)); // [2, 3, 15, 666],如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。
console.log(arr.slice(1,3)); // [2 ,3]
console.log(arr.slice(2,-1)); // [3, 15],-1表示最后一个元素,-2表示倒数第二个元素
splice(index, howMany):删除数组的片段
注意:该方法会改变原数组
var arr1 = [5, 2 ,3, 15, 666];
console.log(arr1.splice(2)); // [3, 15, 666]
console.log(arr1); // [5, 2]
var arr2 = [5, 2 ,3, 15, 666];
console.log(arr2.splice(3, 1)); // [15]
console.log(arr2); // [5, 2 ,3, 666]
var arr3 = [5, 2 ,3, 15, 666];
console.log(arr3.splice(3, 1, '白', '小明')); // [15]
console.log(arr3); // [5, 2 ,3, 白, 小明, 666]
重排序方法
升序:sort()
var arr = new Array(4, 2, 3, 15);
console.log(arr.sort()); // ASCII 升序
// [15, 2, 3, 4]
降序:reverse()
var arr = new Array(4, 2, 3, 5);
console.log(arr.reverse()); // ASCII 降序
// [4, 3, 2, 15]
注意:使用sort() 和 reverse() 方法之后,原数组被修改
sort() 和 reverse() 方法会调用每个数组元素的toString()方法,转化为字符串再比较()。
var arr = new Array(4, 2, 3, 15);
function sortCompare(value1, value2) {
return value1 -value2;
// if (value1 < value2) {
// return -1;
// } else if (value1 > value2) {
// return 1;
// } else {
// return 0;
// }
}
function reverseCompare(value1, value2) {
return value2 -value1;
// if (value1 < value2) {
// return 1;
// } else if (value1 > value2) {
// return -1;
// } else {
// return 0;
// }
}
console.log(arr.sort(sortCompare)); // 升序
console.log(arr.reverse(reverseCompare)); // 降序
数组迭代方法
注意:下面这些方法都不会改变原数组
forEach:让数组中的每一个元素做一件事
var arr = [5, 2 ,3, 15, 666];
arr.forEach(function(element, index){
console.log(element + 10); // 15, 12, 13, 25, 676
});
console.log(arr); // [5, 2, 3, 15, 666]
map:让数组通过某种运算产生一个新数组
var arr = [5, 2 ,3, 15, 666];
var arrMap = arr.map(function(index, elem) {
return index + 10;
});
console.log(arrMap); // [15, 12, 13, 25, 676]
console.log(arr); // [5, 2, 3, 15, 666]
filter:筛选出数组中符合条件的元素,组成新的数组
var arr = [5, 2 ,3, 15, 666];
var newArr = arr.filter(function(item, index) {
return item > 3;
});
console.log(newArr); // [5, 15, 666]
console.log(arr); // [5, 2, 3, 15, 666]
reduce:让数组的前项和后项做某种运算,并累计最终值
var arr = [1, 2 ,3, 4, 5];
var newArr = arr.reduce(function (prev, next) {
return prev + next;
});
console.log(newArr); // 15 (1+2+3+4+5)
console.log(arr); // [1, 2 ,3, 4, 5]
every:检测数组中的每一项是否符合条件
var arr = [1, 2 ,3, 4, 5];
var newArr = arr.every(function (item, index) {
return item > 3;
});
console.log(newArr); // false,全部满足才为true
some:检测数组中是否有某项符合条件
var arr = [1, 2 ,3, 4, 5];
var newArr = arr.some(function (item, index) {
return item > 3;
});
console.log(newArr); // true,全不满足才为false