数组的方法总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

1、push()

将一个或多个新元素添加到数组结尾，并返回数组新长度。

// 示例：
let arr = [1,2,3];
let newArr = arr.push(4);
console.log(newArr); // 4
console.log(arr); // [1,2,3,4]

2、unshift()

将一个或多个新元素添加到数组起始位置，并返回数组新长度。

// 示例：
let arr = [1,2,3];
let newArr = arr.unshift('zhangsan');
console.log(newArr); // 4
console.log(arr); //  ['zhangsan', 1, 2, 3]

3、pop()

删除数组的最后一个元素，并返回删除的那个值。

// 示例：
let arr = [1,2,3];
let newArr = arr.pop();
console.log(newArr); // 3
console.log(arr); // [1,2]

4、shift()

删除数组的第一个元素，并返回删除的那个值。

// 示例：
let arr = [1,2,3];
let newArr = arr.shift();
console.log(newArr); // 1
console.log(arr); // [2,3]

5、join()

将一个或多个新元素添加到数组起始位置，并返回数组新长度。

// 示例：
let arr = [1,2,3];
let newArr = arr.unshift('zhangsan');
console.log(newArr); // 4
console.log(arr); //  ['zhangsan', 1, 2, 3]

7、concat()

连接两个或多个数组，不会改变现有数组，而是返回一个新数组。

// 示例：
let arr1 = [1,2,3];
let arr2 = ['zhangsan','lisi'];
let arr3 = arr1.concat(arr2) ; 
console.log(arr3); //  [ 1, 2, 3,'zhangsan','lisi']

8、sort()

对数组的元素进行排序,该方法会改变原来的数组。

// 示例：
//升序
let arr1 = [87,9,17,2,27,54];
arr1.sort(
	function(a, b) {
    	return a - b 
  	}
)
console.log(arr1)// [2, 9, 17, 27, 54, 87]

//降序
arr1.sort(
	function(a, b) {
		return b - a 
  	}
)
console.log(arr1)//  [87, 54, 27, 17, 9, 2]

9、reverse()

用于颠倒数组中元素的顺序，该方法会改变原来的数组。

// 示例：
let arr1 = [1,2,3,4,5,6];
arr1.reverse();
console.log(arr1); //  [6, 5, 4, 3, 2, 1]

10、slice()

返回从原数组中指定开始下标到结束下标之间的项组成的新数组。

// 语法：
array。slice(begin, end)
//begin：必选，表示从哪里开始选取。
//end：必选，表示从哪里结束选取。

在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。
如果有两个参数， 该方法返回起始和结束位置之间的项——但不包括结束位置的项。

// 示例：
let arr1 = [1,2,3,4,5,6];
let arr2 = arr1.slice(0,2);
let arr3 = arr1.slice(1);
console.log(arr2);// [1, 2]
console.log(arr3);// [2, 3, 4, 5, 6]

11、indexOf()

从数组的开头开始向后查找指定数据, 如果有则返回该数据的下标值, 没有则返回-1。

// 语法：
array.indexOf(value，index));
//value:必选，表示要查找的数据
//index:可选，要查找的项和

// 示例：
let arr = [1,2,3,4,5,6];
console.log(arr.indexOf(5));// 4
console.log(arr.indexOf(0));// -1
console.log(arr.indexOf(5,2));// 4

12、lastIndexOf()

从数组的末尾开始向后查找指定数据, 如果有则返回该数据的下标值, 没有则返回-1。

// 示例：
let arr = [1,2,3,4,5,6];
console.log(arr.lastIndexOf(5));// 4
console.log(arr.lastIndexOf(0));// -1
console.log(arr.lastIndexOf(5,2));// -1

13、forEach()

对数组进行遍历循环，这个方法没有返回值。
参数都是function类型，默认有传参，参数分别为：
value：遍历到的数组的数据
index：对应的索引
self：数组自身

// 示例：
 let arr = [1, 2, 3, 4, 5];
 arr.forEach(function (value, index, self) {
 	console.log(value + '|' + index + '|' + (self === arr));
 });
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

14、map()

根据指定的条件处理数组元素，并且返回处理之后的数组元素组成的新数组。

// 示例：
let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.map(function (item) {
 	return item * item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

15、filter()

“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

// 示例：
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr2 = arr.filter(function (value, index) {
   return value > 5;
});
console.log(arr2); // [6, 7, 8, 9, 10]

16、every()

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

// 示例：
let arr = [1, 2, 3, 4,];
let arr2 = arr.every(function (x) {
	return x < 10;
});
console.log(arr2); // true

let arr3 = arr.every(function (x) {
  	return x > 5;
});
console.log(arr3); // false

17、 some()

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

// 示例：
 let arr = [1, 2, 3, 4, 5];
 let arr2 = arr.some(function (x) {
   return x < 3;
 });
 console.log(arr2); //true
 let arr3 = arr.some(function (x) {
   return x < 1;
 });
 console.log(arr3); // false

18、find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined。

// 示例：
let arr1 = [{
    id : 1,
    name : 'hy'
},
{
    id : 2,
    name : 'yh'
}]

let arr2 =arr1.find(function(item,index){
    return item.id === 2;
} )
console.log(arr2);// {id: 2, name: 'yh'}

let arr3 =arr1.find(function(item,index){
    return item.name ==='zhangsan'
} )
console.log(arr3);// undefined

19、 findindex()

用于在数组中查找第一个符合条件的数组成员的索引，如果没有找到则返回-1。

// 示例：
let arr1 = [1,3,10,15];
let index1 = arr1.findIndex((value, index) => value > 9);
console.log(index1);// 2

let index2 = arr1.findIndex((value, index) => value < 0);
console.log(index2);// -1

20、includes()

检查数组是否包含某个给定的值，返回一个布尔值。

// 示例：
 let arr = [1,2,3];
 let result = arr.includes(1);
 console.log(result);// true
 
 result = arr.includes(4);
 console.log(result);// false

21、reduce()

接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。

//callback:函数中包含四个参数
//previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
//currentValue （数组中当前被处理的元素）
//index （当前元素在数组中的索引)
//array （调用的数组）
//initialValue （作为第一次调用 callback 的第一个参数。）

// 示例：
let arr = [1,2,3,4,5];
let arr1 = arr.reduce((preValue, curValue) => 
    preValue + curValue
)
console.log(arr1)    // 15
let arr2 = arr.reduce((preValue,curValue)=>preValue + curValue,5)
console.log(arr2)    // 20

22、Array.from()

将类数组或可遍历对象转换为真正的数组。

// 示例：
let arr = {
    '0':'a',
    '1':'b',
    '2':'c',
    length:3
}
let arr1 = Array.from(arr);
console.log(arr1);//  ['a', 'b', 'c']