2020-10-16（陣列方法的擴充）

自信且努力66發表於2020-10-16
陣列

Love what you do,do what you want.

陣列深入擴充

foreach

 <script>
        var personArr = [{
            name: '王港',
            src: './src/img/3.png',
            des: '頸椎不好',
            sex: 'm'
        }, {
            name: '劉瑩',
            src: './src/img/5.png',
            des: '我是誰',
            sex: 'f'
        }, {
            name: '王秀瑩',
            src: './src/img/4.png',
            des: '我很好看',
            sex: 'f'
        }, {
            name: '劉金雷',
            src: './src/img/1.png',
            des: '你沒有見過陌生的臉',
            sex: 'm'
        }, {
            name: '劉飛翔',
            src: './src/img/2.png',
            des: '瓜皮劉',
            sex: 'm'
        }];

        // 使用foreach方法
        var oUl = document.getElementsByTagName('ul')[0];
        var oLiArray = oUl.getElementsByTagName('li');

        personArr.forEach(deal);

        // 第一個引數每次迴圈的時候這個元素，第二個引數是索引值，第三個引數是陣列本身
        function deal(ele, index, self) {
            oLiArray[index].innerText = ele.name;
        }
    </script>

foreach方法是可以傳入兩個引數，第一個引數是處理函式，第二個引數是自定義的this指向的物件。
第一個引數的舉例就是上面的在personArr在呼叫foreach方法之後，我們在每次遍歷之後都獲取到了三個值，當前的元素，索引值的內容以及陣列本身。最終就會oLiArray[index].innerText = ele.name;將名字渲染到ul下面的li當中去。
在這裡插入圖片描述

filter（基於遍歷對陣列的過濾）

介紹filter方法的使用：filter方法類似於上面的foreach方法，都是在呼叫之後傳入一個函式，這個函式有三個引數，下面是一個實際的例子，來篩選出所有性別為男的學生。最終是根據遍歷結果的真值來確定這個陣列當中的元素能否新增到新的陣列當中去，最後返回的結果是一個符合條件的新陣列，符合的條件由自己封裝成一個deal函式或者是一個匿名函式，並且最終這個子函式最終返回的是boolean值。
程式碼：

  var oUl = document.getElementsByTagName('ul')[0];
        var oLiArray = oUl.getElementsByTagName('li');

        function deal(ele,index,self){
            return ele.sex == 'm';
        }
        // 使用filter方法
        maleArray = personArr.filter(deal);
        console.log(maleArray);

結果：在這裡插入圖片描述

map

分析：map是一個在Array.prototype上面的方法，最終返回的結果仍然是一個新的陣列，需要傳入一個函式引數，同樣也可以傳入一個自定義的物件。最終返回的新的陣列當中的內容是根據傳入的匿名函式的限定條件得來的。
舉個例子：比如說還是基於上面的人物陣列物件，我們想要最後我們僅僅提取出來一個新的陣列，該陣列中只有name，那麼我們就可以。
程式碼實現：

    var oUl = document.getElementsByTagName('ul')[0];
        var oLiArray = oUl.getElementsByTagName('li');

        var newArr = personArr.map(function(ele,index,self){
            return ele.name;
        })
        console.log(newArr);

結果：
在這裡插入圖片描述

every和some

every：最終返回的是根據條件判斷陣列當中的每一個元素是否滿足，如果全部滿足，返回true，否則返回false。
some：最終返回的結果與every類似，只是判定條件變為只要有一個元素滿足就可以返回true，全部不滿足才會返回false。

   var personArr = [{
            name: '王港',
            src: './src/img/3.png',
            des: '頸椎不好',
            sex: 'm',
            age:20
        }, {
            name: '劉瑩',
            src: './src/img/5.png',
            des: '我是誰',
            sex: 'f',
            age:20
        }, {
            name: '王秀瑩',
            src: './src/img/4.png',
            des: '我很好看',
            sex: 'f',
            age:20
        }, {
            name: '劉金雷',
            src: './src/img/1.png',
            des: '你沒有見過陌生的臉',
            sex: 'm',
            age:20
        }, {
            name: '劉飛翔',
            src: './src/img/2.png',
            des: '瓜皮劉',
            sex: 'm',
            age:20
        }];
        
var newArr = personArr.every(function(ele,index,self){
            if(ele.age>18){
                return true;
            }else{
                return false;
            }
        })
        console.log(newArr);

最終返回的結果是true，因為每一個元素都滿足age>18.

相關文章