JavaScript语法引用数据类型之Array(数组)实例方法详解

一、重要方法

1、map()

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

语法：

     let new_array = arr.map(function callback(currentValue, index, array) { 
                // Return element for new_array 
              }[, thisArg])

参数：

     callback
              生成新数组元素的函数，使用三个参数：
     currentValue
              callback 的第一个参数，数组中正在处理的当前元素。
     index
             callback 的第二个参数，数组中正在处理的当前元素的索引。
     array
             callback 的第三个参数，map 方法被调用的数组。
     thisArg
             可选的。执行 callback 函数时 使用的this 值。

返回值:
一个新数组，每个元素都是回调函数的结果。

代码实现：

<script type="text/javascript">
            //      求数组中每个元素的平方根
            //           下面的代码创建了一个新数组， 值为原数组中对应数字的平方根。

            var numbers = [1, 4, 9];
            var roots = numbers.map(Math.sqrt);
            // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

            //使用 map 重新格式化数组中的对象
            //以下代码将一个包含对象的数组用以创建一个包含新重新格式化对象的新数组。

            var kvArray = [{
                key: 1,
                value: 10
            }, {
                key: 2,
                value: 20
            }, {
                key: 3,
                value: 30
            }];

            var reformattedArray = kvArray.map(function(obj) {
                var rObj = {};
                rObj[obj.key] = obj.value;
                return rObj;
            });

            // reformattedArray 数组为： [{1: 10}, {2: 20}, {3: 30}], 

            // kvArray 数组未被修改: 
            // [{key: 1, value: 10}, 
            //  {key: 2, value: 20}, 
            //  {key: 3, value: 30}]

            //用一个仅有一个参数的函数来mapping一个数字数组
            //下面的代码表示了当函数需要一个参数时map的工作方式。 这个参数会遍历原始数组中的元素。

            var numbers = [1, 4, 9];
            var doubles = numbers.map(function(num) {
                return num * 2;
            });

            // doubles数组的值为： [2, 8, 18]
            // numbers数组未被修改： [1, 4, 9]

            //一般的 map 方法
            //下面的例子演示如何在一个 String 上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组：

            var map = Array.prototype.map
            var a = map.call("Hello World", function(x) {
                    return x.charCodeAt(0);
                })
                // a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

            //反转字符串
            var str = '12345';
            Array.prototype.map.call(str, function(x) {
                return x;
            }).reverse().join('');

            // 输出: '54321'
</script>

2、reduce()
reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。
语法:

        arr.reduce(callback[, initialValue])

参数:
callback
执行数组中每个值的函数，包含四个参数：
accumulator
累加器累加回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（如下所示）。

currentValue
数组中正在处理的元素。
currentIndex可选
数组中正在处理的当前元素的索引。 如果提供了initialValue，则索引号为0，否则为索引为1。
array可选
调用reduce的数组
initialValue可选
用作第一个调用 callback的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

返回值
函数累计处理的结果

代码示例：

<script type="text/javascript">
        //      数组去重
        var arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
        var result = arr.sort().reduce(function(init, current) {
            if(init.length === 0 || init[init.length - 1] !== current) {
                init.push(current);
            }
            return init;
        }, []);
        console.log(result); //[1,2,3,4,5]
    </script>

3、splice()
splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。
语法：

 array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

参数：
start​
指定修改的开始位置（从0计数）。
deleteCount 可选
整数，表示要移除的数组元素的个数。
item1, item2, ... 可选
要添加进数组的元素,从start 位置开始。
如果不指定，则 splice() 将只删除数组元素。

返回值
由被删除的元素组成的一个数组。
如果只删除了一个元素，则返回只包含一个元素的数组。
如果没有删除元素，则返回空数组。

代码示例：

<script type="text/javascript">
        //      从第2位开始删除0个元素，插入“drum”
        var myFish = ["angel", "clown", "mandarin", "surgeon"];
        //从第 2 位开始删除 0 个元素，插入 "drum" 
        var removed = myFish.splice(2, 0, "drum");
        //运算后的 myFish:["angel", "clown", "drum", "mandarin", "surgeon"] 
        //被删除元素数组：[]，没有元素被删除

        //从第3位开始删除1个元素
        console.log(removed)
        var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
        var removed = myFish.splice(3, 1);
        //运算后的myFish：["angel", "clown", "drum", "sturgeon"]
        //被删除元素数组：["mandarin"]
        console.log(removed)

        //从第2位开始删除1个元素，然后插入“trumpet”
        var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
        var removed = myFish.splice(2, 1, "trumpet");
        //运算后的myFish: ["angel", "clown", "trumpet", "surgeon"] 
        //被删除元素数组：["drum"]
        console.log(removed)

        //从第0位开始删除2个元素，然后插入"parrot","anemone"和"blue"
        var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
        var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
        // 运算后的myFish： ["parrot", "anemone", "blue", "trumpet", "sturgeon"] 
        // 被删除元素数组：["angel", "clown"]
        console.log(removed)

        //从第2位开始删除2个元素
        var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
        var removed = myFish.splice(myFish.length - 3, 2);
        // 运算后的myFish： ["parrot", "anemone", "sturgeon"] 
        // 被删除元素数组：["blue", "trumpet"]
        console.log(removed)

        //从第2位开始删除所有元素
        var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
        var removed = myFish.splice(2);
        // 运算后的myFish ：["angel", "clown"] 
        // 被删除的元素数组： ["mandarin", "sturgeon"]
        console.log(removed)
    </script>

