JavaScript青少年简明教程：数组

JavaScript青少年简明教程：数组

JavaScript 的数组是用于存储多个值的有序集合。数组是最常用的数据结构之一，提供了多种方法来操作和管理集合中的元素。

JavaScript数组的特性：

1. 动态大小：与许多其他编程语言不同，JavaScript的数组不需要在声明时指定大小；数组的大小会根据需要动态调整。

2. 异质元素：JavaScript的数组可以包含不同类型的元素在同一个数组中。即一个数组中可以同时包含数字、字符串等。如：let mixedArray = [1, 'two', true, null, undefined, { name: 'object' }];

3. 基于0的索引：JavaScript数组的索引是从0开始的，即数组中的第一个元素索引是0，第二个元素索引是1，以此类推。

4. 数组方法：数组方法（Array Methods）是JavaScript中用于处理数组（Array）对象的一系列内置函数。这些方法可以对数组进行各种操作，例如添加、删除、查找、修改、排序和迭代等。JavaScript为数组提供了丰富的内建方法，如 .push() 添加元素，.pop() 移除最后一个元素，.shift() 移除第一个元素，.unshift() 在数组前添加元素，以及 .slice(), .splice(), .map(), .filter() 等多种处理和查询数组的方法。

数组是有序的集合，可以储存多个数据。例如：

const colors = ['red', 'green', 'blue'];
console.log(colors[0]); // 输出 'red'

数组长度

可用length 属性返回数组的长度（元素的个数）。例如：

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 3

创建数组

有几种方式可以创建数组：

1). 使用数组字面量

使用方括号 [] 创建数组。

const fruits = ['Apple', 'Banana', 'Cherry'];

字面量（Literal）指的是直接在代码中表示的固定值。它是数据类型的一个具体值，用于表示变量可以赋值的东西，如数字、字符串、布尔值等。字面量直观地展示了它们自身的值，并直接编写在代码中，而不需要进行任何计算或引用才能得到。

最常见和简单的创建数组的方法是使用数组字面量。

2) 使用 Array 构造函数

可以使用 Array 构造函数创建数组。Array 构造函数是一个内置对象，用于创建一个新的数组实例。当你使用 new Array() 来创建数组时，你实际上是在调用这个构造函数。

const fruits = new Array('Apple', 'Banana', 'Cherry');

访问数组元素

数组元素通过索引访问，索引从 0 开始。例如：

const fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana

修改数组元素

可以通过索引修改数组中的元素。例如

fruits[1] = 'Blueberry';
console.log(fruits); // ['Apple', 'Blueberry', 'Cherry']

数组遍历

有多种方式可以遍历数组，例如：

const fruits = ['Apple', 'Banana', 'Cherry'];
// for循环
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// for...of循环
for (let fruit of fruits) {
  console.log(fruit);
}

// forEach方法
fruits.forEach(fruit => console.log(fruit));

JavaScript数组提供了多种方法来操作和管理集合中的元素。

添加、删除元素方法：

push()
push 方法在数组末尾添加一个或多个元素，并返回新的长度。
fruits.push('Durian');
console.log(fruits); // ['Apple', 'Blueberry', 'Cherry', 'Durian']

pop()
pop 方法从数组末尾移除最后一个元素，并返回该元素。
const lastFruit = fruits.pop();
console.log(lastFruit); // Durian
console.log(fruits); // ['Apple', 'Blueberry', 'Cherry']

unshift()
unshift 方法在数组开头添加一个或多个元素，并返回新的长度。
fruits.unshift('Orange');
console.log(fruits); // ['Orange', 'Apple', 'Blueberry', 'Cherry']

shift()
shift 方法从数组开头移除第一个元素，并返回该元素。
const firstFruit = fruits.shift();
console.log(firstFruit); // Orange
console.log(fruits); // ['Apple', 'Blueberry', 'Cherry']

查找数组元素方法：
find()
find 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
const cherry = fruits.find(fruit => fruit === 'Cherry');
console.log(cherry); // Cherry

findIndex()
findIndex 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。
const cherryIndex = fruits.findIndex(fruit => fruit === 'Cherry');
console.log(cherryIndex); // 2

includes()
includes 方法确定数组是否包含某个元素，返回一个布尔值。
const hasBanana = fruits.includes('Banana');
console.log(hasBanana); // false

切片和连接方法：
concat()
concat 方法合并两个或多个数组，不改变现有数组，返回一个新数组。
const moreFruits = ['Durian', 'Elderberry'];
const combinedFruits = fruits.concat(moreFruits);
console.log(combinedFruits); // ['Apple', 'Blueberry', 'Cherry', 'Durian

