數組

昨日複習

結束當前次循環的關鍵詞是 continue
結束當前循環的關鍵詞是 break
JS的循環有 for 與 while 與 do-while

數組的長度通過 length 屬性獲取
數組的索引值從 0 開始
數組元素的最大索引值是 arr.length - 1

01 - 數組的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-數組的使用</title>
    <!-- 
        1. 數組的概念
        ============

        問：之前學習的數據類型，只能存儲一個值。如果我們想存儲班級中所有學生的姓名，那麼該如何存儲呢？
        答：可以使用數組(Array)。數組可以把一組相關的數據一起存放，並提供方便的訪問(獲取)方式。
        問：什麼是數組呢？
        答：數組是指 一組數據的集合 ，其中的每個數據被稱作 元素 ，在數組中可以 存放任意類型的元素 。
        	數組是一種將 一組數據存儲在單個變量名下 的優雅方式。

        ```JavaScript
        // 普通變量一次只能存儲一個值
        var num = 10; 
        // 數組一次可以存儲多個值
        var arr = [1,2,3,4,5];
        ```

        2. 創建數組
        ===========

        2.1 數組的創建方式
        -----------------
        JS 中創建數組有兩種方式：
        - 利用 new 創建數組 
        - 利用數組字面量創建數組

        2.2 利用new創建數組
        -------------------

        ```JavaScript
        var 數組名 = new Array() ；
        var arr = new Array(); // 創建一個新的空數組
        ```

        - 這種方式暫且瞭解，等學完對象再看
        - 注意 Array () ，A 要大寫
        

        2.3 利用數組字面量創建數組
        ------------------------

        ```JavaScript
        //1. 使用數組字面量方式創建空的數組
        var 數組名 = []；
        //2. 使用數組字面量方式創建帶初始值的數組
        var 數組名 = ['小白','小黑','大黃','瑞奇'];
        ```

        - 數組的字面量是方括號[] 
        - 聲明數組並賦值稱爲數組的初始化
        - 這種字面量方式也是我們以後 最多使用的方式

        2.4 數組元素的類型
        ----------------- 
        數組中可以存放 任意類型 的數據，例如字符串，數字，布爾值等。
        ```JavaScript
        var arrStus = ['小白',12,true,28.9];
        ```

        知識總結
        --------
        1. 數組的作用是什麼？ 
        數組：一組數據的集合，使用一個變量同時存儲多個數據
    
        2. 創建數組我們有哪兩種方式？ 哪一種我們最常用？
        創建數組的方式：
        ```JavaScript
        var arr = new Array()
        var arr = [ 1,2,'demo'];
        ```

        3. 什麼是數組元素？ 數組裏面類型有限制嗎？
        數組中的數據成爲數組的元素，元素的數據類型沒有限制


        3. 獲取數組元素
        ==============

        3.1 數組的索引
        -------------
        索引 (下標) ：用來訪問數組元素的序號（數組下標從 0 開始）。
        var arr = ['小白','小黑','大黃','瑞奇'];
            索引號：  0      1     2      3
        數組可以通過 索引 來訪問、設置、修改對應的數組元素，我們可以通過 "數組名[索引]" 的形式來獲取數組中的元素。
        這裏的 訪問 就是獲取得到的意思
        ```JavaScript
        // 定義數組
        var arrStus = [1,2,3];
        // 獲取數組中的第2個元素
        alert(arrStus[1]); // 2
        ```

        知識總結
        -------
        1. 如何把數組中的元素取出來？
        數組中的每個元素都有編號，編號默認從0開始，稱爲"索引"，"下標"
        從數組中取出來指定元素：利用數組的索引值取元素
        
        2. 如果獲取數組中不存在的元素時，獲取到的值是什麼？
        如果通過索引值獲取數組中沒有的元素，得到的值是undefined

        課堂練習：數組練習
        ----------------
        定義一個數組，裏面存放星期一、星期二…… 直到星期日（共7天），在控制檯輸出：星期日
     -->
    <script>
        // 1.數組(Array) ：就是一組數據的集合 存儲在單個變量下的優雅方式 
        // 2. 利用new 創建數組
        var arr = new Array(); // 創建了一個空的數組
        // 3. 利用數組字面量創建數組 []
        var arr = []; // 創建了一個空的數組
        var arr1 = [1, 2, 'pink老師', true];
        // 4. 我們數組裏面的數據一定用逗號分隔
        // 5. 數組裏面的數據 比如1,2， 我們稱爲數組元素
        // 6. 獲取數組元素  格式 數組名[索引號]  索引號從 0開始 
        console.log(arr1); // Array(4) [ 1, 2, "pink老師", true ]
        console.log(arr1[2]); // pink老師
        console.log(arr1[3]); // true
        var arr2 = ['迪麗熱巴', '古麗扎娜', '佟麗丫丫'];
        console.log(arr2[0]); // 迪麗熱巴
        console.log(arr2[1]); // 古麗扎娜
        console.log(arr2[2]); // 佟麗丫丫
        console.log(arr2[3]); // 因爲沒有這個數組元素 所以輸出的結果是 undefined

        // 定義一個數組，裏面存放星期一、星期二…… 直到星期日（共7天），在控制檯輸出：星期日
        var week = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
        console.log(week[6]); // 星期日
    </script>
