Web前端技术分享:Javascript中的内置对象数组讲解

有关js中的数组,很多小伙伴可能都会有疑问,尤其是面试的过程中有大量有关于原生数组的题,以及数组中的方法,及方法的返回值、是否会修改原数组等等。想要彻底解决这些问题,就要系统的解析数组的方法,那么今天小千就来深度解析一下这个问题哈。
u=3377524445,2378825670&fm=26&fmt=auto.webp
什么是数组?数组:存储一组或一系列相关数据的窗口,相当于多个变量的组合。

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

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

数组下标:能够标识唯一一个数组空间的索引号。(相当于房间的门牌号)

下标从0开始,最大下标:数组的长度- 1

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

如何声明数组?

字面量方式:[]

构造函数方式:new Array()

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

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

扫描二维码关注公众号,回复: 13342247 查看本文章

两种声明方式的区别?

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

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

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

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

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’

本文来自千锋教育,转载请注明出处。

猜你喜欢

转载自blog.csdn.net/xiaoxijinger/article/details/121394881