二、其它方法

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

<script type="text/javascript">
        //forEach() 方法对数组的每个元素执行一次提供的函数。
        var arr =["a","b","c"];
        arr.forEach(function(item,index){
            console.log(item,index,this);
        },{name:"damu"})

        //参数1:callback
                /*
                为数组中每个元素执行的函数，该函数接收三个参数：
                currentValue(当前值):数组中正在处理的当前元素。
                index(索引):数组中正在处理的当前元素的索引。
                array:forEach()方法正在操作的数组。
                */
        //参数2:thisArg
            /*可选参数。当执行回调 函数时用作this的值。*/

        //返回值：undefined

        //是否影响老数组：由callback决定
    </script>

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

<script type="text/javascript">
        //every() 方法测试数组的所有元素是否都通过了指定函数的测试
        var arr =[1,2,3,4,5,6,7,8];
        var result = arr.every(function(item,index){
            if(item<9){
                return true;
            }
        })
        console.log(result);

        //参数1:callback
            /*为数组中每个元素执行的函数，该函数接收三个参数：
                currentValue(当前值):数组中正在处理的当前元素。
                index(索引):数组中正在处理的当前元素的索引。
                array:forEach()方法正在操作的数组。*/
        //参数2:thisArg
            /*可选参数。当执行回调 函数时用作this的值。*/

        //返回值：true false

        //是否影响老数组：不影响


    </script>

3、some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

<script type="text/javascript">
        //some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。
        var arr =[1,2,3,4,5,6,7,8];
        var result = arr.some(function(item,index){
            if(item > 7){
                return true;
            }
        })

        console.log(result);

        //参数1:callback
            /*为数组中每个元素执行的函数，该函数接收三个参数：
                currentValue(当前值):数组中正在处理的当前元素。
                index(索引):数组中正在处理的当前元素的索引。
                array:forEach()方法正在操作的数组。*/
        //参数2:thisArg
            /*可选参数。当执行回调 函数时用作this的值。*/

        //返回值：true false

        //是否影响老数组：不影响

        //Polyfill:衬垫代码
        if (!Array.prototype.some){
          Array.prototype.some = function(fun /*, thisArg */)
          {
            'use strict';

            if (this === void 0 || this === null)
              throw new TypeError();

            var t = Object(this);
            var len = t.length >>> 0;
            if (typeof fun !== 'function')
              throw new TypeError();

            var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
            for (var i = 0; i < len; i++)
            {
              if (i in t && fun.call(thisArg, t[i], i, t))
                return true;
            }

            return false;
          };
        }
    </script>

4、filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

<script type="text/javascript">
        //filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 
        var arr =[1,2,3,4,5,6,7,8];
        var result = arr.filter(function(item,index){
            if(item > 7){
                return true;
            }
        })
        console.log(result);

        //参数1:callback
            /*为数组中每个元素执行的函数，该函数接收三个参数：
                currentValue(当前值):数组中正在处理的当前元素。
                index(索引):数组中正在处理的当前元素的索引。
                array:forEach()方法正在操作的数组。*/
        //参数2:thisArg
            /*可选参数。当执行回调 函数时用作this的值。*/

        //返回值：  一个新的通过测试的元素的集合的数组

        //是否影响老数组：不影响

        //Polyfill:衬垫代码
        if (!Array.prototype.filter){
          Array.prototype.filter = function(fun /* , thisArg*/)
          {
            "use strict";

            if (this === void 0 || this === null)
              throw new TypeError();

            var t = Object(this);
            var len = t.length >>> 0;
            if (typeof fun !== "function")
              throw new TypeError();

            var res = [];
            var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
            for (var i = 0; i < len; i++)
            {
              if (i in t)
              {
                var val = t[i];

                // NOTE: Technically this should Object.defineProperty at
                //       the next index, as push can be affected by
                //       properties on Object.prototype and Array.prototype.
                //       But that method's new, and collisions should be
                //       rare, so use the more-compatible alternative.
                if (fun.call(thisArg, val, i, t))
                  res.push(val);
              }
            }

            return res;
          };
        }
    </script>

