0131 JavaScript數組中新增元素:修改數組索引、修改 length 長度、數組翻轉


​ 數組中可以通過以下方式在數組的末尾插入新元素

  數組[ 數組.length ] = 新數據;

1.5.1 通過修改 length 長度新增數組元素

  • 可以通過修改 length 長度來實現數組擴容的目的

  • length 屬性是可讀寫的

var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7; 
console.log(arr);
console.log(arr[4]);  // undefined
console.log(arr[5]); 
console.log(arr[6]); 

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


1.5.2 通過修改數組索引新增數組元素

  • 可以通過修改數組索引的方式追加數組元素

  • 不能直接給數組名賦值,否則會覆蓋掉以前的數據

var arr = ['red', 'green', 'blue', 'pink']; 
arr[4] = 'hotpink'; 
console.log(arr); 

這種方式也是我們最常用的一種方式。

        // 1. 新增數組元素 修改length長度 
        var arr = ['red', 'green', 'blue'];
        console.log(arr.length);
        arr.length = 5; // 把我們數組的長度修改為了 5  里面應該有5個元素 
        console.log(arr);
        console.log(arr[3]); // undefined
        console.log(arr[4]); // undefined

        // 2. 新增數組元素 修改索引號 追加數組元素
        var arr1 = ['red', 'green', 'blue'];
        arr1[3] = 'pink';
        console.log(arr1);
        arr1[4] = 'hotpink';
        console.log(arr1);
        arr1[0] = 'yellow'; // 這里是替換原來的數組元素
        console.log(arr1);
        arr1 = '有點意思';
        console.log(arr1); // 不要直接給 數組名賦值 否則里面的數組元素都沒有了
        // 案例:數組存放1~10個值
        // 新建一個數組,里面存放10個整數( 1~10)
        // 核心原理:使用循環來追加數組。
        // 1、聲明一個空數組 arr。
        // 2、循環中的計數器 i  可以作為數組元素存入。
        // 3、由於數組的索引號是從0開始的, 因此計數器從 0 開始更合適,存入的數組元素要+1。
        var arr = [];
        for (var i = 0; i < 100; i++) {
            // arr = i; 不要直接給數組名賦值 否則以前的元素都沒了
            arr[i] = i + 1;
        }
        console.log(arr);
        // demo:篩選數組
        // 將數組 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大於等於 10 的元素選出來,放入新數組。
        // 1、聲明一個新的數組用於存放新數據newArr。
        // 2、遍歷原來的舊數組, 找出大於等於 10 的元素。
        // 3、依次追加給新數組 newArr。
        // 方法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);

        
        // 方法2:Array.length
        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);
        demo:數組去重(刪除指定數組元素)
        // 將數組[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后,形成一個不包含 0 的新數組。
        // 1、需要一個新數組用於存放篩選之后的數據。
        // 2、遍歷原來的數組, 把不是 0 的數據添加到新數組里面(此時要注意采用數組名 + 索引的格式接收數據)。
        // 3、新數組里面的個數, 用 length 不斷累加。
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 0) {
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
        // demo:數組翻轉
        // 將數組 ['red', 'green', 'blue', 'pink', 'purple'] 的內容反過來存放
        // 1、聲明一個新數組 newArr
        // 2、把舊數組索引號第4個取過來(arr.length - 1),給新數組索引號第0個元素 (newArr.length)
        // 3、我們采取 遞減的方式  i--
        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);

算法:觀察執行過程,找到規律,轉為代碼。

image-20200104105104830
        // 冒泡排序
        // var arr = [5, 4, 3, 2, 1];
        var arr = [4, 1, 2, 3, 5];
        // 外層循環管趟數 【5個元素,冒泡排序4趟,應該是arr.length - 2,結果一樣】
        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(i);
        }
        console.log(arr);


        // 我的寫法1
        var arr = [4, 1, 9, 2, 7, 3, 5];
        var len = arr.length;
        // i <= len - 2,i <= len - 1,結果都一樣
        for (var i = 0; i <= len - 2; i++) {
            for (j = 0; j <= len - i - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }

            }
        }
        console.log(arr); // [1, 2, 3, 4, 5, 7, 9]


        我的寫法2
        var arr = [4, 1, 9, 2, 7, 3, 5];
        var len = arr.length;

        for (var i = 0; i < len; i++) {
            var temp;
            for (var j = i; j < len; j++) {
                if (arr[j] > arr[j + 1]) {
                    temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr); // [1, 2, 3, 4, 5, 7, 9]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM