JavaScript数组及常见属性与方法的使用

目录

JavaScript中什么是数组？

JavaScript中为什么需要数组？

JavaScript中数组的使用

1、数组的声明

（1）、使用数组字面量（Array Literal）

（2）、使用Array构造函数

2、数组常见方法与属性的使用

（1）、toString( )

（2）、join( )

（3）、unshift( )

（4）、push( )

（5）、pop( )

（6）、shift( )

（7）、splice( )

1、删除元素

2、 插入元素

3、替换元素

（8）、slice( )

（9）、concat( )

（10）、sort( )

（11）、reverse( )

（12）、数组的降序

（13）、length 

3、数组常见方法与属性的表格汇总

---

JavaScript中什么是数组？

在JavaScript中，数组是一种特殊的对象，特殊源于它可以存储多个值并按顺序访问它们，且数组可以包含不同类型的值，包括数字、字符串、布尔值、对象等，特殊远不止于此，它还有着扩容机制和收缩机制，深入理解JavaScript数组的内存分配会在文章末尾做出指引。数组使用方括号[]表示，每个值之间用逗号分隔。

JavaScript中为什么需要数组？

JavaScript中的数组提供了一种方便的方式来存储和操作多个值，以下是一些使用数组的原因：

1. 存储和访问多个值：数组允许我们在一个变量中存储多个值，并且可以通过索引快速访问特定元素。

2. 有序集合：数组保持元素的顺序，在执行一系列操作时可以保持数据的有序性。

3. 简化代码：使用数组可以将相关的值组织在一起，从而简化代码的编写和管理。不必为每个值创建单独的变量。

4. 迭代和循环：数组提供了一种方便的方式来遍历和循环访问元素。使用循环结构可以在数组中执行相同的操作。

5. 内置方法和属性：JavaScript数组提供了许多内置方法和属性，可以方便地对数组进行操作和处理，如添加、删除、排序、过滤等。

6. 数据结构：数组是一种常见的数据结构，它在各种算法和数据处理操作中被广泛应用。

总而言之，JavaScript中的数组使我们能够在单个变量中存储和操作多个值，以及提供方便的方法和属性来处理数组，这使得处理和管理数据变得更加灵活、高效和方便。

JavaScript中数组的使用

1、数组的声明

（1）、使用数组字面量（Array Literal）

let arr = [];   //空数组
let arr = [1, 'apple', true];   //包含不同类型元素的数组(声明的同时直接赋值)

（2）、使用Array构造函数

let arr = new Array();   //空数组
let arr = new Array(1, 'apple', true);  //包含不同类型元素的数组(声明的同时直接赋值)

需要注意的是，数组的索引是从0开始的，可以通过索引来访问和修改数组的元素。例如：

let arr = ['apple', 'banana', true];  //声明数组的同时赋值
console.log(arr[0]);  //控制台输出数组的第一个元素：apple
arr[1] = 10;  //将数组的第二个元素修改为10
console.log(arr);  //控制台输出数组：['apple', 10, true]

2、数组常见方法与属性的使用

（1）、toString( )

作用：该方法将数组中的每个元素转换为字符串，并用逗号分隔每个元素，最后返回一个包含所有元素的字符串；

let arr = ['apple', 999, true];  //声明数组的同时赋值
console.log(arr.toString());  //控制台：apple, 999, true

（2）、join( )

作用：该方法用于将数组中的所有元素连接成一个字符串，它接受一个可选的参数 separator，用于指定连接元素的分隔符，默认为逗号；

let arr = ['apple', 999, true];  //声明数组的同时赋值
console.log(arr.join("-"));  //控制台：apple-999-true
console.log(arr.join("："));  //控制台：apple：999：true

（3）、unshift( )

作用：在数组的头部添加元素；

let arr = ['apple', 999, true];  //声明数组的同时赋值
arr.unshift("banana");  //在数组的头部添加一个元素
console.log(arr);  //控制台：['banana', 'apple', 999, true]

（4）、push( )

作用：在数组的末尾添加元素；

let arr = ['apple', 999, true];  //声明数组的同时赋值
arr.push("banana");  //在数组的末尾添加一个元素
console.log(arr);  //控制台：['apple', 999, true, 'banana']

（5）、pop( )

作用：删除数组中的最后一个元素；

let arr = ['apple', 999, true];  //声明数组的同时赋值
arr.pop();  //删除数组中的最后一个元素
console.log(arr);  //控制台：['apple', 999]

（6）、shift( )

作用：删除数组中的第一个元素，且后面的所有元素向前位移一个索引；

let arr = ['apple', 999, true];  //声明数组的同时赋值
arr.shift();  //删除数组中的第一个元素,且后面的所有元素向前位移一个索引
console.log(arr);  //控制台：[999, true]

（7）、splice( )

作用： 该方法用于更新数组，可以用于删除、插入或替换数组中的元素，它可以接受多个参数，具体使用方法如下：

1、删除元素

splice(index, count)：从指定的 index 索引开始，删除 count 个元素(包括索引index)；

let arr = ['apple', 999, true];  //声明数组的同时赋值
arr.splice(1,2);  //从指定索引1开始,删除指定数量2个元素,注意的是包括索引1
console.log(arr);  //控制台：['apple']

