JavaScript 如何增删查改数组中的数据单元

r囧r小猫 2023-07-17 06:20 6阅读 0赞

# 数组的操作方法 #

### 1. 通过 索引下标 增删查改 ###

##### 实例 #####

（1）通过索引下标，调用数组中，指定单元的数据

var arr = ['北京','上海','广州','重庆','天津'];
    // arr[0] ---> 调用索引下标是 0 ,实际是第一个单元的数据 北京

（2）通过索引下标，来修改数组中，存储的单元的数据

// 对已存在的索引下标,进行赋值,进行的是重复赋值,会覆盖之前存储的数据
    arr[0] = '武汉';
    console.log(arr);      // 此时'武汉'会覆盖'北京'存储在arr中

（3）通过索引下标，来新增数组的单元

// 对不存在的索引下标,进行赋值,是新增数组单元的操作
    
    // 连续索引 
    arr[5] = '郑州';  // 此时 arr = ['武汉','上海','广州','重庆','天津','郑州']
    
    // 间隔索引
    arr[100] = '瞎写的';  // 此时数组arr的长度会变为101，其中索引下标6~99为empty空单元
    
    console.log(arr);
    console.log(arr[50]); // 调用的为empty空单元，输出结果为undefined

**注意：空单元也会占用数组长度。**

（4）通过索引下标，来删除数组的单元

// 定义数组的length长度属性,通过定义数组的单元个数,来删除数组的单元
    // 只能是从数组的结尾处开始删除单元,不能从数组的起始开始删除单元
    // 一般不使用,除非是一定要限制数组长度
    
    arr.length = 100; // 数组长度变为100，arr[100]被删除，但是索引下标6~99仍为empty空单元
    arr.length = 6;   // 数组长度变为6，索引下标6~99的空单元和arr[100]都被删除
    
    console.log(arr); // 此时 arr = ['武汉','上海','广州','重庆','天津','郑州']

### 2. 使用JavaScript提供的方法 增删数据 ###

通过 **unshift() push() shift() pop()** 这四种方法，我们可以对数组进行数据的添加和删除。

##### 语法规则 #####

unshift()  在数组的起始位置新增单元，可以是一个或者多个，之间使用逗号隔开
    		语法：数组变量.unshift(数据1,数据2,数据3...)
    		
    push()     在数组的结束位置新增单元，可以是一个或者多个，之间使用逗号隔开
    		语法：数组变量.push(数据1,数据2,数据3...)
    		
    shift()      在数组的起始位置删除一个单元，只能是一个
    		语法：数组变量.shift(什么都不要写,写了也没用)
    		
    pop()       在数组的结束位置删除一个单元，只能是一个
    		语法：数组变量.pop(什么都不要写,写了也没用)
    		
    注： 新增的单元可以是任意JavaScript支持的数据类型。
     	push()是最常用的数组方法，用于向数组中添加内容。
     	删除单元，也称为、抛出、释放、消除。

##### 实例 #####

var arr = [1,2,3,4,5];
    arr.unshift('北京'); // 在数组起始位置新增单元'北京'
    // 此时 arr = ['北京',1,2,3,4,5]
    
    arr.push('北京');    // 在数组结束位置新增单元'北京'
    // 此时 arr = ['北京',1,2,3,4,5,'北京']
    
    console.log(arr);
    arr.shift();  // 在数组起始位置删除第一个单元'北京'
    // 此时 arr = [1,2,3,4,5,'北京']
    
    arr.pop();    // 在数组结束位置删除第一个单元'北京'
    // 此时 arr = [1,2,3,4,5]
    
    console.log(arr);

根据JavaScript函数的定义和语法可知，这四种方法是四个JavaScript定义好的函数，它们的功能是操作数组，我们可以直接调用。而既然是函数，就可能有返回值，它们的返回值就是 定义在这写函数内部的return。那么这四个函数是不是都有返回值呢，我们可以输出上面demo中函数的返回值看一看：

// 定义一个变量,来存储返回值,当然也可以直接输出操作
    var res1 = arr.unshift('北京');
    var res2 = arr.push('北京');
    console.log(res1);  // 输出结果为 6
    console.log(res2);  // 输出结果为 7
    
    var res3 = arr.shift();
    var res4 = arr.pop();
    console.log(res3);  // 输出结果为 '北京'
    console.log(res4); // 输出结果为 '北京'

##### 结论 #####

unshift()  push()   新增单元操作,返回值都是新增单元之后,数组新的长度,也就是length属性值
    shift()  pop()  	删除单元操作,返回值都是删除单元存储的数据信息

### 3. 使用 splice() 方法截取数组的指定单元 / 删除数组的指定单元 ###

通过 **splice()** 方法我们可以删除（又叫截取）数组的指定单元。

##### 语法 #####

数组变量.splice(a,b,c)

其中

