【前端-JavaScript】10種遍歷方法

本文轉載自查看原文 2019-08-01 16:44 982 【JavaScript】/ JavaScript

JavaScript之10種遍歷方法

1. for 循環

for循環語句，最基礎的遍歷，以數組的下標為索引，主要對數組元素進行遍歷。

注意：for 循環不是函數，不存在返回值。

var arr = [1,2,'zhejiang',true];
    for(var i=0 ;i<arr.length;i++){
        console.log(arr[i])     // i=0 1 2 3
    }

2. for in

for in 循環主要用於遍歷普通對象，i 代表對象的 key 值，obj[i] 代表對應的 value, 當用它來遍歷數組時候，多數情況下也能達到同樣的效果，但是你不要這么做，這是有風險的，

因為 i 輸出為字符串形式，而不是數組需要的數字下標，這意味着在某些情況下，會發生字符串運算，導致數據錯誤，比如：'52'+1 = '521' 而不是我們需要的 53。

另外 for in 循環的時候，不僅遍歷自身的屬性，還會找到 prototype 上去，
所以最好在循環體內加一個判斷，就用 obj[i].hasOwnProperty(i)，這樣就避免遍歷出太多不需要的屬性。

<body>
<div class="item div1" id="dd1"></div>
<div class="item div2" id="dd2"></div>
<div class="item div3" id="dd3"></div>
<div class="item div4" id="dd4"></div>
<div class="item div5" id="dd5"></div>

<script>
    // for in循環不僅可以遍歷數組，還可以遍歷對象，
    // 但for in存在一些陷阱，比如它會在遍歷完元素之后，還會對數組或對象的prototype中的屬性進行遍歷，
    // 所以，for in 更像是為對象遍歷而設計的。

    let obj = {name:'zhou',age:18,gender:'男'};
    for(let i in obj){
        console.log(i,obj[i])
    }

    console.log("--------------------------------------------------------");
    let divObj= document.querySelectorAll('div');
    for(let i in divObj){
        console.log(i,divObj[i]);
        console.log(divObj[i].id);
    }
    /*總結：for in 循環主要用於遍歷普通對象，i 代表對象的 key 值，obj[i] 代表對應的 value, 當用它來遍歷數組時候，多數情況下也能達到同樣的效果，
    但是你不要這么做，這是有風險的，因為 i 輸出為字符串形式，而不是數組需要的數字下標，這意味着在某些情況下，會發生字符串運算，導致數據錯誤，比如：'52'+1 = '521' 而不是我們需要的 53。

    另外 for in 循環的時候，不僅遍歷自身的屬性，還會找到 prototype 上去，
    所以最好在循環體內加一個判斷，就用 obj[i].hasOwnProperty(i)，這樣就避免遍歷出太多不需要的屬性。*/
</script>

3. whild 和 do while 循環

    let cars=["BMW","Volvo","Saab","Ford"];
    let i=0;
    for(;cars[i];){
        console.log(cars[i]);
        i++;
    }


    cars=["BMW","Volvo","Saab","Ford"];
    var i=0;
    while (cars[i]){
        console.log(cars[i] + "<br>");
        i++;
    };


    let j = 3;
    do{
        console.log(j);
        j--;
    }
    while(j>0)
    // 3
    // 2
    // 1

View Code

4. forEach

forEach() 方法用於調用數組的每個元素，並將元素傳遞給回調函數。

let arr = [11,22,33];
    arr.forEach(function(i,index,arr0){
        console.log(i); //數組每一項
        console.log(index);     //數組下標
        console.log(arr0);  //該遍歷的數組 arr
    });

詳細用法介紹：

