javascript中Array类型常用方法
方法总览:
- instanceOf
- Array.isArray()
- toString()
- join()
- push()
- pop()
- shift()
- unshift()
- splice()
- concat()
- slice()
- indexOf
- lastIndexOf
- reverse()
- sort()
- forEach()
- filter()
- map()
- every()
- some()
- reduce()
- reduceRight()
一、检测方法
- instanceof
- Array.isArray() (ES5 新增)
var arr = [1,2,3,4,5,6]; arr instanceof Array; // true Array.isArray(arr); // true
二、转换为字符串的方法
转换方法不改变原数组,只返回转换后的字符串
- toString()
var arr1 = [1,2,3,4,6]; var arr2 = ['a','b','c','d']; arr1.toString(); // '1,2,3,4,5,6' arr2.toString(); // 'a,b,c,d'
- join()
/* * join方法只接受一个参数,即用作分隔符的字符串, * 然后返回包含所有数组项的字符串 */ var arr = [1,2,3,4,5]; arr.join(''); // '12345' arr.join('-'); // '1-2-3-4-5'
三、操作方法
1. 会改变原数组的操作方法
- push()
/* * arr.push(arg1,arg2,arg3...) * push方法接收任意数量的参数,并逐个添加到目标数组末尾, * 返回值为目标数组修改后的长度 */ var arr = [1,2,3]; alert(arr.push(4,5)); // 5 alert(arr); // [1,2,3,4,5]
- pop()
/* * arr.pop() * pop方法为从目标数组末尾移除一项,并返回该移除项 */ var arr = [1,2,3,4,5]; alert(arr.pop()); // 5 alert(arr); // [1,2,3,4]
- shift()
/* * arr.shift() * shift方法为从目标数组开头移除一项,并返回该移除项 */ var arr = [1,2,3,4,5]; alert(arr.shift()); // 1 alert(arr); // [2,3,4,5]
- unshift
/* * arr.unshift(arg1,arg2,arg3...) * unshift方法接收任意数量的参数,并逐个添加到目标数组开头, * 返回值为目标数组修改后的长度 */ var arr4 = [1,2,3]; alert(arr4.unshift(4,5)); // 5 alert(arr4); // [4,5,1,2,3]
- splice()
/* * Array.splice(index,howmany,arg1,arg2...); * splice主要用途为向数组中插入项,方法主要为两种: * 删除: splice(要删除的第一项的位置,要删除的项数) * 插入或替换: splice(起始位置,要删除的项数,要插入的项数) * * 返回值为一个包含删除项的数组 */ // 删除 var arr1 = ['one','two','three']; var remove = arr1.splice(1,1); alert(remove); // ['two'] alert(arr1); // ['one','three'] // 插入 var arr2 = ['one','two','three']; var remove = arr2.splice(1,2,'four','five'); alert(remove); // ['two','three'] alert(arr2); // ['one','four','five'] // 替换 var arr3 = ['one','two','three']; var remove = arr3.splice(1,1,'four'); alert(remove); // ['two'] alert(arr3); // ['one','four','three']
2. 不会改变原数组的方法
- concat()
/* * Array.concat(arg1,arg2,arg3...) * concat方法为先创建当前数组一个副本,然后将接收的参数添加到副本末尾, * 最后返回该新数组 */ var arr = [1,2,3]; var a = ['one','two']; var b = 'three'; var c = { name: 'four'}; var newArr = arr.concat(a,b,c); alert(newArr); // [1,2,3,'one','three',{name:'four'}]
- slice()
/* * Array.slice(start,end) * slice方法为截取数组,返回截取项组成的新数组 * slice 为一个参数时,截取该参数指定的开始项到数组的末尾 * slice 为两个参数时,截取参数指定的起始和结束项,但不包括结束项(包左不包右) */ var arr = [1,2,3,4,5,6,7,8,9]; var sliceArr1 = arr.slice(3); // [4,5,6,7,8,9] var sliceArr2 = arr.slice(3,5); // [4,5] var sliceArr3 = arr.slice(3,-1); // [4,5,6,7,8] var sliceArr4 = arr.slice(-3,-1); // [7,8] var sliceArr5 = arr.slice(-1,-3); // []
- indexOf() 与 lastIndexOf()
/* * indexOf(value,start),lastIndexOf(value,start) * 两方法都为数组查找方法,查找目标项成功则返回数组该值的索引, * 查找失败则返回-1 * 第一个参数为要查找的目标值,第二个参数查找的起始位置 * indexOf 为正序查找 * lastIndexOf 为逆序查找 */ var arr = ['one','two','two','three','four','four','five']; var index1 = arr.indexOf('two'); // 1 var index2 = arr.indexOf('two',2); // 2 var index3 = arr.lastIndexOf('four'); // 5 var index4 = arr.lastIndexOf('four',4); // 4
四、排序方法
排序方法会改变原数组
- reverse()
/* * Array.reverse() * 翻转数组项的顺序 * */ var arr = [1,2,3,4,5]; arr.reverse(); alert(arr); // [5,4,3,2,1]
- sort()
/* * Array.sort(callback) * sort为数组的排序方法,默认按数组每一项进行toString()后的结果进行 * 升序排序 * sort接收一个回调函数为参数,回调函数有两个参数,代表数组的前一项和 * 后一项,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等 * 则返回 0,如果第一个参数应该位于第二个之后则返回一个正数 */ var arr1 = [2,1,4,3,5]; var arr2 = [1,50,10,500,100,1000]; arr1.sort(); arr2.sort(); alert(arr1); // [1,2,3,4,5] alert(arr2); // [1,10,100,1000,50,500] arr2.sort(function(pre,next) { if(pre < next) { return -1; }else if(pre === next) { return 0; }else { return 1; } }); alert(arr2); // [1,10,50,100,500,1000]
五、迭代方法(ES5)
数组的迭代方法都接收一个回调函数,这个回调函数会在数组的每一项上运行,回调函数接收三个参数:数组项的值,数组项的索引,数组对象本身。
- forEach():对数组中的每一项运行给定函数。没有返回值。
var arr = ['one','two','three']; arr.forEach(function(item,index,thisArr) { // 迭代的item 为arr 每一项的值 // 迭代的index 为arr 每一项的索引 // thisArr 为 数组arr });
- filter():对数组的每一项运行给定函数, 返回该函数会返回 true 的项组成的数组。
var arr = [1,2,3,4,5,6,7]; var filterArr = arr.filter(function(item,index,thisArr) { return item > 4; }); alert(filterArr); // [5,6,7]
- map(): 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
var arr = [1,2,3,4,5,6,7]; var mapArr = arr.map(function(item,index,thisArr) { return item + 10; }); alert(mapArr); // [11,12,13,14,15,16,17]
- every(): 对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true。
var arr = [1,2,3,4,5,6,7]; var every1 = arr.every(function(item,index,thisArr) { // 对数组每一项与4进行比较 return item > 4; }); alert(every1); // false var every2 = arr.every(function(item,index,thisArr) { // 对数组每一项与8进行比较 return item < 8; }); alert(every2); // true
- some(): 对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true。
var arr = [1,2,3,4,5,6,7]; var some = arr.some(function(item,index,thisArr) { // 对数组每一项与4进行比较,只要有一项大于4,就返回true return item > 4; }); alert(some); // true
- reduce(),reduceRight(): 迭代数组的所有项,然后构建一个最终返回的值, 传给 reduce()和 reduceRight()的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。
var arr = [1,2,3,4,5]; // 使用reduce进行数组求和操作 var sum = arr.reduce(function(pre,current,index,thisArr) { return pre + current; }); // reduceRight 则从相反方向,即从右向左迭代,结果一致 alert(sum); // 15