数组也是一种数据类型,用于存放数据。在各大语言中都存在数组,但是语法由于大同小异。在JavaScript中数组也是一个非常重要的东西,所以有必要好好的了解一下。
创建一个数组
在JavaScript中数组是一中数据格式,不是一种数据类型。
我们可以使用构造函数
与字面量
两种方式创建一个数组。
构造函数:
1
2var arr = new Array()
console.log(arr) // []
我看可以在创建的时候传递参数:1
2
3
4
5
6
7
8
9
10
11var arr = new Array(10)
console.log(arr) // (10) [empty × 10]
var arr = new Array(-10)
console.log(arr) // Uncaught RangeError: Invalid array length
var arr = new Array(10,10)
console.log(arr) // (2) [10, 10]
var arr = new Array("10")
console.log(arr) // ["10"]
可以看出,参数如果是
- 一个number,数组就是一个长度为number的数组,里面的每一项都为空,不支持负数(取值范围出错)
- 其他情况,就是数组的每一项,几个参数就是长度为几的数组
也可以使用字面量的方式创建一个新数组。字面量:
1
2
3
4
5
6
7
8
9
10
11var arr = [];
console.log(arr) // []
var arr = [10]
console.log(arr) // [10]
var arr = [10,10]
console.log(arr) // [10, 10]
var arr = ["10"]
console.log(arr) // ["10"]
与使用构造函数
不同的是,使用字面量是无法一下创建一个长度为n
的数组的,如果是要创建一个长度为10的数组,可以直接修改数组的长度。数组的长度是可读可写的。1
2
3
4
5var arr = [];
console.log(arr.length) // 0
arr.length = 10;
console.log(arr.length) // 10
console.log(arr) // (10) [empty × 10]
如果修改长度后数组的长度大于原来的长度,那么多出来的这几项为空(empty,一些浏览器显示为undefined)。若果是小于原来数组的长度,那么就是从数组的末尾删除这个差值的项数。
也可以直接使用数组的下标添加或者是修改数组1
2
3
4var arr = [0,1,2];
arr[1] = "1";
arr[5] = "5";
console.log(arr) // (6) [0, "1", 2, empty × 2, "5"]
如果数组中原来就存放了这一下那么就是修改,arr[1] = "1"
。否则就是添加这一项arr[5] = "5"
。中间多出来的显示一个empty
。
数组的方法
数组的方法是非常多的。
添加与删除
- push
- pop
- shift
- unshift
push与unshift
push
与unshift
方法都是添加数组。push
是往数组后面添加一项,unshift
是往数组前面添加一项。1
2
3
4
5
6
7var arr = [1,2,3]
var res = arr.push(4)
console.log(arr) // (4) [1, 2, 3, 4]
console.log(res) // 4
var res = arr.unshift(4)
console.log(arr) // (5) [4, 1, 2, 3, 4]
console.log(res) // 5
两个方法都接受至少0个参数。
两个方法都是返回的新数组的长度
。
pop与shift
pop
与shift
都是删除数组某一项的方法。pop
是删除数组的这最后一项,shift
是删除数组的第一项。分别与push
与unshift
方法对应。1
2
3
4
5
6
7var arr = [1,2,3]
var res = arr.pop()
console.log(arr) // (2) [1, 2]
console.log(res) // 3
var res = arr.shift()
console.log(arr) // [2]
console.log(res) // 1
两个方法都不需要参数
两个方法都是返回的删除的这一项
。
数组排序
- reverse
- sort
reverse反转数组
1 | var arr = [3,5,1,6,4,7]; |
很简单,就是把数组倒序了。
sort数组排序
1 | var arr = [3,5,1,6,4,7]; |
如果只是一位数字没有问题,但是如果是多为数字就有问题。1
2var arr = [22,3,556,1,32,11,2]
console.log(arr.sort()) // (7) [1, 11, 2, 22, 3, 32, 556]
因为sort()方法会根据测试字符串的结果来改变顺序比较2与11
的时候比较的是字符串”2”与”11”。所以出现上面的结果。
sort方法可以接受一个函数作为参数,自己规定排序问题。1
2
3
4var arr = [22,3,556,1,32,11,2]
console.log(arr.sort(function(a,b){
return a - b;
})) // (7) [1, 2, 3, 11, 22, 32, 556]
参数函数接收两个参数,第一个参数因该位于第二个前面放回负数,位于之后返回正数,否则返回0。
数组拼接concat
concat 方法及拼接数组。在不改变原数组的情况下把多个数组拼接返回新数组。1
2
3
4var arr = [1,2];
var res = arr.concat([2,3])
console.log(arr) // (2) [1, 2]
console.log(res) // (4) [1, 2, 2, 3]
数组切割slice
slice方法可以把数组切割1
2
3
4var arr = [1,2,3,4,5]
console.log(arr.slice(1)) // (4) [2, 3, 4, 5]
console.log(arr.slice(1,3)) // (4) [2, 3]
console.log(arr) // (5) [1, 2, 3, 4, 5]
slice接收两个参数,第一个是切割的开始位置。第二个可选,表示切割的结束位置(不包含这个索引对应的值),如果没有第二个参数,表示末尾。
如果slice中存在负数
,则是倒数的
。如果是slice(-1,3)则相当于是slice(4,3)。那么返回的是一个空数组。
数组的splice方法
splice是一个非常强大的方法,之前除了排序其他的方法都可以使用splice实现。这个方法自身可以接收>=2
个参数。两个参数为删除:
1
2
3
4var arr = [1,2,3,4];
var res = arr.splice(1,2);
console.log(arr) // [1,4]
console.log(res) // [2,3]
第一个参数是删除的开始位置,第二个删除的项数。上面的表示第下标为1开始删除两项。
返回的是删除的内容。三个参数是插入:
1
2
3
4var arr = [1,2,3,4];
var res = arr.splice(1,0,3,5);
console.log(arr) // (6) [1, 3, 5, 2, 3, 4]
console.log(res) // (2) []
第三个及以后参数表示的是需要插入的项。
这样就可以实现替换的效果了。1
2
3
4var arr = [1,2,3,4];
var res = arr.splice(1,1,3,5);
console.log(arr) // (5) [1, 3, 5, 3, 4]
console.log(res) // (2) [2]
上面表示从第一项开始,删除一项并且替换为后面的东西。
位置判断indexOf与lastIndexOf
两个方法都是查找,接收一个参数,如果有返回查找的东西在数组中出现的下标(位置)
。没有返回-1
。indexOf
是正向查找,lastIndexOf
是反向查找。1
2
3
4
5var arr = [1,2,3,4,3,2,1]
console.log(arr.indexOf(3)) // 2
console.log(arr.indexOf(5)) // -1
console.log(arr.lastIndexOf(3)) // 4
console.log(arr.lastIndexOf(5)) // -1
数组的迭代方法
- every
- some
- filter
- forEach
- map
五个方法都可以接收两个参数。第一个参数是一个函数,第二个是第一个函数中的this的值,即:如果有第二个参数,那么第一个参数中使用了this
,这个this
就表示第二个参数。
第一个参数函数可以接收三个参数:
- 数组每一项的值
- 这一项在数组中的下标
- 数组本身
every与some
两个方法是判读数组中每一项满不满足这个条件。every
表示每一项都满足返回true,否则返回false。some
表示数组中有满足的就返回true,否则false。1
2
3
4
5
6
7
8
9var arr = [1,2,3,4,5]
var res = arr.every(function(item,index){
return item > 2
})
console.log(res) // false
var res = arr.some(function(item,index){
return item > 2
})
console.log(res) // true