// let arr = [11,22,33];
    /*arr.forEach(function(i,index,arr0){
        console.log(i); //數組每一項
        console.log(index);     //數組下標
        console.log(arr0);  //該遍歷的數組 arr
    });*/

    // ES6 箭頭函數寫法
    // arr.forEach(res =>{
    //     console.log(res);   //數組每一項
    // });

    /*// 一個小例子：修改產品的數量隨機,求出每個產品的總價
    var data=[
        {id:1001,icon:"img/1.png",name:"餐飲0",num:1,price:10},
        {id:1002,icon:"img/2.png",name:"餐飲1",num:1,price:20},
        {id:1003,icon:"img/3.png",name:"餐飲2",num:1,price:30},
        {id:1004,icon:"img/4.png",name:"餐飲3",num:1,price:40},
        {id:1005,icon:"img/5.png",name:"餐飲4",num:1,price:50},
        {id:1006,icon:"img/6.png",name:"餐飲5",num:1,price:60},
        {id:1007,icon:"img/7.png",name:"餐飲6",num:1,price:70},
        {id:1008,icon:"img/8.png",name:"餐飲7",num:1,price:80},
        {id:1009,icon:"img/9.png",name:"餐飲8",num:1,price:90},
        {id:1010,icon:"img/10.png",name:"餐飲9",num:1,price:100}
    ];
    data.forEach(function (item) {
        item.num=parseInt(Math.random()*9+1);
        item.sum=item.num*item.price;
    });
    console.log(data);*/


    /*// 修改數組中的每個值
    var arr=[1,2,4,6,7,8,5,9];
    arr.forEach(function (t,i,arr) {
        //  t++;     //錯誤
        //  arr[i]++;    //數組中每一項

        //  將所有偶數+1
        if(t%2===0){
            arr[i]++;
        }
    });
    console.log(arr);*/

View Code

5. for of (ES6)

for of 循環是 Es6 中新增的語句，用來替代 for in 和 forEach，不允許遍歷對象
它允許你遍歷 Arrays（數組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的數據結構,注意它的兼容性。

<script>
    // for of 循環是 Es6 中新增的語句，用來替代 for in 和 forEach，不允許遍歷 對象
    // 它允許你遍歷 Arrays（數組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的數據結構,注意它的兼容性。

    /*注意：1、 for(var k of arr) 中的 k ，就是數組 arr 中的元素，而不是數組的下標。
        2、 IE 不支持，Edge支持。*/

    let arr = ['name','age'];
    for(let i of arr){
        console.log(i)
    }
    for(let i of 'zhejiang'){
        console.log(i);
    }
    
    /*// 不能遍歷對象，下面寫法錯誤
    let obj1 = {name:'xiong',age:18};
    for(let i of obj1){
        console.log(i);
    }*/
</script>

6. Array map()方法

map()與forEach相似,可以完成forEach的所有功能。

map() 返回一個新數組。
map() 不會對空數組進行檢測。
map() 不會改變原始數組。

注意：map 和 forEach 方法都是只能用來遍歷數組，不能用來遍歷普通對象。

    //map()遍歷
    /*var arr = [1, 2, 4, 6, 7, 8, 5, 9];
    arr.map(function (t) {
        console.log(t);     //1 2 4 6 7 8 5 9
    });*/

    /*// map()與forEach相似,可以完成forEach的所有功能
    var data = [
        {id: 1001, icon: "img/1.png", name: "餐飲0", num: 1, price: 10},
        {id: 1002, icon: "img/2.png", name: "餐飲1", num: 1, price: 20},
        {id: 1003, icon: "img/3.png", name: "餐飲2", num: 1, price: 30},
        {id: 1004, icon: "img/4.png", name: "餐飲3", num: 1, price: 40},
        {id: 1005, icon: "img/5.png", name: "餐飲4", num: 1, price: 50},
        {id: 1006, icon: "img/6.png", name: "餐飲5", num: 1, price: 60},
        {id: 1007, icon: "img/7.png", name: "餐飲6", num: 1, price: 70},
        {id: 1008, icon: "img/8.png", name: "餐飲7", num: 1, price: 80},
        {id: 1009, icon: "img/9.png", name: "餐飲8", num: 1, price: 90},
        {id: 1010, icon: "img/10.png", name: "餐飲9", num: 1, price: 100}
    ];
    data.map(function (item) {
        item.num = parseInt(Math.random() * 9 + 1);
        item.sum = item.num * item.price;
    });
    console.log(data);*/

    /*// 每個元素+1,返回給新數組
    var arr=[1,2,4,6,7,8,5,9];
    var arr1=arr.map(function (t) {
        return ++t;
    });
    console.log(arr,arr1);*/
    

    /*
   return 返回數據元素,到新數組中,如果不返回的數據就會變成undefined
    var arr=[1,2,4,6,7,8,5,9];
      arr=arr.map(function (t) {
          if(t%2===0){
              return t+1;
          }
          return t;      //如果沒有這句，非奇數的返回為undefined
      });
       console.log(arr);*/


    /*  map() 和 forEach() 的區別
    *   forEach遍歷當前數組,沒有返回值,不會返回新數組
    *   map遍歷當前數組,並且將當前數組中的元素返回給新數組,
    * 不使用return時,新數組的長度與原數組相同,但是每個元素都是undefined;
    * */

