【前端自学之路】JS之数组

Javascript 数组

什么是数组

数组是一组数据组成的集合,这些数据可以是不同数据类型

1
2
3
4
var students = ['bill', 'gates', 'pony', 'mark'];
var counts = [1, 4, 2, 8, 5, 15, 3, 2];
var teachers = [2];
var names = [];

数组的属性

数组有个很基础的属性,那就是 length,表示数组元素的个数

1
2
3
4
5
6
7
8
9
10
11
var students = ['bill', 'gates', 'pony', 'mark'];
// 输出 4
console.log(students.length);

var teachers = [2];
// 输出 1
console.log(teachers.length);

var names = [];
// 输出 0
console.log(names.length);

访问数组元素

我们通过下表索引来访问数组元素,即 []

1
2
3
4
5
6
var students = ['bill', 'gates', 'pony', 'mark'];

// 访问数组students下标为 1 的元素,输出 'gates'
console.log(students[1]);
// 访问数组students下标为 0 的元素,输出 'bill'
console.log(students[0]);

数组下标是从 0 开始计算,依次为 0 1 2 3 … length - 1

由于数组长度为 length,因此最大下标索引是 length - 1

数组常用的方法

join
函数功能:把数组转换成字符串,并添加参数指定的分隔符
参数:分隔符
返回值:新的字符串
数组本身不受影响

1
2
3
var students = [1, 4, 2, 9];
// 输出 "1|4|2|9"
console.log(students.join('|'));

slice
函数功能:获取数组中的一个子片段
参数: 起始下标索引,结尾下标索引 (一个左开右闭区间,包括起始下标,但不包括结尾下标)
返回值:新的子数组
数组本身不受影响

1
2
3
4
5
6
var students = [1, 4, 2, 9, 19, 5, 8];
// 输出 [4, 2, 9]
// 起始下标 1,对应的元素是 4
// 结尾下标 4,对应的元素是 19
// 但是由于包含起始元素、但不包含结尾元素,所以子数组是 [4, 2, 9]
console.log(students.slice(1, 4));

push
函数功能:向数组尾部添加元素(所谓尾部是下标索引大所指示)
参数: 需要添加的元素
返回值:添加后数组的长度
数组本身肯定受影响

1
2
3
4
5
6
7
8
var students = [1, 4, 2, 9];
// 输出 5
// students变为 [1, 4, 2, 9, 1]
console.log(students.push(1);

// 输出 7
// students变为 [1, 4, 2, 9, 1, 89, 21]
console.log(students.push(89, 21))

pop
函数功能:删除数组尾部第一个元素(也就是下标索引最大的那个元素)
参数: 无
返回值:删除的元素
数组本身肯定受影响

1
2
3
4
5
var students = [1, 4, 2, 9];
// 输出 9
// 因为数组尾部的第一个元素是 9
// students变为 [1, 4, 2]
console.log(students.pop();

unshift
函数功能:向数组头部添加一个元素(也就是下标索引小所指示的)
参数: 添加的元素
返回值:添加后数组的长度
数组本身肯定受影响

1
2
3
4
var students = [1, 4, 2, 9];
// 输出 5
// students变为 ['a', 1, 4, 2, 9]
console.log(students.unshift('a');

shift
函数功能:删除数组头部第一个元素(也就是下标索引最小的那个元素)
参数: 无
返回值:删除的元素
数组本身肯定受影响

1
2
3
4
5
var students = [1, 4, 2, 9];
// 输出 1
// 因为数组头部的第一个元素是 1
// students变为 [4, 2, 9]
console.log(students.shift();

concat
函数功能:数组连接
参数: 需要连接的数组
返回值:连接后的新数组
数组本身不受影响

1
2
3
4
var students = [1, 4, 2, 9];
// 输出 [1, 4, 2, 9, 'a', 'b', 'c']
// students仍为 [1, 4, 2, 9]
console.log(students.concat(['a', 'b', 'c']);

reverse
函数功能:颠倒数组元素顺序
参数: 无
返回值:颠倒后的新数组
数组本身肯定受影响

1
2
3
4
var students = [1, 4, 2, 9];
// 输出 [9, 2, 4, 1]
// students变为 [9, 2, 4, 1]
console.log(students.reverse();

sort
函数功能:数组元素排序
参数: 排序的回调函数或者空
返回值:排序后的新数组
数组本身肯定受影响

1
2
3
4
var students = [1, 4, 2, 9];
// 输出 [1, 2, 4, 9]
// students变为 [1, 2, 4, 9]
console.log(students.sort();

splice
函数功能:可以同时完成数组的增/删操作
参数: 删除的起始下标,删除的个数,添加的元素
返回值:被删除的元素列表
数组本身肯定受影响

1
2
3
4
var students = [1, 4, 2, 9];
// 输出 [4, 2]
// students变为 [1, 5, 10, 6, 9]
console.log(students.splice(1, 2, 5, 10, 6);

indexOf
函数功能:从数组中查找是否存在指定的元素
参数: 查找的元素
返回值:查到的元素的下表索引,或者查找失败为 -1
数组本身不受影响

1
2
3
4
5
6
7
var students = [1, 4, 2, 9];
// 输出 3
// students仍为 [1, 4, 2, 9]
console.log(students.indexOf(9);

// 输出 -1,因为数组students中没有 'a'
console.log(students.indexOf('a'));
坚持原创技术分享,谢谢鼓励我继续创作!