1.内置的数组方法
JavaScript数组是一种常见的数据类型,它由多个元素组成。以下是一些常用的JavaScript数组方法:
方法名 | 描述 |
push() | 在数组的末尾添加 一个或多个元素,并返回新的长度。 |
pop() | 从数组的末尾删除 一个元素,并返回被删除的元素。 |
shift() | 从数组的开头删除 一个元素,并返回被删除的元素。 |
unshift() | 在数组的开头添加 一个或多个元素,并返回新的长度。 |
splice() | 可以向数组中添加 或删除 元素,并返回被删除的元素。 |
slice() | 返回一个新的数组,包含从原始数组中选择的元素。 |
join() | 将数组中的所有元素转换为一个字符串 。 |
indexOf() | 返回指定元素 在数组中第一次出现的索引 ,如果没有 找到则`返回-1 。 |
includes() | 判断一个数组是否包含一个指定的值,如果`包含则返回true ,否则返回false 。 |
forEach() | 对数组中的每个元素执行给定的函数 。 |
这些方法可以方便地操作和处理JavaScript数组,可以根据实际需求选择使用。
下面是一些使用上述常用方法的 JavaScript 数组示例代码:
1.1 push() 方法:
const arr = ['apple', 'banana']; const newLength = arr.push('orange'); console.log(arr); // 输出: ["apple", "banana", "orange"] console.log(newLength); // 输出: 3
1.2 pop() 方法:
const arr = ['apple', 'banana', 'orange']; const lastElement = arr.pop(); console.log(arr); // 输出: ["apple", "banana"] console.log(lastElement); // 输出: "orange"
1.3 shift() 方法:
const arr = ['apple', 'banana', 'orange']; const firstElement = arr.shift(); console.log(arr); // 输出: ["banana", "orange"] console.log(firstElement); // 输出: "apple"
1.4 unshift() 方法:
const arr = ['apple', 'banana']; const newLength = arr.unshift('orange', 'pear'); console.log(arr); // 输出: ["orange", "pear", "apple", "banana"] console.log(newLength); // 输出: 4
1.5 splice() 方法:
const arr = ['apple', 'banana', 'orange']; arr.splice(1, 1, 'kiwi', 'melon'); console.log(arr); // 输出: ["apple", "kiwi", "melon", "orange"]
1.6 slice() 方法:
const arr = ['apple', 'banana', 'orange', 'kiwi', 'melon']; const slicedArray = arr.slice(1, 4); console.log(slicedArray); // 输出: ["banana", "orange", "kiwi"]
1.7 join() 方法:
const arr = ['apple', 'banana', 'orange']; const joinedString = arr.join(', '); console.log(joinedString); // 输出: "apple, banana, orange"
1.8 indexOf() 方法:
const arr = ['apple', 'banana', 'orange']; const index = arr.indexOf('banana'); console.log(index); // 输出: 1
1.9 includes() 方法
const arr = ['apple', 'banana', 'orange']; const includesApple = arr.includes('apple'); console.log(includesApple); // 输出: true
1.10 forEach() 方法:
const arr = ['apple', 'banana', 'orange']; arr.forEach(function(element) { console.log(element); }); // 输出: // "apple" // "banana" // "orange"
更多方法可以去MDN
翻阅文档 MDN:Array - JavaScript | MDN (mozilla.org)
2. 改变数组元素顺序
JavaScript 中有以下几个常用的改变数组元素顺序的方法:
- reverse(): 反转数组元素的顺序。
- sort(): 按照升序或降序重新排列数组元素。
- splice(): 在数组中删除和/或添加元素,可以进行移动元素的操作。 下面分别简要介绍这些方法以及它们的使用:
2.1 reverse() 方法:
reverse() 方法将反转数组中所有元素的顺序。例如,当你调用 arr.reverse()
时,原来的数组 [1, 2, 3]
就被修改为 [3, 2, 1]
。
const arr = [1, 2, 3]; arr.reverse(); console.log(arr); // 输出: [3, 2, 1]
2.2 sort() 方法:
sort() 方法将根据 Unicode 值按升序或降序对数组元素进行排序。默认情况下,sort() 会将数组视为字符串数组,并按字母顺序进行排序。如果想按照数字大小进行排序,则可以提供一个比较函数作为 sort() 的参数。
下面是一个简单的例子:
const arr = [4, 2, 3, 1]; arr.sort((a, b) => a - b); console.log(arr); // 输出: [1, 2, 3, 4]
上面的代码将按照数值大小将数组元素排序。注意,sort() 函数通过修改原始数组来进行排序。
2.3 splice() 方法:
- splice() 方法:
splice() 方法可以在数组中删除和/或插入元素。第一个参数是要删除或插入的元素的起始索引,第二个参数是要删除的元素数量。随后的任意数量的参数都会按照它们在 splice() 函数中出现的顺序插入到数组中。
下面是一个简单的例子:
const arr = [1, 2, 3, 4]; arr.splice(1, 2); // 删除从索引为 1 开始的 2 个元素 console.log(arr); // 输出: [1, 4] arr.splice(1, 0, 2, 3); // 插入 2 和 3 到索引为 1 的位置 console.log(arr); // 输出: [1, 2, 3, 4]
splice() 可以进行复杂的移动
、删除
和插入
操作,可以根据需要进行调整。
3. 获取数组元素索引的方法
在 TypeScript 中,常用的获取数组元素索引的方法有以下三种:
3.1 indexOf() 方法
- indexOf() 方法:此方法会返回
指定元素
在数组
中首次出现
的位置
。
ts
const arr: number[] = [1, 2, 3, 4, 5]; console.log(arr.indexOf(3)); // 输出: 2 console.log(arr.indexOf(6)); // 输出: -1
3.2 findIndex() 方法
- findIndex() 方法:此方法返回
第一个满足条件
的元素
的索引
。如果没有找到,则返回-1
。
ts
const arr: number[] = [1, 2, 3, 4, 5]; console.log(arr.findIndex((element) => element % 2 === 0)); // 输出: 1 console.log(arr.findIndex((element) => element > 5)); // 输出: -1
3.3 forEach() 方法
- forEach() 方法:使用 forEach() 方法可以
遍历数组
,同时访问每个元素
的值和索引
。
ts
const arr: number[] = [1, 2, 3, 4, 5]; arr.forEach((element, index) => { console.log(`Index ${index} has value ${element}`); }); // 输出: // Index 0 has value 1 // Index 1 has value 2 // Index 2 has value 3 // Index 3 has value 4 // Index 4 has value 5
4. 数组转换为字符串
4.1 join 方法
在 TypeScript 中,可以使用数组的 join()
方法将数组转换为字符串。下面是一个简单的示例代码:
ts
const arr: string[] = ['apple', 'banana', 'orange']; const str: string = arr.join(', '); console.log(str); // 输出: "apple, banana, orange"
在上面的代码中,我们首先定义了一个由字符串组成的数组 arr
,然后使用 join()
方法将数组转换为以逗号和空格作为分隔符的字符串,并将其赋值给变量 str
。最后,我们使用 console.log()
将转换后的字符串输出到控制台。
需要注意的是,join()
方法不会修改原始数组,它返回的是一个新字符串,因此我们需要将其赋值给一个新变量或重用现有变量。
5. 数组的其他方法
5.1 fill() 方法
fill()
方法可以根据指定的值,填充一个数组中从起始索引
到终止索引内
的所有元素
,用法如下:
const arr = [1, 2, 3, 4, 5]; arr.fill(0, 2, 4); // [1, 2, 0, 0, 5]
上述例子中,我们将覆盖数组 arr
的 2-4 位置的元素,用数字 0 进行填充。
5.2 slice() 方法
slice()
方法可以返回一个新的数组,其中包含原始数组中选择的元素,原始数组不会改变,用法如下:
const arr1 = [1, 2, 3, 4, 5]; const arr2 = arr1.slice(1, 4); // [2, 3, 4]
上述例子中,我们选取 arr1
数组的第 1 个位置到第 4 个位置之间的元素,用于构造新的数组 arr2
。
5.3 concat() 方法
concat()
方法可以将两个或多个数组合并为一个新的数组,用法如下:
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
上述例子中,我们将 arr1
和 arr2
数组合并成一个新的数组,并将其赋值给 arr3
。