7. Array filter() 方法

filter 方法是 Array對象內置方法，它會返回通過過濾的元素，不改變原來的數組。

filter() 方法返回一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。

<script>
    // filter 方法是 Array對象內置方法，它會返回通過過濾的元素，不改變原來的數組。
    // filter() 方法返回一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。

    let arr = [1,2,3];
    let tt = arr.filter(function(i){
        return i>1;
    });
    console.log(tt);    //[2,3]
    console.log(arr);   //[1,2,3]

    var arr1 = ['A', 'B', 'C'];
    var r = arr1.filter(function (element, index, self) {
        console.log(element); // 依次打印'A', 'B', 'C'
        console.log(index); // 依次打印0, 1, 2
        console.log(self); // self就是變量arr1
        return true;
    });


    // 利用filter，可以巧妙地去除Array的重復元素：
    // 去除重復元素依靠的是indexOf總是返回第一個元素的位置，后續的重復元素位置與indexOf返回的位置不相等，因此被filter濾掉了。
    var r, arr2 = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
    r = arr2.filter(function (element,  index, self) {
        return self.indexOf(element) === index;
    });
    console.log(r);



    // 用filter()篩選出1-100之間所有素數：
    function get_primes(arr) {
        var i;
        return arr.filter(function (element) {
            var flag=true;
            if(element<2){
                flag=false;
            }else {
                for(var i=2;i<element;i++){
                    if (element%i==0){
                        flag=false;
                        break;
                    }
                }
            }
            return flag;
        });
    }

    var arr3 = [];
    for (var x = 1; x < 100; x++) {
        arr3.push(x)
    }
    console.log(get_primes(arr3));  //[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]
</script>

View Code

8. Array some() 方法

some() 方法用於檢測數組是否存在元素滿足指定條件（函數提供）。只要有一個元素滿足則返回true，並不再繼續往下判斷,不改變原數組。

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// 檢測數組中元素是否都大於1
// true

詳細用法介紹：

<script>
    /*
     // some() 方法用於檢測數組中的元素是否滿足指定條件（函數提供）。只要有一個元素滿足則返回true，並不再繼續往下判斷。
    // arr.some(callback(element[, index[, array]])[, thisArg])
    let arr = [1,2,3];
    let tt = arr.some(function(i){
        return i>1;
    });
    console.log(tt);    //false*/


    /*const a = [11, 50, 40, 3, 5, 80, 90, 4];
    const arr1 = [];
    let ret1 = a.some((item, index, array) => {
        console.log(item, index, array);
        if (item > 80) {
            return arr1.push(item);
        }
    });
    console.log('ret1===>',ret1);   //ret1===> true
    console.log('arr1---',arr1);    //arr1--- [90]*/


    // function isBiggerThan10(element, index, array) {
    //     return element > 10;
    // }
    // [2, 5, 8, 1, 4].some(isBiggerThan10); // false


    //二、 判斷數組元素中是否存在某個值
    // 模仿 includes()方法, 若元素在數組中存在, 則回調函數返回值為 true :
    var fruits = ['apple', 'banana', 'mango', 'guava'];
    var fruitsNew = [];

    function checkAvailability1(arr, val) {
        return arr.some(item => {
            console.log(item);
            return val == item
        })
    }

    console.log(checkAvailability1(fruits, 'kela')); // false
    console.log(checkAvailability1(fruits, 'banana')); // true


    // 三、根據條件截取更新數據
    function checkAvailability2(val) {
        fruits.some((item, i) => {
            if (item == val) {
                fruits.splice(i, 1)
            }
        })
    }
    checkAvailability2('banana');
    console.log(fruits);    //  ["apple", "mango", "guava"]

