数组常用的API详解及使用小技巧相关笔记（一）

1.数组的栈和堆特性
◆进栈 push() 可以一次性放多个参数，内部是使用 遍历argument伪数组来存的，使用push方法是将数据存数组的最末项，存进去之后会返回当前数组的长度，出栈pop() 可以从数组的最末尾取出一个数组元素并且返回，但是也会把这个数组元素移除原数组。

◆进队列 unshift() 可以一次性放多个参数，是将元素存到数组的最前面，存进去之后会返回数组的长度，出队列shift()可以从数组的最前面的元素返回，但是也会把这个取出来的数组元素移除原数组。

◆

<script>
    //定义一个数组
    var arr=["吕布","董卓","袁绍","曹操","刘备","孙策"];
    console.log(arr);

    //数组的栈操作  先进后出

        arr.push("孙悟空");//进栈  数据插入到数组最后一项 等同于 arr[arr.length-1]="孙文悟空"  (会返回数组长度)
        console.log(arr);//插入后
        var name=arr.pop();//出栈 取出数组最后一项 并返回
        console.log(name);//取出的值
        console.log(arr);//取出后

    //数组的队列操作   先进先出

        arr.unshift("猪八戒");//进队列    数据插入到数组第一项  (会返回数组长度)
        console.log(arr);//插入后
        name=arr.shift();//出队列     取出数组的第一项 等同于 arr[0]
        console.log(name);//取出的值
        console.log(arr);//取出后




</script>

2.数组自带的反转与排序特性

◆数组的reverse(),内部使用的是for循环遍历前后项数组元素交换，对原数组有影响。

◆数组的sort()，内部默认使用的排序方法是首字母的unicode码，也就是比较ascll码表中的ascll码，你可以通过传递规则或者行为来改变排序规则，其实就是传递一个回调函数，如【
arr7.sort(function (a, b) {
            return a- b;//返回两个数相减的值，如果是a-b则是从小到大的升序，反之b-a为从大到小的降序      
 })

】，sort方法内部使用的还是冒泡排序。

◆

<script>

    反转原数组，并且返回\\\\
        console.log(arr);//["吕布", "董卓", "袁绍", "曹操", "刘备", "孙策"]
        var arr2 = arr.reverse();
        console.log(arr2);//["孙策", "刘备", "曹操", "袁绍", "董卓", "吕布"]
        //再次反转
        console.log(arr.reverse());//["吕布", "董卓", "袁绍", "曹操", "刘备", "孙策"]


    对原数组进行排序，并且返回\\\\

        var arr3 = [6, 3, 2, 1, 5, 8, 7, 9];
        //从小到大排序
        console.log(arr3.sort());//[1, 2, 3, 5, 6, 7, 8, 9]
        console.log(arr3);//[1, 2, 3, 5, 6, 7, 8, 9]

        //把从小到达排序反转之后  就变成了从大到小
        console.log(arr3.reverse());
        console.log(arr3);

        //但是 sort方法默认排序的规则是 先比较元素首字符的unicode编码  然后再比较其它位置上的字符unicode编码  unicode编码对比是一张ascll表
        var arr4 = [11, 2, 1, 3, 5, 211, 56, 11, 56, 13, 15, 26, 2, 7, 8, 6, 9];
        console.log(arr4.sort());//[1, 11, 11, 13, 15, 2, 2, 211, 26, 3, 5, 56, 56, 6, 7, 8, 9]
        var arr5 = ['c', 'b', 'cc', 'ba', 'ca', 'd', 'e', 'f'];
        console.log(arr5.sort());//["b", "ba", "c", "ca", "cc", "d", "e", "f"]

        //可是 可以通过给sort方法传递规则或则行为 来改变默认的排序规则
        var arr6 = [11, 12, 5, 26, 8, 13, 7, 22, 33, 4];
        console.log(arr6.sort(function (a, b) {
            return a - b;//从小到大排序
            return b - a;//从大到小排序
        }));//[4, 5, 7, 8, 11, 12, 13, 22, 26, 33]

        var arr7 = ['c', 'cc', 'ba', 'b', 'd', 'e', 'f'];
        for (var i = 0; i < arr7.length; i++) {
            console.log(arr7[i] + ":" + arr7[i].charCodeAt());
        }
        console.log(arr7.sort(function (a, b) {
            return a.charCodeAt() - b.charCodeAt();//charCodeAt()获取一个元素的ASCLL表中ascll码
        }))//["ba", "b", "c", "cc", "d", "e", "f"]

        //sort 方法中设置规则的原理是 冒泡排序
        var array=[];
        function bubbleSort(fn){ //
            //外循环控制轮数
            for(var i=0;i<array.length-1;i++){
                //开闭思想
                var flag=true;
                //内循环控制次数
                for(var j=0;i<array.length-1-i;j++){
                    //判断的时候调用规则
                    if(fn(array[j],array[j+1])>0){
                        var temp=array[j];
                        array[j]=array[j+1];
                        array[j+1]=temp;
                    }
                      //上面的等价于下面的
//                    if(array[j] - array[j+1] > 0){
//                        var temp=array[j];
//                        array[j]=array[j+1];
//                        array[j+1]=temp;
//                    }
                }
            }
        }
