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

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

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

当有多个数据进行存储和处理时使用数组，如果存储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’

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

Web前端技术分享：Javascript中的内置对象数组讲解相关推荐

javascript中的内置对象和数据结构
文章目录简介基础类型 undefined Boolean和Boolean对象 Number和BigInt String Symbol null Object Function Date Array ...
JavaScript中的内置对象
一.什么是内置对象 js本身已经写好的对象,我们可以直接使用不需要定义它. 常见的内置对象有 Data.Array,Math.RegExp.Error.String.... Array高级API so ...
JavaScript（九）：JavaScript中的内置对象
一.对象的概念对象是一种特殊的数据类型(object). 拥有一系列的属性和方法. 分为内置对象和自定义对象. 二.String对象 String对象用来支持对于字符串的处理. 1.属性 lengt ...
JavaScript 中的内置对象——0606、0607笔记整理
一.JavaScript String 对象 1.String 对象 String 对象也是字符串. var s1="abcdefg"; 常规定义的字符串: var s2=new ...
JavaScript中的内置对象-8--4.date对象中-获取,设置日期时间的方法; 获取,设置年月日时分秒及星期的方法;...
学习目标 1.掌握创建日期对象的方法 2.掌握date对象中获取日期时间的方法 3.掌握date对象中设置日期时间的方法如何创建一个日期对象语法:new Date(); 功能:创建一个日期时间对象 ...
Javascript中的内置对象：RegExp对象
一.定义RegExp RegExp对象用于存储检索模式.创建RegExp对象的检索模式如下: var myPattern=new RegExp(pattern,attributes); (1) 参数p ...
好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
好程序员web前端教程分享JavaScript验证API
好程序员web前端教程分享JavaScript验证API,小编每天会分享一下干货给大家.那么今天说道的就是web前端培训课程中的章节. JavaScript验证API 约束验证DOM方法 Proper ...
好程序员Web前端教程分享JavaScript开发技巧
好程序员Web前端教程分享JavaScript开发技巧,相信知道Web前端的小伙伴都熟悉,Javascript的很多扩展的特性是的它变得更加的犀利,同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站 ...

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

Web前端技术分享：Javascript中的内置对象数组讲解相关推荐

最新文章

热门文章