JavaScript中Array数组的常用方法

发表于 | | 阅读次数

JavaScript Array 对象

Array对象

Array 对象用于在单个的变量中存储多个值。

创建Array对象的语法

1
2
3
4
var arr = new Array();
var arr = new Array(size);
var arr = new Array(element0,element1,element2, ..., element);
var arr = [];

以上四种方法都可以创建一个Array对象

参数

参数 size 是期望的数组元素个数. 返回的数组, length 的值会改为 size 的值

参数 element0 …, element 是参数列表. 当使用这些参数来调用构造函数Array()时, 新创建的数组的元素就会被初始化这些值. 他的 length 的值会被设置成参数的个数.

返回值

返回新创建并被初始化的数组.

如果调用构造函数 Array() 时,没有使用参数的时候,以及直接使用 [] 的时候,那么会返回一个空的数组,length字段值为0;

当只传入一个参数的时候,改构造函数将返回具有指定个数、元素为undefined的数组；

当传入多个参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。

当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

Array 对象属性

属性 描述
constructor 返回对创建此对象的数组函数的引用
length 设置或返回数组中元素的数目
prototype 有能力向对象添加属性和方法

Array 对象方法

方法 描述
sort() 对数组的元素进行排序
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
pop() 删除并返回数组的最后一个元素
shift() 删除并返回数组的第一个元素
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
concat() 连接两个或更多的数组, 并返回结果.
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
slice() 从某个已有的数组返回选定的元素
splice() 删除元素，并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果。
valueOf() 返回数组对象的原始值
forEach() 遍历数组
filter() 过滤数组元素

Array 对象方法详解

数组的排序

1
2
3
4
5
var arr = [1, 3, 5, 7, 2, 4, 6];
arr.sort(function(a, b){
	return a - b;	 // 返回结果 从小到大排序: [1, 2, 3, 4, 5, 6, 7];
	return b - a;    // 返回结果 从大到小排序: [7, 6, 5, 4, 3, 2, 1];
});

数组的增删操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var arr = [1, 2, 3, 4, 5, 6];
// 在数组的末尾添加一个或多个元素
arr.push(7, 8);
console.log(arr);    // [1, 2, 3, 4, 5, 6, 7, 8];
// 删除数组中最后一个元素,同时也会返回这个元素
arr.pop();
console.log(arr);	 // [1, 2, 3, 4, 5, 6, 7];
console.log(arr.pop());  // 7
// 这一步 console.log(arr.pop()); 执行完以后,
// arr 这个数组此刻变成了 [1, 2, 3, 4, 5, 6]
// 删除并返回数组中的第一个元素
arr.shift();
console.log(arr);		// [2, 3, 4, 5, 6]
console.log(arr.shift());	// 2
arr.unshift(0, 1);
console.log(arr);		// [0, 1, 3, 4, 5, 6]

数组的翻转

1
2
3
4
5
var arr = [1, 2, 3, 4, 5, 6];
var arr1 = arr.reverse();   
console.log(arr); 		// [6, 5, 4, 3, 2, 1]
console.log(arr1); 		// [6, 5, 4, 3, 2, 1]
// 这里面,使用arr.reverse()翻转数组的时候,原数组会变成翻转后的数组,同时会返回一个数组,同样是返回后的数组

合并数组

1
2
3
4
5
6
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];
console.log(arr1.concat(arr2, arr3));
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 这里面原数组不会发生改变,返回值是合并后的数组

拼接字符串

1
2
3
var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.join());		// 1,2,3,4,5,6,7
console.log(arr.join(" | "));	// 1 | 2 | 3 | 4 | 5 | 6 | 7

数组的截取
slice方法

1
2
3
4
5
6
7
var arr = [1, 2, 3, 4, 5, 6];
// slice方法  原数组不变,拼成一个新数组
// slice(start, end);
// start: 开始的下标,包括start      
// end: 结束的下标,不包括end
console.log(arr.slice(2, 4));   // [3, 4]
console.log(arr);		// [1, 2, 3, 4, 5, 6]