2、 插入元素

splice(index, 0, item1, item2, ...)：从指定的 index 索引开始，插入 item1、item2 等元素到数组中；

let arr = ['apple', 999, true];  //声明数组的同时赋值
arr.splice(1,0,"元素1","元素2");  //从指定索引1开始,插入元素1、元素2等元素到数组中
console.log(arr);  //控制台：['apple', '元素1', '元素2', 999, true]

3、替换元素

splice(index, count, item1, item2, ...)：从指定的 index 索引开始，删除 count 个元素，并插入 item1、item2 等元素到数组中；

let arr = ['apple', 999, true];  //声明数组的同时赋值
arr.splice(1,2,"元素1","元素2");  //从指定索引1开始,删除指定数量2个元素,并插入元素1、元素2等元素到数组中
console.log(arr);  //控制台：['apple', '元素1', '元素2']

（8）、slice( )

作用：该方法用于从数组中提取指定部分的元素，然后返回一个新的数组，它接受两个参数，用于指定提取的起始索引和结束索引 (不包含结束索引) ；

let arr = ['apple', 999, true];  //声明数组的同时赋值
let arr2 = arr.slice(0, 2);  //截取数组arr中索引0到索引2的元素(不包括索引2),并返回一个新数组
console.log(arr2);  //控制台：[ 'apple', 999 ]

（9）、concat( )

作用：该方法可以接受任意数量的参数，每个参数可以是一个数组或一个值。它将按参数的顺序合并数组或值，并返回一个新的数组，其中包含所有合并的元素；

let arr = ['apple', 999, true];  //声明数组的同时赋值
let arr2 = [1, 2, 3];  //声明数组的同时赋值
let arr3 = arr.concat(arr2, 4, 5, 6);  //将数组arr与参数列表中的数组或值(数组arr2,值4、5、6)进行合并并返回一个新的数组
console.log(arr3);  //控制台：['apple', 999, true, 1, 2, 3, 4, 5, 6]

（10）、sort( )

作用：该方法用于对数组的元素进行排序(升序)，它会将数组中的元素按照一定的排序规则重新排列，并返回排序后的数组；

let arr = [5, 2, 1, 4, 3, '李李', 'kbc', 'hij', '张张', true, false, 6];  //声明数组的同时赋值
arr.sort();  //升序
console.log(arr);  //控制台：[1, 2, 3, 4, 5, 6, false, 'hij', 'kbc', true, '张张', '李李']

注：当数组中元素的类型不同时，会优先对数字类型进行排序；对于字符串排序，sort()方法会根据Unicode(统一码) 值来进行排序，它会将字符串中的每个字符根据 Unicode 值的大小进行比较，然后按照升序进行排列；

（11）、reverse( )

作用：颠倒数组中元素的顺序；

let arr = [5, 2, 1, 4, 3, '李李', 'kbc', 'hij', '张张', true, false, 6];  //声明数组的同时赋值
arr.reverse();  //颠倒数组中元素的顺序
console.log(arr);  //控制台：[6, false, true, '张张', 'hij', 'kbc', '李李', 3, 4, 1, 2, 5]

（12）、数组的降序

方法：先将数组进行升序，再将数组顺序进行颠倒；

let arr = [5, 2, 1, 4, 3];  //声明数组的同时赋值
arr.sort();  //升序
arr.reverse();  //颠倒数组中元素的顺序
console.log(arr);  //控制台：[5, 4, 3, 2, 1]

（13）、length 

作用：返回数组的长度；

let arr = [5, 2, 1, 4, 3];  //声明数组的同时赋值
let count = arr.length;  //获取数组的长度
console.log(count);  //控制台：5

3、数组常见方法与属性的表格汇总

序号	方法 / 属性	描述
1	toString( )	该方法将数组中的每个元素转换为字符串，并用逗号分隔每个元素，最后返回一个包含所有元素的字符串；
2	join( )	该方法用于将数组中的所有元素连接成一个字符串，它接受一个可选的参数 separator，用于指定连接元素的分隔符，默认为逗号；
3	unshift( )	在数组的头部添加元素；
4	push( )	在数组的末尾添加元素；
5	pop( )	删除数组中的最后一个元素；
6	shift( )	删除数组中的第一个元素，且后面的所有元素向前位移一个索引；
7	splice( )	该方法用于更新数组，可以用于删除、插入或替换数组中的元素，它可以接受多个参数；
8	slice( )	该方法用于从数组中提取指定部分的元素，然后返回一个新的数组，它接受两个参数，用于指定提取的起始索引和结束索引 (不包含结束索引) ；
9	concat( )	该方法可以接受任意数量的参数，每个参数可以是一个数组或一个值。它将按参数的顺序合并数组或值，并返回一个新的数组，其中包含所有合并的元素；
10	sort( )	该方法用于对数组的元素进行排序(升序)，它会将数组中的元素按照一定的排序规则重新排列，并返回排序后的数组；
11	reverse( )	颠倒数组中元素的顺序；
12	length	返回数组的长度；

深入理解JavaScript数组的内存分配：深入V8 - js数组的内存是如何分配的 - 掘金 (juejin.cn)