</script>

View Code

9. Array every() 方法

every() 方法用於檢測數組中是否所有元素都符合指定條件（通過函數提供），返回 boolen。

let arr = [1,2,3];
let tt = arr.every(function(i){
 return i>1;
})
// false

詳細用法介紹：

// every()是對數組中每一項運行給定函數，如果該函數對每一項返回true,則返回true。
// some()是對數組中每一項運行給定函數，如果該函數對任一項返回true，則返回true。

    function isBigEnough(element, index, array) {
        return (element >= 10);
    }

    var passed = [12, 5, 8, 130, 44].every(isBigEnough);
    console.log(passed);

    //檢查數組每一項 是否都是偶數
    function CheckIfEven(value, index){
        console.log(value);
        if(value % 2 == 0){
            return '偶數';        //回到函數的返回值沒有必要非得是true本身，只要可以轉換為true即可，對於false也是如此。
        }
    }
    let numbers=[2, 4, 5, 6, 8];

    if(numbers.every(CheckIfEven)){
        console.log("全都是偶數");
    }
    else{
        console.log("不全都是偶數");
    }

View Code

10. JQuery方法 $.each

each() 方法為每個匹配元素規定要運行的函數。JQuery的each方法既可以遍歷數組，也可以遍歷對象。在遍歷對象時可以很容易獲取對象屬性名。

語法：jQuery.each(object, [callback])

回調函數擁有兩個參數：第一個為對象的成員或數組的索引，第二個為對應變量或內容。如果需要退出 each 循環可使回調函數返回 false，其它返回值將被忽略。

示例1 遍歷數組：

示例2 遍歷對象

原生方法實現如下：

// 通過字面量方式實現的函數each
var each =  function(object, callback){
  var type = (function(){
          switch (object.constructor){
            case Object:
                return 'Object';
                break;
            case Array:
                return 'Array';
                break;
            case NodeList:
                return 'NodeList';
                break;
            default:
                return 'null';
                break;
        }
    })();
    // 為數組或類數組時, 返回: index, value
    if(type === 'Array' || type === 'NodeList'){
        // 由於存在類數組NodeList, 所以不能直接調用every方法
        [].every.call(object, function(v, i){
            return callback.call(v, i, v) === false ? false : true;
        });
    }
    // 為對象格式時,返回:key, value
    else if(type === 'Object'){
        for(var i in object){
            if(callback.call(object[i], i, object[i]) === false){
                break;
            }
        }
    }
}

原生JS仿寫jquery 實現$.each()

測試下：

數組類型：

對象類型：

類數組類型：

增加退出循環條件:

var obj= {name:'box', color: 'red', size:'big', number: '100',}
each(obj, function(i, v){
  if(i === 'color'){ 
    console.log('箱子的顏色是，'+v+'');
    return true;
  }
  if(i === 'size' && v=== 'big'){
    console.log('型號，數量符合收貨');
    return false;
  }
  console.log(i + ': ' + v);
});

View Code

免責聲明！

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

猜您在找 JavaScript數組去重的10種方法前端：水平垂直居中的10種方法 JavaScript數組迭代（遍歷）方法 JavaScript遍歷對象方法總結【Javascript】JS遍歷數組的三種方法：map、forEach、filter 遍歷hashmap的6種方法 List 三種遍歷的方法 [轉] javascript 判斷對象是否存在的10種方法總結 javascript遍歷對象的幾種方法 JavaScript、jQuery的遍歷方法(each、forEach)總結