</script>

3.字符串的charCodeAt()方法可以返回这个字符串首字符的ascll码，"a".charCodeAt()//97


4.数组的常用API(功能方法)既特性
◆连接与划分截取和剪切替换
◇数组的连接使用的是concat方法，原来的数组不会受影响，var newArr=arr.concat(arr2);返回值是一个新的数组。
◇数组的截取(划分)使用的是slice方法，原来的数组不会受影响，var newArr=arr.slice(2,4);//方法的第一个参数是表示起始索引，第二个参数表示结束索引，内部使用的是for循环，var i=2;i<4，所以是包含左边括号的数字的但并不会包含右边括号的数字，如果方法只传递一个参数的话，那么第二个参数值默认为数组的length-1，如果参数的值为负数，那么会在方法内部进行转换，转换的方式为数组的length+参数值(参数值为负)，注意点是如果第一个参数大于第二个参数那么就会返回空数组，因为内部使用的是for循环，如i=4,i<2,那么就不会进入循环体。

◇数组的剪切替换(剪接)使用的是splice方法，原来的数组会受到影响，因为是剪切原来的数组返回新的数组，var newArr=arr.splice(2,4);方法的第一个参数是表示起始索引，第二个参数表示 剪切的长度，如果剪切的长度大于数组的长度，那默认从起始索引截取到末尾，如果剪切的长度为负数，那么默认一个也不截取返回一个空数组，如果其实索引为负数，那么默认值为数组length+第一个参数(参数字为负)，var newArr=arr.splice(2,4,"吕布","赵云","关羽");除了前两个参数外，后面无论多少的参数值都表示在原来的数组被剪切的位置插入这些参数值。

        ◇

