JS 数组
概述
- 数组是值得有序集合。每个值叫做元素,每个元素在数组中都有数字位置编号,也就是索引。JS 数组是弱类型得,数组中可以含有不同类型的元素。数组元素甚至可以是对象或其它数组。
创建数组
- 字面量
var arr = [1, 2, 3]
// 没有值就是undefined
- new Array 构造器方式
var arr = new Array()
var arr1 = new Array(100) // undefined * 100
var arr2 = new Array(true, '1') [true, '1']
数组元素读写
var arr = [1, 2, 3]
arr[1] // 2
arr.length // 5
delete arr[0]
arr[0] // undefined
// 注意:delete 删除元素,不会改变数组的长度
数组元素增删
var arr = []
arr[0] = 1;
arr[1] = 2;
arr[2] = 3
arr // [1, 2, 3]
数组方法
[] => Array.prototype
- 1.Array.prototype.push 数组末尾添加元素(改变原数组)
var stu = ['zs', 'ls', 'ww'];
stu.push('zl');
console.log(stu);
- 2.Array.prototype.pop 数组末尾删除元素(改变原数组)
var arr = ['a', 'b', 'c', 'd'];
arr.pop();
var a = arr.pop();
console.log(arr);
console.log(a); // d
- 3.Array.prototype.unshift 数组头部添加元素(改变原数组)
var stu = ['zs', 'ls', 'ww'];
stu.unshift('zl');
console.log('stu');
- 4.Array.prototype.shift 数组头部删除元素(改变原数组)
var stu = ['zs', 'ls', 'ww'];
stu.shift();
var b = stu.shift();
console.log(arr);
console.log(b);// zs
- 5.Array.prototype.toString 数组元素转换为字符串,用逗号隔开(不改变原数组)
var arr = ['a', 'b', 'c'];
arr.toString(); // "a,b,c";
- 6.Array.prototype.join 将数组转为字符串,默认用逗号隔开(不改变原数组)
var arr = [1, 2, 3]
arr.join() // '1,2,3'
arr.join('-') // 1-2-3
// 重复字符串的方法
// str 重复的字符串 n 代表重复几次
function repeatString(str, n) {
return new Array(n + 1).join(str)
}
repeatString('a', 3) // 'aaa'
- 7.Array.prototype.reverse 反转数组(改变原数组)
var arr = [1, 2, 3]
arr.reverse() // [3, 2, 1]
arr // [3, 2, 1]
- 8.Array.prototype.sort 排序(改变原数组)
var arr = ['a', 'b', 'd', 'c']
arr.sort() // ['a,', 'b', 'c', 'd']
arr = [13, 24, 51, 3]
// 不是真正的排序。
arr.sort() // [13. 24. 3, 5]
arr // [13, 24, 51, 3]
// 传入比较函数
arr.sort(function(a, b) {
return a - b
}) // [3, 5, 24, 51]
- 9.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([10, [11, 13]]) // [1, 2, 3, 10, [11, 13]]
- 10.Array.prototype.slice 参数(索引,索引)返回部分数组,不包含最后一个[2, 4) (不改变原数组)
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]
arr.slice(-4, -3) // [2]
- 11.Array.prototype.splice 参数(索引,长度, 元素…)数据拼接(改变原数组)
var arr = [1, 2, 3, 4, 5]
arr.splice(2) // [3, 4, 5] 删除元素
arr // [1, 2]
arr = [1, 2, 3, 4, 5]
arr.splice(2, 2) // [3, 4] 删除元素
arr // [1, 2, 5]
arr = [1, 2, 3, 4, 5]
arr.splice(1, 1, 'a', 'b') // [2] 添加元素
arr // [1, 'a', 'b', 3, 4, 5]
- 12.Array.prototype.indexOf & lastIndexOf 数组检索。查询数组当中某个元素的索引的位置,默认从 0 的索引开始查询,一直查询到最后一个,如果找到多个,则返回第一个的位置,没有找到,返回 -1
var arr = ['a', 'b', 'b', 'c'];
arr.indexOf('b'); // 1
// 如果找到这个元素就得到这个元素所在的索引值,如果没有找到就返回 -1
// 数组去重
- ES5 迭代方法 IE9+
- 1.Array.prototype.forEach 数组遍历
var arr = [1, 2, 3, 4, 5]
arr.forEach(function(item, index, arr) {
console.log(x + index + item)
})
- 2.Array.prototype.map 数组映射 (不改变原数组)
var arr = [1, 2, 3]
arr.map(function(item, index, arr) {
return x + 10
}) // [11, 12, 13]
arr // [1, 2, 3]
- 3.Array.prototype.filter 数组过滤 (不改变原数组)
var arr = [1, 2, 4, 5]
arr.filter(function(item) {
return item % 2 == 0
}) // [2, 4]
arr // [1, 2, 4, 5]
- 4.Array.prototype.every 数组判断 (不改变原数组)
var arr = [1, 2, 3]
arr.every(function (item) {
return item > 0
}) // true
注:全部满足条件才返回 true
- 5.Array.prototype.some 数组判断 (不改变原数组)
var arr = [1, 2, 3]
arr.some(function (item) {
return item > 0
}) // true
注:只要有一个满足条件就返回 true
- 归并方法
- 6.Array.prototype.reduce & reduceRight
arr.reduce(function(prev, cur, index, arr) {
...
}, init);
arr: 表示原数组;
prev: 表示上一次调用回调时的返回值,或者初始值 init;
cur: 表示当前正在处理的数组元素;
index: 表示当前正在处理的数组元素的索引,若提供 init 值,则索引值从 0 开始,否则 索引从 1 开始;
init: 表示初始值。
常用参数: prev 和 cur
var arr = [3, 9, 4, 3, 6, 0, 9];
var sum = arr.reduce(function() {
return prev + cur;
}, 0);
console.log('sum', sum); // 34
- 由于传入了初始值 0,所以开始时 prev 的值为 0,cur 的值为数组的第一项,相加之后返回值为 3,作为下一轮回调的 prev 的值,然后再继续与下一个数组项相加,以此类推,直至完成所有数组项的和并返回。
数组类型判断
- Array.isArray() 判断是否为数组
- arr instanceof Array // true
类数组
类数组拥有数组的特性。如:length,但是没有数组的方法