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

数组的操作方法

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);