你需要了解的关于 JavaScript 数组的一切

2025-06-07

你需要了解的关于 JavaScript 数组的一切

JavaScript 中的数组

在 JavaScript 中，数组用于存储多个值，或者您可以将数组视为值的有序列表（更具体的元素）。

与 JavaScript 中的 Java 或 C++ 不同，数组可以存储不同数据类型的值，并且您也不需要在声明数组时指定其大小，因为它可以根据需要自动增长，或者您可以说数组的长度是动态大小和自动增长的。

let array=[1,"Java", 2,"CPP", 3,"JS", 3.5,"HTML"];
console.log(array);

// Output [1, "Java", 2, "CPP", 3, "JS", 3.5, "HTML"]
Enter fullscreen mode Exit fullscreen mode

在 JavaScript 中，数组是特殊类型的对象，但我们暂时不必担心那么多，将其视为普通数组

let array=[1, "Java", 2, "CPP", 3, "JS", 3.5, "HTML"];
console.log(typeof(arrayObj));

// Output "object"
Enter fullscreen mode Exit fullscreen mode

JavaScript 中创建数组的方法

在 JavaScript 中，您可以通过两种方式创建数组，一种是通过 JavaScript 关键字 ie，Array Constructor另一种是通过array literals（最简单和最受欢迎的方式）

1.通过数组构造函数创建数组：

let arrayObj = new Array(1,2,3,4,"Red");
console.log(arrayObj);

// Output [1, 2, 3, 4, "Red"]
Enter fullscreen mode Exit fullscreen mode

2. 创建数组的首选方法是使用数组文字表示法：

let array=[1,"Java",2,"CPP",3,"JS",3.5,"HTML"];

console.log(array);

// Output [1, "Java", 2, "CPP", 3, "JS", 3.5, "HTML"]
Enter fullscreen mode Exit fullscreen mode

访问数组元素

在 JavaScript 中，数组是从零索引的，这意味着数组的第一个元素位于索引 0，最后一个元素位于数组长度减 1 的索引值。

let array=[1,"Java",2,"CPP",3,"JS",3.5,"HTML"];

// length of array = 8

console.log(array[0]);    //Output  1
console.log(array[2]);    //Output  2
console.log(array[3]);    //Output  "CPP"
console.log(array[6]);    //Output  3.5
console.log(array[7]);    //Output  "HTML"
console.log(array[8]);    //Output  undefined
Enter fullscreen mode Exit fullscreen mode

数组的 Length 属性

length 属性设置或返回数组中元素的数量

let cities=["Delhi", "Mumbai", "Los Angeles", "London", "New York", "Tokyo", "Mexico City"];
console.log("Length of cities Array is "+cities.length);
// Output "Length of cities Array is 7"

let countryCode=["001", "002", "003", "004", "005", "006"];
countryCode.length=3;
console.log("Length of countryCode Array is "+countryCode.length);

// Output "Length of countryCode Array is 3"

console.log("CountryCode Array after setting size to 3",countryCode)

// Output "CountryCode Array after setting size to 3",  ["001", "002", "003"]
Enter fullscreen mode Exit fullscreen mode

让我们学习 JavaScript 中数组的一些重要方法

1. push()

push() 方法将新元素添加到数组的末尾。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.push("New York");
console.log(cities);

//Output ["Delhi", "Mumbai", "Los Angeles", "London", "New York"]
Enter fullscreen mode Exit fullscreen mode

2. pop()

pop() 方法删除数组的最后一个元素，并返回该元素。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
console.log(cities.pop());

//Output "London"

console.log(cities);

//Output ["Delhi", "Mumbai", "Los Angeles"]
Enter fullscreen mode Exit fullscreen mode

3. concat()

concat() 方法用于连接两个或多个数组。
此方法不会更改现有数组，而是返回一个新数组，其中包含连接数组的值。

let cities1=["Delhi", "Mumbai", "Los Angeles", "London"];
let cities2=["Pune", "Kolkata", "Moscow"];
let cities=cities1.concat(cities2);
console.log(cities);

//Output ["Delhi", "Mumbai", "Los Angeles", "London", "Pune", "Kolkata", "Moscow"]
Enter fullscreen mode Exit fullscreen mode

4. 切片()

slice() 方法接受两个参数作为起始索引和结束索引，并返回从起始索引到结束索引（不包括结束索引）选择元素的新数组对象。
Syntax
slice(startIndex,endIndex)

let cities=["Delhi", "Mumbai", "Los Angeles", "London", "Pune"];
let silceCities=cities.slice(1,4);

console.log(silceCities);

//Output ["Mumbai", "Los Angeles", "London"]
Enter fullscreen mode Exit fullscreen mode

5. splice()

splice() 方法向数组添加/从数组中删除项目，
并返回被删除的项目。
Syntax
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1....)

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];

console.log(cities.splice(1,2));

//Output ["Mumbai", "Los Angeles"]

console.log(cities);

//Output ["Delhi", "London"]

