常用数组方法

柔光的暖阳◎ 2022-01-18 23:09 419阅读 0赞

## 前言 ##

我平时都是需要用到数组时再去搜方法，没想到面试中好几次都被问到对数组的一些操作，所以每次都黑人问号，基本只记得什么pop/push/shift，就想着找点资料好好总结一下。

## Array数组方法 ##

### forEach ###

语法：`arr.forEach(callback[, thisArg]);`

forEach() 方法对数组的每个元素执行一次提供的函数(回调函数)。

*  函数没有返回值，即 underfined；
 *  不对原数组产生影响。

var array1 = ['a', 'b', 'c'];
    
    array1.forEach(function(element) {
      console.log(element); //"a"、"b" 、"c"
    });
    
    复制代码

### indexOf ###

indexOf()方法返回给定元素能找在数组中找到的第一个索引值，否则返回-1。

*  返回值是找到元素的索引值或 -1；
 *  不对原数组产生影响

var array = [1, 2, 5];
    array.indexOf(5); // 2
    array.indexOf(7); // -1
    复制代码

### concat ###

concat()方法用于数组的拼接，参数是一个或多个数组，返回的结果是拼接数组。

*  返回拼接的新数组；
 *  不修改原数组和参数数组；
 *  参数可以是非数组

var array1 = ['a', 'b', 'c'];
    var array2 = ['d', 'e', 'f'];
    
    console.log(array1.concat(array2)); // Array ["a", "b", "c", "d", "e", "f"]
    复制代码

### join & toString ###

join() 方法将数组中的所有元素连接成一个字符串。经常和 split 搭配处理字符串。

*  返回拼接的字符串；
 *  不对原数组产生影响。

var a1 = [1, 2, 3];
    var a2 = a1.join();
    a1 //[1, 2, 3]
    a2 //"1,2,3"
    a2 = a1.join(""); //"123"
    a2 = a1.join("-"); //"1-2-3"
    复制代码

toString() 返回一个字符串，表示指定的数组及其元素。

*  返回拼接的字符串；
 *  不会改变原数组

var a1 = [1, 2, 3];
    var a2 = a1.toString();
    a2 //"1,2,3"
    复制代码

### every ###

every() 方法测试数组的所有元素是否都通过了指定函数的测试。

`arr.every(callback)`会对每一个元素都执行 callback 方法，直到 callback 返回 false。

和 forEach 方法相比较： forEach 无法停止，而 every 方法返回 flase 时可以中途停止。

### map ###

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

var a1 = [1, 4, 9];
    var a2 = a1.map(Math.sqrt);
    a1 //[1, 4, 9]
    a2 //[1, 2, 3]
    复制代码

### reduce ###

reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。

var getAdd = (pre, cur) => pre + cur;
    var a1 = [1, 2, 3];
    var a2 = a1.reduce(getAdd, 0);
    a1 //[1, 2, 3]
    a2 //6
    复制代码

### push & pop ###

push() 方法添加一个或多个元素到数组的末尾，并返回数组新的长度（length 属性值）。

var a1 = [1, 2, 3];
    var a2 = a1.push(4);
    a1 //[1, 2, 3, 4]
    a2 //4
    复制代码

pop() 方法删除一个数组中的最后的一个元素，并且返回这个元素。

var a1 = [1, 2, 3];
    var a2 = a1.pop();
    a1 //[1, 2]
    a2 //3
    复制代码

> 注意push和pop方法执行之后的返回值

### shift & unshift ###

shift() 方法删除数组的 第一个 元素，并返回这个元素。该方法会改变数组的长度。

var a1 = [1, 2, 3];
    var a2 = a1.shift();
    a1 // [2, 3]
    a2 // 1
    复制代码

unshift() 方法在数组的开头添加一个或者多个元素，并返回数组新的 length 值。

var a1 = [1, 2, 3];
    var a2 = a1.unshift(4);
    a1 //[4, 1, 2, 3]
    a2 //4
    复制代码

### slice & splice ###

slice() 方法会浅复制（shallow copy）数组的一部分到一个新的数组，并返回这个新数组。

参数包括拷贝的初识位置，结束位置（左闭右开），与 splice 有区别。

*  返回浅拷贝后的新数组；
 *  不会改变原数组。

