JavaScript 數組和對象

數組

數組：一組數據的集合，數組的每一個數據叫做一個元素
數組元素可以是任何類型，同一個數組中的不同元素可能是對象或數組
每個數組都具有一個length屬性，通過該屬性可以獲取數組長度，並且可以給一個數組length賦值定義長度
數組中每個元素在數組中有一個位置，以數字表示，稱爲索引（下標）
索引從0開始排列，[0]表示第一個數據，以此類推
數組的數據類型是一個對象，其實就是個加了數字索引和length屬性的特殊對象

數組創建方法

隱式方法

   var arr = ["梨子", "橙子", "橘子"];
   var arr2 = [1, "小張", true, ["OliGit", 2], {}];
   var arr3 = [];

直接實例化，通過構造函數Array()創造

   // 1.直接把數組元素寫到括號裏
   var arr = new Array("OliGit", 12, "哈哈");

   // 2.創建數組並給數組元素賦值
   var arr2 = new Array();
   arr2[0] = "haha";
   arr2[1] = "heiha";
   arr2[2] = "heihei";

   // 3.規定數組初始的長度，並給數組元素賦值;數組長度動態調整
   var arr3 = new Array(3);
   arr3[0] = "haha";
   arr3[1] = "heiha";
   arr3[2] = "heihei";
   arr3[3] = "hihihi";
   arr3[4] = "enenen";

數組基本操作

arr.toString()：將數組轉換爲字符串，保留逗號
arr.join(“分隔符”)：將數組轉成一個字符串，原來的數組會保留；參數爲分隔符，省略的話則用默認逗號作爲分隔符
Array.from(str)：將僞數組轉成數組，只要有length屬性的就可以轉成數組
arr.pop()：移除數組末尾最後一項，減少數組的length值，然後返回移除的元素，而且會直接修改原數組
arr.push()：用於向數組的末尾添加一個或多個元素，並返回修改後數組的長度，而且會直接修改原數組
arr.shift()：刪除數組開頭第一項，減少數組的length值，然後返回移除的元素；而且會直接修改原數組
arr.unshift()：用於向數組的開頭添加一個或多個元素，並返回修改後數組的長度，而且會直接修改原數組
arr.splice()：實現刪除，插入，替換，截取，返回值爲截取的數組元素，而且會直接修改原數組
a、參數一：起始位置索引
b、參數二：截取元素個數，如果是插入元素即爲0
c、參數三：插入的元素（可選），可以同時插入多個元素
arr.slice(開始下標，結束下標)：截取指定下標的數組或字符串元素，返回截取的數組元素，不會修改原數組
a、如果省略結束下標，則截取後面所有元素
b、截取不包含結束下標的元素
c、可以爲負值
arr.indexOf()：查找指定元素的下標，從前往後查找；若有重複，則返回第一個查到的下標；若不存在，則返回-1
arr.lastIndexOf()：查找指定元素的下標，從後往前查找；若有重複，則返回第一個查到的下標；若不存在，則返回-1
arr.concat()：合併兩個或多個數組；返回一個新的數組，不會修改原數組，也可以在concat方法中直接添加元素
arr.reverse()：反轉數組元素的順序，會修改原數組；返回值並不是排序後的數組，而是數組的引用
arr.sort(比較函數)：用於對數組的元素進行排序
a、默認：無參數情況下，按升序排序數組項，即最小的值位於最前面，最大的值排在最後面；會修改原數組；會轉成字符串再比較，並從第1個字符進行比較
b、參數爲比較函數，規定數組排序順序；比較函數要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字
c、比較函數應該有兩個參數 a 和 b，其返回值如下：
（1）、若a 小於 b，在排序後的數組中 a 應該出現在b 之前，則返回一個小於0的值
（2）、若a 等於 b，則返回0
（3）、若a 大於 b，則返回一個大於0的值

	<script>
        // 升序排列
        function asc(a, b){
            if(a<b){
                return -1;
            }else if(a>b){
                return 1;
            }else{
                return 0;
            };
        };
        // 降序排列
        function des(a, b){
            if(a<b){
                return 1;
            }else if(a>b){
                return -1;
            }else{
                return 0;
            };
        }
        var arr = [12, 1, 35, 3, 9, 34];

        var b = arr.sort(des);

        alert(arr);
        alert(b);
	</script>

arr.filter(過濾函數)：把數組中的某些元素過濾掉，然後返回剩下的元素，接收的是一個回調函數；數組中的每一項運行給定函數，返回滿足過濾條件組成的新數組，不會修改原數組

    <script>
        function guolv(x){
            return x>10;
        }
        var arr = [12, 1, 35, 3, 9, 34];

        var b = arr.filter(guolv);

        alert(arr);
        alert(b);
    </script>

