javascript中Array类型常用方法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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()

一、检测方法

  1. instanceof
  2. Array.isArray()   （ES5 新增） 
    var arr = [1,2,3,4,5,6];

arr instanceof Array;	// true

Array.isArray(arr);		// true

     

二、转换为字符串的方法

    转换方法不改变原数组，只返回转换后的字符串

  1. 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‘
  2. 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

四、排序方法

     排序方法会改变原数组

  1.   reverse() 
    /*
 *  Array.reverse()
 *	翻转数组项的顺序
 *
 */
 var arr = [1,2,3,4,5];

 arr.reverse();
 alert(arr);	// [5,4,3,2,1]
  2. 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）

        数组的迭代方法都接收一个回调函数，这个回调函数会在数组的每一项上运行，回调函数接收三个参数：数组项的值，数组项的索引，数组对象本身。

  1. forEach()：对数组中的每一项运行给定函数。没有返回值。 
    var arr = [‘one‘,‘two‘,‘three‘];
arr.forEach(function(item,index,thisArr) {
	// 迭代的item 为arr 每一项的值
	// 迭代的index 为arr 每一项的索引
	// thisArr 为 数组arr
});
  2. 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]
  3. 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]
  4. 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
  5. 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
  6. 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

以上是关于javascript中Array类型常用方法的主要内容，如果未能解决你的问题，请参考以下文章

javascript中数组常用的方法和属性

JavaScript常用对象Array

javascript类型系统

JavaScript 中数组的一些常用方法

JavaScript入门之数组：Array类型详解

JavaScript 数据类型面向对象编程