在程序语言中数组的重要性不言而喻，JavaScript中数组也是最常使用的对象之一，数组是值的有序集合，由于弱类型的原因，JavaScript中数组十分灵活、强大，不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素，JavaScript在同一个数组中可以存放多种类型的元素，而且长度也是可以动态调整的，可以随着数据增加或减少自动对数组长度做更改。
创建数组
在JavaScript多种方式创建数组
构造函数
Array作为构造函数，行为很不一致。因此，不建议使用它生成新数组
// 无参数时，返回一个空数组
new Array() // []
// 单个正整数参数，表示返回的新数组的长度
new Array(1) // [ ,]
new Array(2) // [ , ,]
// 非正整数的数值作为参数，会报错
new Array(3.2) // RangeError: Invalid array length
new Array(-3) // RangeError: Invalid array length
// 单个非正整数参数（比如字符串、布尔值、对象等），
// 则该参数是返回的新数组的成员
new Array('abc') // ['abc']
new Array([1]) // [Array[1]]
// 多参数时，所有参数都是返回的新数组的成员
new Array(1, 2) // [1, 2]
new Array('a', 'b', 'c') // ['a', 'b', 'c']
字面量
- 使用方括号，创建空数组，等同于调用无参构造函数
var a4 = [];
- 使用中括号，并传入初始化数据，等同于调用带有初始化数据的构造函数
ar a5 = [10];
数组的索引与长度
var arr = [1,2,3,4];
console.log(arr.length);//4
console.log(arr[0]);//1
console.log(arr[1]);//2
元素添加/删除
删除
pop()
pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。
var a = ['a', 'b', 'c'];
a.pop() // 'c'
a // ['a', 'b']
对空数组使用pop方法，不会报错，而是返回undefined。
[].pop() // undefined
shift()
shift方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组。
var a = ['a', 'b', 'c'];
a.shift() // 'a'
a // ['b', 'c']
shift方法可以遍历并清空一个数组。
var list = [1, 2, 3, 4, 5, 6];
var item;
while (item = list.shift()) {
console.log(item);
}
list // []
添加
push()
push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。
var a = [];
a.push(1) // 1
a.push('a') // 2
a.push(true, {}) // 4
a // [1, 'a', true, {}]
unshift()
unshift方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。
var a = ['a', 'b', 'c'];
a.unshift('x'); // 4
a // ['x', 'a', 'b', 'c']
unshift方法可以在数组头部添加多个元素
var arr = [ 'c', 'd' ];
arr.unshift('a', 'b') // 4
arr // [ 'a', 'b', 'c', 'd' ]
终极神器 splice
JavaScript提供了一个splice方法用于一次性解决数组添加、删除（这两种方法一结合就可以达到替换效果），方法有三个参数
-
开始索引
-
删除元素的位移
-
插入的新元素，当然也可以写多个
splice方法返回一个由删除元素组成的新数组，没有删除则返回空数组
删除
指定前两个参数，可以使用splice删除数组元素，同样会带来索引调整及length调整
var a = [1, 2, 3, 4, 5];
console.log(a.splice(1,3));//[2, 3, 4]
console.log(a.length);//2
console.log(a);//[1,5]
插入与替换
只要方法第二个参数，也就是删除动作执行的次数设为0，第三个参数及以后填写要插入内容就splice就能执行插入操作，
而如果第二个参数不为0则变成了先在该位置删除再插入，也就是替换效果
var a = [1, 2, 3, 4, 5];
a.splice(1,0,9,99,999);
console.log(a.length); //8
console.log(a);//[1, 9, 99, 999, 2, 3, 4, 5]
a.splice(1,3,8,88,888);
console.log(a.length);//8
console.log(a);//[1, 8, 88, 888, 2, 3, 4, 5]
一个例子：数组去重
var arr = [1, 2, 2, 3,4];
for(var i=0;i<arr.length; i++){
for(var j=i+1; j<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice(j, 1);
j--;//删除元素后，索引值相应的发生变化
}
}
}
常用操作
sort()
sort方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。
需要特殊注意。sort方法不是按照大小排序，而是按照对应字符串的字典顺序排序。
也就是说，数值会被先转成字符串，再按照字典顺序进行比较，所以101排在11的前面
['d', 'c', 'b', 'a'].sort()
// ['a', 'b', 'c', 'd']
[4, 3, 2, 1].sort()
// [1, 2, 3, 4]
[11, 101].sort()
// [101, 11]
[10111, 1101, 111].sort()
// [10111, 1101, 111]
如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数，表示按照自定义方法进行排序。
该函数本身又接受两个参数，表示进行比较的两个元素。
如果返回值大于0，表示第一个元素排在第二个元素后面；
其他情况下，都是第一个元素排在第二个元素前面
[10111, 1101, 111].sort(function (a, b) {
return a - b;
})
// [111, 1101, 10111]
[
{ name: "张三", age: 30 },
{ name: "李四", age: 24 },
{ name: "王五", age: 28 }
].sort(function (o1, o2) {
return o1.age - o2.age;
})
// [
// { name: "李四", age: 24 },
// { name: "王五", age: 28 },
// { name: "张三", age: 30 }
// ]
练习：
排列 '["1px", "20px", "80px", "10px"]', 根据数值从小到大排序
随机打乱顺序
这里就需要用到我们的Math.random随机函数,它会随机产生0-1之间的数值
var arr = [1, 2, 3, 4, 5,6, 7, 8];
arr.sort(function(a, b){
return Math.random() - 0.5;
})
join(char)
join方法以参数作为分隔符，将所有数组成员组成一个字符串返回。如果不提供参数，默认用逗号分隔。
var a = [1, 2, 3, 4];
a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"
如果数组成员是undefined或null或空位，会被转成空字符串。
[undefined, null].join('#')
// '#'
['a',, 'b'].join('-')
// 'a--b'
slice(start,end)
slice方法用于提取原数组的一部分，返回一个新数组，原数组不变。
它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员。
// 格式
arr.slice(start_index, upto_index);
// 用法
var a = ['a', 'b', 'c'];
a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]
a.slice() // ["a", "b", "c"]
如果slice方法的参数是负数，则表示倒数计算的位置。
var a = ['a', 'b', 'c'];
a.slice(-2) // ["b", "c"]
a.slice(-2, -1) // ["b"]
concat(array)
concat方法用于多个数组的合并。它将新数组的成员，添加到原数组的尾部，然后返回一个新数组，原数组不变
['hello'].concat(['world'])
// ["hello", "world"]
['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]
reverse()
reverse方法用于颠倒数组中元素的顺序，返回改变后的数组。注意，该方法将改变原数组。
var a = ['a', 'b', 'c'];
a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]
map()
map方法对数组的所有成员依次调用一个函数，根据函数结果返回一个新数组。
var numbers = [1, 2, 3];
numbers.map(function (n) {
return n + 1;
});
// [2, 3, 4]
numbers
// [1, 2, 3]
map方法接受一个函数作为参数。该函数调用时，map方法会将其传入三个参数，分别是当前成员、当前位置和数组本身。
[1, 2, 3].map(function(elem, index, arr) {
return elem * index;
});
// [0, 2, 6]
filter()
filter方法的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。
[1, 2, 3, 4, 5].filter(function (elem) {
return (elem > 3);
})
// [4, 5]
filter方法的参数函数可以接受三个参数，第一个参数是当前数组成员的值，这是必需的，后两个参数是可选的，分别是当前数组成员的位置和整个数组。
[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
return index % 2 === 0;
});
// [1, 3, 5]
indexOf()，lastIndexOf()
indexOf方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1。
var a = ['a', 'b', 'c'];
a.indexOf('b') // 1
a.indexOf('y') // -1
indexOf方法还可以接受第二个参数，表示搜索的开始位置。
['a', 'b', 'c'].indexOf('a', 1) // -1
lastIndexOf方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1。
var a = [2, 5, 9, 2];
a.lastIndexOf(2) // 3
a.lastIndexOf(7) // -1
网友评论