遍歷數組去重複：建立一個新數組，然後循環遍歷要去重複的數組，每次判斷新數組不包含舊數組的值時（新數組用indexOf方法檢索舊數組的值返回結果等於-1）將該值加入新數組

    <script>
        function qcf(arr){
            var abc = [];
            for(var i = 0; i < arr.length; i++){
                if(abc.indexOf(arr[i]) == -1){
                    abc.push(arr[i]);
                }
            }
            return abc;
        }
        var arr1 = [12, 1, 35, 3, 9, 34, 1, 12, 3];

        var b = qcf(arr1);

        alert(arr1);
        alert(b);
    </script>

set方法去重複：它類似數組，但是成員的值都是唯一的，沒有重複的值

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

        // 1、數組轉set
        var set = new Set(arr);

        alert(arr);//[1, 1, 2, 2, 3]
        console.log(set);//[1, 2, 3]

        // 2、set轉數組
        var arr2 = Array.from(set);
        var arr3 = [...set];//簡寫
        alert(arr2);//[1, 2, 3]
        alert(arr3);//[1, 2, 3]

        // 3、has()判斷一個值是否在set中，返回布爾值，在爲true，不在爲false
        console.log(set.has(1));
        console.log(set.has(5));
    </script>

數組並集，交集，差集

    <script>
        var arr1 = [1, 2, 3];
        var arr2 = [2, 3, 4];
        var a = new Set(arr1);
        var b = new Set(arr2);

        // 1、並集：a+b再把重複去掉->[1, 2, 3, 4]
        var un = new Set([...a, ...b]);
        console.log(un);

        // 2、交集：a和b共同的部分->[2, 3]
        var is = new Set([...a].filter(x => b.has(x)));
        // function(x){
        //     return b.has(x);
        // }
        console.log(is);

        // 3、差集：a-b [1]
        var df = new Set([...a].filter(x => !b.has(x)));
        console.log(df);
    </script>

遍歷數組

for-in 遍歷數組

for-in語句遍歷數組的下標

    var student = {"name" : "OliGit", "age" : 23, "id" : 2333};
    for (stu in student){
        document.write(stu + "<br>");  //stu爲鍵
        document.write(student[stu] + "<hr>");            
    }

    var arr00 = new Array("元素1", "元素2", "元素3", "元素4", "元素5")
    for (index in arr00){
        document.write(index + "<br>");  //index爲數組下標
        document.write(arr00[index] + "<hr>");
    }

for-of 遍歷數組

for-of語句遍歷數組的元素

    var arr00 = new Array("元素1", "元素2", "元素3", "元素4", "元素5")
    for (value of arr00){
        document.write(value + "<br>");  
    }

對象

js中的所有事物都是對象：字符串、數值、數組、函數。。。
js對象屬性指的是對象相關的值。js對象是無序屬性的集合
屬性按照名稱：值對的形式編寫（名稱和值以冒號分隔）

對象創建方法

json模式創建對象，創建對象用{}號；（最主要的形式）

var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};

直接實例化，通過構造函數Object()創建對象

var ren = new Object();
ren.name = "OliGit";
ren.sex = "man";

對象基本操作

訪問對象屬性

    var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};
    // 1、對象名["屬性名"]
    var a = ren["name"];    

    //2、對象名.屬性名（用得最多）
    var a = ren.sex; 
     console.log(a);

添加對象屬性

    var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};
    // 1、對象名["屬性名"] = 屬性值;
    ren["id"] = "2333";
    //2、對象名.屬性名 = 屬性值;
    ren.yiFu = "t-shirt";
    console.log(ren);

對象在函數內添加屬性或方法

   // 對象在函數內添加屬性或方法
   function addInfo(key, value){
       var ren = {name : "苦澀"};
       // 方式一：對象名.屬性名 = 屬性值，該方式錯誤，結果爲：{name:"苦澀", key:20},此處屬性名爲key，而不是age
       // ren.key = value;

       // 方式二：：對象名["屬性名"] = 屬性值，該方式正確，可以正確添加屬性或方法，結果爲：{name:"苦澀", age:20}
       ren[key] = value;

       console.log(ren);
   }

   addInfo("age", 20);

修改對象屬性

    var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};
    // 1、對象名["屬性名"] = 屬性值;
    ren["age"] = 15;

    //2、對象名.屬性名 = 屬性值;
    ren.height = 1.85;
    console.log(ren);

刪除對象屬性

    var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};
    // 1、delete 對象名["屬性名"]
    delete ren["age"];

    //2、delete 對象名.屬性名
    delete ren.height;
    console.log(ren);

合併對象

