＜JavaScript＞中数组的方法(超全超有用,代码理解,一步到位~)

    <script>//indexOf
        var arr = ["a", "b", "c", "d", "e"];
        console.log(arr.indexOf("a"));//0
        console.log(arr.indexOf("c"));//2
        console.log(arr.indexOf("h"));//-1
    </script>

lastIndexOf()

语法: 数组名.lastIndexOf("元素")

目的:用来查找元素在数组中最后一次出现的下标(索引).若没有找到该元素则返回-1

代码:

    <script>//lastIndexOf
        var arr = ["a", "b", "c", "a", "b", "c", "d", "e"];
        console.log(arr.lastIndexOf("a"));//3
        console.log(arr.lastIndexOf("c"));//5
        console.log(arr.lastIndexOf("h"));//-1
    </script>

2.数组与字符串转换

(1)数组转换成字符串 join()和 toString()

join()

语法: 数组名.join("连接符")

目的:返回一个包含数组所有元素的字符串，各元素之间用连接符分隔开,若没有设置连接符,则默认逗号分隔开。

toString()

语法: 数组名.toString()

目的:返回一个包含数组所有元素的字符串，各元素之间用逗号分隔开。

代码:

    <script>//join()
        var arr =["a", "b", "c", "a", "b", "c", "d", "e"];
        var arr_str = arr.join("-");
        console.log(arr_str);//a-b-c-a-b-c-d-e
        console.log(typeof arr_str);//string
        arr_str = arr.toString();
        console.log(arr_str);//a,b,c,a,b,c,d,e
        console.log(typeof arr_str);//string
    </script>

(2)字符串转换成数组 split('分隔符')

split('分隔符')

语法: 数组名.split('分隔符')

目的:将字符串通过分隔符分成几部分，并将每部分作为一个元素保存于一个新建的数组中。

代码:

    <script> //split("分隔符")
        var sentence = "关注一下博主吧 哈哈哈哈";
       //通过空格将字符串分离成数组[]
       // ['关注一下博主吧', '哈哈哈哈']
        console.log(sentence.split(" "));

        //将字符串每个元素分离成数组[]
        //['关', '注', '一', '下', '博', '主', '吧', ' ', '哈', '哈', '哈', '哈']
        console.log(sentence.split(""));
    </script>

3.字符串的拼接和截取 concat() splice()

(1) concat() 拼接

语法: 数组.concat(数组1,数组2,........)

目的:合并多个数组，创建一个新数组。括号里面的数组按顺序拼接到concat前面的数组后面

代码:

    <script>//concat()
        var arr = ["关", "注"];
        var arr1 = ["一", "下"];
        var arr2 = ["博主", "吧"];
        console.log(arr.concat(arr1, arr2));
         //['关', '注', '一', '下', '博主', '吧']
    </script>

(2) splice() 截取

语法: 数组名.splice(index下标,length截取长度)

目的:截取一个数组的子集创建一个新数组,(返回一个数组)

代码:

    <script>//splice()
       var arr = ["a", "b", "c", "a", "b", "c", "d", "e"];
       console.log(arr.splice(2,4));//['c', 'a', 'b', 'c']
    </script>

二.数组的增删函数

1.数组元素的增删

(1) push()：

在数组的结尾添加一个或多个元素，返回新数组的长度；

(2) pop()：

移除数组最后一个元素，返回移除的元素；

(3) unshift()：

在数组的开头添加一个或多个元素，返回新数组的长度；

(4) shift()：

删除数组第一个元素，并返回删除的元素；

代码:


    <script>
        var arr = ["a", "b", "c", "d", "e"];
        console.log(arr.push("f"));//返回在结尾添加元素后的数组的长度   6
        console.log(arr.pop());//返回删除的最后一个元素                f
        console.log(arr.unshift("0"));//返回在开头添加元素后的数组长度  6
        console.log(arr.shift());//返回删除的第一个元素                0
    </script>

2.splice() 从数组中添加,替换,和删除元素

(1) 添加：

arr1.splice(startIndex，0，arr2)，注第二个参数为0：往前边前边添加

代码:

 <script>
     var arr = ["1", "1", "1", "1", "1"];
     //添加元素 arr1.splice(startIndex，0，arr2) 注第二个参数为0：往前边前边添加
     console.log(arr.splice(2, 0, "2", "2", "2"));//返回空数组(后面会讲到,返回删除的元素)
     console.log(arr);//['1', '1', '2', '2', '2', '1', '1', '1']
 </script>

(2) 替换:

arr1.splice(startIndex，length，arr2)，注第二个参数为被替换的数组长度

注意:删除的长度(length)要和后面添加的元素个数要相同

代码:

    <script>        
    var arr = ["a", "b", "c", "d", "e"];
        //替换元素 arr1.splice(startIndex，length，arr2)，注第二个参数为被替换的数组长度
        console.log(arr.splice(2, 2, "2", "2"));//返回删除(被替换)的元素['c', 'd']
        console.log(arr);// ['a', 'b', '2', '2', 'e']
    </script>

(3) 删除:

arr.splice(startIndex,length) 方法从数组中删除元素,返回删除的元素组成的数组

代码:

    <script>
        var arr = ["a", "b", '2', '2', "c", "d", "e"];
        console.log(arr.splice(2, 2));//['2', '2']
    </script>

