JavaScript之数组整理

数组是最常见的数据类型之一。使用数组，可以处理数据集合。在强类型的语言如C语言中，你可能会认为数组是连续的内存块，存储相同的数据类型，每个内存块大小固定，都有一个关联的索引，可以通过索引轻松访问每个数据项。但是与Javascript中许多情况类似，数组仅仅是对象。虽然会产生许多不好的副作用，主要是性能方面，但是也有好的方面。例如，数组可以访问方法，与其他对象方法一样，这样使用起来更加容易。

1.创建数组

创建数组有两种基本方式

（1）使用内置的Array构造函数。

（2）使用数组字面量[]。

console.log("-------------------------数组--------------------------------");

//使用数组字面量[]创建数组
const ninjasArray =  ["Kuma", "Hattori", "Yagyu"];
//使用内置Array构造函数创建数组
const samuraiArray = new Array('Oda', 'Tomoe');

//length属性告诉数组大小
if (ninjasArray.length === 3) {
  console.log("There are three ninjas");
}

if (samuraiArray.length === 2) {
  console.log("And only two samurai");
}

//通过索引访问数组元素，第一个元素的索引是0，最后一个元素的索引是数组的长度-1
if (ninjasArray[0] === 'Kuma') {
  console.log('Kuma is first ninja');
}

if (samuraiArray[samuraiArray.length-1] === 'Tomoe') {
  console.log("Tomoe is the last samurai");
}

//对于超出数组世界的项的读取，导致未定义
if (ninjasArray[4] == undefined) {
  console.log("We get undefined if we try to access an out of bounds index");
}

//对超出数组边界的索引写入元素将扩充数组
ninjasArray[4] = 'Ishi';
if (ninjasArray.length === 5) {
  console.log("Arrays are automatically expanded");
}

//手动修改数组的length属性为更小数值，将会删除多余的元素
ninjasArray.length = 2;

if (ninjasArray.length === 2) {
  console.log("There are only two ninjas now");
}

if (ninjasArray[0] === 'Kuma' && ninjasArray[1] === 'Hattori') {
  console.log("Kuma and Hattori");
}

if (ninjasArray[2] == undefined) {
  console.log("But we have lost Yagyu");
}

数组字面量与数组构造函数

使用数组字面量创建数组优先于数组构造函数。主要原因很简单：[]与new Array()（两个字符和11个字符）此外，由于JavaScript的高度动态性，无法阻止修改内置的Array构造函数，也意味着new Array()创建的并不一定是数组。因此，推荐使用数组字面量。

扫描二维码关注公众号，回复： 4252001 查看本文章

无论使用哪种方式创建数组，每个数组都有length属性，表示数组的长度。

ninjasArray.length

通过使用索引访问数组元素，第一个元素的索引是0，最后一个的元素的索引是数组长度-1，。但是，如果尝试访问数组长度范围之外的索引，例如nijas[4],而nijas数组的长度是3，它不会像其他语言那样抛出异常，而是返回undefined。

//对于超出数组世界的项的读取，导致未定义

if (ninjasArray[4] == undefined) {

console.log("We get undefined if we try to access an out of bounds index");

}

结果表明，Javascript的数组是对象。加入访问不存在的对象，会返回undefined。访问不存在的数组索引，也会返回undefined。

在数组的边界之外写入元素：

ninjasArray[4] = 'Ishi';

上面的例子中，数组将会扩大以适应新的形势，在上面的列子中（实际上我们在数组中创建一个空元素），索引为3的元素为undefined。同时改变了length属性，虽然有一个元素是undefined，但是现在的长度为5.与其他大多数语言不同，JavaScript在length属性上，也表现出特殊的功能：可以手动修改length属性的值。将length值改为比原有值大的数，数组会被扩展，新扩展出的元素均为undefined；将length值改为比原有值小的数，数组会被裁剪。

在数组界限之外的位置写入元素，扩展数组

在数组两端添加、删除元素

1.push:在数组的末尾添加元素。

2.unshift:在数组开头添加元素。

3.pop:从数组末尾删除元素。

4.shift:从数组开头删除元素。

console.log("--------------------------------------数组操作-------------------------------------");
//创建空数组
const nijaOperate = [];
if (nijaOperate.length === 0) {
  console.log("An array starts empty");
}

//在数组末尾添加一个元素
nijaOperate.push('Kuma');
if (nijaOperate[0] === 'Kuma') {
  console.log("Kuma is the first item in the array");
}
if (nijaOperate.length === 1) {
  console.log("We have one item in the array");
}

//在数组末尾添加第二个元素
nijaOperate.push('Hattori');
if (nijaOperate[0] === 'Kuma') {
  console.log("Kuma is still first");
}
if (nijaOperate[1] === 'Hattori') {
  console.log("Hattori is added to the end of the array");
}

if (nijaOperate.length === 2) {
  console.log("We have two items in the array");
}

//使用内置的unshift方法在数组开头添加元素，其他元素会自动往后移。
nijaOperate.unshift("Yagyu");
if (nijaOperate[0] === 'Yagyu') {
  console.log("Now Yagyu is the first item");
}
if (nijaOperate[1] === 'Kuma') {
  console.log("Kuma moved to the second place!");
}
if (nijaOperate[2] === 'Hattori') {
  console.log("And Hattori to the third place");
}
if (nijaOperate.length === 3) {
  console.log("We have three items in the array!");
}

//从数组末尾移除元素
const lastNija = nijaOperate.pop();
if (lastNija === 'Hattori') {
  console.log("We have removed Hattori from the end of array");
}
if (nijaOperate[0] === 'Yagyu') {
  console.log("Now Yagyu is still the first item");
}
if (nijaOperate[1] === 'Kuma') {
  console.log("Kuma is still in second place");
}
if (nijaOperate.length === 2) {
  console.log("Now there are two items in the array");
}

