博客

切换主题

数组 ​

JavaScript中的数组可以包含多个不同类型的值，譬如：

js
var a=[1, "hello world!", 3.14, {name:'zhouc'}];

下面来介绍一些常用的数组方法

注意，下面的方法中带*的表示会改变数组本身，而不带*的表示有一个返回值，需要输出或者赋值

如果需要将修改的数组赋值给另外一个变量或者仅作为参数传递，可以这样使用：

js
// 以reverse方法为例，reverse方法会修改数组本身
const array1 = [1, 4, "hello", 16];
var array2 = array1.slice().reverse();
console.log(array1);
// 原始的array1没有改变
console.log(array2);
// 输出结果：
// [ 1, 4, 'hello', 16 ]
// [ 16, 'hello', 4, 1 ]

filter ​

Filter这个方法可以快速地筛选出所需要的变量：

js
var a=["hello world!", "hello js", "testString"];
a=a.filter(function(item){
    return item.includes("hello")
});
// 等同于 a = a.filter(item => item.includes("hello"));
console.log(a);
// 输出结果：[ 'hello world!', 'hello js' ]

find ​

find这个方法可以找到数组中的某个值：

js
var a=[1,2,3,4,5,6];
console.log(a.find(item => item>5))
// 输出结果为6

注意：

  1. 如果有多个匹配项，只会返回第一个：

    js
    var a=[1,2,3,4,5,6];
console.log(a.find(item => item>2))
// 输出结果为3

  2. 如果没有找到，则会返回undefind

    js
    var a=[1,2,3,4,5,6];
console.log(a.find(item => item>10))
// 输出结果为undefind

findIndex ​

find这个方法可以找到数组中的某个值的下标：

js
var a=[1,2,3,4,5,6];
console.log(a.findIndex(item => item>5))
// 输出结果为5

注意：

  1. 如果有多个匹配项，只会返回第一个：
  2. 如果没有找到，则会返回-1

inludes ​

inlcudes这个方法可以判断某个数组是否包含某个对象，包含返回true，不包含返回false

js
var a=[1,2,3,4,5,6];
console.log(a.includes(3))
// 输出为true

索引的开始位置

js
const arr = ["a", "b", "c"];

arr.includes("a", -100); // true
arr.includes("a", -2); // false

注意：多个参数不能使用数组：

js
var a=[1,2,3,4,5,6];
console.log([1,2])
// 输出为false

如果要判断是否包含多个值直接使用,隔开：

js
var a=[1,2,3,4,5,6];
console.log(1,2)
// 输出为true

indexOf ​

indexOf可以输出某个数组中的值的索引

js
var a=[1, "hello world!", 3.14, {name:'zhouc'}];
console.log(a.indexOf('hello world!'));
// 输出为1

注意：如果不存在这个值，则返回-1

concat ​

concat可以拼接多个数组

js
var a=[1, "hello world!", 3.14, {name:'zhouc'}];
var b=[1, 2, 3, 4]
console.log(a.concat(b));
// 输出结果：[ 1, 'hello world!', 3.14, { name: 'zhouc' }, 1, 2, 3, 4 ]

当然也可以拼接非数组，例如这样的：

js
var a=[1, "hello world!", 3.14, {name:'zhouc'}];
var b="hello js"
console.log(a.concat(b));
// 输出结果：[ 1, 'hello world!', 3.14, { name: 'zhouc' }, 'hello js' ]

slice ​

slice方法用于对数组进行切分

js
array.slice(startIndex, endIndex)
// startIndex: 开始的索引
// endIndex: 结束的索引
js
var a=[1, "hello world!", 3.14, {name:'zhouc'}, 1, 2, 3, 4, 5, 6];
console.log(a.slice(2, 5));
// 输出结果：[ 3.14, { name: 'zhouc' }, 1 ]

可以使用逆向索引：

js
var a=[1, "hello world!", 3.14, {name:'zhouc'}, 1, 2, 3, 4, 5, 6];
console.log(a.slice(-3, -1));
// 输出结果：[ 4, 5 ]

注意： 包括开始索引，不包括结束索引

map ​

map方法用于对所有的数组值进行处理

js
const array1 = [1, 4, 9, 16];
console.log(array1.map((x) => x * 2));
// 输出结果：[2, 8, 18, 32]

注意，使用map方法需要确保每个值的类型相同，防止出现错误：

js
const array1 = [1, 4, "hello", 16];
console.log(array1.map((x) => x * 2));
// 输出结果：[2, 8, NaN, 32]
// 出现无法处理的问题

注意，下面的方法会修改数组本身

push* ​