三.数组的排序

1.数组中的元素顺序翻转 reverse()

arr.reverse()

代码:

    <script>
        var arr = ["a", "b", "c", "d", "e"];
        console.log(arr.reverse());// ['e', 'd', 'c', 'b', 'a']
    </script>

2.对数组中的元素进行排序,sort()

sort()

数字按大小排序,字母按先后排序

大写字母均比小写字母小,

字符串,或者几位数的数字比较按照下标逐位比较(unicode码)

代码:

    <script>
        var names = ['Ana', 'ana', 'john', 'John'];
        console.log(names.sort());
        var nums = [3, 1, 2, 100, 4, 200];
        nums.sort();
        console.log(nums);
    </script>

四.迭代器方法

1.不生成新数组的迭代器方法

(1) forEach

对数组中的每一项运行给定函数，没有返回值，它和使用for循环的结果相同

   <script>
        function square(num) {
            console.log(num * num);
        }
        var nums = [1, 2, 3, 4];
        nums.forEach(square);
    </script>

(2) every()

对数组中的每一项运行给定函数，如果该函数对每一个项都返回true,则返回true；反之，有一个值是false就返回false（默认返回false）。

    <script>
        function isEven(num) {
            return num % 2 == 0;
        }
        var nums = [2, 3, 4, 6, 8, 10];
        var even = nums.every(isEven);	
        console.log(even);//false
    </script>

(3) some()

对数组中的每一项运行给定函数，如果该函数对任一一项返回true，则返回true（默认返回false）。

    <script>
        function isEven(num) {
            return num % 2 == 0;
        }
        var nums = [1, 3, 5, 7, 8, 9];
        var someEven = nums.some(isEven);
        console.log(someEven);//true
    </script>

2.生成新数组的迭代器方法

(1) map()

对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

    <script>
        function square(num) {
           return num * num;
        }
        var nums = [1, 2, 3, 4];
        console.log(nums.map(square)); // [1, 4, 9, 16]
    </script>

(2) filter()

传入一个返回值为布尔类型的函数。

    <script>
        function isEven(num) {
            return num % 2 == 0;
        }
        var nums = [2, 3, 4, 6, 8, 10];
        var evens = nums.filter(isEven);
        console.log(evens);//[2, 4, 6, 8, 10]
    </script>

扩展:以上迭代器方法除了可以数组名.xxx(函数方法名)以此来传参给外面的函数之外,可以构建匿名函数的方式,格式如下,这里举例forEach:

扩展: 匿名函数

nums.forEach(function (item, index, array) {})
item 指代元素值

index 指代元素索引

array 指代数组本身

形参位置固定

五.累加方法 reduce和reduceRight

reduce 从左向右操作

reduceRight 从右向左操作

使用指定的函数对数组元素进行组合，生成一个值，接收两个参数。

1.reduce和reduceRight用法:

    <script>
        var numbers = [1, 2, 3, 4, 5, 6, 7,8, 9, 10];
        numbers.reduce(function (previousValue, currentValue, index, array) {
            return previousValue + currentValue;
        }, initialValue);
    </script>
其中:

参数一：要执行的函数，有返回值，函数内部处理的参数如下

previousValue :上一次调用回调返回的值，或者是提供的初始值（initialValue）

currentValue :数组中当前被处理的元素

index :当前元素在数组中的索引

array :调用 reduce 的数组

参数二：传递给函数的默认值，可忽略

理解:

[x1, x2, x3, x4].reduce(f) = f( f( f (x1, x2), x3), x4)

2.扩展用法

(1)累加

    <script>
        var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        var n = a.reduce(function (x, y) { console.log(x + y); return x + y; }, 0);
        //0表示函数的默认起始值,即第一次执行0将被赋值给previousValue;
        console.log(n);//55
 /*            0+1=1
               1+2=3;
               3+3=6
               6+4=10
               10+5=15
               15+6=21
               21+7=28
               28+8=36
               36+9=45
               45+10=55 */
    </script>

(2)累积

    <script>
        var a = [1, 2, 3];
        var m = a.reduce(function (x, y) { return x * y; }, 1)
        console.log(m);//6
    </script>

(3)求数组最大值

    <script>
        var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        var max = a.reduce(function (x, y) { return x > y ? x : y; });
        console.log(max);//10
    </script>

六.数组类型判断 Array.isArray(数组名) 判断是否是数组；

Array.isArray(数组名)：判断是否是数组；

    <script>
        var a = [1, 2];
        //数组是特殊的对象类型
        //typeof 判断类型
        console.log(typeof a);//object
        //isArray 判断是不是数组
        console.log(Array.isArray(a)); //true
        //instanceof 判断类型
        console.log(a instanceof Array);	//true
        var b = { x: 1, y: 2 };
        console.log(Array.isArray(b));	//false
    </script>

七.数组的长度数组名.length

数组名.length :获取数组的元素个数

    <script>
         var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
         console.log(a.length);//10
    </script>

八.删除数组指定元素 delete 数组名[index]

delete 数组名[index]:删除数组中指定元素,index为被删除元素的下标

注意:该方法删除的原则是把该位置的元素改为undefined,数组的长度不变

    <script>
        var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        delete a[0]; // 把 fruits 中的指定元素改为 undefined
        console.log(a);//数组的长度不变
    </script>