【JavaScript】—— 数组篇（方法总结+详解）

目录

 一、JavaScript中创建数组的方法

1.1、使用Array构造函数

1.2、使用数组字面量表示法

1.3、ES6新增用于创建数组的静态方法：from( ) 和 of( )

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

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

二、JavaScript中的数组方法

2.1、复制和填充方法

2.1.1、copyWithin( ) — 批量复制方法

2.1.2、fill( ) — 填充数组方法

2.2、转换方法 

2.2.1、toString( ) — 数组转字符串方法

2.2.2、valueOf( ) — 数组转字符串方法 

2.2.3、join( ) — 数组转字符串方法

2.3、栈方法（后进先出）

2.3.1、push( ) — 数组尾添加元素

2.3.2、pop( ) — 数组尾删除元素

2.4、队列方法（先进先出） 

2.4.1、 shift( ) — 数组头删除元素

2.4.2、unshift( ) — 数组头添加元素 

 2.5、排序方法

2.5.1、reverse( ) — 数组元素反向排序

2.5.2、sort( ) — 数组元素排序

2.6、操作方法

2.6.1、concat( ) — 拼接数组方法

2.6.2、slice( ) 

2.6.3、splice( )

2.7、搜索和位置方法 

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

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

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

2.8、迭代方法

2.8.1、every( )

2.8.2、filter( )

2.8.3、forEach( )

2.8.4、map( )

2.8.5、some( )

 一、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,green

2.2.2、valueOf( ) — 数组转字符串方法 

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