JavaScript 操作Array（数组）的方法

JavaScript 中的 Array（数组）对象是一种用来存储一系列值的容器，它可以包含任意类型的数据，包括数字、字符串、对象等等。通过使用数组对象，我们可以轻松地组织和处理数据，以及进行各种操作，比如查找、排序、过滤、迭代等等。

---

一、在 JavaScript 中，我们可以通过多种方式来创建一个数组对象。

1、 直接定义

let arr = [1, 2, 3, 4, 5];

2、构造函数

let arr = new Array(1, 2, 3, 4, 5);
除了传入一组初始值外，我们还可以使用一个数字参数来指定数组的长度，例如：
let arr = new Array(5);

3、Array.of 和 Array.from

在 ES6 中，JavaScript 提供了两个新的数组方法 Array.of 和 Array.from，用来创建数组。
Array.of 方法可以用来创建一个包含任意数量元素的数组，例如：
let arr = Array.of(1, 2, 3, 4, 5);
Array.from 方法可以用来将一个类数组对象或可迭代对象转换成数组，例如：
let arr = Array.from(“hello”);

4、访问元素

我们可以使用方括号 [] 操作符来访问数组中的元素，例如：
let arr = [1, 2, 3, 4, 5];
console.log(arr[0]); // 1
console.log(arr[2]); // 3

4、修改元素

我们也可以使用方括号操作符来修改数组中的元素，例如：
let arr = [1, 2, 3, 4, 5];
arr[0] = 6;
arr[2] = 7;
console.log(arr); // [6, 2, 7, 4, 5]

二、数组的方法

JavaScript 的 Array 对象提供了很多实用的方法，用来操作和处理数组中的元素。下面我们将介绍一些常用的方法。

改变原数组的方法

方法名	功能描述
push()	在最后新增一个或多个数据，返回长度
shift()	删除第一位，并返回删除的数据
unshift()	在第一位新增一或多个数据，返回长度
pop()	删除最后一位，并返回删除的数据
sort()	排序（字符规则），返回结果
splice()	删除指定位置，并替换，返回删除的数据
reverse()	反转数组，返回结果

不改变原数组的方法

方法名	功能描述
join()	使用分隔符，将数组转为字符串并返回
concat()	合并数组，并返回合并之后的数据
slice()	截取指定位置的数组，并返回
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返回
findIndex()	找到数组中第一个符合条件的元素的下标并不再遍历

三、 方法使用

1、push()

push方法是将一个或多个元素添加到数组的末尾，并返回该数组的新长度

var arr = ['a','b','c'];
var ele = arr.push('d');
// ele结果为: 4;
// arr数组被修改: ['a','b','c','d'];

2、shift()

shift方法是从数组中删除第一个元素，并返回该元素的值

var arr = ['a','b','c','d'];
var ele = arr.shift();
// ele结果为: a;
// arr数组被修改: ['b''c','d'];

3、unshift()

unshift方法是将一个或多个元素添加到数组的开头，并返回该数组的新长度

var arr = ['a','b','c'];
var ele = arr.unshift('d');
// ele结果为: 4;
// arr数组被修改: ['d','a','b','c'];

4、pop()

pop方法是从数组中删除最后一个元素，并返回该元素的值。如果数组为空，则返回undefined

var arr = ['a','b','c'];
var ele = arr.unshift('d');
// ele结果为: 4;
// arr数组被修改: ['d','a','b','c'];

5、sort()

sort方法是对数组中的元素进行排序，默认是升序。

var arr = [1,5,2,4,3]
arr.sort()
// arr数组被修改: [1,2,3,4,5]

6、splice()

splice(start,deleteCount,item1,…,itemx)方法，可实现数组的删除、插入和替换。

start：指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。

deleteCount:可选。整数，表示要移除的数组元素的个数。
如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

item1, …, itemX:可选。要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

var arr = ['a', 'b', 'c', 'd'];
// 从索引 2 的位置开始删除 0 个元素，插入"e"
var insertOnce = arr.splice(2,0,'e');
insertOnce = []
arr = ['a', 'b', 'e', 'c', 'd']
// 从索引3的位置开始删除一个元素
var delOnce = arr.splice(3,1);
// delOnce数组为: ['c']
// arr数组被修改: ['a', 'b', 'e', 'd']

7、reverse()

reverse方法将数组项反转。

var arr = [1,2,3,4,5];
arr.reverse();
// arr数组被修改: [5,4,3,2,1]

8、join()

join()方法是根据指定分隔符将数组中的所有元素放入一个字符串，并返回这个字符串。
参数：join(str);参数可选，默认为","号，以传入的字符作为分隔符。

var arr = [1,2,3];
console.log(arr.join());         //1,2,3
console.log(arr.join("-"));      //1-2-3

9、concat()

concat()方法是于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

var arr1 = ['a', 'b', 'c', 'd'];
var arr2 = ['e','f']
var arr3 = arr1.concat(arr2);
// arr3数组为: ['a', 'b', 'c', 'd','e','f']

10、slice()

slice(start, end)方法是返回从原数组中指定开始下标到结束下标之间的项组成的新数组。

slice()方法可以接受一或两个参数，即要返回项的起始(start)和结束位置(end)。

start可选 提取起始处的索引（从0开始），从该索引开始提取原数组元素
如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
如果省略 start，则 slice 从索引 0 开始。
如果 start超出原数组的索引范围，则会返回空数组。

end 可选 提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。
slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。
如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
如果 end 被省略，则 slice 会一直提取到原数组末尾。
如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

