JavaScript

JavaScript 知识量:26 - 101 - 483

5.1 Array><

创建数组- 5.1.1 -

JavaScript中的数组(Array)是一种用于存储多个值的数据结构。这些值可以是任何数据类型,包括数字、字符串、对象、布尔值、null、undefined甚至是其他数组。数组可以具有零个或多个元素,并且这些元素可以通过索引来访问。

在JavaScript中,数组可以通过以下方式创建:

let arr = [1, 2, 3, 4, 5]; // 使用数组字面量创建数组  
let arr2 = new Array(1, 2, 3, 4, 5); // 使用Array构造函数创建数组

数组有很多内置的方法,可以帮助操作数组。例如:

  • push 方法可以在数组的末尾添加一个或多个元素。

  • pop 方法可以删除并返回数组的最后一个元素。

  • shift 方法可以删除并返回数组的第一个元素。

  • unshift 方法可以在数组的开头添加一个或多个元素。

  • slice 方法可以从已有的数组中返回选定的元素。

  • splice 方法可以在任何位置添加和/或删除数组的元素。

此外,还有许多其他的方法,如 map、filter、reduce 等,用于处理数组的数据。

注意:JavaScript中的数组是非类型的(也就是说,数组可以包含任何类型的元素),并且数组的大小是动态的(可以在运行时改变)。

检测数组- 5.1.2 -

可以使用Array.isArray()函数来检测一个对象是否是数组。这个函数会返回一个布尔值,如果传入的对象是数组,那么返回true,否则返回false。

以下是一个示例:

var arr = [1, 2, 3, 4, 5];  
var obj = {name: 'John', age: 30};  
  
console.log(Array.isArray(arr));  // 输出: true  
console.log(Array.isArray(obj));  // 输出: false

在这个示例中,Array.isArray()函数正确地检测出了arr是一个数组,而obj不是一个数组。

数组空位- 5.1.3 -

JavaScript的数组可以包含空位。这些空位可以是显式创建的,也可以是由于删除数组元素而产生的。

例如,可以创建一个包含空位的数组:

let arr = [1, , 3];

在这个例子中,数组arr的第二个位置就是一个空位。

另外,如果使用delete操作符来删除数组的元素,也会在该位置留下一个空位。例如:

let arr = [1, 2, 3];    
delete arr[1];

在这个例子中,数组arr的第二个位置现在是一个空位。

需要注意的是,虽然空位在数组中占据位置,但它们的值为undefined,并且仍会被包括在数组的长度(length属性)中。例如,在上面两个例子中,虽然存在空位,但数组的长度仍然是3。

可以使用Array.isArray()函数来检测一个值是否是数组,即使这个数组包含空位。例如:

let arr = [1, , 3];    
console.log(Array.isArray(arr)); // 输出:true

数组索引- 5.1.4 -

JavaScript数组的索引是基于零的,这意味着数组的第一个元素的索引是0,第二个元素的索引是1,依此类推。例如,如果有一个数组var arr = [10, 20, 30, 40, 50],那么可以通过arr[0]访问第一个元素10,通过arr[1]访问第二个元素20。

同时,JavaScript也支持负索引,这将从数组的末尾开始计数。例如,arr[-1]将返回数组的最后一个元素,arr[-2]将返回倒数第二个元素。

JavaScript数组也支持使用字符串作为索引,但这种情况下数组实际上变成了对象,字符串索引变成了对象的属性。

JavaScript提供了许多方法(例如push,pop,shift,unshift,splice等)可以操作数组的元素,这些方法通常会改变数组的长度和/或元素的索引。

以下是一些使用JavaScript数组索引的示例:

// 创建一个数组  
var arr = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];  
  
// 使用正数索引访问数组元素  
console.log(arr[0]); // 输出: Apple  
console.log(arr[2]); // 输出: Cherry  
  
// 使用负数索引访问数组元素  
console.log(arr[-1]); // 输出: Elderberry  
console.log(arr[-3]); // 输出: Date  
  