<script>
    var arr1 = ['a', 'b', 'c'];
    var arr2 = [1, 2, 3];

    //数组的连接 concat  原数组不会受影响
    var arr3=arr1.concat(arr2);
    console.log(arr1);//['a', 'b', 'c']
    console.log(arr2);//[1, 2, 3]
    console.log(arr3);// ["a", "b", "c", 1, 2, 3]

    //数组的截取(划分) slice  原数组不会受影响
    var arr4=arr3.slice(2,4);//截取数组 从索引2开始 小于索引4 这就是包左不包右
    var arr5=arr3.slice(2);//截取数组 从索引2开始  截取到最末尾
    var arr6=arr3.slice(-2);//截取数组 从索引为 数组的length-2开始  截取到末尾
    var arr7=arr3.slice(4,2);//截取数组  内部使用的是for循环  第一个参数是var i=4 第二个参数是 i<2; 但是i不小于2  所以就会返回一个空的数组
    console.log(arr3);// ["a", "b", "c", 1, 2, 3]
    console.log(arr4);//["c", 1]
    console.log(arr5);//["c", 1, 2, 3]
    console.log(arr6);//[2, 3]
    console.log(arr7);//[]

    //数组的剪切替换（剪接）splice  原来的数组会受到影响
    var arr8=[1,2,3,4,5];
    var arr10=arr8.splice(1,2);//从索引1开始 剪切两个数组元素
    console.log(arr8);// [1, 4, 5]
    console.log(arr10);//[2, 3]

    var arr8=[1,2,3,4,5];
    var arr9=["吕布","赵云","关羽","刘备","张飞"];
    var arr10=arr8.splice(1,2,arr9);//从索引1开始 剪切两个数组元素完毕后 把方法里后面传递的参数依次放进数组中去
    console.log(arr8);//[1, "关羽", "刘备", "张飞", 4, 5]
    console.log(arr9);//["吕布", "赵云", "关羽", "刘备", "张飞"]
    console.log(arr10);// [2, 3]


</script>

◆从前或者从后获取数组元素索引
◇数组的indexOf方法是根据数组元素 找该数组元素的索引下标，  从前往后找  ，找不到就会返回 -1，arr.indexOf("a")。

◇数组的lastIndexOf方法是根据数组元素 找该数组元素的索引下标，  从后往前找  ，找不到就会返回 -1，arr.lastIndexOf("a")。

        ◇

<script>
    var arr=['a','b','c','v','a','b'];

    //根据数组元素 找数组元素 索引下标  从前往后  找不到就会返回 索引下标为 -1的值
    var index=arr.indexOf("a");
    var notIndex=arr.indexOf('x');//数组中没有 x 所以找不到 于是就会返回 -1
    ///根据数组元素 找数组元素 索引下标  从后往前
    var lastIndex=arr.lastIndexOf("a");

    console.log(index);//0
    console.log(notIndex);//-1
    console.log(lastIndex);//4

</script>

◆所有的遍历方法
◇数组的 every()方法 用于 循环检查这个数组中的值是否全部符合规则  只要有一次返回false 就终止检测  返回false 不合格。
◇数组的filter()方法 用于 循环筛选这个数组中的值是否符合规则  会将返回为true的数组元素放入一个新的数组中去 而返回为false的数组元素则不会放入新的数组中去 。
◇数组的forEach()方法 用于循环遍历数组中每一个元素，没有任何返回值 默认返回undefined
◇数组的map()方法 用于循环遍历修改数组中每一个元素的值 并且会返回修改后的数组。

◇数组的some()方法 用于循环检查这个数组中的值是否有一个符合规则 只要返回一次true 就会终止检测 返回true  与 every相反 every是全部合格  some只要一个合格

        ◇

<script>
    var arr=[1,2,5,1,2,5,3,6,21];

    //数组的 every()方法 用于 循环检查这个数组中的值是否全部符合规则  只要有一次返回false 就终止检测  返回false 不合格
        var arr=[1,2,5,1,2,5,3,6,21];
        var flag=arr.every(function(element,index,array){
            if(element>6){
                console.warn(element+"大于6");
                return false;
            }
            return true;
        });
        console.log(flag);//false

    //数组的filter()方法 用于 循环筛选这个数组中的值是否符合规则  会将返回为true的数组元素放入一个新的数组中去 而返回为false的数组元素则不会放入新的数组中去
        var newArr=arr.filter(function(element,index,array){
            if(element>6){
                return false;
            }
            return true;
        });
        console.log(arr);//[1, 2, 5, 1, 2, 5, 3, 6, 21]
        console.log(newArr);//[1, 2, 5, 1, 2, 5, 3, 6]

    //数组的forEach()方法 用于循环遍历数组中每一个元素，没有任何返回值 默认返回undefined
        var str="";
        var flag=arr.forEach(function(element,index,array){
            str+=element;
        });
        console.log(str);//1251253621
        console.log(flag);//undefined

    //数组的map()方法 用于循环遍历修改数组中每一个元素的值 并且会返回修改后的数组
        var arr2=["吕布","貂蝉","关羽","赤兔"];
        var newArr2=arr2.map(function(element,index,array){
            return element+"你好";
        });
        console.log(arr2);//["吕布", "貂蝉", "关羽", "赤兔"]
        console.log(newArr2);//["吕布你好", "貂蝉你好", "关羽你好", "赤兔你好"]

    //数组的some()方法 用于循环检查这个数组中的值是否有一个符合规则 只要返回一次true 就会终止检测 返回true  与 every相反 every是全部合格  some只要一个合格
        var flag=arr.some(function(element,index,array){
            if(element>6){
                console.warn(element+"大于6");
                return true;
            }
            return false;
        });
        console.log(flag);//true


