JavaScript -- 数组详解（使用频率高）【数组专题】

本篇文章分享JavaScript -- 数组详解（使用频率高）【数组专题】，对你有帮助的话记得收藏一下，看Java资料网收获更多编程知识

---

前言

本文详细介绍了 JavaScript 中数组的的各种用法，包含 ES6+ 语法，以及各种数组操作方法如复制、填充、转换、排序、栈队列操作、搜索和迭代等，帮助读者理解和掌握 JavaScript 数组的使用技巧。

---

一、创建数组

1.1 使用Array构造函数

//创建一个数组
let arr = new Array();

//创建一个初始length为20的数组
let brr = new Array(20);
//给Array构造函数传入保存的值

1.2 使用数组字面量表示法

//创建一个包含3个元素的数组
let arr = ["red","yellow","blue"];

//创建一个空数组
let brr = [];

//创建一个包含2个元素的数组
let crr = [1,2];

1.3 ES6语法转换数组

1.3.1 from( )用于将类数组结构转换为数组实例

Array.from() 的第一个参数是一个类数组对象，即任何可迭代的结构，或者有一个 length 属性和可索引元素的结构。

//字符串会被拆分为单字符数组
console.log(Array.from("Matt"));//["M","a","t","t"];

//可以使用from()将集合和映射转换为一个新数组
const m = new Map().set(1,2).set(3,4);
console.log(Array.from(m));//[[1,2],[3,4]];

Array.from( ) 还接收第二个可选的映射函数参数。

const a1 = [1,2,3,4];
const a2 = Array.from(a1,x=>x**2);
console.log(a2);//[1,4,9,16];

1.3.2 of( )用于将一组参数转换为数组实例

//把一组参数转换为数组
console.log(Array.of(1,2,3,4));//[1,2,3,4]

二、数组常用方法

2.1 复制和填充

批量复制方法 copyWithin() ，以及填充数组方法 fill() 。这两个方法的函数签名类似，都需要指定既有数组实例上的一个范围，包含开始索引，不包含结束索引。使用这个方法不会改变数组的大小。

2.1.1 copyWithin( )

copyWithin() 用于批量复制，会按照指定范围浅复制数组中的部分内容，然后将它们插入到指定索引开始的位置。

let ints = [0,1,2,3,4,5,6,7,8,9];
 
//从ints中复制索引0开始的内容，插入到索引5开始的位置
//在源索引或目标索引到达数组边界时停止
ints.copyWithin(5);
console.log(ints);//[0,1,2,3,4,0,1,2,3,4];
 
//从ints中复制索引5开始的内容，插入到索引0开始的位置
ints.copyWithin(0,5);
console.log(ints);//[5,6,7,8,9,5,6,7,8,9];
 
//从ints中复制索引0开始到索引3结束的内容
//插入到索引4开始的位置
ints.copyWithin(4,0,3);
console.log(ints);//[0,1,2,3,0,1,2,7,8,9];
 
//JavaScript引擎在插值前会完整复制范围内的值
//因此复制期间不存在重写的风险
ints.copyWithin(2,0,6);
console.log(ints);//[0,1,0,1,2,3,4,5,8,9];
 
//支持负索引值，与fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4,-7,-3);
console.log(ints);//[0,1,2,3,4,5,3,4,5,6];

2.1.2 fill( )

使用 fill() 方法主要用于填充数组，可以向一个已有的数组中插入全部或部分相同的值。

const zeroes = [0,0,0,0,0];
 
//用5填充整个数组
zeroes.fill(5);
console.log(zeroes);//[5,5,5,5,5];
 
//用6填充索引大于等于3的元素
zeroes.fill(6,3);
console.log(zeroes);//[0,0,0,6,6];
 
//用7填充索引大于等于1且小于3的元素
zeroes.fill(7,1,3)
console.log(zeroes);//[0,7,7,0,0];
 
//用8填充索引大于等于1且小于等于4的元素
//(-4 + zeroes.length = 1)
//(-1 + zeroes.length = 4)
zeroes.fill(8,-4,-1);
console.log(zeroes);//[0,8,8,8,0];

2.2 数组转换

