js数组JavaScript数组

亦凉 2022-10-09 04:48 200阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数组操作</title>
        <link rel="icon" type="text/css" href="images/favicon.ico">
    </head>
    <body>
     
    </body>
    <script>
        /*
        //instanceof
        var arr = [12,23,45,6,89];
        console.log(arr instanceof Array);//true
     
        //Array.isArray(参数); // 判断参数是不是数组,返回布尔值;
        var arr = [1, 2, 3];
        var num = 123;
        console.log(Array.isArray(arr));//true
        console.log(Array.isArray(num));//false
     
        // 数组.toString() 把数组变成字符串，去除[] 内容有逗号链接
        var arr = ["aaa","bbb","ccc"];
        console.log(arr.toString());// aaa,bbb,ccc
     
        //数组.valueOf() 返回数组本身
        var arr = ["aaa","bbb","ccc"];
        console.log(arr.valueOf());//  ["aaa", "bbb", "ccc"]
     
        //数组.join(参数) 数组中的元素可以按照参数进行连接变成一个字符串
        var arr = ["aaa","bbb","ccc"];
        //console.log(arr.join("-"));//  "aaa-bbb-ccc"
        //console.log(arr.join(""));//     "aaabbbccc"
        //console.log(arr.join(" "));//   "aaa bbb ccc"
     
        //数组.push() //在数组的最末尾添加元素;
        var arr = [1,2,3,4];
        var arr1 = arr.push(0);
        console.log(arr);//[1, 2, 3, 4, 0]
        console.log(arr1);// 5 返回数组的长度
     
        //数组.pop() 不需要参数  在数组的最末尾删除一项
        var arr = [1,2,3,4];
        var arr2 = arr.pop();
        console.log(arr);// [1, 2, 3]  改变原数组
        console.log(arr2);// 4   返回值是被删除的一项
     
        //数组.unshift() //在数组的最前面添加一个元素;
        var arr = [1,2,3,4];
        var arr3 = arr.unshift(9);
        console.log(arr);//[9, 1, 2, 3, 4]
        console.log(arr3);//5 返回值是数组的长度
     
        //数组.shift() 不需要参数 在数组的最前面删除一项
        var arr = [1,2,3,4];
        var arr4 = arr.shift();
        console.log(arr);//[2, 3, 4] 返回被修改的数组
        console.log(arr4);// 1  返回被删除的一项
     
        //数组元素的排序
        //reverse() 翻转数组
        var arr = [12,56,89,98,68,87];
        var arr5 = arr.reverse();
        console.log(arr);// [87, 68, 98, 89, 56, 12]
        console.log(arr5);// [87, 68, 98, 89, 56, 12]
     
        //sort() // 数组中元素排序;(默认：从小到大)
        //默认：按照首个字符的Unicode编码排序;如果第一个相同那么就比较第二个...
        var arr = [12,35,24,56,42,8,5,68,86];
        var arr6 = arr.sort();
        console.log(arr);//[12, 24, 35, 42, 5, 56, 68, 8, 86]
        console.log(arr6);//[12, 24, 35, 42, 5, 56, 68, 8, 86]
     
        //sort() 用回调函数进行升序和降序的排列
        var arr = [12,35,24,56,42,8,5,68,86];
        arr.sort(function(a,b){
            return a-b;//升序排列
        });
        console.log(arr);//[5, 8, 12, 24, 35, 42, 56, 68, 86]
     
        //数组元素的操作
        //concat()
        var arr = [1,2,3];
        var arr8 = ["a","b","c"];
        var arr9 = arr.concat(arr8);
        console.log(arr);//[1, 2, 3]
        console.log(arr8);//["a", "b", "c"]
        console.log(arr9); //[1, 2, 3, "a", "b", "c"]
     
        //数组.slice(开始索引值，结束索引值);不包括结束索引 //数组截取;
        var arr = [1, 2, 3, "a", "b", "c"];
        var arr10 = arr.slice(1,4);
        console.log(arr);//[1, 2, 3, "a", "b", "c"]
        console.log(arr10);//[2, 3, "a"]
     
        //数组.splice(开始索引值，删除几个，替换内容1，替换内容2，...);
        // 替换和删除; 改变原数组;返回值是被删除/替换的内容
        var arr = [1,2,3,4,5,6,'a','b','c','d','e','f'];
        //var arr11 = arr.splice(5);//从索引为5开始截取到最后
        //console.log(arr);//[1, 2, 3, 4, 5]
        //console.log(arr11);//[6, "a", "b", "c", "d", "e", "f"]
     
        //var arr12 = arr.splice(2,5);//从索引为2开始截取5个元素
        //console.log(arr);//[1, 2, "b", "c", "d", "e", "f"]
     
        arr.splice(6,3,"aaa","bbb","ccc");//删除并替换
        console.log(arr);// [1, 2, 3, 4, 5, 6, "aaa", "bbb", "ccc", "d", "e", "f"]
     
        //数组.indexOf(元素); // 给元素，查索引(从前往后)
        // 数组.lastIndexOf(元素); // 给元素，查索引(从后往前)
        var arr = ["a","b","c","d","e","f"];
        console.log(arr.indexOf("e"));// 4
        console.log(arr.lastIndexOf("c"));//2
        */
     
        //数组迭代(遍历)
        /*数组.every() 对数组中每一项运行回调函数，如果都返回true，every返回true，如果有一项返回false，
        则停止遍历 every返回false；不写默认返回false*/
        /*var arr = [1,2,3,4,5];
        arr.every(function(ele,index,arr){
            console.log(a);//元素
            console.log(b);//索引
            console.log(c);//数组本身
        });*/
     
        /*var arr = [123,234,567,768,987];
        //every返回一个bool值，全部是true才是true；有一个是false，结果就是false
        var bool = arr.every(function(ele,index,arr){
            if(ele>100){
                return true;
            }else{
                return false;
            }
        });
        console.log(bool);*/
     
        /*filter()对数组中每一项运行回调函数，该函数返回结果是true的项组成的新数组
        新数组是有老数组中的元素组成的，return为ture的项;*/
        /*var arr = [123,123,45,678,54,678];
        var arr0 = arr.filter(function(element,index,array){
            if(element>100){
                return true;
            }else{
                return false;
            }
        });
        console.log(arr0);//[123, 123, 678, 678]*/
     
        //forEach() 和 for循环一样没有返回值
        /*var arr = [1,2,3,4,5,6,7];
        arr.forEach(function(element,index,array){
            console.log(element);
            console.log(index);
            console.log(array);
        });*/
     
        /*map()对数组中每一项运行回调函数，返回该函数的结果组成的新数组。
        return什么新数组中就有什么，不return返回undefined，对数组二次加工。*/
        /*var arr = [1,2,3,4,5,6,7,8];
        var newArr = arr.map(function(element,index,array){
            if(index==2||index==3){
                return element;
            }else{
                return element*2;
            }
        });
        console.log(newArr);// [2, 4, 3, 4, 10, 12, 14, 16]*/
     
        //some()对数组中每一项运行回调函数，如果该函数对某一项返回true，则some返回true; 像杀手，有一个成功，就胜利了！！！
        /*var arr = [1,2,4,5,6,7,8,10];
        var bool = arr.some(function(ele,index,array){
            if(ele%3==0){
                return true;
            }
            return false;
        });
        console.log(bool);*/
     
        //数组的清空
        /*1、arr.length = 0; 伪数组无法清空
        * 2、arr.splice(0);  伪数组中没有该方法
        * 3、arr = []; 可以操作伪数组(推荐)
        * 4、伪数组：就是长的像数组，但是没有数组的方法;也不能添加和删除元素;
        *
        * */
        //清空数组的案例
        /*function test(){
            //arguments.length = 0;//console.log(arguments);打印Arguments [0: 1, 1: 2, 2: 3, 3: 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
            //arguments.splice(0);//console.log(arguments);//Uncaught TypeError: arguments.splice is not a function
            arguments = [];//可以清空 返回空数组
            console.log(arguments);
        }
        test(1,2,3,4);*/
     
        //数组案例
        /*
        * ["刘备","张飞","关羽"] 1.将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”。使用两种方式实现
        * */
        //方法一
        /*var arr = ["刘备","张飞","关羽"];
        var arr1 = arr.join('|');
        console.log(arr1);//"刘备|张飞|关羽"*/
     
        //方法二
       /* var arr = ["刘备","张飞","关羽"];
        var separator = "|";
        var str = arr[0];
        for(var i = 1;i<arr.length;i++){
            str += separator+arr[i];
        }
        console.log(str);//"刘备|张飞|关羽"*/   //["c", "a", "z", "a", "x", "a"] 输出a所在的索引
        /*var arr = ["c", "a", "z", "a", "x", "a"];
        arr.forEach(function(element,index,array){
           if(element=="a"){
               console.log(index);//1,3,5
           }
        });*/
     
        /*判断特殊情况
            false == ""  // true
            false == []  // true
            false == {}  // false
            "" == 0      // true
            "" == []     // true
            "" == {}     // false
            0 == []      // true
            0 == {}      // false
            0 == null    // false
            null == undefined // true
            []==false // true
            [] == ![] // true 
            */
     
        /*var a = "0";
        console.log(Boolean(a));//true
        var b = false;
        console.log(Boolean(b));//false
     
        console.log(a==b);//true     == 比较的是强制类型转换后的值     === 是直接比较
        */
        
     
       // 数组.toString() 把数组变成字符串，去除[] 内容有逗号链接
       //let arr = [1,2,3,4,5,6,7,8,9];
       //console.log(arr.toString()); // '1,2,3,4,5,6,7,8,9'   //数组.valueOf() 返回数组本身
       //let arr = [1,2,3,4,5,6,7,8,9];
       //console.log(arr.valueOf());//[1, 2, 3, 4, 5, 6, 7, 8, 9]
     
       //数组.join(参数) 数组中的元素可以按照参数进行连接变成一个字符串
       // var arr = ["aaa","bbb","ccc"];
       // console.log(arr.join("-"));//  'aaa-bbb-ccc'
       // console.log(arr.join(""));//     'aaabbbccc'
       // console.log(arr.join(" "));//   'aaa bbb ccc'
       // console.log(arr.join("~"));//  'aaa~bbb~ccc'
        
        
        //sort() 用回调函数进行升序和降序的排列 箭头函数
        //var arr = [12,35,24,56,42,8,5,68,86];
        //升序
        //arr.sort((a,b) => a-b);
        //console.log(arr);//[5, 8, 12, 24, 35, 42, 56, 68, 86]
         
        //降序
        //arr.sort((a,b) => b-a);
        //console.log(arr);
        
       
        
    </script>
    </html>

欢我的文章就关注我吧，持续更新中.....  
以上内容希望帮助到大家，很多朋友在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料，多个知识点高级进阶干货需要的可以免费分享给大家，需要的可以去主页或者评论留言[点击进入暗号：csdn][csdn]

[csdn]: https://jq.qq.com/?_wv=1027&k=nKNuXAFr