JavaScript基础之“数组”

106 阅读4分钟

引言

数组是一个很常见的一个用法,在所有编程语言里都有它的身影,本篇文章我们来讲讲关于JavaScript中数组的使用场景和方法。

在之前学习的数据结构中,我们就有接触过数组。他是一种线性的,好用的。内置方法很多,由丰富API,可以实现栈和队列的数据结构。

下面我们将主要介绍一些数组内置的功能

正文

范围运用

在JavaScript中,数组可包含任意数据类型,并通过索引访问各个元素。 想取得数组长度,直接输入arr.length

let arr  =[1,2,3,4,5,6];
console.log(arr.length); // 6

注意:给数组的长度赋予一个新的值,会导致数组大小的变化。

 let arr = ['A', 'B', 'C'];
 console.log(arr.length); // 3
// 调整数组大小:
 arr.length = 6;
 console.log(arr); // arr变为['A', 'B', 'C', undefined, undefined, undefined]
 // 调整数组大小:
 arr.length = 2;
 console.log(arr); // arr变为['A', 'B']

数组也可以直接改变某个元素的值,对其对应索引赋值会直接修改。

      let arr = ['A', 'B', 'C'];
      arr[1] = 99;
      console.log(arr); // arr现在变为['A', 99, 'C']
      console.log(arr[1]); // 99

注意:如果修改的索引大于数组的范围,会引起数组大小的变化

      let arr = ['A', 'B', 'C'];
      arr[5] = 'x';
      console.log(arr); // arr变为['A', 'B', 'C', undefined, undefined, 'x']
      

在其他编程语言中一般不允许直接改变数组大小,越界访问会报错,但在JavaScript中却不会出现这样的问题

indexOf

我们也可以通过输入元素的值来获得它的索引的值

let arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到,返回-1
arr.indexOf('30'); // 元素'30'的索引为2

但此时要注意30'30'并不是一个元素。

slice

用这个方法可以截取数组中的一部分元素,输出一个新数组

let arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
push 和 pop

其实这算数组用法中的一个小重点了,是最常用的方法 push() 是向数组末端添加元素。相反的,pop()是向数组末端删除元素。

let arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()删除'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; //为空 []
arr.pop(); // 空数组继续pop不会报错,而是返回undefined
arr; // []
unshift 和 shift

pushpop类似,只不过把数组末端换成了数组头部,这里就不过多介绍了。

unshift添加shift删除

sort

sort用于对数组排序,可以直接修改元素位置

let arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']
reverse

reverse用于把整个数组的元素反转过来,也就是倒序。

let arr = ['one', 'two', 'three'];
arr.reverse(); 
arr; // ['three', 'two', 'one']
splice

splice可以用于数组的修改,包括添加和删除,比较万能。

let arr = ['A', 'B', 'C', 'D', 'E', 'F'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'G', 'H'); // 返回删除的元素 ['C', 'D', 'E']
arr; // ['A', 'B', 'G', 'H', 'F']
// 只删除,不添加:
arr.splice(2, 2); // ['G', 'H']
arr; // ['A', 'B', 'F']
// 只添加,不删除:
arr.splice(2, 0, 'G', 'H'); // 返回[],因为没有删除任何元素
arr; // ['A', 'B', 'G', 'H', 'F']
concat

用于连接两个数组

let arr = ['A', 'B', 'C'];
let added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']

实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里:

let arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]
join

用特殊的字符串连接数组中的每一个元素

let arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
多维数组

若数组某个元素中又是一个数组,则形成多维数组。

let arr = [[1, 2, 3], [400, 500, 600], '-'];
let x = arr[1][1];
console.log(x); // x为500

通过这种特殊的方法,我们可以取到多维数组想要的值。

结语

以上就是关于JavaScript中数组的大部分用法,若有错误和遗漏,大家可以在评论区补充和提醒。希望大家可以从中学习到知识。