slice()
slice 方法返回一个新的数组对象，这一对象是一个从开始到结束（不包括结束）选择的原数组的浅拷贝。原始数组不会被修改。
const someFruits = fruits.slice(1, 3);
console.log(someFruits); // ['Blueberry', 'Cherry']

splice()
splice 方法通过删除或替换现有元素或者添加新元素来修改数组的内容。它返回由删除的元素组成的数组。
// 删除元素
const removedFruits = fruits.splice(1, 2);
console.log(removedFruits); // ['Blueberry', 'Cherry']
console.log(fruits); // ['Apple']

// 添加元素
fruits.splice(1, 0, 'Banana', 'Cherry');
console.log(fruits); // ['Apple', 'Banana', 'Cherry']

join()
join 方法将数组的所有元素连接成一个字符串，元素是通过指定的分隔符进行分隔的。
const fruitString = fruits.join(', ');
console.log(fruitString); // 'Apple, Banana, Cherry'

其它常用方法：
reverse()
reverse 方法将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组。
fruits.reverse();
console.log(fruits); // ['Cherry', 'Banana', 'Apple']

sort()
sort 方法对数组的元素进行排序，并返回排序后的数组。默认排序顺序是根据字符串 Unicode 码点。
fruits.sort();
console.log(fruits); // ['Apple', 'Banana', 'Cherry']

例、统计数组中正数、负数和零的个数

以下是一个完整的例子，演示如何在JavaScript中统计数组中正数、负数和零的个数：

let numbers = [1, -10, 20, 0, 5, -6, 7, 0, -2, 0];

let positiveCount = 0;
let negativeCount = 0;
let zeroCount = 0;

numbers.forEach(function(number) {
    if (number > 0) {
        positiveCount++;
    } else if (number < 0) {
        negativeCount++;
    } else {
        zeroCount++;
    }
});

console.log('Positive numbers:', positiveCount);
console.log('Negative numbers:', negativeCount);
console.log('Zeroes:', zeroCount);

稀疏数组

JavaScript支持稀疏数组，即数组中可以有“空隙”。

let arr = [1, , , 4];

空位表示该位置上没有任何值，它在数组的长度和索引计算中会被跳过。例如：

let arr = [1, , , 4];

for (let i = 0; i < arr.length; i++) {
  if (i in arr) {
    console.log("索引 " + i + " 的值为: " + arr[i]);
  } 
}

输出：

索引 0 的值为: 1
索引 3 的值为: 4

多维数组

JavaScript 允许数组包含其他数组。JavaScript 中的多维数组实际上是“数组的数组”。JavaScript 不直接支持真正的多维数组，但可以通过嵌套数组（即数组中的元素是数组）来创建多维数组的结构。例如：

//创建一个 2x3 的二维数组
let twoDArray = [
    [1, 2, 3],
    [4, 5, 6]
];

// 访问元素
console.log(twoDArray[0][1]); // 输出: 2

又如：

//创建一个 3x3x3 的三维数组
let threeDArray = [
    [[1, 2, 3], [4, 5, 6], [7, 8, 9]],
    [[10, 11, 12], [13, 14, 15], [16, 17, 18]],
    [[19, 20, 21], [22, 23, 24], [25, 26, 27]]
];

// 访问元素
console.log(threeDArray[1][1][1]); // 输出: 14

数组解构

数组解构是 ES6（ECMAScript 2015）引入的一个强大特性，它提供了一种简洁的语法来从数组中提取值并赋给变量。

数组解构是一个非常有用的特性，它可以使代码更加简洁和易读。它特别适用于处理函数返回多个值的情况，以及在特定场景下快速提取数组中的值。

基本样式：

const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

这个例子展示了最基本的数组解构。它将数组的值按顺序赋给变量 a, b, 和 c。

可以跳过你不需要的值，如：

const [a, , c] = [1, 2, 3];
console.log(a); // 1
console.log(c); // 3

使用 ... 语法可以将剩余的值收集到一个新数组中，如：

const [a, ...rest] = [1, 2, 3, 4, 5];
console.log(a);    // 1
console.log(rest); // [2, 3, 4, 5]

可以为变量设置默认值，以防数组中没有对应的值，如：

const [a, b, c = 3] = [1, 2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

数组解构提供了一种简洁的方式来交换变量，如：

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

函数参数中的解构

解构也可以用在函数参数中：

function printCoords([x, y]) {
    console.log(`X: ${x}, Y: ${y}`);
}
printCoords([10, 20]); // X: 10, Y: 20

解构与 for...of 循环

解构可以很好地与 for...of 循环配合使用：

const pairs = [[1, 2], [3, 4], [5, 6]];
for (const [a, b] of pairs) {
    console.log(`${a} + ${b} = ${a + b}`);
}

输出:

1 + 2 = 3
3 + 4 = 7
5 + 6 = 11