var arr = ['a','b','c','d'];
var res = arr.slice(0,2);
// arr数组未被修改: ['a', 'b', 'c', 'd'];
// res数组为: ['a', 'b'];

11、toString()

toString()为转换成字符串

var arr = [1,2,3];
console.log(arr.toString());     //1,2,3
console.log(arr);                //[1,2,3]---原数组未改变

12、valueOf()

valueOf() 方法用于返回指定对象的原始值，若对象没有原始值，则将返回对象本身。通常由JavaScript内部调用，而不是在代码中显式调用。使用valueOf可以有效防止空指针异常。
不同类型对象的 valueOf() 方法的返回值：

Array：返回数组对象本身。
Boolean： 返回布尔值
Date：存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。
Function： 返回函数本身。
Number： 返回数字值。
Object：返回对象本身。这是默认情况。
String：返回字符串值。
Math 和 Error 对象没有 valueOf 方法。

// Array：返回数组对象本身
var array = ["ABC", true, 12, -5];
console.log(array.valueOf() === array);   // true

// Date：当前时间距1970年1月1日午夜的毫秒数
// Sun Aug 18 2013 23:11:59 GMT+0800 (中国标准时间)
var date = new Date(2013, 7, 18, 23, 11, 59, 230); 
console.log(date.valueOf());   // 1376838719230

// Number：返回数字值
var num =  15.26540; // 15.2654
num.valueOf() // 15.2654
console.log(num.valueOf() === num);   // true

// 布尔：返回布尔值true或false
var bool = true;
console.log(bool.valueOf() === bool);   // true

// new一个Boolean对象
var newBool = new Boolean(true); // Boolean {true}
newBool.valueOf() // true
// valueOf()返回的是true，两者的值相等
console.log(newBool.valueOf() == newBool);   // true
// 但是不全等，两者类型不相等，前者是boolean类型，后者是object类型
console.log(newBool.valueOf() === newBool);   // false

// Function：返回函数本身
function foo(){}
console.log( foo.valueOf() === foo );   // true

var foo2 =  new Function("x", "y", "return x + y;");
console.log( foo2.valueOf() === foo2); // true

// Object：返回对象本身
var obj = {name: "张三", age: 18};
console.log( obj.valueOf() === obj );   // true

// String：返回字符串值
var str = "http://www.xyz.com";
console.log( str.valueOf() === str );   // true

// new一个字符串对象
// String {"http://www.xyz.com"}
var str2 = new String("http://www.xyz.com"); 
str2.valueOf() // "http://www.xyz.com"
// 两者的值相等，但不全等，因为类型不同，前者为string类型，后者为object类型
console.log( str2.valueOf() === str2 );   // false

13、 indexOf()

indexOf(value, index)方法是根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1。该方法是查询方法，不会对数组产生改变。

value：必需，规定需检索的字符串值。可选的整数参数。
index：规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

let arr = [1,2,3,4,5,4,3,2,1];
console.log(arr.indexOf(1)); // 没有填fromIndex所以默认从索引为0的位置开始往后查找
// 0
console.log(arr.indexOf(1,1)); // 表示从索引为1的位置开始往后查找
// 8

14、lastIndexOf()

lastIndexOf(value, start)方法是根据指定的数据，从右向左，查询在数组中出现的位置，如果不存在指定的数据，返回-1。

value：要查询的数据；
start：可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1

var arr = ["h","e","l","l","o"];
console.log(arr.lastIndexOf("l"));        //3
console.log(arr.lastIndexOf("l",3));      //3
console.log(arr.lastIndexOf("l",1));      //-1
console.log(arr.lastIndexOf("l",-3));     //2
console.log(arr.lastIndexOf("l",-4));     //-1

15、forEach()

forEach()方法是对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。

参数: 都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

var arr = [1, 2, 3, 4, 5];
arr.forEach((item, index, a)=>{
   console.log(item + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

16、map()

map()方法是对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

let arr = [10, 30, 50, 60, 120, 230, 340, 450]
let newArr = arr.map(item => {
    return item * 2
})
console.log(newArr); //[20, 60, 100, 120, 240, 460, 680, 900]
console.log(arr); //[10, 30, 50, 60, 120, 230, 340, 450]

17、filter()

filter()方法是过滤，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

//过滤出索引为3的倍数 或者 值大于8的元素
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter((item, index) => { 
   return index % 3 === 0 || item >= 8; 
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

18、every()

every()方法是判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every((x)=> {
   return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every((x) => {
   return x < 3;
}); 
console.log(arr3); // false

19、some()

some()方法是判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some((x)=> {
   return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some((x)=> {
   return x < 1;
}); 
console.log(arr3); // false

20、reduce()

reduce()方法是从数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。
注：对没有值的数组元素，不执行 reduce() 方法。
语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数值：

// 作用:对数组中所有的内容进行汇总   要传至少两个值
let arr = [10, 30, 50, 60, 120, 230, 340, 450]
let newArr = arr.reduce((pre, n) => {
    return pre + n
}, 0)
console.log(newArr);
// 计算
var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24
// 去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
   if(!pre.includes(cur)){
     return pre.concat(cur)
   }else{
     return pre
   }
},[])
console.log(newArr);// [1, 2, 3, 4]
// 将二维数组转成一维
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
   return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

21、findIndex()

findIndex()方法是返回数组中满足提供的测试函数的第一个元素的索引。若没有则返回-1。

let arr = [10, 2, 9, 17, 22];
let index = arr.findIndex((item) => item > 13)
console.log(index);  // 3