js常用数组API汇总

Array 的 every()、filter()、forEach()、map()、some() 这些方法的第二个参数，用于将第一个参数的函数体内的 this 指向第二个参数。如果没有指定第二个参数，this 值在非严格模式下是全局对象，在严格模式下则为 null。

1. 连接：arr.join("连接符")

      用连接符把数组里面的元素连接成字符串。

      arr.join("")能无缝连接。

2. 拼接：arr.concat("a","b",arr1)

      强调：(1)不会修改原数组，返回新数组。

           (2)如果传给 concat() 的某个参数本身是一个数组，则会将该数组的元素衔接到 arr 中，而不是数组本身。

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]]

3. 截取：arr.slice(start[,end])

      强调：(1)不会修改原数组，返回新的子数组。

           (2)含头不含尾。

           (3)省略第二个参数表示从start位置开始一直截取到末尾。

           (4)支持负数，表示倒数第几个。

4. 删除、插入、替换：arr.splice(start, deleteCount [,value1,value2...])

      强调：(1)直接修改原数组。

           (2)返回所有被删除元素组成的子数组。

           (3)如果 deleteCount 是 0，表示插入元素，插入的元素会排在 start 处元素之前。

           (4) 如果是删除，从 start 开始，并包含 start 处的元素。

5. 翻转数组：arr.reverse()

      强调：(1)直接修改原数组。

6. 数组排序：arr.sort()

      强调：(1)直接修改原数组。

           (2)默认按照数组元素第一位的ASCII码从小到大排列。

           (3)可以设置下列的比较器函数来控制升序，降序或者打乱。

           (4)arr.sort(function(a,b){return a-b;}); 升序(只限数组中是数字或者数字字符串)。

           (5)arr.sort(function(a,b){return b-a;}); 降序(只限数组中是数字或者数字字符串)。

           (6)arr.sort(function(){

                   return Math.random()>.5 ? 1 : -1;

              });随机打乱数组(数组中可以是任何数据类型)

7. 查找：arr.indexOf(value[,from])或arr.lastIndexOf(value[,from])

      强调：(1)返回value在数组中的索引，没有找到返回-1。

                 (2) indexOf 可以匹配指向同一个地址的对象

  let obj = {age: 22};
  let arr = [{name: 'Jim'}];
  arr.push(obj);
  arr.includes(obj) // 1
  arr.includes({age: 22}) // -1

8. 循环数组，无返回值：arr.forEach(function(value,index,arr){})

9. 循环数组，有返回值：arr.map(function(value,index,arr){})

10. 数组转字符串：String(arr)或arr.toString()

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

11. 开头入栈：arr.unshift(value1, value2......)

       在数组的最开头插入元素。

       强调：(1)修改原数组。

            (2)返回新数组的length。

12. 开头出栈：arr.shift()

       弹出数组最开头的元素。

       强调：(1)修改原数组。

            (2)返回被弹出的元素。

13. 结尾入栈：arr.push(value1[,value2,arr1])

       在数组末尾追加元素。

       强调：(1)修改原数组。

            (2)返回新数组的length。

            (3)追加进去的数组不会被打散。

14. 结尾出栈：arr.pop()

       弹出数组最末尾的元素。

       强调：(1)修改原数组。

            (2)返回被弹出的元素。

1. Array.every

    全部满足条件。

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

2. Array.some

部分满足条件。

判断数组中有没有符合条件的元素，只要遇到符合条件的就退出循环。

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

3. Array.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: 'Jim', age: 22}]

4. Array.reduce

汇总。

reduce的第2个参数是可选的，也就是初始值是可选的。当不指定初始值时，它将使用数组的第一个元素作为初始值。函数里面的 index 是当前 value 在数组中的索引。当不传入初始值的时候，index 是从 1 开始的，总的循环次数比数组长度少1。当传入初始值的时候，index 是从 0 也就是第一个元素开始，数组有多长就会遍历几次。

适用场景1：累加

let a = [1,2,3,4].reduce((total, value, index, arr) => {
    return total + value;
}, 0);
console.log(a) // 10

也有喜欢这么写的：

// 其实这里的 x 就是上面的 total，只是参数名字换了一下
let a = [1,2,3,4].reduce(function(x, y) {
    return x + y;
});

适用场景2：数组处理

// 如：获取年龄大于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']

适用场景3：将数组转化为对象

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'}
// }

适用场景4：将二维数组扁平化为一维数组

const arrLevel2 = [
    ['大', '家', '好'],
    ['我', '是', '渣', '渣', '辉']
];

let arrLevel1 = arrLevel2.reduce((acc, current) => {
    return acc.concat(current);
}, [])

console.log('arrLevel1', arrLevel1)
// -> ["大", "家", "好", "我", "是", "渣", "渣", "辉"]

适用场景5：在一次遍历中进行多次计算

有时我们需要对数组进行多次计算。例如，我们想要计算数字列表的最大值和最小值，我们可以这样写：

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}

适用场景6：获取数组中的最大值

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

5. Array.reduceRight

reduceRight() 的工作原理和 reduce() 一样，不同的是它按照数组索引从高到低（从右到左）处理数组。

[2, 10, 60].reduceRight(function (x, y) {
  return x/y;
});
// => 3: (60/10)/2

5. Array.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}

6. Array.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

7. Array.includes

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

let a = [1,2,3].includes(3);

console.log(a) // true

8. Array.toLocaleString()

将数组转换为本地化字符串。它首先调用所有数组元素的 toLocaleString() 方法，然后使用地区特定的分隔字符将结果字符串连接起来。