JavaScript數組知識

時間 2019-11-17
原文原文鏈接
JavaScript數組知識css
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;數組操做&lt;/title&gt;
    &lt;link rel="icon" type="text/css" href="images/favicon.ico"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;script&gt;
    /*
    //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&gt;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&gt;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);*/

    //數組的清空
    /*一、arr.length = 0; 僞數組沒法清空
    * 二、arr.splice(0);  僞數組中沒有該方法
    * 三、arr = []; 能夠操做僞數組(推薦)
    * 四、僞數組：就是長的像數組，可是沒有數組的方法;也不能添加和刪除元素;
    *
    * */
    //清空數組的案例
    /*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&lt;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) =&gt; a-b);
    //console.log(arr);//[5, 8, 12, 24, 35, 42, 56, 68, 86]
    
    //降序
    //arr.sort((a,b) =&gt; b-a);
    //console.log(arr);
   
  
   
&lt;/script&gt;
&lt;/html&gt;