本文详细介绍了JavaScript中数组的创建方式（构造函数、字面量、ES6的from()和of()），以及各种数组操作方法如复制、填充、转换、排序、栈队列操作、搜索和迭代等，帮助读者理解和掌握JavaScript数组的使用技巧。
目录
1.3、ES6新增用于创建数组的静态方法：from( ) 和 of( )
2.7.1、indexOf( ) — 从头搜索，返回数组下标
2.7.2、lastIndexOf( ) — 从后搜索，返回数组下标
2.7.3、includes( ) — 从头搜索，返回布尔值
一、JavaScript中创建数组的方法
1.1、使用Array构造函数
//创建一个数组
let arr = new Array();
//创建一个初始length为20的数组
let brr = new Array(20);
//给Array构造函数传入保存的值
let crr = new Array("red","yellow","green");1.2、使用数组字面量表示法
//创建一个包含3个元素的数组
let arr = ["red","yellow","blue"];
//创建一个空数组
let brr = [];
//创建一个包含2个元素的数组
let crr = [1,2];1.3、ES6新增用于创建数组的静态方法：from( ) 和 of( )
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]二、JavaScript中的数组方法
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,green2.2.2、valueOf( ) — 数组转字符串方法
valueOf( )返回的还是数组本身
//创建一个包含3个字符串的数组
let colors = ["yellow","orange","pink"];
console.log(colors.valueOf());//yellow,orange,pink2.2.3、join( ) — 数组转字符串方法
join( )方法接收一个参数，即字符串分隔符，返回包含所有项的字符串。
let colors = ["red","green","blue"];
console.log(colors.join(",");//red,green,blue
console.log(colors.join("||");//red||green||blue2.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( ) — 数组元素反向排序
let values = [1,2,3,4,5];
values.reverse();
console.log(values);//[5,4,3,2,1]2.5.2、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,yellow2.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( ) — 从头搜索，返回数组下标
let numbers = [1,2,3,4,5,4,3,2,1];
//从数组第0项开始查找元素"4",返回下标为3
console.log(numbers.indexOf(4));
//从数组第4项开始查找元素"4",返回下标为5
console.log(numbers.indexOf(4,4));2.7.2、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( ) — 从头搜索，返回布尔值
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);//false2.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
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