2.2.1 toString( )

toString() 用于数组转字符串方法，返回有数组中每个值的等效字符串拼接而成的一个逗号分隔字符串。

//创建一个包含3个字符串的数组
let colors = ["red","blue","green"];
console.log(colors.toString());//red,blue,green

2.2.2 valueOf( )

valueOf() 返回的还是数组本身。

//创建一个包含3个字符串的数组
let colors = ["yellow","orange","pink"];
console.log(colors.valueOf());//yellow,orange,pink

2.2.3 join( )

join() 方法接收一个参数，即字符串分隔符，返回包含所有项的字符串。

let colors = ["red","green","blue"];
console.log(colors.join(",");//red,green,blue
console.log(colors.join("||");//red||green||blue

2.3 栈方法（后进先出）

栈是一种后进先出的结构，也就是最近添加的项先被删除。数据项的插入（称为推入，push）和删除（称为弹出，pop）只在栈的一个地方发生，即栈顶。

2.3.1 push( )

push() 方法接受任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度。

//创建一个数组
let colors = new Array();
//推入两项
let count = colors.push("red","green");
//返回值 colors数组的最新长度：2
console.log(count);

2.3.2 pop( )

pop( ) 方法则用于删除数组的最后一项，同时减少数组的 length 值，返回被删除的项。

//获取最后一项
let item = colors.pop();
//返回值 "green"
console.log(item);
//返回数组长度 1
console.log(colors.length);

2.4 队列方法（先进先出）

队列以先进先出形式限制访问。队列在列表末尾添加数据，但从列表开头获取数据。使用shift()和 push() 可以把数组当成队列来使用。

2.4.1 shift( )

shift() 方法会删除数组的第一项并返回它，然后数组长度减1。

//创建一个数组
let colors = new Array("red","yellow","green");
//取得第一项
let item = colors.shift();
//返回值 "red"
console.log(item);
//数组长度 2
console.log(item.length);

2.4.2 unshift( )

unshift() 方法可以在数组开头添加任意多个值，然后返回新的数组长度。

//创建一个数组
let colors = new Array("yellow");
//数组头推入两个元素
let count = colors.unshift("red","blue");
//返回值 最新数组长度为3
console.log(count);
//返回值 ["red","blue","yellow"]
console.log(colors);

2.5 排序方法

数组有两个方法可以用来对元素重新排序：reverse() 和 sort() 。

2.5.1 reverse( )

reverse() 用于将数组元素反向排序。

let values = [1,2,3,4,5];
values.reverse();
console.log(values);//[5,4,3,2,1]

2.5.2 sort( )

sort() 用于数组元素数值 升序\降序 排序。

//升序
let arr = [11,24,23,13,2]
arr.sort(function (a,b) {
    return a-b
})
console.log(arr);//[2,11,13,23,24]

//降序
let arr = [11,24,23,13,2]
arr.sort(function (a,b) {
    return a-b
})
console.log(arr);//[2,11,13,23,24]

2.6 操作方法

2.6.1 concat( )

concat() 方法可以在现有数组全部元素基础上创建一个新数组。它首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组。如果传入一个或多个数组，则 concat() 会把这些数组的每一项都添加到结果数组。如果参数不是数组，则直接把它们添加到结果数组末尾。

let colors = ["red","green","blue"];
let colors2 = colors.concat("yellow",["black","brown"]);
 
console.log(colors);//["red","green","blue"];
console.log(colors2);//["red","green","blue","yellow","black","brown"];

2.6.2 slice( )

slice() 用于创建一个包含原有数组中一个或多个元素的新数组。

slice() 方法可以接收一个或两个参数：返回元素的开始索引和结束索引。如果只有一个参数，则slice() 会返回该索引到数组末尾的所有元素。如果有两个参数，则slice() 返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。

💯注意：这个操作不影响原始数组。

let colors = ["red","green","blue","yellow","purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1,4);
 
console.log(colors2);//green,blue,yellow,purple
console.log(colors3);//green,blue,yellow

2.6.3 splice( )

splice() 的主要目的是在数组中** 插入元素**，但是有3种不同的方式使用这个方法。

• 删除：需要给splice() 传2个参数：要删除的第一个元素的位置和要删除的元素数量。可以从数组中删除任意多个元素，比如splice(0,2) 会删除前两个元素。
• 插入：需要给splice() 传3个参数：开始位置、0(要删除的元素数量)和要插入的元素，可以在数组中指定的位置插入元素。第三个参数折后还可以传递多个要插入的元素。比如，splice(2,0,"red","green") 会从数组位置2开始插入字符串"red"和"green"。
• 替换：splice() 在删除元素的同时可以在指定位置插入新元素，同样要传入3个参数：开始位置、要删除元素的数量和要插入的任意多个元素。要插入的元素数量不一定跟删除的元素数量一致。比如，splice(2,1,"red","green") 会在位置2删除一个元素，然后从该位置开始向数组中插入"red"和"green" 。

//删除数组元素
let colors = ["red","green","blue"];
let removed = colors.splice(0,1);//删除第一项
console.log(colors);//["green","blue"]
console.log(removed);//["red"]
 
//插入数组元素
colors.splice(1,0,"yellow","orange");
console.log(colors);//["green","yellow","orange","blue"]
 
//替换数组元素
colors.splice(1,1,"red","purple")
console.log(colors);//["green","red","purple","orange","blue"]

2.7 搜索和位置方法

indexOf() 和 lastIndexOf() 都返回要查找的元素在数组中的位置，如果没找到则返回-1。includes() 返回布尔值，表示是否至少找到一个与指定元素匹配的项。

2.7.1、indexOf( )

indexOf() — 从头搜索，返回数组下标

let numbers = [1,2,3,4,5,4,3,2,1];
//从数组最后项开始查找元素"4",返回下标为5
console.log(numbers.lastIndexOf(4));
//从数组numbers.length - 4项开始查找元素"4",返回下标为3
console.log(numbers.lastIndexOf(4,4));

2.7.2 lastIndexOf( )

lastIndexOf() — 从后搜索，返回数组下标

let numbers = [1,2,3,4,5,4,3,2,1];
//从数组最后项开始查找元素"4",返回下标为5
console.log(numbers.lastIndexOf(4));
//从数组numbers.length - 4项开始查找元素"4",返回下标为3
console.log(numbers.lastIndexOf(4,4));

2.7.3 includes( )

includes() — 从头搜索，返回布尔值

let numbers = [1,2,3,4,5,4,3,2,1];
//从数组第0项开始查找元素"4",返回true
console.log(numbers.includes(4));
//从数组第4项开始查找元素"4",返回false
console.log(numbers.includes(4,7));

2.8 迭代方法

🎯注意：以下方法都 不改变 调用它们的数组。

2.8.1 every( )

对数组每一项都运行传入的函数，如果对每一项函数都返回 true ，则这个方法返回 true。

let numbers = [1,2,3,4,5,4,3,2,1];
let everyResult = numbers.every((item,index,array)=>item>2);
console.log(everyResult);//false

2.8.2 filter( )

对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回。

let numbers = [1,2,3,4,5,4,3,2,1];
let filterResult = numbers.filter((item,index,array)=>item>2);
console.log(filterResult);//[3,4,5,4,3]

2.8.3 forEach( )

对数组每一项都运行传入的函数，没有返回值。

let numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach((item,index,array)=>{
    //执行某些操作
})

2.8.4 map( )

对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。

let numbers = [1,2,3,4,5,4,3,2,1];
let mapResult = numbers.map((item,index,array)=>item*2);
console.log(mapResult);//[2,4,6,8,10,8,6,4,2]

2.8.5 some( )

对数组每一项都运行传入的函数，如果有一项函数返回 true，则这个方法返回 true 。

let numbers = [1,2,3,4,5,4,3,2,1];
let everyResult = numbers.some((item,index,array)=>item>2);
console.log(someResult);//true

三、总结

JavaScript 数组在我们日常开发中使用频率极高，如果能数量掌握数组相关方法的使用，可以使我们开发效率事半功倍，而且还能写出高质量优雅的代码。

---

文章来源:https://blog.csdn.net/mss359681091/article/details/145041434
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！