JavaScript 数组操作指南：创建、方法及操作详解

一、数组的创建

1、使用Array构造函数

let colors = new Array(); 
let colors = new Array("red", "blue", "green"); 

//new可以省略

2、字面量（array literal）表示法

let colors = ["red", "blue", "green"];  // 创建一个包含3个元素的数组
let names = [];                         		// 创建一个空数组
let values = [1,2,];                   			// 创建一个包含2个元素的数组

3、ES6方法：from()和of()。

① from()用于将类数组结构转换为数组实例，
② of()用于将一组参数转换为数组实例。

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

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

// Array.from()对现有数组执行浅复制
const a1 = [1, 2, 3, 4];
const a2 = Array.from(a1);	//a1：[1, 2, 3, 4]
alert(a1 === a2); 			// false 

// 可以使用任何可迭代对象
const iter = {
	*[Symbol.iterator](){yield 1;yield 2;yield 3;yield 4;}
}; 
Array.from(iter) // [1, 2, 3, 4]

二、数组的方法

1.数组的类型相关

（1）判断是否为数组

 Array.isArray()

arr instanceof Array
判断对象一个是否是某个构造函数的实例

例如，[] instanceof Array

（2）将数组转换为字符串

①join() 方法也可将所有数组元素结合为一个字符串。

实例

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join("/\"); 

结果

Banana/\Orange/\Apple/\Mango

toString()

// 方式 1：
字符串 = 数组.toString();
//方式 2：
字符串 = String(数组);
//方式 3：
字符串 = 数组.join(','); 
// 将数组转为字符串，每一项用 英文逗号 分隔

join(‘分隔符’)
//如join() 不写参数，默认就是逗号进行分割

（3） Array.from(arrayLike)

将伪数组转化为真数组

（4）Array.of(value1, value2, value3)

创建数组：将一系列值转换成数组

2.数组元素的添加和删除

（1）数组的增加

arr.push(数据....);

arr.unshift(数据....);

splice(startIndex,0,m....);

（2）数组的删除

Popping

pop() 方法从数组中删除最后一个元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

pop() 方法返回“被弹出”的值：
实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"

arr.shift();

arr.splice(startIndex);

arr.splice(startIndex,n);

splice(startIndex,n,m…);

（3）数组的拼接

arr.concat(str1,str2. str3...);

concat(数据....);

arr.push.apply(arr, arr2);

Pushing

push() 方法（在数组结尾处）向数组添加一个新的元素：
实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
//  向 fruits 添加一个新元素

push() 方法返回新数组的长度：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");
//  x 的值是 5

3.数组的合并和拆分

（1）concat()

合并数组：连接两个或多个数组，返回结果为新的数组不会改变原数组

（2）join()

将数组转换为字符串，返回结果为转换后的字符串

（3）split()

将字符串按照指定的分隔符，组装为数组，不会改变原数组

4.数组排序

（1）reverse()

反转数组，返回结果为反转后的数组

（2）sort()

对数组的元素,默认按照Unicode 编码，从小到大进行排序

5.查找数组的元素

（1） indexOf(value)

从前往后索引，检索一个数组中是否含有指定的元素

（2）lastIndexOf(value)

从后往前索引，检索一个数组中是否含有指定的元素

（3）includes(item)

数组中是否包含指定的内容

（4）find(function())

找出第一个满足「指定条件返回 true」的元素

（5）findIndex(function())

找出第一个满足「指定条件返回 true」的元素的 index

（6）every()

确保数组中的每个元素都满足「指定条件返回 true」，则停止遍历，此方法才返回 true 全真才为真。要求每一项都返回
true，最终的结果才返回 true

（7）some()

数组中只要有一个元素满足「指定条件返回 true」，则停止遍历，此方法就返回 true 一真即真。只要有一项返回 true，最终的结果就返回true

6.遍历数组

（1）for循环

（2）forEach()和for循环类似

（3）map()

对原数组中的每一项进行加工，将组成新的数组

（4）filter()

过滤数组：返回结果是 true 的项，将组成新的数组，返回结果为新的数组

（5）reduce

接收一个函数作为累加器，返回值是回调函数累计处理的结果

7.将数组转换为字符串

方式1:

字符串 =数组.tostring () ;

方式2:

字符串= string(数组);

方式3:

字符串–数组.join ( ' , ');
//将数组转为字符串，每一项用英文逗号分隔

三、数组对象的其他方法

1.arr.slice(startIndex，endlndex);

2.arr.indexof()

3.arr.join(“连接符”);

4.arr.reverse();

数组方法

方法名	功能	原数组是否改变
concat()	合并数组，并返回合并之后的数据	否
join()	使用分隔符，将数组转为字符串并返回	否
pop()	删除最后一位，并返回删除的数据	是
shift()	删除第一位，并返回删除的数据	是
unshift()	在第一位新增一或多个数据，返回长度	是
push()	在最后一位新增一或多个数据，返回长度	是
reverse()	反转数组，返回结果	是
slice()	截取指定位置的数组，并返回	否
sort()	排序（字符规则），返回结果	是
splice()	删除指定位置，并替换，返回删除的数据	是
toString()	直接转为字符串，并返回	否
valueOf()	返回数组对象的原始值	否
indexOf()	查询并返回数据的索引	否
lastIndexOf()	反向查询并返回数据的索引	否
forEach()	参数为回调函数，会遍历数组所有的项，回调函数接受三个参数分别为value，index，self；forEach没有返回值	否
map()	同forEach，同时回调函数返回数据，组成新数组由map返回	否
filter()	同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回	否
every()	同forEach，同时回调函数返回布尔值，全部为true，由every返回true	否
some()	同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true	否
reduce()	归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduce返回	否
reduceRight()	反向归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduceRight返回	否