Array高频方法汇总

一. 数组常见方法汇总

includes：数组中是否包含指定的值，是则返回true，否则返回false

var array = [1, 2, 3, 4, 5];
console.log(array.includes(1));  //true

some：返回一个布尔值，数组中所有元素调用函数，只要有一个返回true，some立即返回true

// 1.箭头函数
console.log(array.some(data => data > 3));   //true

// 2.普通函数
var some1 = array.some(function (data) {
    return data > 3   //只有一个参数的时候，可以省略();如果返回值仅有一个return，可以省略{ return ...}
})
console.log(some1);  //true

// 3.传入判断函数
var even = function (ele) {
    return ele % 2 === 0;   //这里必须要加return返回值
}
console.log(array.some(even));  //true

every：返回一个布尔值，原数组每个元素都调用函数后的返回值都是true，every就是true，否则，立即返回false。

// 1.箭头函数
console.log(array.every(data=>data>2));   //false

// 3.传入判断函数
var big=function(ele){
    return ele>2;
}
console.log(array.every(big));   //false

map：会创建一个新数组，返回值是原数组中每个元素都调用一遍函数运算后的新的返回集合。

console.log(array.map(data => data * 2));  //[ 2, 4, 6, 8, 10 ]

filter：返回一个新数组，包括所有通过测试的数组成员

console.log(array.filter(data => data > 3))  //[ 4, 5 ]  //filter主要用于根据条件筛选数组

console.log(array.filter(data => data * 2)); // [ 1, 2, 3, 4, 5 ]   //filter不能用于运算操作，结果永远是全部数组输出

// 箭头函数复用写法
const filterItems = params => array.filter(data => data > params);
console.log(filterItems(2));
console.log(filterItems(4));

reduce：对累加器和数组中的每个元素应用一个函数，将其结果转化为单个值。
若没有第二个参数，acc累加器初始值就为数组中的第一个值开始，current为数组中第二个值；有，acc累加器就为init第二个参数的值，current则为数组中的第一个值。

console.log(array.reduce((acc, curr) => acc + curr));   //15

const array = [1,4,8];
const sum = (array)=>{ return array.reduce((x,y)=>  x+y)};
const sum2 = (array)=> array.reduce((x,y)=>x+y);
console.log(sum2(array)); // 13

splice：删除现有元素，添加新元素去更改一个数组的内容

var array2=['111','222','3333','4444'];
console.log(array2.splice(1,0,'wxw'));  //[]
console.log(array2);         //[ '111', 'wxw', '222', '3333', '4444' ]

slice：从开始索引到不包括结束索引截取一部分数组到新的数组，原数组并不会改变

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
console.log(fruits.slice(1, 3));    //[ 'Orange', 'Lemon' ]
console.log(fruits);     //[ 'Banana', 'Orange', 'Lemon', 'Apple', 'Mango' ]

二. 遍历数组实用方法

for...in

// 1. for...in 遍历对象,代表对象属性名
var object={
    name:'王晓雯',
    age:22,
    sex:'女'
};
for (const key in object) { 
    console.log(key); //name,age,sex
    console.log(object[key]); //王晓雯,22,女
}

// 2. `for...in` 遍历数组,代表数组的索引index
var array=[1,2,3,4,5];
for (const index in array) {
    console.log(index);  // 0,1,2,3,4
    console.log(array[index]);  //1,2,3,4,5
}

for..of

// 遍历数组时，value代表的是数组的元素值。
var array=[1,2,3,4];
for (const value of array) {
    console.log(value); //1，2，3，4
}

forEach

缺陷：使用break语句和return语句都不能返回到外层函数

var array_forEach=['name','age','sex'];
array_forEach.forEach((ele,index,array)=>{
    console.log(ele); //name,age,sex
    console.log(index); //1,2,3
    console.log(array); //["name", "age", "sex"]
})

array.erery()

为数组的所有元素执行函数，如果找到一个返回false的，erery函数就返回false。
array.some()
为数组的所有元素执行函数，只要有一个返回true，some就会返回true。

array.find()

返回数组中满足测试函数的第一个元素的值

• findIndex()方法，它返回数组中找到的元素的索引，而不是其值。
• 找到一个元素的位置或者一个元素是否存在于数组中，可以使用：Array.prototype.indexOf() 或 Array.prototype.includes()。

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];
// 方法一：
var findEle = ((array)=>{
 return array.find((ele) => ele.name === 'apples' );
})
console.log(findEle(inventory));  // {name: "apples", quantity: 2}

// 方法二：
function findEle(ele){
 return ele.name === 'apples';
}
console.log(inventory.find(findEle));  //{name: "apples", quantity: 2}

// `includes()`：判断数组是否包含一个指定的值，包含则返回 true，否则返回false。
// arr.includes(searchElement, fromIndex)
var array1 = [1, 2, 3];
console.log(array1.includes(2));  // true

// `indexOf()`： 在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));    // 1

三. 关于数组的常见需求

对数组数字(字符串数字)或者数组对象内的某个属性值进行 从小到大 / 从大到小 的排序

let array2 = ['1', '8', '3', '5'];
array.sort((item1, item2) => {
    return item2 -item1;  //从大到小排序
    return item1 -item2;  //从小到大排序
})

let arrayObject = [
    {name:'wxw',age:52},
    {name:'ss',age:13},
    {name:'ss',age:23}
]
arrayObject.sort((item1,item2)=>{
    return item2.age - item1.age; // 对age字段进行从大到小排序
})