10-数组--highgh的博客--JavaScript的学习笔记-CSDN博客

本文链接：https://blog.csdn.net/highgh/article/details/109489697

内置对象简介

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象。

前面两种对象：是JS的基础内容，属于 ECMAScript；第三个浏览器对象：属于JS独有，即 JS 内置的API。

内置对象：就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用或者最基本而必要的功能（属性和方法）。

内置对象最大的优点就是帮助我们快速开发。

JavaScript的内置对象：

内置对象	对象说明
Arguments	函数参数集合
Array	数组
Boolean	布尔对象
Math	数学对象
Date	日期时间
Error	异常对象
Function	函数构造器
Number	数值对象
Object	基础对象
RegExp	正则表达式对象
String	字符串对象

1.什么是数组

编程时，我们经常会遇见处理“—组数值”的情况，比如全班10个学生的考试成绩

let a0 = 96,a1 = 97, a2 = 76,a3 = 87,a4 = 87,a5 = 90, a6 = 91, a7 = 100,a8 = 78,a9 = 56;
//错误的做法
//无法对这些数据进行批量操作  比如计算这些数据的总和和平均分  for循环无从下手

数组(Array)，顾名思义，用来存储一组相关的值，从而方便进行求和、计算平均数、逐项遍历等操作。

let scoreArr = [96, 97, 76, 87, 87, 90, 91, 100, 78, 56];

每种高级编程语言中都有数组，它是非常重要的一种数据结构

数组的存储性能比普通对象要好。在实际开发中我们经常使用数组来存储一些数据（尤其是列表数据），使用频率非常高。

比如说，上面这个页面的列表数据，它的结构就是一个大数组。

数组中的元素可以是任意的数据类型，也可以是对象，也可以是函数，也可以是数组。数组的元素中，如果存放的是数组，我们就称这种数组为二维数组。

接下来，我们讲一讲数组的基本操作。

2.数组的定义和简介

定义方法1

使用数组字面量表示法

由一对包含数组项的方括号 [] 表示, 多个数组项之间以逗号隔开。

最简单，也用得最多。

let arr1 = []; // 创建一个空的数组

let arr2 = ["A" , "B" , "C" , "D"]; //有四项 长度为4

定义方法2

使用Array构造函数

如果参数是一个数值时，表示数组的长度；如果有多个参数时，表示数组中的元素。

let arr = new Array("A" , "B" , "C" , "D");

注意这种方法如果我们只写一个数字作为参数

let arr = new Array(4);

console.log(arr.length); //4
// 表示生成一个四个项的数组，每个位置都是空值。


//Array()作为构造函数，行为很不一致。
//因此，不建议使用它生成新数组，直接使用数组字面量是更好的做法。

定义方法3

Array.of()：创建数组

语法：

Array.of(value1, value2, value3);

作用：根据参数里的内容，创建数组。

举例：

let arr = Array.of(1, 'abc', true);
console.log(arr); // 打印结果是数组：[1, "abc", true]

补充：new Array()和 Array.of()的区别在于：

当参数只有一个时，前者表示数组的长度，后者表示数组中的内容。

访问数组项

数组每一项都有下标 , 下标从0开始

let arr = ["A" , "B" , "C" , "D"]; //下标分别是  0  1  2  3

使用方括号中 书写下标 的形式访问数组的项

let arr = ["A" , "B" , "C" , "D"];


console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
console.log(arr);

下标越界

JavaScript规定，访问数组中不存在的项会返回undefined，不会报错

let arr = ["A" , "B" , "C" , "D"];

console.log(arr[4]); //undefined
console.log(arr[10000]); //undefined
console.log(arr[-1]); //undefined

更改数组项

数组并不是只读的，我们可以修改它其中任何项的值

let arr = [2 , 0 , 2 , 0];

arr[0]++;
arr[1] = 6;
console.log(arr); // 3 6 2 0

如果更改的数组项超过了length-1，则会创造这项

let arr = [2 , 0 , 2 , 0];

arr[6] = 6;

console.log(arr);

在这里插入图片描述

数组的长度

数组的length属性表示它的长度

数组最后一项的下标是数组的长度减1

let arr = ["A" , "B" , "C" , "D"];

console.log(arr.length); //4
console.log(arr[arr.length - 1]) //D

length属性是可写的。

如果人为设置length小于当前成员个数的值，该数组的成员数量会自动减少到length设置的值。

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

console.log(arr.length); //4

arr.length = 2;
console.log(arr); // [1, 2]  数组长度可改变 数组内容也发生改变