> **参数a：删除起始单元的位置—索引下标**  
> **参数b：从起始单元开始，删除单元个数—删除几个单元**  
> **参数c：在删除的位置上，插入的新的数据，可以是一个或者多个，之间使用逗号隔开，新增的单元可以是任意JavaScript支持的数据类型**

注： 如果splice()函数括号内只写一个数字，表示是从删除位置开始,删除之后所有的单元,包括起始位置单元。
    	如果splice()函数括号内什么都不写是没有效果的。
    	splice()函数操作结果返回值是 删除单元组成的新的数组。

##### 实例 #####

var arr = ['北京','上海','广州','重庆','天津'];
    var res = arr.splice(2,2); 
    // 从索引下标2的位置起，删除两个单元，即删除'广州' '重庆'
    // 此时arr = ['北京','上海','天津']
    console.log(arr);
    console.log(res); // 返回值是删除单元组成的数组['广州','重庆']

var arr = ['北京','上海','广州','重庆','天津'];
    var res2 = arr.splice(2,2,'武汉','加油');
    // 从索引下标2的位置起，删除两个单元，并插入新的单元 '武汉','加油'
    // 此时arr = ['北京','上海','武汉','加油','天津']
    console.log(arr);
    console.log(res2);// 返回值是删除单元组成的数组['广州','重庆']
    
    var res3 = arr.splice(2);
    // 从索引下标2的位置起，删除包括起始单元的所有单元
    // 此时arr = ['北京','上海']
    console.log(arr);
    console.log(res3);// 返回值是删除单元组成的数组['武汉','加油','重庆']

# 其他数组操作方法 #

接下来看几个不是特别重要的，但是偶尔也会用的数组方法。

### 数组的排序 ###

**sort()** 方法可以将数组中的数据按照数值大小来进行排序。

##### 语法 #####

数组变量.sort()  默认按照首位数值从小到大排序,不是数值的实际大小
    数组变量.sort( function(a,b){return a-b} )  按照数值的实际大小排序 --- 从小到大
    数组变量.sort( function(a,b){return b-a} )  按照数值的实际大小排序 --- 从大到小

##### 实例 #####

var arr = [3,21,3215432,321321,32,43,5,34,43,23,32543,1234,45,321,14,234,4];
    
    // 数组的排序方法
    // 按首位数字从小到大
    arr.sort();
    
    // 从小到大的固定语法形式
    arr.sort( function(a,b){ return a-b} )
    
    // 从大到小的固定语法形式
    arr.sort( function(a,b){ return b-a} )
    
    console.log(arr);

### 数组的反转 ###

**reverse()** 方法可以将数据库中，数组最后的、最新的消息，反转到最上方先显示。

##### 语法 #####

数组变量.reverse()		将数组中的单元按照反向的顺序排列显示

##### 实例 #####

var arr = ['北京','上海','广州','重庆','天津'];
    arr.reverse();
    // 此时 arr = ['天津','重庆','广州','上海','北京']
    console.log(arr);

### 数组转换为字符串 ###

**join()** 方法可以将返回值中的数据类型转换为字符串类型。

##### 语法规则 #####

数组变量.join()
    
    不会改变原始数组的内容
    返回值是字符串类型，内容是数组中每个单元存储的数据信息，默认使用逗号间隔
    遵守其他数据类型转化为字符串类型的自动转换原则

##### 实例 #####

var arr = ['北京','上海','广州','重庆','天津',true,false,100,[1,2,3,4],{ name:'张三'},function fun(){ }];
    
    // 默认逗号间隔
    var res1 = arr.join();
    // 设定间隔符号 
    var res2 = arr.join('-');   
    // 没有间隔符号,设定空字符串作为间隔 
    var res3 = arr.join('');  
    
    console.log(arr);
    console.log(res1);
    console.log(res2);
    console.log(res3);

### 字符串转化为数组 ###

**split()** 方法可以将返回值中的字符串 切割、存储为数组的形式。

##### 语法规则 #####

数组变量.split()
    
    语法1：不定义参数，将字符串整个转化为数组的一个单元
    语法2：定义参数为''空字符串 将每个字符，转化为一个单元
    语法3：可以按照特定的间隔符号来分割字符串存储单元数据内容中，没有间隔符号
    语法4：设定第二个参数，是设定数组的单元个数，也就是length长度，一般是不写的
    不会改变原始字符串。
    返回值是：按照字符串,转化为的数组。

##### 实例 #####

var str1 = '北京-上海-广州-天津-重庆';
    // 按照间隔符号 - 减号来分割字符串,存储成数组形式
    // 并且设定数组为3个单元成都
    var res4 = str1.split('-' , 3);
    console.log(res4);

### 数组的拼接 ###

**concat()** 方法可以将两个数组的数据内容进行拼接，将两个数组拼接为一个数组。

##### 语法规则 #####

数组变量1.concat(数组变量2)

##### 实例 #####

var arr1 = [1,2,3,4,5];
    var arr2 = ['北京','上海','广州','重庆','天津'];
    
    var arr3 = arr1.concat(arr2);
    console.log(arr3);