5、sort() 方法使用in-place算法对数组的元素进行排序，并返回数组。
默认排序顺序是根据字符串Unicode码点。

<script type="text/javascript">
        /*sort() 方法使用in-place算法对数组的元素进行排序，并返回数组。
        默认排序顺序是根据字符串Unicode码点。*/
        var arr =[1,25,34,14,26,16,47,28];
        var result = arr.sort(function(a,b){
            //从小到大
            //return a-b;
            //从大到小
            return b-a;
        })
        console.log(result);
        console.log(arr);
        console.log(arr == result)

        //参数compareFunction 可选。
            /*
                用来指定按某种顺序进行排列的函数。如果省略，
                元素按照转换为的字符串的各个字符的Unicode位点进行排序。
            */

        //返回值：返回排序后的数组。

        //是否影响老数组： 影响 原数组已经被排序后的数组代替。

    </script>

6、reverse 方法颠倒数组中元素的位置，并返回该数组的引用

<script type="text/javascript">
        //reverse 方法颠倒数组中元素的位置，并返回该数组的引用
        //语法： arr.reverse()
        //参数：无
        //返回值：该数组的引用。 
        //是否影响老数组：影响

        var arr =[1,2,3,4];
        var result = arr.reverse();
        console.log(result,arr);
        console.log(arr == result )


    </script>

7、map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

<script type="text/javascript">
        //map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
        var numbers = [1, 4, 9];
        var roots = numbers.map(Math.sqrt);


        //格式化数组中的对象
        // reformattedArray 数组为： [{1: 10}, {2: 20}, {3: 30}],
        var kvArray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}];
        var reformattedArray = kvArray.map(function(obj) { 
           var rObj = {};
           rObj[obj.key] = obj.value;
           return rObj;
        });



        //参数1:callback
            /*为数组中每个元素执行的函数，该函数接收三个参数：
                currentValue(当前值):数组中正在处理的当前元素。
                index(索引):数组中正在处理的当前元素的索引。
                array:forEach()方法正在操作的数组。*/
        //参数2:thisArg
            /*可选参数。当执行回调 函数时用作this的值。*/

        //返回值：一个新数组，每个元素都是回调函数的结果。

        //是否影响老数组：不影响

    </script>

8、slice() 方法返回一个从开始到结束（不包括结束，左闭右开）选择的数组的一部分浅拷贝到一个新数组对象

<script type="text/javascript">
        //slice() 方法返回一个从开始到结束（不包括结束，左闭右开）选择的数组的一部分浅拷贝到一个新数组对象
        var arr =[1,25,34,14,26,16,47,28];
        arr.slice(2, 6);
        //参数
            /*
                begin 可选
                end   
                slice(begin,end):[begin,end)
            */

        //返回值：一个含有提取元素的新数组

        //是否影响老数组：不影响

        var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
        console.log(animals);
        console.log(animals.slice(2));

        console.log(animals.slice(2, 4));

        console.log(animals.slice(1, 5));

    </script>

9、splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容

<script type="text/javascript">
        //splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容
        var arr =[1,25,34,14,26,16,47,28];
        //arr.splice(0)//全删
        //arr.splice(0,2)

        arr.splice(0,2,1,2,3)
        console.log(arr);
        //参数
            /*
                start           从start开始删
                deleteCount     删几个
                item列表          删完之后在相同位置处加哪几个
            */


        //返回值：由被删除的元素组成的一个数组

        //是否影响老数组：影响


    </script>

10、reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。