人为设置length大于当前元素个数，则数组的成员数量会增加到这个值新增的位置都是空位。

let a = ['a'];
a.length = 3;
console.log(a[2]);// undefined

清空数组的一个有效方法，就是将**length属性设为0。**

数组的遍历

数组的最大的优点就是方便遍历

let arr = ["A" , "B" , "C" , "D"];

for(let i = 0; i < arr.length; i++){
   
    console.log(arr[i]);
}

数组的检测

Array.isArray方法返回一个布尔值，表示参数是否为数组。

可以弥补typeof运算符的不足。

let arr = [1, 2, 3];


console.log( typeof arr );// "object"
console.log( Array.isArray(arr));// true

//typeof运算符只能显示数组的类型是Object
//而Array.isArray方法可以识别数组。

<body>
    <p></p>
    <p></p>
    <p></p>

    <script>
        let a = 3;
        let b = document.querySelectorAll("p")
        console.log(Array.isArray(a));//false 
        console.log(Array.isArray(b));//false 
        //类数组不能检测
    </script>
</body>

toString()

数组转换为字符串

字符串 = 数组.toString();

把数组转换成字符串，每一项用,分割。

大多数的数据类型都可以使用.toString()方法，将其转换为字符串。

**知识点补充：**将数组转换为字符串，有哪些方式

方式 1：

字符串 = 数组.toString();

方式 2：

字符串 = String(数组);

方式 3：

字符串 = 数组.join(',');  //  将数组转为字符串，每一项用 英文逗号 分隔

Array.from()

作用：将伪数组或可遍历对象转换为真数组。

可遍历的 ===> 数组,字符串,Set.Map.NodeList,arguments以及拥有length属性的任意对象

另外，伪数组的原型链中没有 Array.prototype，而真数组的原型链中有 Array.prototype。因此伪数组没有数组的一般方法，比如 pop()、join() 等方法。

语法：

array = Array.from(arrayLike);

let name = 'yunmudsb';
console.log(Array.from(name)); // 打印结果是数组：["y","u","n","m","u","d","s","b"]

伪数组举例

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>

    <script>
        let btnArray = document.getElementsByTagName('button');
        console.log(btnArray);
        console.log(Array.isArray(btnArray));
    </script>
</body>

上面的布局中，有三个 button 标签，我们通过getElementsByTagName获取到的btnArray实际上是伪数组，并不是真实的数组：
在这里插入图片描述

既然btnArray是伪数组，它就不能使用数组的一般方法，否则会报错：

解决办法：采用Array.from方法将btnArray这个伪数组转换为真数组即可：

Array.from(btnArray);

然后就可以使用数组的一般方法了：

在这里插入图片描述

3.数组的方法

数组的头尾操作方法

push方法

push()方法用来在数组末尾推入新项，参数就是要推入的项 , 并返回添加新元素后的数组长度。

如果要推入多项，可以用逗号隔开

调用push()方法后，原先数组会立即改变，不需要赋值

语法：

新数组的长度 = 数组.push(元素);

let arr = [11, 22, 33, 44];
// 方法就是打点调用的函数 , 所以是数组打点调用他们
arr.push(55);
arr.push(66);
arr.push(77 , 88)
console.log(arr); // [11, 22, 33, 44, 55, 66, 77, 88]

pop方法

用于删除数组的最后一个元素，并返回被删除的这个元素。

注意，该方法会改变原数组

语法：

被删除的元素 = 数组.pop();

let arr = [11, 22, 33, 44];
// 方法就是打点调用的函数 , 所以是数组打点调用他们
let del = arr.pop();

console.log(arr); //[11, 22, 33]
console.log(del); //44

unshift()方法

用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。插入元素后，其他元素的索引会依次调整。

注意，该方法会改变原数组。

let arr = [1 , 8 , 9 ,16];
let size = arr.unshift(100 , 110);
console.log(arr); //[100, 110, 1, 8, 9, 16]
console.log(size); //6

//unshift()方法可以接受多个参数，这些参数都会添加到目标数组头部。

shift()

删除数组中的第一个元素，返回结果为被删除的元素。

注意，该方法会改变原数组

let arr = ["小甘", "小菲", "小云"];

let del = arr.shift();

console.log(arr); //["小菲", "小云"]

console.log(del); //小甘

splice()

splice()方法用于替换数组中的指定项

注意，该方法会改变原数组。

语法：

新数组 = 原数组.splice(删除起始索引index（从0开始）, 需要删除的个数);

新数组 = 原数组.splice(删除起始索引index（从0开始）, 需要删除的个数, 新的元素1, 新的元素2...<