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