</head>
<body>

</body>
</html>

02 - 遍歷數組

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>02-遍歷數組</title>
    <!-- 
        4. 遍歷數組
        ==========

        問：數組中的每一項我們怎麼取出來？
        答：可以通過 "數組名[索引號]" 的方式一項項的取出來。

        ```JavaScript
        var arr = ['red','green', 'blue'];
        console.log(arr[0]) // red
        console.log(arr[1]) // green
        console.log(arr[2]) // blue
        ```

        問：怎麼把數組裏面的元素全部取出來？
        規律： 從代碼中我們可以發現，從數組中取出每一個元素時，代碼是重複的，有所不一樣的是 索引值在遞增
        答案就是 循環

        遍歷: 就是把數組中的每個元素從頭到尾都訪問一次（類似我們每天早上學生的點名）。
        我們可以通過 for 循環索引遍歷數組中的每一項

        ```JavaScript
        var arr = ['red','green', 'blue'];
        for(var i = 0; i < arr.length; i++){
            console.log(arrStus[i]);
        }
        ```

        知識總結
        -------
        1. 什麼是遍歷？
        遍歷：把數據的集合中的數據逐個訪問，稱爲遍歷

        2. 如何遍歷數組？
        遍歷數組：通過循環過程中的計數器變量，把數組中的元素從頭到尾訪問一遍，稱爲遍歷數組
        遍歷數組的寫法：
        for( var i = 0;i < 數組的長度; i++ ){
            arr[ i ] ; // 遍歷到的數組的元素
        }

     -->
    <script>
        // 遍歷數組：就是把數組的元素從頭到尾訪問一次
        var arr = ['red', 'green', 'blue'];
        for (var i = 0; i < 3; i++) {
            console.log(arr[i]); // red green blue
        }
        // 1. 因爲我們的數組索引號從0開始 ，所以 i 必須從 0開始  i < 3
        // 2. 輸出的時候 arr[i]  i 計數器當索引號來用
    </script>
</head>
<body>

</body>
</html>

03 - 數組長度

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>03-數組長度</title>
    <!-- 
        4.1 數組的長度
        -------------
        使用 "數組名.length" 可以訪問數組元素的數量（數組長度）。 
        ```JavaScript
        var arrStus = [1,2,3];
        alert(arrStus.length); // 3
        ```
        注意：
        1. 此處數組的長度是 數組元素的個數  ，不要和數組的 索引號 混淆。
        2. 當我們數組裏面的元素個數發生了變化，這個 length 屬性跟着一起變化。

        課堂案例1：遍歷數組
        -----------------
        請將 [“關羽”,“張飛”,“馬超”,“趙雲”,“黃忠”,“劉備”,“姜維”]; 數組裏的元素依次打印到控制檯。

        1. 什麼是遍歷？ 
        2. 我們通過什麼來遍歷數組裏面的元素？
        3. for裏面的 i 是什麼？當什麼使用？ for裏面的數組元素怎麼寫？ 
            i是計數器，當索引號使用， arr[i] 是數組元素 第i個數組元素
        4. 怎麼獲取數組的長度？
        5. 數組索引號和數組長度有什麼關係？ 索引號從0開始，數組長度是 元素個數
     -->
    <script>
        // 數組長度 數組名.length
        var arr = ['關羽', '張飛', '馬超', '趙雲', '黃忠', '劉備', '姜維', 'pink'];
        for (var i = 0; i < 7; i++) {
            console.log(arr[i]);
        }
        console.log(arr.length); // 8
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
        // 1. 數組的長度是元素個數  不要跟索引號混淆
        // 2. arr.length 動態監測數組元素的個數
    </script>
