数组常见的方法

1、push() 

概念：将指定的元素添加到数组的末尾，添加一个或多个元素，并返回新的数组长度。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      let result = arr.push(1, 2, 3);
      console.log(result); // 输出结果为新数组长度：12
      console.log(arr); // 输出结果为新数组： [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3]

2、pop() 

概念：从数组中删除最后一个元素，并返回该元素的值，此会更改数组的长度。

 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      let result = arr.pop();
      console.log(result); // 输出结果为删除元素：9
      console.log(arr); // 输出结果为新数组：[1, 2, 3, 4, 5, 6, 7, 8]

3、shift() 

概念：从数组中删除第一个元素，并返回该元素的值。这样会更改原数组的长度。

   var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      let result = arr.shift();
      console.log(result); // 输出结果为删除元素：1
      console.log(arr); // 输出结果为新数组：  [2, 3, 4, 5, 6, 7, 8, 9]

4、unshift() 

概念：将指定元素添加到数组的开头，添加一个或多个元素，并返回修改后数组的新长度。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      let result = arr.unshift(1, 1, 1);
      console.log(result); // 输出结果为数组长度：12
      console.log(arr); // 输出结果为新数组：[1, 1, 1, 1, 2, 3, 4, 5, 6, 7, 8, 9]

5、slice()

概念：截取数组的一部分，返回一个新的数组，不改变原数组。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      let result = arr.slice(1, 3);
      console.log(result); // 输出结果为截取的元素：[2, 3]
      console.log(arr); // 输出结果为原数组：[ 1, 2, 3, 4, 5, 6, 7, 8, 9]

6、splice()

概念：从数组中删除、替换或插入元素，并返回被删除的元素组成的数组，原数组改变。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      //  删除
      let result = arr.splice(1, 3);
      console.log(result); // 输出结果为截取的元素：[2, 3, 4]
      console.log(arr); // 输出结果为新数组： [1, 5, 6, 7, 8, 9]

  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      // 添加
      let add = arr.splice(1, 0, "maybe");
      console.log(add); // 输出结果截取的元素： []
      console.log(arr); // 输出结果为新数组： [1, 'maybe', 2, 3, 4, 5, 6, 7, 8, 9]

 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      // 替换
      let change = arr.splice(4, 1, "change");
      console.log(change); // 输出结果被替换的元素：[5]
      console.log(arr); // 输出结果为新数组： [1, 2, 3, 4, 'change', 6, 7, 8, 9]

7、concat() 

概念：用于合并两个或多个数组。此不会更改现有数组，而是返回一个新数组。

  var arr1 = [1, 2, 3, 4];
  var arr2 = [5, 6, 7, 8];
  var arr3 = arr1.concat(arr2);
      console.log(arr3);  //输出结果为合并后的新数组：[1, 2, 3, 4, 5, 6, 7, 8]

8、join() 

概念：将一个数组的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

 var arr = ["a", "b", "c", "d", "e", "f", "g"];
      let result = arr.join();
      console.log(result); //输出结果为返回的字符串： a,b,c,d,e,f,g   默认是以逗号分割
      let result1 = arr.join("-");
      console.log(result1);  //输出结果是以自定义-分割的字符串：a-b-c-d-e-f-g

9、reverse() 

概念：颠倒数组中元素的顺序，原地修改数组，并返回同一数组的引用。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。

  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      let result = arr.reverse();
      console.log(result); //输出结果为翻转后的新数组： [9, 8, 7, 6, 5, 4, 3, 2, 1]
      console.log(arr); //输出结果原数组也发生改变： [9, 8, 7, 6, 5, 4, 3, 2, 1]

10、sort() 

概念：对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照按照字符串的 Unicode 编码升序排序。

 var arr = [10000, 3, "hello", 5, 6, "n"];
      let result = arr.sort();
      console.log(result); //输出结果为排序后的数组： [3, 5, 6, 'a', 'hello', 'n']

11、filter()

概念：根据指定条件过滤数组的元素，并返回一个新的数组。

    var arr = ["10000", 3, "hello", 5, 6, "n"];
      let result = arr.filter((arr) => arr.length > 1);
      console.log(result); //输出结果为满足条件的数组： ['10000', 'hello']
      console.log(arr); //输出原数组不发生改变： ['10000', 3, 'hello', 5, 6, 'n']

12、map() 

概念：创建一个新数组，这个新数组由原数组中的每个元素执行指定操作组成。

 var arr = [1, 2, 3, 4, 5];
      let result = arr.map((x) => x * x);
      console.log(result); //输出结果为执行条件后的新数组：[1, 4, 9, 16, 25]
      console.log(arr); //输出原数组不发生改变： [1, 2, 3, 4, 5]

13、reduce() 

概念：对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

 var arr = [1, 2, 3, 4, 5];
      let result = arr.reduce((x, y) => x + y, 0);
      console.log(result); //输出结果为所有元素之和：15
      console.log(arr); //输出结果为原数组：[1, 2, 3, 4, 5]

14、forEach() 

概念：对数组的每个元素执行一次给定的函数，没有返回值。

  var arr = [1, 2, 3, 4, 5];
      arr.forEach((el) => {
        console.log(arr); //输出结果为五次原数组： [1, 2, 3, 4, 5]
      });

15、find() 

概念：返回数组中指定条件在数组中查找第一个满足条件的元素，并返回该元素，否则返回 undefined。

    var arr = [1, 2, 3, 4, 5];
      let result = arr.find((el) => el > 3);
      console.log(result); //输出结果为第一个满足条件的元素：4
      console.log(arr); //输出结果为原数组：[1, 2, 3, 4, 5]

16、indexOf() 

概念：返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。

var arr = [1, 2, 3, 4, 5];
      console.log(arr.indexOf(2)); //输出结果为找到元素所在位置的下标：1
      console.log(arr.indexOf(0)); //输出结果为不存在元素：-1

17、includes()

概念：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

   var arr = [1, 2, 3, 4, 5];
      console.log(arr.includes(2)); //输出结果为找到元素：true
      console.log(arr.includes(0)); //输出结果为不存在元素：false

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array