JS数组API详解汇总

---

一、循环类

1. arr.forEach() — 遍历循环

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index){
  console.log(item, index);
});

2. arr.map()—返回新数组,return什么就输出什么

//求平方
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item,index,arr){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

3. arr.every()—全部满足条件

// 是否全部大于0
let a = [1,2,3,4].every(item => {
    return item > 0;
});
console.log(a); // true

4. arr.some()—部分满足条件

判断数组中有没有符合条件的元素，遇到符合条件的就退出循环。只要有一项满足条件，就会返回true。

// 是否有部分大于2
let a = [1,2,3,4].some(item => {
    return item > 2;
});
console.log(a); // true

5. arr.filter()—条件过滤

const persons = [
    {name: 'Jim', age: 22},
    {name: 'Alen', age: 17},
    {name: 'Lily', age: 20}
]
 
let a = persons.filter(person => {
    return person.age ==20;
});
console.log(a)  // [{name: 'Lily', age: 20}]

6.arr.reduce(callback,[initialValue])—汇总

initialValue （作为第一次调用 callback 的第一个参数。）//默认0

6.1累加:

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    return prev + cur;
})
console.log(sum);

6.2简单用法:

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

6.3数组处理:

// 如：获取年龄大于18岁人的名字
const persons = [
    {name: 'Jim', age: 22},
    {name: 'Alen', age: 17},
    {name: 'Lily', age: 20}
]
 
let names = persons.reduce((names, person) => {
    if (person.age > 18) {
        names.push(person.name)
    }
    return names;
}, []);
console.log(names) // ['Jim', 'Lily']

6.4将数组转化为对象:

const arr = [
    {id: '1', name: 'Jim'},
    {id: '2', name: 'Lily'},
    {id: '3', name: 'Allen'}
]
 
let obj = arr.reduce((acc, current) => {
    return {...acc, [current.id]: current};
}, {})
 
console.log(obj)
// {
//     1: {id: '1', name: 'Jim'},
//     2: {id: '2', name: 'Lily'},
//     3: {id: '3', name: 'Allen'}
// }

6.5将二维数组转化为一维:

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]

6.6对象里的属性求和:

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

6.7获取数组中的最大值:

let arr = [22, 19, 50, 7, 15];
let max = arr.reduce(function(x, y) {
  return x > y ? x : y;
}); // 50

6.8计算数字列表的最大值和最小值:

const readings = [0.3, 1.2, 3.4, 0.2, 3.2, 5.5, 0.4];
 
const initMinMax = {
    minReading: Number.MAX_VALUE,
    maxReading: Number.MIN_VALUE,
};
 
const minMax = readings.reduce((acc, current) => {
    return {
        minReading: Math.min(acc.minReading, current),
        maxReading: Math.max(acc.maxReading, current)
    }
}, initMinMax);
 
console.log(minMax); // -> {minReading: 0.2, maxReading: 5.5}

7. arr.find()—查找指定元素

找出第一个符合条件的数组成员，没找到返回 undefined

const persons = [
    {id: 1, name: 'Jim', age: 22},
    {id: 2, name: 'Alen', age: 17},
    {id: 3, name: 'Lily', age: 20}
]
 
let a = persons.find(person => {
    return person.id === 2;
});
 
console.log(a) // {id: 2, name: 'Alen', age: 17}

8. arr.findIndex()—查找指定元素的下标

找出第一个符合条件的数组成员的位置，没找到返回 -1

const persons = [
    {id: 1, name: 'Jim', age: 22},
    {id: 2, name: 'Alen', age: 17},
    {id: 3, name: 'Lily', age: 20}
]
 
let a = persons.findIndex(person => {
    return person.id === 2;
});
 
console.log(a) // 1

9. arr.includes()—查找是否存在

表示某个值是否在数组里，includes() 不接受函数参数。

let a = [1,2,3].includes(3);
console.log(a) // true

二、改变原数组类

1. arr.splice(start, deleteCount ,value1)—删除、插入、替换:

原数组被删除，返回所有被删除元素组成的子数组

从下标2位置开始删除数组后的两个元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
console.log(fruits)//Banana,Orange
------------------------------------------
移除数组下标为2的元素一个，并在数组下标为2的位置添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
console.log(fruits)//Banana,Orange,Lemon,Kiwi,Mango

2. arr.reverse()—翻转数组

原数组机械性的倒转

3. arr.sort()—数组排序

直接修改原数组。

1- 默认按照数组元素第一位的ASCII码从小到大排列。
2- arr.sort(function(a,b){return a-b;}); 升序(只限数组中是数字或者数字字符串)。
3- arr.sort(function(a,b){return b-a;}); 降序(只限数组中是数字或者数字字符串)。
4- arr.sort(function(){
return Math.random()>.5 ? 1 : -1;
});随机打乱数组(数组中可以是任何数据类型)

4. arr.unshift(value)—头部添加

修改原数组, 返回新数组的length。

5. arr.shift(value)—头部删除

修改原数组, 返回被弹出的元素

6. arr.push(value)—尾部添加

修改原数组, 返回新数组的length。

7. arr.pop(value)—尾部删除

修改原数组, 返回被弹出的元素

三、不改变原数组类

1. arr.join(“连接符”)—连接

用连接符把数组里面的元素连接成字符串,如：arr.join("")，返回连接后的字符串

2. arr.toString()—数组转字符串

将数组中的元素用逗号连接成字符串，类似于arr.join(",")。

3. arr.concat(“a”,“b”,arr1)—合并

合并为新数组,返回新数组

var a = [1,2,3];
a.concat(4,5); // [1,2,3,4,5]
a.concat([4,5]); // [1,2,3,4,5]
a.concat(4, [5, [6, 7]]); // [1,2,3,4,5,[6,7]]

4. arr.slice(start,end)—截取

截取数组并返回一个新的数组，包含从 start(数组下标) 到 end （不包括该元素）即含头不含尾。

5. arr.indexOf(value,start)—查找

返回 item 的第一次出现的索引位置，如果在数组中没找到指定元素则返回 -1。

如果你想查找字符串最后出现的位置，请使用 lastIndexOf() 方法

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");//2
---------------------------从4开始查找，默认不填为从0开始
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4);//6