</head>
<body>

</body>
</html>

04 - 計算數組的和以及平均值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>04-計算數組的和以及平均值</title>
    <!-- 
        課堂案例 2：數組求和及平均值
        --------------------------
        求數組 [2,6,1,7, 4] 裏面所有元素的和以及平均值。

        案例分析
        --------
        (1)聲明一個求和變量 sum。
        (2)遍歷這個數組，把裏面每個數組元素加到 sum 裏面。
        (3)用求和變量 sum 除以數組的長度就可以得到數組的平均值。
     -->
    <script>
        
        var arr = [2, 6, 1, 7, 4];
        var sum = 0;
        var average = 0;
        for (var i = 0; i < arr.length; i++) {
            sum += arr[i]; // 我們加的是數組元素 arr[i] 不是計數器 i
        }
        average = sum / arr.length;
        // 想要輸出多個變量，用逗號分隔即可
        console.log(sum, average); // 20 4
    </script>
</head>
<body>

</body>
</html>

05 - 求數組中的最大值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>05-求數組中的最大值</title>
    <!-- 
        課堂案例3：數組最大值
        --------------------
        求數組[2,6,1,77,52,25,7]中的最大值。

        案例分析
        --------
        1. 聲明一個保存最大元素的變量 max。
        2. 默認最大值可以取數組中的第一個元素。
        3. 遍歷這個數組，把裏面每個數組元素和 max 相比較。
        4. 如果這個數組元素大於max 就把這個數組元素存到 max 裏面，否則繼續下一輪比較。
        5. 最後輸出這個 max。
     -->
    <script>
        var arr = [2, 6, 1, 77, 52, 25, 7, 99];
        var max = arr[0]; // 用來保存最大元素,默認最大值是數組中的第一個元素
        // 從0 開始循環數組裏的每個元素
        for (var i = 1; i < arr.length; i++) {
            // 如果數組裏當前循環的元素大於 max，則保存這個元素和下標
            if (arr[i] > max) {
                max = arr[i]; // 保存數值到變量 max
            }
        }
        console.log('該數組裏面的最大值是：' + max); // 該數組裏面的最大值是：99
    </script>
</head>
<body>

</body>
</html>

06 - 數組轉換爲字符串

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>06-數組轉換爲字符串</title>
    <!-- 
        課堂案例4：數組轉換爲字符串
        -------------------------
        要求：將數組 ['red', 'green', 'blue', 'pink'] 轉換爲字符串，並且用 | 或其他符號分割
        輸出： 'red|green|blue|pink'

        案例分析
        -------
        1.需要一個新變量用於存放轉換完的字符串 str。
        2.遍歷原來的數組，分別把裏面數據取出來，加到字符串裏面。
        3.同時在後面多加一個分隔符
     -->
    <script>
        
        var arr = ['red', 'green', 'blue', 'pink'];
        var str = '';
        var sep = '*';
        for (var i = 0; i < arr.length; i++) {
            str += arr[i] + sep;
        }
        console.log(str); // red*green*blue*pink*
    </script>
</head>
<body>

</body>
</html>

