有关js中的数组，很多小伙伴可能都会有疑问，尤其是面试的过程中有大量有关于原生数组的题，以及数组中的方法，及方法的返回值、是否会修改原数组等等。想要彻底解决这些问题，就要系统的解析数组的方法，那么今天长沙Web前端培训就来深度解析一下这个问题哈。

什么是数组？数组：存储一组或一系列相关数据的窗口，相当于多个变量的组合。

当有多个数据进行存储和处理时使用数组，如果存储5个、50个数据呢？

数组是在内存中连续开辟的空间，相比变量，对于存储或读取数据的性能更高、更快。

数组下标：能够标识唯一一个数组空间的索引号。（相当于房间的门牌号）

下标从0开始，最大下标：数组的长度- 1

数组的元素：存储在数组中具有唯一索引号中的数据，叫元素。

如何声明数组？

字面量方式：[]

构造函数方式：new Array()

var arr = []; //声明一个空数组

var list = new Array(); //声明一个空数组

两种声明方式的区别？

字面量方式，无论存储什么数据，都表示数组元素。

构造函数中有且仅有一个正整数时，表示数组长度。

构造函数中有一个负整数或小数时，直接报错

构造函数中有一个或多个其它类型数据时，表示数组元素。

var arr = [5]; // 表示数组中有一个元素是5，长度是1

var arr = new Array(5); //表示这个数组的长度为5，可以存放5个元素。默认元素为undefined,undefined,undefined,undefined,undefined

var arr = new Array(-5); //长度不能为负数，程序报错

var arr = new Array(5.3); //长度不能为小数，程序报错

var arr = new Array('3'); //表示数组中有一个元素是'3',长度是1

var arr = new Array(1,2,3,4,5);//表示数组中有5个元素，分别是1 2 3 4 5 ,长度是5

如何访问数组？

数组名[下标]

var arr = [1,2,3,4,5]; //声明一个数组，存放了5个元素

arr[5] = 6; //为数组新增了一个元素6，下标为5

console.log(arr[0]); //访问数组中0下标对应的元素是1

数组的属性

length : 表示数组的长度（即数组中有多少个内存空间）

var arr = [1,2,3,4];

console.log(arr.length); // 4 表示数组的长度

数组的方法（增、删、改、截、拼、复、排、转）

增:

unshift(元素，元素，元素，……)

作用：在数组的首部添加新元素。

返回值：新增后数组的长度

是否影响原数组：是

var arr = [5,6,7,8,9]; //声明一个数组

console.log(arr.unshift(true,[1,2,3],false)); //unshift方法的返回值，8 表示新增后这个数组的长度是8

console.log(arr); // 输出原数组 [true,[1,2,3],false,5,6,7,8,9]

push(元素，元素，元素，……)

作用：在数组的尾部添加新元素。

返回值：新增后数组的长度

是否影响原数组：是

var arr = [5,6,7,8,9];

console.log(arr.push(true,[1,2,3],false)); //push方法的返回值，8 表示新增后这个数组的长度是8

console.log(arr); // 输出原数组 [5, 6, 7, 8, 9, true, [1,2,3], false]

删:

shift()

作用：删除数组首部的一个元素（ 一次只能删除一个）

返回值：被删除的元素

是否影响原数组：是

var arr = [5,6,7,8,9];

console.log(arr.shift()); //shift方法的返回值，5 表示在数组中删除的元素5

console.log(arr); // 输出原数组 [6, 7, 8, 9]

//删除全部元素

var arr = [5,6,0,8,9];

while(arr.length){

arr.shift();

}

console.log(arr);

pop()

作用：删除数组尾部的一个元素（ 一次只能删除一个）

返回值：被删除的元素

是否影响原数组：是

var arr = [5,6,7,8,9];

console.log(arr.pop()); //9 pop方法的返回值，9 表示在数组中删除的元素9

console.log(arr); // 输出原数组 [5, 6, 7, 8]

改:

splice(start,del_length,元素,元素,……)

start : 从哪个下标位置开始

del_length : 删除几个元素

元素 ：新增的元素

作用：在数组的任意位置可以增、删、改的操作。

返回值：被删除的元素数组

是否影响原数组：是

var arr = [5,6,7,8,9];

//只有一个参数时，表示从指定的下标开始删除到数组末尾

console.log(arr.splice(1)); // [6, 7, 8, 9] 返回值

console.log(arr); // [5] 原数组

