Array类型
创建数组
- 使用
Array
构造函数:
var colors = new Array();
如果预先知道数组要保存的项目数量,也可以给构造函数传递该数量,该数量会自动编程length
属性的值:
var colors = new Array(20); //创建length为20的数组
也可以向构造函数传递数组中应该包含的项:
var colors = new Array('red', 'blue', 'green'); // 创建一个包含三个字符串值的数组
另外,在使用Array
构造函数式可以省略new
操作符
var colors = Array(3) //创建一个包含3项的数组
var names = Array('Greg') //创建一个包含1项,即字符串'Greg'的数组
- 字面量方法创建数组
数组字面量是由一堆包含数组项的方括号表示,多个数组之间以逗号隔开
var colors = ['red', 'green', 'blue']; // 创建一个包含3个字符串的数组
var names = []; // 创建一个空数组
var values [1,2,]; // 不要这样!这样会创建一个包含2(IE9+ FireFox Opera Safari Chrome)或3(IE8之前)项的数组
var options = [,,,,,]; // 不要这样!这样会创建一个包含5(IE9+ FireFox Opera Safari Chrome)或6(IE8之前)项的数组
访问数组元素
在读取和访问数组的值时,要用方括号并提供响应值基于0的数字索引
var colors = ['red', 'green', 'blue']
colors[0]; // 显示第一项
colors[2] = 'black' // 修改第三项
colors[3] = 'brown' // 新增第四项
检测数组
检测一个对象是不是数组,可以使用instanceof
操作符
if (value instanceof Array) {
// 对数组执行某些操作
}
使用Array.isArray
方法,同样可以检测一个值是不是数组,并且这种方法避免了instanceof
操作符在网页中具有不同的框架时出现的错误
if (Array.isArray(value)) {
// 对数组执行某些操作
}
支持Array.isArray
方法的浏览器有IE9+ FireFox4+ Safari5+ Opera10.5+和Chrome
数组的转换
所有对象都具有toLocaleString()
、toString()
和valueOf()
方法
toString()
方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
valueOf()
方法返回的还是数组
实际上,为了创建这个字符串,会调用数组每一项的toString()
方法
toLocaleString()
方法也会创建一个数组值以逗号分隔的字符串,但是,这一次为了取得每一项的值,调用的是每一项的toLocaleString()
方法
var colors = ['red', 'green', 'blue'];
colors.toString() // red,green,blue
colors.valueOf() // red,green,blue
colors // red,green,blue
var person1 = {
toLocaleString: function() {
return 'Nikolaos';
},
toStirng: function() {
return 'Nicholas';
}
}
var person2 = {
toLocaleString: function() {
return 'Grigorios';
},
toString: function() {
return 'Greg'
}
}
var people = [person1, person2]
people // Nicholas,Greg
people.toString() // Nicholas,Greg
people.toLocaleString() // Nikolaos,Grigorios
继承的toLocaleString()
、toString()
、valueOf()
方法,默认情况下会以逗号分隔字符串的形式返回数组项,而如果使用join()
方法,则可使用不同的分隔符来侯建这个字符串
var colors = ['red', 'green', 'blue'];
colors.join(',') // red,green,blue
colors.join('|') // red|green|blue
如果数组中某一项值是null或undefined,那么该值在join() toLocaleString() toString() valueOf()方法返回的结果中以空字符串表示
数组方法
队列、栈方法
push()
方法
接收任意数量的参数,把他们逐个添加到数组末尾,并返回修改后数组的长度
var colors = new Array();
var count = colors.push('red','green');
count // 2
pop()
方法
从数组末尾移除最后一项,减少数组的length
值,然后返回被移除的项
var colors = new Array('black')
var item = colors.pop();
item // 'black'
shift()
方法
移除数组中的第一项并返回该项,同时数组长度减1
var colors = ['red', 'green']
var item = colors.shift();
item // 'red'
unshift()
方法
在数组前端添加任意个项并返回新数组的长度
var colors = new Array();
var count = colors.unshift('red', 'green')
count // 2
重排序方法
reverse()
方法
翻转数组项的顺序
var values = [1,2,3,4,5]
values.reverse()
values // 5,4,3,2,1
sort()
方法
默认情况下按升序排列数组,即最小的值在最前面,最大的值在后面,会调用每个数组的toString()
转型方法,然后将得到的字符串进行排序。sort()
方法还接受一个比较函数,比较函数接收两个参数,如果第一个参数应该位于第二个之前,则返回一个负数,如果两个参数相等则返回0,如果第一个参数位于第二个之后则返回一个正数
var values = [0,1,5,10,15]
values.sort();
values // 0,1,10,15,5
function compare(val1, val2) {
if (val1 < val2) return -1;
else if (val1 > val2) return 1;
else return 0;
}
values.sort(compare)
values // 0,1,5,10,15
操作方法
concat()
方法
可以基于当前数组中的所有项创建一个新数组。具体来说,这个方法会创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。如果传递的参数是一个或者多个数组,则该方法会将这些数组中的每一项都添加到结果数组中。
var colors = ['red','green','blue']
var colors2 = colors.concat('yellow', ['black', 'brown'])
colors // red,green,blue
colors2 // red,green,blue,yellow,black,brown
slice()
方法
能够基于当前数组中的一个或多个项创建一个新数组。slice()
方法可以接收一个或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,方法返回从该参数指定位置开始到当前数组末尾的所有项。slice()
方法不影响原始数组
var colors = ['red', 'green', 'blue', 'yellow', 'purple']
var colors2 = colors.slice(1)
var colors3 = colors.slice(1, 4)
colors2 // green,blue,yellow,purple
colors3 // green,blue,yellow
splice()
方法
splice()
有很多种用法,主要用途是向数组中插入项,使用方式有三种
- 删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数
- 插入:可以向指定位置插入任意数量的项,只需提供3个参数:起始位置、0(要删除的项数)、要插入的项
- 替换:可以向指定位置插入任意数量的项,同事删除任意数量的项,只需指定3个参数:起始位置、要删除的项数、要插入的任意数量的项
// 删除
var colors = ['red', 'green', 'blue']
colors.splice(1,1)
colors //red,blue
// 插入
var colors = ['red', 'green', 'blue']
colors.splice(1,0,"yellow", 'black')
colors // red,yellow,black,green,blue
// 替换
var colors = ['red', 'green', 'blue']
colors.splice(1,1,'yellow', 'black')
colors // red,yellow,black,blue
位置方法
indexOf
方法
indexOf
方法接收两个参数:要查找的项和(可选)表示查找起点位置的索引,该方法从数组的开头开始向后查找
var numbers = [1,2,3,4,5,4,3,2,1]
number.indexOf(4) // 3
lastIndexOf
方法
lastIndexOf
方法接收两个参数:要查找的项和(可选)表示查找起点位置的索引,改方法从数组的末尾开始向前查找
var numbers = [1,2,4,3,5,4,3,2,1]
number.lastIndexOf(4) //3
迭代方法
every()
方法
对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true
filter()
方法
对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组
forEach()
方法
对数组中的每一项运行给定函数,无返回值
map()
方法
对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
some()
方法
对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true
以上方法都不会修改数组中包含的值
var numbers = [1,2,3,4,5,4,3,2,1]
var everyResult = numbers.every(function(item, index, array) {
return item > 2
}) // => false
var someResult = numbers.some(function(item, index, array) {
return item > 2
}) // => true
var filterResult = numbers.filter(function(item, index, array) {
return item > 2
}) // => [3,4,5,4,3]
var mapResult = numbers.map(function(item, index, array) {
return item * 2
}) // => [2,4,6,8,10,8,6,4,2]
numbers.forEach(function(item, index, array) {
// 执行某些操作
})
归并方法
reduce()
方法
迭代数组所有项,构建一个最终返回值。接收两个参数:每一项上调用的函数和(可选)作为归并基础的初始值
函数接收四个参数:前一个值,当前值,项的索引,数组对象。
此函数返回的任何值都会作为第一个参数传递给下一项
var values = [1,2,3,4,5]
var sum = values.reduce(function(prev, cur, index, array) {
return prev + cur
}, 0) // => 15
reduceRight()
方法
和reduce()
方法相同,只是从数组的最后一项开始,向前遍历到第一项
var values = [1,2,3,4,5]
var sum = values.reduceRight(function(prev, cur, index, array) {
return prev + cur
}, 0) // => 15