push方法会在数组末尾添加一个（或多个）元素

js
const array1 = [1, 4, "hello", 16];
array1.push("world!");
console.log(array1);
// 输出结果：[ 1, 4, 'hello', 16, 'world!' ]

push方法也有返回值，返回数组在push操作之后的长度：

js
const array1 = [1, 4, "hello", 16];
console.log(array1.push("world!"));
// 输出结果：5

pop* ​

pop方法会删除数组中最后一个元素

js
const array1 = [1, 4, "hello", 16];
array1.pop();
console.log(array1);
// 输出结果：[ 1, 4, 'hello' ]

其中，pop方法也有返回值，返回删除的元素：

js
const array1 = [1, 4, "hello", 16];
console.log(array1.pop());
// 输出结果：16

shift* ​

shift方法会删除数组中第一个元素

js
const array1 = [1, 4, "hello", 16];
array1.shift();
console.log(array1);
// 输出结果：[ 4, 'hello', 16 ]

其中，shift方法也有返回值，返回删除的元素：

js
const array1 = [1, 4, "hello", 16];
console.log(array1.shift());
// 输出结果：1

unshift* ​

unshift方法会在数组开头添加一个（或多个）元素

js
const array1 = [1, 4, "hello", 16];
array1.unshift("javascript");
console.log(array1);
// 输出结果：[ 'javascript', 1, 4, 'hello', 16 ]

unshift方法也有返回值，返回数组在unshift操作之后的长度：

js
const array1 = [1, 4, "hello", 16];
console.log(array1.unshift("javascript"));
// 输出结果：5

splice* ​

splice是一个多功能方法，其参数如下：

js
array.splice(start, deleteCount, item1, item2, ...)
  • start: 开始执行操作位置
  • deleteCount：删除的长度（如果不需要删除则为0）
  • item：（如果要插入）的元素

插入元素 ​

js
const array1 = [1, 4, "hello", 16];
array1.splice(3, 0, "javascript");
console.log(array1);
// 输出结果：[ 1, 4, 'hello', 'javascript', 16 ]

删除元素 ​

js
const array1 = [1, 4, "hello", 16];
array1.splice(1, 2);
console.log(array1);
// 输出结果：[ 1, 16 ]

替换元素 ​

js
const array1 = [1, 4, "hello", 16];
array1.splice(2, 1, "hello, javascript");
console.log(array1);
// 输出结果：[ 1, 4, 'hello, javascript', 16 ]

注：一般来说如果只替换一个元素，直接赋值即可：

js
const array1 = [1, 4, "hello", 16];
array1[2]="hello, javascript";
// 对于只替换一个元素，这样写更易读

返回值 ​

splice只有在有元素被删除的情况下才会有返回内容，如果没有删除的元素，则会返回一个空数组：

js
const array1 = [1, 4, "hello", 16];
console.log(array1.splice(3, 0, "javascript"));
// 输出结果：[]

在有元素被删除的情况下，会返回被删除的元素（数组）：

js
const array1 = [1, 4, "hello", 16];
console.log(array1.splice(1, 2));
// 输出结果：[ 4, 'hello' ]

sort* ​

sort方法用于对数组进行排序：

字符串排序 ​

js
const array1 = ["a", "c", "d", "b"];
array1.sort();
console.log(array1);
// 输出结果：[ 'a', 'b', 'c', 'd' ]

注意，在不添加任何参数的情况下，sort方法无法对数字进行排序：

⚠️不正确的代码：

js
const array1 = [52, 5, 4, 21];
array1.sort();
console.log(array1);
// 输出结果：[ 21, 4, 5, 52 ]

自定义排序规则 ​

js
array.sort(function(a,b){
  // ...
  return // ...
})

如果函数的返回值<0则将把a放在b的前面，如果>0则把a放在b的后面，如果=0则保持不变

js
var returnVal=function(a,b);
if(returnVal<0){
  // [..., a, b, ...]
}else if(returnVal>0){
  // [..., b, a, ...]
}else{
  // 保持原来顺序
}

所以得到对数字排序的方法应该这样写：

js
const array1 = [52, 5, 4, 21];
array1.sort(function(a, b){
  return a - b;
});
console.log(array1);
// 输出结果：[ 4, 5, 21, 52 ]

sort方法的返回值为排序之后的数组

reverse* ​

reverse用于反转数组：

js
const array1 = [1, 4, "hello", 16];
array1.reverse();
console.log(array1);
// 输出结果：[ 16, 'hello', 4, 1 ]

reverse的返回值为反转之后的数组

Released under the MIT License.

Copyright © 2025-present ZhouC