var a1 = [1, 2, 3, 4, 5];
    var a2 = a1.slice(1, 3);
    a1 //[1, 2, 3, 4, 5]
    a2 //[2, 3]
    复制代码

splice() 方法用新元素替换旧元素，以此修改数组的内容。

参数： 第一个参数表示初始位置，第二个参数表示分割长度，第三个参数及以后表示分割后在分割处添加新元素。

*  返回分割的元素组成的数组；
 *  会对数组进行修改，原数组会减去分割数组。

var a1 = [1, 2, 3, 4];
    var a2 = a1.splice(1, 2);
    a1 //[1, 4]
    a2 //[2, 3]
    a1 = [1, 2, 3, 4];
    a2 = a1.splice(1, 2, 5, 6);
    a1 //[1, 5, 6, 4]
    复制代码

## ES6中新增的数组方法 ##

### find ###

如果数组中某个元素满足测试条件，find() 方法就会返回满足条件的第一个元素，如果没有满足条件的元素，则返回 undefined。

function isBigEnough(element, index, array) {
      return (element >= 10);
    }
    var a1 = [8, 18, 14];
    var num = a1.find(isBigEnough); //18
    复制代码

### includes ###

includes() 方法用来判断当前数组是否包含某指定的值，如果是，则返回 true，否则返回 false。

该函数接受两个参数，第二个参数表示开始查找位置，起始位置为 0。这个方法与 indexOf 方法最大的区别不仅在于返回值一个是索引，一个是布尔值，indexOf 方法使用的是 === 来判断，无法判断 NaN 情况，而 includes 可以判断。

var a1 = [1, NaN];
    a1.indexOf(NaN);//-1
    a1.includes(NaN);//true
    复制代码

### fill ###

使用 fill() 方法，可以将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值。

参数：第一个参数 value 表示要填充到值，后面两个 start 和 end 表示开始和结束位置，可选，且左闭右开。

*  返回修改了的原数组；
 *  会对数组进行修改，且是浅拷贝；
 *  参数可负，负值时倒推，且 end 为空表示数组长度。

var a1 = [1, 2, 3, 4, 5];
    var a2 = a1.fill(6, 1, 4);
    a1 //[1, 6, 6, 6, 5]
    a2 //[1, 6, 6, 6, 5]
    a1 === a2; //true
    复制代码

### copyWithin() ###

copyWithin() 方法会浅拷贝数组的部分元素到同一数组的不同位置，且不改变数组的大小，返回该数组。

var a1 = [1, 2, 3, 4, 5];
    var a2 = a1.copyWithin(0, 2, 4);
    a1 //[3, 4, 3, 4, 5]
    a2 //[3, 4, 3, 4, 5]
    a1 === a2; //true
    复制代码

### entries() & keys() & values() ###

都可以用于遍历数组，且都返回一个遍历器对象，可以用`for...of`循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
      console.log(index); //0 1
    }
    
    for (let elem of ['a', 'b'].values()) {
      console.log(elem); // 'a' 'b'
    }
    
    for (let [index, elem] of ['a', 'b'].entries()) {
      console.log(index, elem); // 0 "a", 1 "b"
    } 
    复制代码

### flat() & flatMap() ###

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

[1, 2, [3, 4]].flat()
    // [1, 2, 3, 4]
    复制代码

## 参考： ##

[MDN中的数组方法][MDN]

[Array数组方法][Array]

[ES6入门-阮一峰][ES6_-]

[渔人的博客][Link 1]

转载于:https://juejin.im/post/5caa0ff4e51d452b327a7d59

[MDN]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FArray
[Array]: https://link.juejin.im?target=http%3A%2F%2Fcaibaojian.com%2Fjs-array-object-method.html%3Futm_medium%3Dhao.caibaojian.com%26amp%3Butm_source%3Dhao.caibaojian.com
[ES6_-]: https://link.juejin.im?target=http%3A%2F%2Fes6.ruanyifeng.com%2F%3Fsearch%3Dmap%26amp%3Bx%3D0%26amp%3By%3D0%23docs%2Farray%23%25E6%2595%25B0%25E7%25BB%2584%25E5%25AE%259E%25E4%25BE%258B%25E7%259A%2584-copyWithin
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fsongjz.coding.me%2Fblog%2F