Object.assign()：用於對象的合併；第一個參數是目標對象，後面的參數都是源對象，將源對象的屬性，複製到目標對象中；會修改目標對象，但不會修改源對象

    <script>
        var obj1 = {a:1};
        var obj2 = {b:2};
       
       var obj = Object.assign(obj1, obj2);
        
        console.log(obj1); //{a:1, b:2}
        console.log(obj2);//{b:2}
        console.log(obj);//{a:1, b:2}
    </script>

如果目標對象與源對象有同名屬性，或多個源對象有同名屬性，則後面的屬性會覆蓋前面的屬性

	    var obj1 = {a:1, b:1};
        var obj2 = {b:2, c:2};
       
        var obj = Object.assign(obj1, obj2);
        
        console.log(obj1); //{a:1, b:2, c:2}
        console.log(obj2);//{b:2, c:2}
        console.log(obj);//{a:1, b:2, c:2}

多個對象合併

        var obj1 = {a:1, b:1};
        var obj2 = {b:2, c:2};
        var obj3 = {c:3, d:4};
       
        var obj = Object.assign(obj1, obj2, obj3);
        
        console.log(obj1); //{a:1, b:2, c:3, d:4}
        console.log(obj2);//{b:2, c:2}
        console.log(obj3);//{c:3, d:4}
        console.log(obj);//{a:1, b:2, c:3, d:4}

獲取對象屬性名和屬性值

Object.keys()：用於返回對象可枚舉的屬性名或方法名，返回的結果是一個數組
Object.values()：用於返回對象可枚舉的屬性值，返回的結果是一個數組
可枚舉就是可遍歷的意思，也就是說對象的屬性是否能夠通過遍歷得到

    <script>
        var obj = {a:1, b:2, c:3, d:4};
        
        var a = Object.keys(obj);
        var b = Object.values(obj);

        console.log(a);//["a", "b", "c", "d"]
        console.log(b);//[1, 2, 3, 4]
    </script>

判斷屬性及銷燬對象

判斷對象中是否包含某個屬性：in操作符

    <script>
        var obj = {a:1, b:2, c:3, d:4};

        // 判斷對象中是否包含某個屬性：in操作符
        var a = "b" in obj;//true 表示有這個屬性
        var b = "f" in obj;//false 表示沒有這個屬性

        alert(a);
    </script>

銷燬對象：對象=null

    <script>
        var obj = {a:1, b:2, c:3, d:4};
		//銷燬對象: 對象=null
        console.log(obj);//{a:1, b:2, c:3, d:4}
        obj = null;
        console.log(obj);//null
    </script>

對象的易變性

變量的不易變性

   var a = "aaaa";
   var b = a;
   document.write(a + "<br>");//aaa
   document.write(b + "<br>");//aaa

   b = "bbb"; 
   document.write(a + "<br>");//aaa
   document.write(b + "<br>");//bbb

對象的易變性

   var a = {name : "Oligit", sex : "man"};
   var b = a;
   console.log(a);// {name : "Oligit", sex : "man"};
   console.log(b);// {name : "Oligit", sex : "man"};

   b.name = "hahahaha";
   console.log(a);// {name : "hahahaha", sex : "man"};
   console.log(b);// {name : "hahahaha", sex : "man"};

遍歷對象

   var ren = {name : "Oligit", sex : "man", age : 15};
   
   for (r in ren){
       // document.write(r + " -> " + ren.r + "<br>");不可用

       document.write(r + " -> " + ren[r] + "<br>");
   };

構造函數

構造函數：主要功能初始化對象，可以想象成一套模板或一套方案；通過new 函數名來實例化對象的函數叫構造函數；new就是在創建對象，從無到有，構造函數就是在爲初始化的對象添加屬性和方法

    function Ren(){
        // this:表示當前構造函數，沒有具體的名稱
        this.name = "";
        this.sex = "man";
        this.age = "20";
        this.say = function(){
            alert("大家好！");
        }
    };
    // 通過new方法來創建xiaoMing對象
    // 通過new的方法創建具體的對象時，this具有具體名稱，現在this就表示xiaoMing，表示當前調用者
    var xiaoMing = new Ren();
    
    // 修改數據
    xiaoMing.name = "Oligit";
    xiaoMing["age"] = "21";
    console.log(xiaoMing);

    // 調用數據
    xiaoMing.say();

JavaScript 數組和對象

數組

數組創建方法

數組基本操作

遍歷數組

對象

對象創建方法

對象基本操作

對象的易變性

遍歷對象

構造函數

JavaScript 本地存儲

基於jQuery實現幻燈片切換效果

HTML5 canvas組件

JavaScript 音頻插件和圖表插件

基於jQuery實現垂直輪播效果

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結