// 修改数组元素  
arr[1] = 'Blueberry';  
console.log(arr); // 输出: [ 'Apple', 'Blueberry', 'Cherry', 'Date', 'Elderberry' ]

以上示例展示了如何创建数组,如何使用正数和负数索引访问数组元素,以及如何修改数组元素的值。

迭代器方法- 5.1.5 -

JavaScript数组有很多迭代器方法,这些方法可以遍历数组的元素。以下是一些常见的迭代器方法:

1. keys() 方法返回一个包含数组中每个索引键的新数组迭代器对象。

var arr = ['a', 'b', 'c'];  
var iterator = arr.keys();  
for (let key of iterator) {  
  console.log(key); // 输出: 0, 1, 2  
}

2. values() 方法返回一个包含数组中每个元素值的新数组迭代器对象。

var arr = ['a', 'b', 'c'];  
var iterator = arr.values();  
for (let value of iterator) {  
  console.log(value); // 输出: 'a', 'b', 'c'  
}

3. entries() 方法返回一个包含数组中每个元素键值对的新数组迭代器对象。

var arr = ['a', 'b', 'c'];  
var iterator = arr.entries();  
for (let [key, value] of iterator) {  
  console.log(key, value); // 输出: 0 'a', 1 'b', 2 'c'  
}

4. forEach(): 该方法对数组的每个元素执行一次提供的函数。

var arr = [1, 2, 3, 4, 5];  
arr.forEach(function(element, index, array) {  
  console.log(element); // 依次输出 1, 2, 3, 4, 5  
});

5. map(): 该方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

var arr = [1, 2, 3, 4, 5];  
var newArr = arr.map(function(element) {  
  return element * 2;  
});  
console.log(newArr); // 输出: [2, 4, 6, 8, 10]

6. filter(): 该方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

var arr = [1, 2, 3, 4, 5];  
var newArr = arr.filter(function(element) {  
  return element > 2;  
});  
console.log(newArr); // 输出: [3, 4, 5]

以上只是部分迭代器方法,JavaScript数组还有很多其他的方法,如reduce(),some(),every()等,可以根据实际需求选择使用。

搜索方法- 5.1.6 -

JavaScript数组提供了一些搜索和位置方法,可以用来查找数组中的元素或子数组,并确定它们的位置。以下是一些常用的搜索和位置方法:

1. indexOf(): 该方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回-1。

var arr = [1, 2, 3, 4, 5];  
var index = arr.indexOf(3);  
console.log(index); // 输出: 2

2. lastIndexOf(): 该方法返回在数组中可以找到给定元素的最后一个索引,如果不存在,则返回-1。

var arr = [1, 2, 3, 4, 5, 3];  
var index = arr.lastIndexOf(3);  
console.log(index); // 输出: 5

3. includes(): 该方法用来判断一个数组是否包含一个指定的值,根据情况,如果需要返回 true 或 false。

var arr = [1, 2, 3, 4, 5];  
var result = arr.includes(3);  
console.log(result); // 输出: true

这些方法可以用来搜索数组中的元素或子数组,并确定它们的位置。

复制和填充- 5.1.7 -

JavaScript数组提供了一些用于复制和填充数组的方法。以下是一些常用的方法:

1. slice(): 该方法返回一个新的数组对象,包含从开始到结束(不包括结束)选择的数组的一小部分浅拷贝。

var arr = [1, 2, 3, 4, 5];  
var newArr = arr.slice(0, 3);  
console.log(newArr); // 输出: [1, 2, 3]

2. fill(): 该方法用一个固定值填充一个数组中从指定位置到尾端的所有元素。

var arr = [1, 2, 3, 4, 5];  
arr.fill(0, 2);  
console.log(arr); // 输出: [1, 2, 0, 0, 0]

以上这些方法都不会修改原数组,而是返回一个新的数组。

3. copyWithin():该方法用于在数组中复制元素。这个方法会改变数组,但是不会改变原始数组的长度。

