Array类型是ECMAScript中最常用的类型了。
一、声明方式
1.使用Array构造函数
var arr1 = new Array();
如果预先知道要保存数组的数量, 也可以给构造函数传递该数量,该数量会自动变成length属性值。
var str = new Array(10); console.log(str.length) // 10
也可以向数组中传递包含的值。
var arr = new Array(‘hello‘, ‘world‘, ‘js‘); console.log(arr); // [‘hello‘, ‘world‘, ‘js‘]
在使用Array的时候也可以省略new操作符。
var str = Array(3); console.log(str.length); // 3
2. 数组字面量表示法
var name = [‘mike‘, ‘john‘, ‘kaer‘];
注释:不要想这样声明数组, var arr = [1, 2, ]; ,在IE8及之前的版本中, arr会成为一个包含3个项且每项值为1,2,undefined的数组。而在其他浏览器中会包含项目值分别为1,2的数组。
设置和获取数组的值都可以通过索引的方式。
二、length属性
数组的length属性不只是只读的,可以通过设置这个属性,从末尾移除或向数组中添加新项。
var name = [‘mike‘, ‘john‘, ‘kaer‘]; name.length = 2; console.log(name[2]); // undefined
如果将length属性设置为大于数组项的值,则新增的每一项都会取得undefined值。
var names = [‘mike‘, ‘john‘, ‘kaer‘]; names.length = 4; console.log(names[3]); //undefined
每当在数组末尾添加一项后,起length属性都会自动更新反应这一变化。当把一个值放在超出当前数组大小的位置时,数组就会重新计算其长度, 即长度值等于最后一项索引加1。
var names =[]; names[99] = ‘mike‘; console.log(names.length); // 100
三、数组方法
1. toString(): 返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。
var arr = [1,2,3] arr.toString() //"1,2,3"
实际上,为了创建这个字符串会调用数组每一项的toString()方法。
var str1 = { toString: function() { return ‘hello‘; } }; var str2 = { toString: function() { return ‘world‘; } }; var arr = [str1, str2]; console.log(arr.toString()); // hello, world
同样可以使用join方法来拼接数组, 可以通过传递不同的分隔符来拼接字符串。若不传参数或者参数为undefined,则使用逗号作为分隔符。但是IE7及更早的版本会认为使用undefined作为分隔符。
2. valueOf(): 该方法返回的还是数组
var ar = [1,2,3]; arr.valueOf(); //[1,2,3]
3.pop(), push(param1[,param2,.....,param...])
push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
pop()方法则从数组末尾移除最后一项, 减少数组的length值,然后返回移除的项。
var names = [‘mike‘, ‘john‘, ‘kaer‘]; var count = names.push[‘barret‘]; console.log(count); // 4 console.log(names.length); //4 var item = names.pop(); console.log(item); // ‘barret‘ console.log(names.length) // 3
4. shift(), unshift()
unshift()方法可以接受任意数量参数, 把它们逐个添加到数组的前端,并返回修改后数组的长度。
shift()方法则从数组末尾移除最后一项, 减少数组的length值,然后返回移除的项。
5. reverse(), sort()
reverse()方法会反转数组项的顺序,改变是的原数组。
var arr = [1, 2, 6, 4]; console.log(arr.reverse()); // [4, 6, 2, 1]
sort()方法按升序排列组项,即最小值位于最前面,最大值排在最后面。sort()方法会调用每个数组项的toString()方法,然后比较得到的字符串。
var nums = [1,2,4,10,5]; nums.sort(); console.log(nums); // [1, 10, 2, 4, 5]
sort()方法会根据测试字符串的结果改变原来的顺序, 虽然10大于2,4,5,但在进行字符串比较时, ‘10‘位于‘2‘, ‘4‘, ‘5‘的前面。sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值在前。比较函数接收两个参数, 如果第一个参数应该位于第二个之前,则返回一个负数,如果两个参数相等,则返回0如果第一个参数应该位于第二个之后则返回一个整数。
function compare(value1, value2) { return value1 < value2 ? -1 : 1; }
这个比较函数适用大多数据类型,只要将其作为参数传给sort即可。
var nums = [1,3,10,9, 4]; nums.sort(compare); console.log(nums); // [1, 3, 4, 9, 10]
6. concat(param1[,param2 ,... paramn]): 基于当前数组,接收参数添加到数组中。在没有给传递参数的情况下,只会复制当前数组的副本。
var names = [‘kaer‘, ‘jhon‘, ‘mike‘]; var names2 = names.concat(‘david‘, [‘smith‘, ‘snow‘]); console.log(names2); // [‘kaer‘, ‘jhon‘, ‘mike‘, ‘david‘, ‘smith‘, ‘snow‘]
7. slice(start, end): 基于当前数组中的一个或者多个创建一个新数组。如果只有一个参数, slice返回该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项,但不包括结束位置的项。此方法并不会影响原始数组。如果参数是负数,则表示从数组末尾向前的位置,最后一位下标为-1. 如果起始位置大于结束位置,则返回空数组。
var nums = [1,2,3,4,5,6]; var nums2 = nums.slice(2); console.log(nums2); // [3,4,5,6] var nums3 = nums.slice(2, 5); console.log(nums3); // [3, 4, 5] var nums4 = nums.slice(2, -1); console.log(nums4); // //[3,4,5]
8. splice(): 最强大的一个数组方法,主要提供一下三种用法。此方法会改变原有的数组。
- 删除: 删除任意数量的项, 需要2个参数, 第一项的位置和要删除的项数。返回被删除的项。
var nums = [1, 2, 3, 4, 5]; nums.splice(0, 2); // [1, 2] console.log(nums); // [3, 4, 5]
- 插入: 可以向指定位置插入任意数量的项,需要3个参数:起始位置, 0和要插入的项。返回空数组。
var nums = [1,2,3]; nums.splice(1, 0, ‘hello‘, ‘world‘); console.log(nums); // [1,2, ‘hello‘, ‘world‘, 3]
- 替换:向指定位置插入任意数量的项, 同事删除任意数量的项,需要3个参数,起始位置, 要删除的项数和要插入的任意数量的项。返回被删除的项。
var nums = [1,2,3]; nums.splice(1, 1, ‘hello‘, ‘world‘); // 2 console.log(nums); // [1, ‘hello‘, ‘world‘, 3]
9. indexOf()和lastIndexOf():接收两个参数, 要查找的项和表示查找七点位置的索引。indexOf从数组的开头开始查找, lastIndexOf则从数组的末尾开始向前查找。返回查找项 在数组中的位置, 或者没找到情况下返回-1。
var numbers = [1, 2, 3, 4, 5, 6];console.log(numbers.indexOf(7)); // -1 console.log(numbers.indexOf(3)); // 2
10. every(), filter(), forEach(), map(), some()
这些方法都不会修改原数组本身。它们都可以传入两个参数,第一个是对数组项操作的回调函数callback,第二个参数是this值。
1. every(): 对数组中的每一项运行给定函数, 如果该函数每一项都返回true,则返回true。
2. filter(): 对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。
3. forEach(): 对数组中的每一项运行给定的函数。无返回值。
4. map():对数组中的每一项运行给定函数, 返回每次调用结果组成的数组。callback
函数只会在有值的索引上被调用。并且在执行第一个回调时就已经确定了数组元素范围,在map执行过程中,新增加的元素不会被callback访问到。
5. some(): 对数组中的每一项运行给定函数,如果任一项返回true, 则返回true。
var nums = [1, 2, 3, 4, 5]; var everyResult = nums.every(function(item, index, array) { return (item > 2); }); console.log(everyResult); // false var someResult = nums.every(function(item, index, array) { return (item > 2); }); console.log(someResult); // true var filterResult = nums.filter(function(item, index, array) { return (item > 2); }); console.log(filterResult); // [3, 4, 5] var thisArg = { num: 1 }; var mapResult = nums.map(function(item, index, array) { return (item * 2 + this.num); }, thisArg); console.log(mapResult); // [3, 5, 7, 9, 11] var nullArr = []; var mapResultNull = nullArr.map(function(item, index, array) { return (item * 2); }); console.log(mapResultNull); // []
11. reduce() , reduceRight(): 迭代数组的所有项, 然后构建一个最终返回值。都可以传两个参数, 一个在每一项上调用的函数和递归基础的初始值。回调函数可以接收4个参数: 前一个值, 当前值, 项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。
var nums = [1, 2, 3, 4]; var sum = nums.reduce(function(prev, cur, index, array) { return prev + cur; }); console.log(sum); // 10