07 - 新增數組元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07-新增數組元素</title>
    <!-- 
        5. 數組中新增元素
        ================

        5.1 通過修改length長度新增數組元素
        --------------------------------
        - 可以通過修改 length 長度來實現數組擴容的目的
        - length 屬性是可讀寫的

        ```JavaScript
        var arr = ['red', 'green', 'blue', 'pink'];
        arr.length = 7;
        console.log(arr); // Array(7) [ "red", "green", "blue", "pink", <3 empty slots> ]
        console.log(arr[4]); // undefined
        console.log(arr[5]); // undefined
        console.log(arr[6]); // undefined
        ```

        其中索引號是 4，5，6 的空間沒有給值，就是聲明變量未給值，默認值就是 undefined。

        5.2 通過修改數組索引新增數組元素
        ------------------------------
        - 可以通過修改數組索引的方式追加數組元素
        - 不能直接給數組名賦值，否則會覆蓋掉以前的數據

        ```JavaScript
        var arr = ['red', 'green', 'blue', 'pink'];
        arr[4] = 'hotpink';
        console.log(arr);
        ```
        
        這種方式也是我們最常用的一種方式。


        知識總結
        --------
        - 修改數組的length：
            - 如果設置的length的值大於原來的數組長度，則會在數組最後留下空白位置
            - 如果設置的length的值小於原來的數組長度，則會讓數組丟失後面的元素
        - 增加數組元素：
            - 通過“數組[索引值] = 數據 ”來設置數組的元素
            - 如果索引值是已經存在的元素的索引值，則會把之前的元素的值覆蓋掉
            - 如果索引值是尚未出現的索引值，則會增加一個元素，且如果不與數組之前的最後一個元素的索引值相連的話，
              會形成空白位置
     -->
    <script>
        // 1. 新增數組元素 修改length長度 
        var arr = ['red', 'green', 'blue'];
        console.log(arr.length);
        arr.length = 5; // 把我們數組的長度修改爲了 5  裏面應該有5個元素 
        console.log(arr); // Array(5) [ "red", "green", "blue", <2 empty slots> ]
        console.log(arr[3]); // undefined
        console.log(arr[4]); // undefined

        // 2. 新增數組元素 修改索引號 追加數組元素
        var arr1 = ['red', 'green', 'blue'];
        arr1[3] = 'pink';
        console.log(arr1); // Array(4) [ "red", "green", "blue", "pink" ]
        arr1[4] = 'hotpink';
        console.log(arr1); // [ "red", "green", "blue", "pink", "hotpink" ]
        arr1[0] = 'yellow'; // 這裏是替換原來的數組元素
        console.log(arr1); // Array(5) [ "yellow", "green", "blue", "pink", "hotpink" ]
        arr1 = '有點意思';
        console.log(arr1); // 不要直接給 數組名賦值 否則裏面的數組元素都沒有了
    </script>
</head>
<body>

</body>
</html>

08 - 數組存放1~10個值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>08-數組存放1~10個值</title>
    <!-- 
        課堂案例1：數組新增元素
        ---------------------
        新建一個數組，裏面存放10個整數（ 1~10），要求使用循環追加的方式輸出： [1,2,3,4,5,6,7,8,9,10]

        案例分析
        -------
        核心原理：使用循環來追加數組。
        1、聲明一個空數組 arr。
        2、循環中的計數器 i  可以作爲數組元素存入。
        3、由於數組的索引號是從0開始的， 因此計數器從 0 開始更合適，存入的數組元素要+1。
     -->
    <script>
        
        var arr = [];
        for (var i = 0; i < 100; i++) {
            // arr = i; 不要直接給數組名賦值 否則以前的元素都沒了
            arr[i] = i + 1;
        }
        console.log(arr); // Array(100) [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, … ]
    </script>
</head>
<body>

</body>
</html>

09 - 篩選數組

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>09-篩選數組</title>
    <!-- 
        課堂案例2：篩選數組
        -----------------
        要求：將數組 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大於等於 10 的元素選出來，放入新數組。

        案例分析
        -------
        1、聲明一個新的數組用於存放新數據newArr。
        2、遍歷原來的舊數組， 找出大於等於 10 的元素。
        3、依次追加給新數組 newArr。
     -->
    <script>
        // 方法1
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        // 定義一個變量 用來計算 新數組的索引號
        var j = 0;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                // 新數組索引號應該從0開始 依次遞增
                newArr[j] = arr[i];
                // 索引號 不斷自加
                j++;
            }
        }
        console.log(newArr); // Array(3) [ 77, 52, 25 ]
        // 方法2 
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        // 剛開始 newArr.length 就是 0
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                // 新數組索引號應該從0開始 依次遞增
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr); // Array(3) [ 77, 52, 25 ]
    </script>
</head>
<body>

</body>
</html>