cities.splice(1,0,"Mumbai", "Los Angeles", "London")
console.log(cities);

//Output ["Delhi", "Mumbai", "Los Angeles", "London", "London"]
Enter fullscreen mode Exit fullscreen mode

6. toString()

toString() 方法返回一个包含所有数组值的字符串，以逗号分隔。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
console.log(cities.toString());

//Output "Delhi,Mumbai,Los Angeles,London"
Enter fullscreen mode Exit fullscreen mode

7. 排序()

sort() 方法对数组的项目进行排序。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.sort();
console.log(cities);

//Output ["Delhi", "London", "Los Angeles", "Mumbai"]
Enter fullscreen mode Exit fullscreen mode

8. reverse()

reverse() 方法反转数组中元素的顺序。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.reverse();
console.log(cities);

//Output ["London", "Los Angeles", "Mumbai", "Delhi"]
Enter fullscreen mode Exit fullscreen mode

9. indexOf()

indexOf() 方法在数组中搜索指定元素，并返回其位置。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let pos=cities.indexOf("London");
console.log(pos);

//Output 3
Enter fullscreen mode Exit fullscreen mode

indexOf()与名称所示的另一种方法类似lastIndexOf()，它返回数组中元素最后一次出现的索引。

10. isArray()

isArray() 方法判断一个对象是否为数组。如果对象是数组，则返回 true；如果不是，则返回 false。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let res=Array.isArray(cities);
console.log(res);

//Output true
Enter fullscreen mode Exit fullscreen mode

11. includes()

includes() 方法判断数组是否包含指定元素。
Syntax
includes(searchElement)
includes(searchElement, fromIndex)

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let res1=cities.includes("Mumbai");
console.log(res1);
//Output true

let res2=cities.includes("Mumbai",2);
console.log(res2);

//Output false
Enter fullscreen mode Exit fullscreen mode

12. 连接()

join() 方法接受单个参数并将所有数组元素转换为字符串并返回转换后的字符串。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
console.log(cities.join(" - "));

//Output "Delhi - Mumbai - Los Angeles - London"
Enter fullscreen mode Exit fullscreen mode

13. shift()

shift() 方法删除数组的第一个项目。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.shift();
console.log(cities);

//Output ["Mumbai", "Los Angeles", "London"]
Enter fullscreen mode Exit fullscreen mode

14. unshift()

unshift() 方法将新项目添加到数组的开头，并返回新的长度。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.unshift("New York","Tokyo");
console.log(cities);

//Output ["New York", "Tokyo", "Delhi", "Mumbai", "Los Angeles", "London"]
Enter fullscreen mode Exit fullscreen mode

15. 填充()

fill() 方法使用静态值填充数组中的指定元素。您可以指定填充的起始和结束位置。如果未指定，则将填充所有元素。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.fill("Delhi");
console.log(cities);

//Output ["Delhi", "Delhi", "Delhi", "Delhi"]
Enter fullscreen mode Exit fullscreen mode

16. find()

find() 方法返回数组中通过测试（作为函数提供）的第一个元素的值。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=(c)=>{
return c.length>=6;
}
console.log(cities.find(city));

//Output "Mumbai"
Enter fullscreen mode Exit fullscreen mode

17. findIndex()

findIndex() 方法返回数组中通过测试（作为函数提供）的第一个元素的索引。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=(c)=>{
return c.length>=6;
}
console.log(cities.findIndex(city));

//Output 1
Enter fullscreen mode Exit fullscreen mode

18. forEach()

forEach() 方法按顺序对数组中的每个元素调用一次函数。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=(c,idx,arr)=>{
arr[idx]= c + " is a beautiful city";
}

cities.forEach(city);
console.log(cities);

//Output ["Delhi is a beautiful city", "Mumbai is a beautiful city", "Los Angeles is a beautiful city", "London is a beautiful city"]
Enter fullscreen mode Exit fullscreen mode

19. 地图（）

map() 方法通过为每个数组元素调用一个函数来创建一个新数组。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=cities.map((c)=>{
return c + " is a beautiful city";
})

console.log(city);

//Output ["Delhi is a beautiful city", "Mumbai is a beautiful city", "Los Angeles is a beautiful city", "London is a beautiful city"]
Enter fullscreen mode Exit fullscreen mode

20. 过滤器()

filter() 方法创建一个数组，其中填充了通过测试（作为函数提供）的所有数组元素。

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=(c)=>{
return c.length>6;
}
console.log(cities.filter(city));


//Output ["Los Angeles"]
Enter fullscreen mode Exit fullscreen mode

谢谢阅读。

“不要错过”关注我的社交账号👉
订阅我的 YouTube 频道
😊 Instagram😊 || Twitter😊

如果您觉得这有帮助并想支持💲请给我买咖啡☕

文章来源：https://dev.to/tmayank860/all-you-need-to-know-about-arrays-in-javascript-1nb7
Devto 翻译
PREV
一个包含所有内容的个人网站
NEXT
作为一名前端工程师，我为什么对无服务器感到兴奋