数组常用的20个方法

 

1.join( )

用于把数组的所有元素连接并转换成字符串。
默认用逗号作为分隔符。
如果分隔符是空字符串，则所有元素之间没有任何字符。

    var arr = [1, 2, 3];
    console.log(arr.join()); // 返回 1,2,3
    console.log(arr.join('')); // 返回 123
    console.log(arr.join('-')); // 返回 1-2-3

2. map( )

返回一个新的数组,有返回值。
并且此方法不会改变原数组。

var arr = [1, 2, 3, 4];
    var arr2 = arr.map((item,index,array) => {
        // item 是遍历的数组内容  
        // index 是对应元素在数组中的下标 
        // array 是数组本身
        return item * 2
    });
    console.log(arr); // 返回 [1, 2, 3, 4]
    console.log(arr2); // 返回 [2, 4, 6, 8]

3. forEach( )

对数组进行遍历循环,没有返回值。

    var arr = [11, 22, 33, 44, 55, 66];
    var arr2 = arr.forEach((item, index, array) => {
        // item是遍历的数组内容 
         // index是对应元素在数组中的下标  
        // array是数组本身
        console.log(item, index, array);
        // 打印结果:
        // 11 0 [11, 22, 33, 44, 55, 66]
        // 22 1 [11, 22, 33, 44, 55, 66]
        // 33 2 [11, 22, 33, 44, 55, 66]
        // 44 3 [11, 22, 33, 44, 55, 66]
        // 55 4 [11, 22, 33, 44, 55, 66]
        // 66 5 [11, 22, 33, 44, 55, 66]
    });

4. filter( )

有过滤遍历功能，返回满足过滤条件的元素，并组成数组。

    var arr = [1, 2, 3, 4, 5, 6, 7, 8];
    var arr2 = arr.filter((item, index) => {
        return item > 5 
    });
    console.log(arr2); // 返回值 [6, 7, 8]

5. push( )

从数组的末尾向数组添加元素，可以添加一个或者多个元素。

    var arr = [1];
    arr.push(2);
    console.log(arr); // 返回值 [1, 2]
    arr.push(3, 4, 5);
    console.log(arr); // 返回值 [1, 2, 3, 4, 5]

6. pop( )

用于删除数组的最后一个元素,并返回删除的元素。

    var arr = ["Lily", "lucy", "Tom"];
    var arr2 = arr.pop();
    console.log(arr); // 返回值 ['Lily', 'lucy']
    console.log(arr2); // 返回值 Tom

7. shift( ) 

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

    var arr = ["Tom", "Jack", "Sean"];
    var arr2 = arr.shift();
    console.log(arr); // 返回值 ['Jack', 'Sean']
    console.log(arr2); // 返回值 Tom

8. unshift( ) 

可以向数组的开头添加一个或者多个元素，并返回新的数组长度。

    var arr = ["Tom", "Jack", "Sean"];
    var arr2 = arr.unshift('lisi');
    console.log(arr); // 返回值 ['lisi', 'Tom', 'Jack', 'Sean'];

    var arr3 = arr.unshift('zhaoliu', 'wangwu');
    console.log(arr); // 返回值  ['zhaoliu', 'wangwu', 'lisi', 'Tom', 'Jack', 'Sean'];

    console.log(arr2, arr3); // 返回值 4 6

9.some( )

用于判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。否侧就会返回false。
**注意： some()接收一个回调函数作为参数，这个回调函数需要有返回值，some(callback);
callback默认有三个参数，分别为 value，index，self。

    var arr = [1, 2, 3, 4, 5, 6];
    var bool = arr.some((value, index, self) => {
        // value 是遍历的数组内容
        // index 是对应元素在数组中的下标 
        // self 是数组本身
        return value > 5
    })
    console.log(bool) //返回值 true; 

    var bool2 = arr.some((value, index, self) => {
        return value > 6
    })
    console.log(bool2) //返回值 false;     

10. sort( )

用于对数组的元素进行排序。
排序顺序可以是数字或者字母，并按升序或降序进行排序。
默认排序顺序为升序。

    var arr = [1, 9, 5, 3, 7];
    var arr2 = ['z', 'a', 'f', 'b', 'h', 'x'];
    // 默认排序
    console.log(arr.sort()); // 返回值 [1, 3, 5, 7, 9]
    console.log(arr2.sort()); // 返回值 ['a', 'b', 'f', 'h', 'x', 'z']

11.slice( ) 

通过索引位置获取新的数组。
**原始数组不会被改变。
.slice(start,end) 可以接受一或两个参数（参数代表了数组元素的索引），即要返回元素的起始位置和结束位置。

    const arr = ['ant', 'bison', 'camel', 'duck', 'elephant'];