var arr1 = [5,6,7,8,9];

//两个参数时，表示从指定的下标位置开始删除指定长度的元素

console.log(arr1.splice(1,2)); // [6, 7]

console.log(arr1); // [5, 8, 9]

var arr2 = [5,6,7,8,9];

//在删除的位置新增元素。从下标1开始删除2个元素，并在下标1的位置新增true,false两个元素

console.log(arr2.splice(1,2,true,false)); // [6, 7]

console.log(arr2); // [5, true, false, 8, 9]

var arr3 = [5,6,7,8,9];

//在下标1的位置，删除0个元素，并在下标1的位置新增两个元素true,false

console.log(arr3.splice(1,0,true,false)); // []

console.log(arr3); // [5, true, false, 6, 7, 8, 9]

截:

slice(start,end)

start : 从哪个下标位置开始

end : 到哪个下标位置结束（不包含结束位置）

作用：截取数组中指定范围的元素

返回值：被截取到的元素数组

是否影响原数组：否

var arr = [5,6,7,8,9];

// 从原数组中的下标1位置开始截取到数组末尾，并返回截取到的新数组

console.log(arr.slice(1)); // [6, 7, 8, 9] 返回值

console.log(arr); // [5,6,7,8,9] 原数组

var arr1 = [5,6,7,8,9];

//从原数组中的下标1位置开始截取到3下标之前（不包含3下标）

console.log(arr1.slice(1,3)); // [6, 7] 返回值

console.log(arr1); // [5,6,7,8,9] 原数组

var arr2 = [5,6,7,8,9];

//从原数组中的下标3位置开始截取到1下标之前（因为只能向右截取，所有未能截取到元素）

console.log(arr2.slice(3,1)); // [] 返回值

console.log(arr2); // [5,6,7,8,9] 原数组

var arr3 = [5,6,7,8,9];

//从原数组中的下标-3（最后一个元素下标为-1，-3下标对应的元素为7）位置开始截取到-1下标之前（不包含-1下标）

console.log(arr3.slice(-3,-1)); // [7, 8] 返回值

console.log(arr3); // [5,6,7,8,9] 原数组

拼:

concat(元素，元素，……)

作用：在指定的数组后面拼接新的元素（如果新元素是数组，则去掉最外层的[]将里面元素拼接）

返回值：拼接后的新数组

是否影响原数组：否

var arr = [5,6,7,8,9];

//拼接的元素如果是多维数组，则取最外层数组中的元素原样拼接到指定数组的后面

console.log(arr.concat(1,[true,[1,2]],3)); // [5, 6, 7, 8, 9, 1, true, [1,2], 3] 返回值

console.log(arr); // [5,6,7,8,9] 原数组

复:

function copyArray(arr){

return arr.slice(0);

}

function cloneArray(arr){

return arr.concat();

}

排:

reverse()

作用：将数组中的元素逆序存放

返回值：返回逆序后的数组

是否影响原数组：是

var arr = [3,2,10,4,5];

console.log(arr.reverse()); // [5, 4, 10, 2, 3] 返回值

console.log(arr); // [5, 4, 10, 2, 3] 原数组

sort()

作用：将数组中的元素按照字符编码进行从小到大排序

返回值：返回逆序后的数组

是否影响原数组：是

var arr = [3,2,10,4,5];

//以字符串的方式比较-排序：10 与 2 比较 1 < 2,所以10 < 2

console.log(arr.sort()); // [10, 2, 3, 4, 5] 返回值

console.log(arr); // [10, 2, 3, 4, 5] 原数组

sort(function(a,b){return a-b;}) : 将数组中的元素按照数字进行从小到大排序。sort(function(a,b){return b-a;}) : 将数组中的元素按照数字进行从大到小排序。

var arr = [3,2,10,4,5];

// 按数字 从小到大

console.log(arr.sort(function(a,b){return a-b;})); //[2, 3, 4, 5, 10]

// 按数字 从大到小

console.log(arr.sort(function(a,b){return b-a;})); //[10, 5, 4, 3, 2]

转:

join('连接符')

作用：将数组转为以指定连接符连接成的字符串

返回值：返回转换后的字符串

是否影响原数组：否

var arr = [1,2,3,4];

// 将数组转成以空字符串连接成的字符串

console.log(arr.join('')); //'1234'

上一篇

长沙Java培训：后端程序员Java学习路线分享

下一篇

长沙前端培训有必要学习webpack吗？