splice方法

1
2
3
4
5
6
var arr = [1, 2, 3, 4, 5, 6, 7];
// splice方法  原数组会发生改变,同时也会返回一个新数组
// arr.splice(start[, deleteCount][, values]);
// start: 开始的下标,包括start
// deleteCount: 删除的长度
// values: 把剪切下来替换的值

  • 只传一个参数的时候

    1
    2
    3
    4
    5
    console.log(arr.splice(2));		// [3, 4, 5, 6, 7];
    console.log(arr);				// [1, 2];	
    // 只传一个参数 , 默认从第几个开始,直接截取到最后一个值
    // 返回一个新的数组,是剪切后的数组
    // 原数组会变成,去掉剪切后的值的剩下的数的一个数组

  • 传两个参数的时候

    1
    2
    3
    4
    5
    6
    arr = [1, 2, 3, 4, 5, 6, 7];
    console.log(arr.splice(3, 2));	// [4, 5]
    console.log(arr);					// [1, 2, 3, 6, 7]
    // 传两个参数的时候, 是从第几个下标开始截取,截取几个值
    // 返回一个新的数组,是剪切后的数组
    // 原数组会变成,去掉剪切后的值的剩下的数的一个数组

  • 传两个以上参数的时候

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    arr = [1, 2, 3, 4, 5, 6, 7];
    console.log(arr.splice(3, 2, 0, 0, 0)); // [4, 5]
    console.log(arr);					//	[1, 2, 3, 0, 0, 0, 6, 7]
    arr = [1, 2, 3, 4, 5, 6, 7];
    console.log(arr.splice(3, 2, [0, 0, 0])); // [4, 5]
    console.log(arr);						// [1, 2, 3, Array(3), 6, 7]
    // 传三个参数的时候,这个参数可以直接是数值,也可以是数组
    // 无论后面传几个参数, 返回的新数组都取决与前两个参数
    // 原数组被剪切的部分,会替换成第三个参数后面的值

数组转换成字符串

1
2
3
4
var arr = [1, 2, 3, 4, 5];
console.log(arr.toString());	// 1,2,3,4,5
console.log(arr.toLocaleString()); // 1,2,3,4,5
// 在这种情况下没有任何区别

toString和toLocaleString的区别

1
2
3
4
var date = new Date();
console.log(date.toString());		// Thu Apr 27 2017 15:24:30 GMT+0800 (中国标准时间)
console.log(date.toLocaleString());	// 2017/4/27 下午3:24:30
// 在转换时间的时候,会存在差别

查找元素在数组出现的位置

1
2
3
4
5
6
7
8
9
10
11
var arr = [1, 2, 3, 4, 5, 6, 7, 4];
// indexOf 是查找元素的在数组中第一次出现的位置
// indexOf(targetElement[, startIndex])
// targetElement: 要查找的元素
// startIndex: 从第几个下标开始查找
console.log(arr.indexOf(4)); 
console.log(arr.indexOf(4, 4)); 
console.log(arr.lastIndexOf(4));
console.log(arr.lastIndexOf(4, 5));
// lastIndexOf是从后往前查找,最后一次出现这个元素时候的位置
// 参数和indexOf的作用一样

toSource() | 返回该对象的源代码

1
2
3
4
5
6
7
function hero(name, age, gender){
	this.name = name;
	this.age = age;
	this.gender = gender;
};
var Altman = new hero('SaiWen', 18, 'male');
console.log(Altman);    	// hero {name: "SaiWen", age: 18, gender: "male"}

遍历数组

1
2
3
4
5
6
7
var arr = [1, 2, 3, 4, 5, 6];
arr.forEach(function (element, index, arr){
});
// element: 数组里面所有的元素
// index: 下标
// arr: 原数组

过滤数组元素

1
2
3
4
5
6
7
8
9
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
vsr newArr = arr.filter(function (element, index, arr){
	if (element < 5) {
		return true;
	} else {
		return false;
	}
});
console.log(newArr);		// [1, 2, 3, 4];