</script>

5.清空数组
◆arr.splice(0);原数组从前剪切到后，原数组就空了
◆arr.length=0;原数组的长度为0 ，原数组就空了

◆arr=[]或者arr=new Array();原数组重新被赋值，原数组就空了

◆

<script>
    var arr=[5,3,5,6];
        //使用数组的 splice() 剪接的方法 直接剪切掉原数组
        console.log(arr);//[5, 3, 5, 6]
        arr.splice(0);//从索引0开始剪切 剪切到末尾
        console.log(arr);//[]


    //直接修改数组的长度
        var arr=[5,3,5,6];
        console.log(arr);//[5, 3, 5, 6]
        arr.length=0;
        console.log(arr);//[]


    //直接给数组重新赋值字面量 或者直接 arr=new Array(); 一样的
        var arr=[5,3,5,6];
        console.log(arr);//[5, 3, 5, 6]
        arr=[];
        console.log(arr);//[]


</script>

6.清除数组中的重复项

◆使用数组的forEach方法 配合新数组的indexOf和lastIndexOf方法

◆使用数组的forEach方法 配合 新数组的some方法

◆使用for循环和 当前数组的indexOf和lastIndexOf方法

◆使用for循环 配合 新数组的indexOf和lastIndexOf方法

◆

<script>
    var arr=[5,56,2,"a","c","v","s","a","c","v","a",7,11,5,165,651];
    var newArr=[];
    console.log(arr);
    使用数组的forEach方法 配合新数组的indexOf和lastIndexOf方法
   arr.forEach(function(element,index,array){
       if(   ! (newArr.indexOf(element) !== -1 &&
               newArr.indexOf(element) === newArr.lastIndexOf(element)
               )
         ){
           newArr[newArr.length]=element;
       }
   });

    //使用数组的forEach方法 配合 新数组的some方法
   arr.forEach(function(element,index,array){
       if(
              ! newArr.some(function (element2,index2,array2) {
           if(element2==element){
               return true;
           }
           return false;
       })
       )
       {
           newArr[newArr.length]=element;
       }
   });

    //使用数组的forEach方法 配合当前数组的indexOf和lastIndexOf方法
    for(var i=0;i<arr.length;i++){
        if(
                arr.indexOf(arr[i]) !== arr.lastIndexOf(arr[i])
        ){
            arr.splice(i,1);
            i--;
        }
    }
    console.log(arr);

    //使用数组的forEach方法 配合 新数组的indexOf和lastIndexOf方法
   for(var i=0;i<arr.length;i++){
       if(     newArr.indexOf(arr[i]) !== -1 &&
               newArr.indexOf(arr[i]) === newArr.lastIndexOf(arr[i])
       ){
           continue;
       }
       newArr[newArr.length]=arr[i];
   }
   console.log(newArr);
</script>

转载于:https://www.cnblogs.com/jwlLWJ2018/p/9247746.html