(1)在只有一个参数的情况下， .slice()方法返回从该参数指定位置开始到当前数组末尾的所有元素。

    console.log(arr.slice(2)); // 返回值 ["camel", "duck", "elephant"]

(2)如果有两个参数，该方法返回起始位置和结束位置之间的元素，但不包括结束位置的元素。

    console.log(arr.slice(1, 5)); // 返回值 ["bison", "camel", "duck", "elephant"]

(3)如果参数为负数：
第1个参数 - 如果是负数，则表示从数组尾部开始算起 -1指最后一个元素，-2 指倒数第二个元素，以此类推。
第2个参数 - 如果是负数，则表示从数组尾部开始算起 -1指最后一个元素，-2指倒数第二个元素，以此类推。

    console.log(arr.slice(-1)); // 返回值 ['elephant']
    console.log(arr.slice(1, -2)); // 返回值 ['bison', 'camel']
    console.log(arr); // 返回值 ['ant', 'bison', 'camel', 'duck', 'elephant'] (原数组没变)

12. splice()

是很强大的数组方法，可以实现删除、插入和替换。
**会改变原始数组。

(1)、删除元素,并返回删除的元素

     var arr = [1, 3, 5, 7, 9, 11];
     var arrRemoved = arr.splice(0, 2);
     console.log(arr);   // 返回值 [5, 7, 9, 11]
     console.log(arrRemoved);   // 返回值 [1, 3]

(2)、向指定索引处添加元素

    var array1 = [22, 3, 31, 12];
    array1.splice(1, 0, 12, 35);
    console.log(array1); // 返回值 [22, 12, 35, 3, 31, 12]

(3)、替换指定索引位置的元素

     const array1 = [22, 3, 31, 12];
     array1.splice(1, 1, 8);
     console.log(array1);  // 返回值 [22, 8, 31, 12]

13. reverse()

用于颠倒数组中元素的顺序。
**原数组会改变。

    var arr = [13, 24, 51, 3];
    console.log(arr.reverse());   // 返回值 [3, 51, 24, 13]
    console.log(arr);   //返回值 [3, 51, 24, 13] (原数组改变)

14. concat( )

用于合并两个或多个数组。
该方法不会改变原数组，而是返回一个新数组。

(1)两个数组合并

    var arr = [1, 3, 5, 7];
    var brr = [11, 13]
    var arrCopy = arr.concat(brr);
    console.log(arrCopy);   // 返回值 [1, 3, 5, 7, 11, 13]
    console.log(arr);   // [1, 3, 5, 7](原数组未被修改)

(2)多个数组合并

    const num1 = [1, 2, 3];
    const num2 = [4, 5, 6];
    const num3 = ['a', 'b', 'c'];
    const numbers = num1.concat(num2, num3);
    console.log(numbers);  // 返回值 [1, 2, 3, 4, 5, 6, 'a', 'b', 'c']

15.every( )

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

    const everyArr = [1, 30, 39, 29, 10, 13];
    const everyArrisBlow = everyArr.every((item) => {
        return item > 10 // 检测所有元素是否都大于10
    });
    console.log(everyArrisBlow); // 返回值 false

16. toString()

用于方法返回表示对象的字符串。

    function dog(name){
        this.name=name;
    }
    const dog1=new dog('Gabby');
    dog.prototype.toString=function dogToString(){
        return `${this.name}`
    };
    console.log(dog1.toString(),'toString数组使用方法');

17.indexof()

用于根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，则返回-1，如果找到了指定的数据则返回该数据的索引。

    const indexofarr = ['ant', 'camel', 'bison', 'duck', 'bison'];
    console.log(indexofarr.indexOf('bison')); //返回值 2
    console.log(indexofarr.indexOf('bison', 3)); //返回值 4

    //如果不存在返回-1
    console.log(indexofarr.indexOf('giraffe')); //返回值 -1   

18. lastIndexof()

用于从数组的末尾开始向前查找。

    var lastIndexOfarr = [1, 3, 4, 7, 7, 5, 3, 1];
    console.log(lastIndexOfarr.lastIndexOf(5, 4), 'lastIndexOf数组使用方法')

19.reduce() 

用于对数组的每一个元素执行 依次传入前一个元素计算返回值。

    const reducearr = [1, 2, 3, 4];
    const initialValue = 0;
    const sumwithinitail = reducearr.reduce(
        (prevvalue, currentvalue) => prevvalue + currentvalue, initialValue
    );
    console.log(sumwithinitail, 'reduce数组使用方法');

20.find（）

1、find返回数组中满足条件的第一个元素的值，否则返回undefined。

2、find方法对数组中的每个元素执行callback函数，并返回true的第一个元素值。

3、find不会改变原数组。

Array.prototype._find = function(callback){
  let res = undefined
  for(var i=0;i<this.length;i++){
    if(callback(this[i],i,this)){
      res = this[i]
      break;
    }
  }
  return res
}