数组
一、什么是数组
- 数组类似于python里面的列表 []
在编程中,数组(Array)是一种数据结构,用于存储相同类型的多个元素。这些元素按照顺序排列,并通过索引(通常是非负整数)来访问。数组可以包含各种数据类型,例如整数、浮点数、字符串,甚至其他数组。
在许多编程语言中,数组的大小是固定的,一旦创建就无法改变。然而,JavaScript中的数组,长度是动态可变的,如果学过其他编程语言的朋友可能对这一点不是很习惯。
数组的基本特点包括:
- 索引: 每个元素都有一个唯一的索引,用于访问该元素。
- 连续存储: 数组中的元素在内存中是连续存储的,这有助于快速访问元素。
- 相同类型: 数组通常只能存储相同类型的元素,尽管有些编程语言支持混合类型数组。
- 固定大小或动态大小: 数组可以是固定大小的,也可以是动态大小的。
在许多编程语言中,数组是一个重要的数据结构,用于存储和操作大量数据。可以通过创建数组来存储一组数据,并通过索引来访问和操作这些数据。
二、数组初识
每一门编程语言,都有数组或类似数组的结构,同样的JavaScript(虽然是脚本语言也不例外。
JavaScript中的数组是一种用于存储多个值的数据结构。数组是一种有序集合,每个值在数组中都有一个数字索引,从0开始,不支持负数索引。JavaScript数组可以包含任意类型的值,包括数字、字符串、对象、函数等。
下面是关于JavaScript数组的一些重要信息:
- 创建数组:可以使用数组字面量
[]
或Array
构造函数来创建数组。
// 使用数组字面量创建数组
let numbers = [1, 2, 3, 4, 5];
// 使用Array构造函数创建数组
let colors = new Array('red', 'green', 'blue');
- 访问数组元素:通过索引访问数组元素。数组索引从0开始。
let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // 输出: apple
- 数组长度:可以通过
length
属性获取数组的长度。
console.log(fruits.length); // 输出: 3
- 修改数组元素:可以通过索引修改数组元素。
fruits[1] = 'grape';
console.log(fruits); // 输出: ['apple', 'grape', 'orange']
- 数组方法:JavaScript提供了许多数组方法来操作数组,例如
push()
、pop()
、shift()
、unshift()
、splice()
、slice()
等。
let numbers = [1, 2, 3, 4, 5];
numbers.push(6); // 在数组末尾添加元素
numbers.pop(); // 移除数组末尾的元素
numbers.shift(); // 移除数组开头的元素
numbers.unshift(0); // 在数组开头添加元素
- 迭代数组:可以使用循环或数组方法对数组进行迭代。
fruits.forEach(function(fruit) {
console.log(fruit);
});
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
- 多维数组:JavaScript中的数组可以是多维的,也就是数组的元素本身也可以是数组。
let matrix = [[1, 2], [3, 4], [5, 6]];
console.log(matrix[1][0]); // 输出: 3
JavaScript中的数组是一种灵活且强大的数据结构,可以用于存储和操作各种类型的数据。通过熟练掌握数组的特性和方法,可以更有效地处理和管理数据。
三、认识数组:数组的基本方法
方法名称 | 功能描述 | 返回值类型 | 是否改变原数组 |
---|---|---|---|
forEach/for...of | 遍历数组(forEach处理每个元素,for...of可读取元素并自动解包) | 无 | 不会 |
concat | 合并数组 | 新数组 | 不会 |
join | 将数组转化为字符串 | 字符串 | 不会 |
pop | 删除数组最后一个元素 | 删除的数据(即数组最后一个元素) | 会 |
shift | 删除数组第一个元素 | 删除的数据(即数组第一个元素) | 会 |
unshift | 在数组开头插入元素 | 新数组长度 | 会 |
push | 在数组末尾添加元素 | 新数组长度 | 会 |
reverse | 翻转数组顺序 | 翻转后的数组 | 会 |
sort | 对数组元素排序 | 排序后的数组 | 会 |
slice | 截取数组部分元素 | 新数组 | 不会 |
splice | 插入、删除或替换数组元素 | 被删除或替换的元素 | 会 |
toString | 数组转为字符串 | 字符串 | 不会 |
valueOf | 获取数组原始值 | 原始值 | 不会 |
indexOf | 查找指定元素在数组中的位置 | 元素索引(若不存在则返回 -1) | 不会 |
lastIndexOf | 查找指定元素在数组中最后一次出现的位置 | 元素索引 | 不会 |
map | 应用函数映射数组元素 | 新数组 | 不会 |
filter | 根据条件筛选数组元素 | 新数组 | 不会 |
every | 判断数组所有元素是否都满足条件 | 布尔值 | 不会 |
some | 判断数组是否有元素满足条件 | 布尔值 | 不会 |
reduce | 按规则累积数组元素生成单个返回值 | 单一返回值 | 可以,但通常不会直接改变原数组 |
rightReduce | 类似于reduce,但从数组末尾开始累积 | 单一返回值 | 可以,但通常不会直接改变原数组 |
(1)forEach
和 for...of
- 遍历数组(forEach处理每个元素,for...of可读取元素并自动解包)
let arr = [1, 2, 3, 4, 5];
// forEach 示例
arr.forEach((item, index) => {
console.log(`Element at index ${index}: ${item}`);
});
arr.forEach(function (item,index) {
console.log(`Element at index ${index}: ${item}`);
});
// for...of 示例
for (const item of arr) {
console.log(item);
}
(2)concat
- 合并数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3] - 原数组未变
(3)join
- 将数组转化为字符串(与python正好相反)
let arr = ['apple', 'banana', 'cherry'];
let str = arr.join(', '); // "apple, banana, cherry"
console.log(str);
# python中join方法
lst = ['apple', 'banana', 'cherry', 'orange']
x = '-'.join(lst)
(4)pop
和 shift
-
pop
删除数组最后一个元素 -
shift
删除数组第一个元素
let arr = ['a', 'b', 'c'];
// pop 示例
let poppedItem = arr.pop(); // "c"
console.log(poppedItem); // "c"
console.log(arr); // ["a", "b"] - 原数组已变
// shift 示例
let shiftedItem = arr.shift(); // "a"
console.log(shiftedItem); // "a"
console.log(arr); // ["b"] - 原数组已变
(5)unshift
- 在数组开头插入元素
let arr = ['b', 'c'];
arr.unshift('a'); // 在数组开头插入元素
console.log(arr); // ["a", "b", "c"]
(6)push
- 在数组末尾添加元素
let arr = ['a', 'b'];
arr.push('c', 'd'); // 在数组末尾添加元素
console.log(arr); // ["a", "b", "c", "d"]
(7)reverse
- 翻转数组顺序
let arr = ['a', 'b', 'c'];
arr.reverse(); // 翻转数组顺序
console.log(arr); // ["c", "b", "a"]
(8)sort
- 对数组元素排序
let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b); // 自定义排序规则,升序排列
console.log(arr); // [1, 1, 3, 4, 5, 9]
(9)slice
- 截取数组部分元素
let arr = ['a', 'b', 'c', 'd', 'e'];
let slicedArr = arr.slice(1, 4); // 截取下标从1到3的子数组
console.log(slicedArr); // ["b", "c", "d"]
console.log(arr); // ["a", "b", "c", "d", "e"] - 原数组未变
(10)splice
- 插入、删除或替换数组元素
let arr = ['a', 'b', 'c', 'd', 'e'];
let removedItems = arr.splice(2, 2, 'x', 'y'); // 从下标2开始,删除2个元素,并在此位置插入'x'和'y'
console.log(removedItems); // ["c", "d"]
console.log(arr); // ["a", "b", "x", "y", "e"] - 原数组已变
(11)toString
- 数组转为字符串
let arr = [1, 2, 3];
let str = arr.toString(); // "1,2,3"
console.log(str);
(12)valueOf
- 获取数组原始值
let arr = [1, 2, 3];
let val = arr.valueOf(); // [1, 2, 3]
console.log(val);
(13)indexOf
- 查找指定元素在数组中的位置
let arr = ['a', 'b', 'c', 'd', 'a'];
let index = arr.indexOf('a'); // 0
console.log(index);
(14)lastIndexOf
- 查找指定元素在数组中最后一次出现的位置
let arr = ['a', 'b', 'c', 'a', 'b'];
let lastIndex = arr.lastIndexOf('a'); // 4
console.log(lastIndex);
(15)map
- 应用函数映射数组元素
let arr = [1, 2, 3, 4, 5];
let squaredArr = arr.map(num => num * num); // [1, 4, 9, 16, 25]
console.log(squaredArr);
(16)filter
- 根据条件筛选数组元素
let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(num => num % 2 === 0); // [2, 4]
console.log(evenNumbers);
(17)every
- 判断数组所有元素是否都满足条件
let arr = [true, true, false];
let allTrue = arr.every(val => val); // false
console.log(allTrue);
(18)some
- 判断数组是否有元素满足条件
let arr = [false, false, true];
let containsTrue = arr.some(val => val); // true
console.log(containsTrue);
(19)reduce
- 按规则累积数组元素生成单个返回值
let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((total, num) => total + num, 0); // 15
console.log(sum);
(20)rightReduce
- 类似于reduce,但从数组末尾开始累积
- 此方法不是ES6标准提供的,但可以通过扩展运算符实现类似效果
let arr = [1, 2, 3, 4, 5];
let reversedSum = arr.reduceRight((total, num) => total + num, 0); // 15 (等于sum,因为是从后向前累加)
console.log(reversedSum);
(21)统计数组长度
var arr= [11,22,33,44,55,66];
// undefined
arr
// (6) [11, 22, 33, 44, 55, 66]
// (1)统计数组的个数
arr.length
// 6
四、掌握数组:数组的进阶方法
(1)splice()方法
splice()
方法是 JavaScript 数组对象的一个方法,用于向数组中添加或删除元素。splice()
方法可以实现以下功能:
- 删除元素:可以删除指定位置的元素。
- 添加元素:可以在指定位置添加新元素。
- 替换元素:可以删除指定位置的元素,并在该位置添加新元素。
splice()
方法的语法如下:
array.splice(start, deleteCount, item1, item2, ...)
start
:指定修改的起始位置(索引),从该位置开始进行操作。deleteCount
:要删除的元素个数。如果设置为 0,则不删除元素。item1, item2, ...
:要添加到数组的元素。
splice()
方法会修改原始数组,并返回一个包含被删除元素的数组。如果没有删除任何元素,则返回一个空数组。
以下是一些示例,演示splice()
方法的用法:
删除元素
let fruits = ['apple', 'banana', 'cherry', 'date'];
// 从索引 2 开始删除 1 个元素
fruits.splice(2, 1);
// fruits 现在为 ['apple', 'banana', 'date']
添加元素
let fruits = ['apple', 'banana', 'cherry'];
// 从索引 1 开始删除 0 个元素,并添加 'orange'(先删除后添加)
fruits.splice(1, 0, 'orange');
// fruits 现在为 ['apple', 'orange', 'banana', 'cherry']
替换元素
let fruits = ['apple', 'banana', 'cherry', 'date'];
// 从索引 2 开始删除 1 个元素,并添加 'lemon'
fruits.splice(2, 1, 'lemon');
// fruits 现在为 ['apple', 'banana', 'lemon', 'date']
splice()
方法是一个非常灵活和强大的方法,可以在数组中进行各种添加、删除和替换操作。需要注意的是,splice()
方法会直接修改原始数组。
(2) forEach()方法
forEach()
是JavaScript数组对象的一个方法,用于遍历数组中的每个元素,并对每个元素执行提供的回调函数。下面是forEach()
方法的一般语法:
array.forEach(function(currentValue, index, arr), thisValue)
currentValue
:当前元素的值。index
:当前元素的索引。arr
:当前正在操作的数组。thisValue
(可选):在回调函数中,使用该值作为this
对象。如果省略,将使用全局对象。
在forEach()
方法中,可以传递一个回调函数作为参数,这个回调函数将在数组中的每个元素上被调用。回调函数可以接受三个参数:当前元素的值、当前元素的索引和数组本身。这样,你可以在回调函数中对数组的每个元素进行操作。
以下是一个简单的示例,演示如何使用forEach()
方法:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number, index) {
console.log(`Number at index ${index} is ${number}`);
});
在这个示例中,forEach()
方法遍历了numbers
数组中的每个元素,并输出了每个元素的值和索引。
需要注意的是,forEach()
方法会在遍历数组的过程中修改原始数组。如果需要对数组进行操作而不改变原始数组,可以考虑使用map()
方法。
代码演示
var l = [1,2,3,4,5]
l.forEach(function(value){console.log(value)},l)
VM2464:1 1 # 一个参数就是数组里面每一个元素对象
VM2464:1 2
VM2464:1 3
VM2464:1 4
VM2464:1 5
l.forEach(function(value,index){console.log(value,index)},l)
VM2514:1 1 0 # 两个参数就是元素+元素索引
VM2514:1 2 1
VM2514:1 3 2
VM2514:1 4 3
VM2514:1 5 4
l.forEach(function(value,index,arr){console.log(value,index,arr)},l) # 元素+元素索引+元素的数据来源
VM2965:1 1 0 (5) [1, 2, 3, 4, 5]
VM2965:1 2 1 (5) [1, 2, 3, 4, 5]
VM2965:1 3 2 (5) [1, 2, 3, 4, 5]
VM2965:1 4 3 (5) [1, 2, 3, 4, 5]
VM2965:1 5 4 (5) [1, 2, 3, 4, 5]
l.forEach(function(value,index,arr,xxx){console.log(value,index,arr,xxx)},l) # 最多三个
VM2996:1 1 0 (5) [1, 2, 3, 4, 5] undefined
VM2996:1 2 1 (5) [1, 2, 3, 4, 5] undefined
VM2996:1 3 2 (5) [1, 2, 3, 4, 5] undefined
VM2996:1 4 3 (5) [1, 2, 3, 4, 5] undefined
VM2996:1 5 4 (5) [1, 2, 3, 4, 5] undefined
(3)map()方法
map()
方法是 JavaScript 数组对象的一个方法,用于创建一个新数组,新数组的元素是原始数组经过指定函数处理后的结果。map()
方法不会修改原始数组,而是返回一个新的数组。
map()
方法的语法如下:
const new_array = array.map(function callback(currentValue, index, array) {
// 返回新数组的元素
}, thisArg);
callback
函数:用来生成新数组元素的函数,可以接受三个参数:currentValue
:当前元素的值。index
(可选):当前元素的索引。array
(可选):调用map()
方法的数组。
thisArg
(可选):执行callback
函数时使用的this
值。
map()
方法会遍历原始数组的每个元素,对每个元素应用提供的回调函数,并将返回值组成一个新数组。原始数组保持不变。
以下是一个简单的示例,演示如何使用 map()
方法:
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(num) {
return num * 2;
});
// doubled 现在为 [2, 4, 6, 8, 10]
在上面的示例中,map()
方法遍历 numbers
数组中的每个元素,并将每个元素乘以 2,然后将结果存储在新数组 doubled
中。
map()
方法非常适合用于对数组中的每个元素进行某种转换或处理操作,生成一个新的数组。由于它不会修改原始数组,因此在需要保留原始数据的情况下很有用。