<script type="text/javascript">
        //reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。
        //数组里所有值的和
        var arr =[2, 1, 2, 3];
        var sum = arr.reduce(function (a, b) {
          return a + b;
        },0);
        console.log(sum);
        console.log(arr);

        //参数1:callback
            /*
             为数组中每个元素执行的函数，该函数接收三个参数：
                accumulator(当前值):累加器累加回调的返回值; 它是上一次调用回调时返回的累积值
                currentValue:数组中正在处理的元素。
                currentIndex可选:数组中正在处理的当前元素的索引。 如果提供了initialValue，则索引号为0，否则为索引为1。
                array可选：调用reduce的数组。
            */
        //参数2:initialValue
            /*
                用作第一个调用 callback的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。
                在没有初始值的空数组上调用 reduce 将报错。
            */

        //返回值：  一个新的通过测试的元素的集合的数组

        //是否影响老数组：不影响

        //Polyfill:衬垫代码
        if (!Array.prototype.reduce) {
          Object.defineProperty(Array.prototype, 'reduce', {
            value: function(callback /*, initialValue*/) {
              if (this === null) {
                throw new TypeError( 'Array.prototype.reduce ' + 
                  'called on null or undefined' );
              }
              if (typeof callback !== 'function') {
                throw new TypeError( callback +
                  ' is not a function');
              }
              var o = Object(this);
              var len = o.length >>> 0; 
              var k = 0; 
              var value;
              if (arguments.length >= 2) {
                value = arguments[1];
              } else {
                while (k < len && !(k in o)) {
                  k++; 
                }
                if (k >= len) {
                  throw new TypeError( 'Reduce of empty array ' +
                    'with no initial value' );
                }
                value = o[k++];
              }
              while (k < len) {
                if (k in o) {
                  value = callback(value, o[k], k, o);
                }
                k++;
              }
              return value;
            }
          });
        }
    </script>

11、push() 方法将一个或多个元素添加到数组的末尾，并返回新数组的长度

<script type="text/javascript">
        //push() 方法将一个或多个元素添加到数组的末尾，并返回新数组的长度
        //语法：arr.push(element1, ..., elementN)
        //参数:被添加到数组末尾的元素
        //返回值：当调用该方法时，新的 length 属性值将被返回
        //是否影响老数组：影响

        var arr =[1,2,3,4];
        var result = arr.push(5);
        console.log(result,arr);



    </script>

12、unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度

<script type="text/javascript">
        //unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度
        //语法：arr.unshift(element1, ..., elementN)
        //参数：要添加到数组开头的元素
        //返回值：当一个对象调用该方法时，返回其 length 属性值 
        //是否影响老数组：影响

        var arr =[1,2,3,4];
        var result = arr.shift();
        console.log(result,arr);


    </script>

13、pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度

<script type="text/javascript">
        //pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度
        //语法：arr.pop()
        //参数：无
        //返回值：从数组中删除的元素(当数组为空时返回undefined)
        //是否影响老数组：影响

        var arr =[1,2,3,"abc"];
        var result = arr.pop();
        console.log(result,arr);


    </script>

14、shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度

<script type="text/javascript">
        //shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度
        //语法：arr.shift()
        //参数：无
        //返回值：从数组中删除的元素; 如果数组为空则返回undefined 。 
        //是否影响老数组：影响

        var arr =["abc",2,3,4];
        var result = arr.shift();
        console.log(result,arr);


    </script>

15、concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

<script type="text/javascript">
        //concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
        //语法：arr.concat(arr1[, arr2[, ...[, arrN]]])
        //参数：valueN-->待链接的数组
        //返回值：新的 Array 实例
        //是否影响老数组：不影响

        var arr =[1,2,1,4];
        var arr1=[5];
        var arr2=[6];
        var result = arr.concat(arr1,arr2);
        console.log(result,arr,arr1,arr2);


    </script>

16、indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

<script type="text/javascript">
        //indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
        //语法：arr.indexOf(searchElement)
        //参数：searchElement-->要查找的元素
        //返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
        //是否影响老数组：不影响

        var arr =[1,2,1,4];
        var result = arr.indexOf(1);
        console.log(result,arr);


    </script>

17、lastIndexOf() 方法返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1

<script type="text/javascript">
        //lastIndexOf() 方法返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1
        //语法：arr.lastIndexOf(searchElement)
        //参数：searchElement-->要查找的元素
        //返回值：数组中最后一个元素的索引，如未找到返回-1
        //是否影响老数组：不影响

        var arr =[1,2,1,4];
        var result = arr.lastIndexOf(1);
        console.log(result,arr);


    </script>

18、join() 方法将一个数组的所有元素连接成一个字符串并返回这个字符串

<script type="text/javascript">
        //join() 方法将一个数组的所有元素连接成一个字符串并返回这个字符串
        //语法：arr.join(separator)
        //参数：separator ---> 指定一个字符串来分隔数组的每个元素。如果省略()，数组元素用逗号分隔。默认为 ","。
        //返回值：一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串
        //是否影响老数组：不影响

        var arr =[1,2,1,4];
        var result = arr.join("&");
        console.log(result,arr);


    </script>

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

<script type="text/javascript">
        //toString() 返回一个字符串，表示指定的数组及其元素。
        //语法：arr.toString()
        //参数：无
        //返回值：返回一个字符串。 
        //是否影响老数组：影响

        var arr =[1,2,3,4];
        var result = arr.toString();
        console.log(result,arr);


    </script>