10 - 數組去重(刪除指定數組元素)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>10-數組去重(刪除指定數組元素)</title>
    <!-- 
        課堂案例1：刪除指定數組元素
        -------------------------
        要求：將數組[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉後，形成一個不包含 0 的新數組。

        案例分析
        -------
        1、需要一個新數組用於存放篩選之後的數據。
        2、遍歷原來的數組， 把不是 0 的數據添加到新數組裏面(此時要注意採用數組名 + 索引的格式接收數據)。
        3、新數組裏面的個數， 用 length 不斷累加。
     -->
    <script>
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = []; // 空數組的默認的長度爲 0 
        // 定義一個變量 i 用來計算新數組的索引號
        for (var i = 0; i < arr.length; i++) {
            // 找出大於 10 的數
            if (arr[i] != 0) {
                // 給新數組
                // 每次存入一個值，newArr長度都會 +1
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr); // Array(7) [ 2, 6, 1, 77, 52, 25, 7 ]
    </script>
</head>
<body>

</body>
</html>

11 - 翻轉數組

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>11-翻轉數組</title>
    <!-- 
        課堂案例2：反轉數組
        ------------------
        要求：將數組 ['red', 'green', 'blue', 'pink', 'purple'] 的內容反過來存放。
        輸出： ['purple', 'pink', 'blue', 'green', 'red']

        案例分析
        -------
        1、聲明一個新數組 newArr
        2、把舊數組索引號第4個取過來（arr.length - 1)，給新數組索引號第0個元素 (newArr.length)
        3、我們採取 遞減的方式  i--
     -->
    <script>
        var arr = ['red', 'green', 'blue', 'pink', 'purple', 'hotpink'];
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i]
        }
        console.log(newArr); // Array(6) [ "hotpink", "purple", "pink", "blue", "green", "red" ]
    </script>
</head>
<body>

</body>
</html>

12 - 複習交換兩個變量

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>12-複習交換兩個變量</title>
    <!-- 
        課堂案例3：數組排序（冒泡排序）
        ----------------------------
        我們先複習下如何把2個變量交換數據 
        
        ```JavaScript
        // 利用第三個變量
        var num1 = 10;
        var num2 = 20;
        var temp = num1;
        num1 = num2;
        num2 = temp;
        console.log(num1, num2);
        ```
     -->
    <script>
        // 交換兩個變量
        var num1 = 'pink';
        var num2 = 'yellow';
        var temp;
        temp = num1;
        num1 = num2;
        num2 = temp;
        console.log(num1, num2); // yellow pink
    </script>
</head>
<body>

</body>
</html>

13 - 冒泡排序

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>13-冒泡排序</title>
    <!-- 
        課堂案例3：數組排序（冒泡排序）
        ----------------------------
        冒泡排序：是一種算法，把一系列的數據按照一定的順序進行排列顯示(從小到大或從大到小）。
        例如，我們可以將數組 [5, 4, 3, 2, 1]中的元素按照從小到大的順序排序，輸出： 1，2，3，4，5

        案例分析
        -------
        1. 一共需要的趟數 我們用外層for循環
        2. 每一趟交換次數 我們用裏層for循環
        3. 交換2個變量就好了

     -->
    <script>
        // 冒泡排序
        // var arr = [5, 4, 3, 2, 1];
        var arr = [4, 1, 2, 3, 5];
        for (var i = 0; i < arr.length - 1; i++) { // 外層循環管趟數 
            for (var j = 0; j < arr.length - i - 1; j++) { // 裏面的循環管 每一趟的交換次數
                // 內部交換2個變量的值 前一個和後面一個數組元素相比較
                if (arr[j] < arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr); // Array(5) [ 5, 4, 3, 2, 1 ]
    </script>
</head>
<body>

</body>
</html>

JavaScript 08 - 數組

數組

昨日複習

01 - 數組的使用

02 - 遍歷數組

03 - 數組長度

04 - 計算數組的和以及平均值

05 - 求數組中的最大值

06 - 數組轉換爲字符串

07 - 新增數組元素

08 - 數組存放1~10個值

09 - 篩選數組

10 - 數組去重(刪除指定數組元素)

11 - 翻轉數組

12 - 複習交換兩個變量

13 - 冒泡排序

JavaScript基礎第03天【筆記+代碼】

lisa音標

計算機-查找專項練習

JavaScript基礎第02天【筆記+代碼】

corejava_day1（核心Java）

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

linux以太網驅動總結