copyWithin()方法接受三个参数:target,start,和end。target是要复制元素到的开始位置,start和end则是开始复制元素的范围(包括start,但不包括end)。示例如下:

var arr = [1, 2, 3, 4, 5];  
arr.copyWithin(0, 3, 5); // 从索引3开始,到索引5(不包括)结束,复制到索引0开始的位置  
console.log(arr); // 输出: [4, 5, 3, 4, 5]

在这个例子中,数组中的元素4和5被复制到了数组的开始位置,替换了原来的1和2。

合并方法- 5.1.8 -

可以使用concat()合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

var arr1 = [1, 2, 3];  
var arr2 = [4, 5, 6];  
var newArr = arr1.concat(arr2);  
console.log(newArr); // 输出: [1, 2, 3, 4, 5, 6]

转换方法- 5.1.9 -

可以使用一些内置的方法将数组转换为字符串,或将字符串转换为数组。

1. 将数组转换为字符串:

join() 方法:该方法通过使用指定的分隔符把数组的所有元素连接成一个字符串。这个方法返回一个字符串。

var arr = ['a', 'b', 'c'];  
var str = arr.join(', ');  
console.log(str); // 输出: 'a, b, c'

2. 将字符串转换为数组:

split() 方法:该方法使用指定的分隔符将字符串分割成数组。这个方法返回一个数组。

var str = 'a, b, c';  
var arr = str.split(', ');  
console.log(arr); // 输出: ['a', 'b', 'c']

栈方法- 5.1.10 -

JavaScript数组提供了一些栈(stack)方法,这些方法模拟了栈数据结构的行为。栈是一种后进先出(LIFO)的数据结构。以下是一些常用的栈方法:

1. push(): 该方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。

var arr = [1, 2, 3];  
arr.push(4, 5);  
console.log(arr); // 输出: [1, 2, 3, 4, 5]

2. pop(): 该方法删除并返回数组的最后一个元素。

var arr = [1, 2, 3, 4, 5];  
var lastElement = arr.pop();  
console.log(lastElement); // 输出: 5  
console.log(arr); // 输出: [1, 2, 3, 4]

使用这些方法,可以将JavaScript数组当作栈来使用。注意:这些方法都会改变原数组。

队列方法- 5.1.11 -

JavaScript数组提供了一些队列(queue)方法,这些方法模拟了队列数据结构的行为。队列是一种先进先出(FIFO)的数据结构。以下是一些常用的队列方法:

1. push(): 该方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。在队列中,这可以用来入队元素。

var arr = [1, 2, 3];  
arr.push(4, 5);  
console.log(arr); // 输出: [1, 2, 3, 4, 5]

2. shift(): 该方法删除并返回数组的第一个元素。在队列中,这可以用来出队元素。

var arr = [1, 2, 3, 4, 5];  
var firstElement = arr.shift();  
console.log(firstElement); // 输出: 1  
console.log(arr); // 输出: [2, 3, 4, 5]

使用这些方法,可以将JavaScript数组当作队列来使用。注意:这些方法都会改变原数组。

排序方法- 5.1.12 -

以下是一些常用的排序方法:

1. sort(): 该方法在适当的位置对数组的元素进行排序,并返回数组。排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

var arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];  
arr.sort();  
console.log(arr); // 输出: [1, 1, 2, 3, 3, 4, 5, 5, 6, 9]

也可以提供一个比较函数来自定义排序规则:

var arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];  
arr.sort(function(a, b) {  
  return a - b; // 升序排序  
});  
console.log(arr); // 输出: [1, 1, 2, 3, 3, 4, 5, 5, 6, 9]

2. reverse(): 该方法颠倒数组中元素的顺序。

var arr = [1, 2, 3, 4, 5];  
arr.reverse();  
console.log(arr); // 输出: [5, 4, 3, 2, 1]

注意:sort()和reverse()方法都会改变原数组。如果不希望改变原数组,可以先使用slice()方法创建一个数组的副本,然后再对副本进行操作。