//从数组开头移除元素，其他元素将自动向左移动
const firstNija = nijaOperate.shift();
if (firstNija === 'Yagyu') {
  console.log("We have removed Yagyu from the beginning of the array");
}
if (nijaOperate[0] === 'Kuma') {
  console.log("Kuma has shifted to the first place");
}
if (nijaOperate.length === 1) {
  console.log("There is only one nija in the array!");
}

1.在这个示例中，首先创建一个空数组：

const nijaOperate = [];

2.在每个数组中，可以使用内置的push方法在数组末尾添加元素，同时改变数组的长度。

nijaOperate.push('Kuma');

3.使用内置的unshift方法在数组的起始位置添加元素：(注意原有元素的调整方式。)

nijaOperate.unshift("Yagyu");

4.可以分别从数组起始位置和结束位置删除元素。调用pop方法从数组末尾删除元素，减少数组长度：

//从数组末尾移除元素

const lastNija = nijaOperate.pop();

使用shift方法从数组起始位置删除元素

//从数组开头移除元素，其他元素将自动向左移动

const firstNija = nijaOperate.shift();

下图：显示了push、pop、shift和unshift对数组修改

性能考虑：pop和push与shift和unshift

pop和push方法只影响数组最后一个元素:pop移除最后一个元素，push在数组末尾增加元素。shift和unshift方法修改第一个元素，之后的每一个元素的索引都需要调整。因此,pop和push方法比shift和unshift方法要快得多，非特殊情况不建议使用shift和unshift方法。

在数组任意位置添加、删除元素

上一个例子在数组的起始或者结束位置删除元素，约束性太强。通常，我们需要从数组任意位置删除元素。

console.log("----------------在任意位置删除数组元素-------------------");
const ninjasArray = ['Yagyu', 'Kuma', 'Hattori', 'Fuma'];

//使用delete操作符删除元素
delete ninjasArray[1];

//虽然删除了元素的值，但是数组的长度仍然是4，其实是在数组中创建了一个空元素。
//这种删除数组元素的方法是无效的，只是在数组中创建一个空元素。数组仍然有4个元素，其中我们想要删除的元素是undefined。
if (ninjasArray.length === 4) {
  console.log("Length still reports that there are 4 items!");
}

if (ninjasArray[0] === 'Yagyu') {
  console.log("First item is Yagyu");
}

if (ninjasArray[1] === undefined) {
  console.log("We have simply created a hole");
}

if (ninjasArray[2] === 'Hattori') {
  console.log("Hattori is still the third item");
}

if (ninjasArray[3] === 'Fuma') {
  console.log("And Fuma is the last item");
}

这种删除数组元素的方法是无效的，只是在数组中创建一个空元素。数组仍然有4个元素，其中我们想要删除的元素是undefined。

console.log("------------------------在数组任意位置删除、添加元素-----------------------");

//创建一个含有4个元素的新数组
const ninjasArray = ['Yagyu', 'Kuma', 'Hattori', 'Fuma'];

//使用内置的splice方法从索引1开始，删除1个元素
var removeItems = ninjasArray.slice(1,1);

//splice 方法将返回被删除的元素数组。在本例中，返回是我们删除的一个元素。
if (removeItems.length === 1) {
  console.log("One item was removed");
}

if (removeItems[0] === 'Kuma') {
  console.log('The delete_element is Kuma');
}

//数组nijaArray中不再含有元素Kuma，后续元素自动左移
if (ninjasArray.length === 3) {
  console.log("Length now reports that there are 3 items!");
}

if (ninjasArray[0] === 'Yagyu') {
  console.log("First item is Yagyu");
}

if (ninjasArray[1] === 'Hattori') {
  console.log("Hattori now is in the second place");
}

if (ninjasArray[2] === 'Fuma') {
  console.log("And Fuma now is in the third place");
}

//在splice方法中添加参数，可以实现在指定位置插入元素。
removeItems = ninjasArray.splice(1,2,"Mochizuki", 'Yoshi', 'Momochi');

if (removeItems.length === 2) {
  console.log("Now we have removed two items!");
}

if (removeItems[0] === 'Hattori') {
  console.log('Hattori is removed');
}

if (removeItems[1] === 'Fuma') {
  console.log('Fuma is removed');
}

if (ninjasArray.length === 4) {
  console.log("We have inserted some new items!");
}

if (ninjasArray[0] === 'Yagyu') {
  console.log("Yagyu is still here");
}

if (ninjasArray[1] === 'Mochizuki') {
  console.log('Mochizuki also');
}

if (ninjasArray[2] === 'Yoshi') {
  console.log('Yoshi also');
}

if (ninjasArray[3] === 'Momochi') {
  console.log('Momochi also');
}

首先创建一个具有4个元素的数组：

const ninjasArray = ['Yagyu', 'Kuma', 'Hattori', 'Fuma'];

然后调用内置的splice方法：

var removeItems = ninjasArray.slice(1,1);

在本例中。splice具有两个参数：起始的索引和需要移除的元素个数（这个参数如果不传，会一直删除元素直到数组末尾的元素）。在本例中，索引是1的元素被删除，后续的元素自动相应移动。同时，splice方法返回被移除的元素数组。在本例中，返回的数组只有一个元素。

在splice方法中添加参数，可以实现在指定位置插入元素。

removeItems = ninjasArray.splice(1,2,"Mochizuki", 'Yoshi', 'Momochi');

从索引1开始，首先移除2个元素，然后添加3个元素；

参考书籍《Javascript忍者秘籍》

JavaScript之数组整理

猜你喜欢