美文网首页
ES6 数组循环

ES6 数组循环

作者: 祝名 | 来源:发表于2018-12-14 22:34 被阅读0次

    一.

    1. for(let I = 0; I < arr.length; I++)

    while

    2. arr.forEach() -->代替普通for循环

    • 三个参数:val当前遍历到的数据,index当前遍历到的数据的序号,arr当前遍历的数组

    let arr = ['apple', 'banana', 'orange'];
    arr.forEach(function(val, index, arr){
        console.log(val,index,arr);
    });
    -->输出
    apple 0 ['apple', 'banana', 'orange']
    banana 1 ['apple', 'banana', 'orange']
    orange 2 ['apple', 'banana', 'orange']
    

    3. arr.map()-->做数据交互“映射”

    (1)返回的是个新的数组,map()方法不会改变原数组,需要配合return,return的值会将原数组中的对应值替换掉 。


    (2)平时只要用map,一定要有return

    let arr = [
        {title:'aaa', read:100, hot:true},
        {title:'bbb', read:100, hot:true},
        {title:'ccc', read:100, hot:true},
        {title:'ddd', read:100, hot:true}
    ];
    let newArr = arr.map((item,index,arr)=>{
        console.log(item,index,arr);
        return 1;
    });
    console.log(newArr);
    -->返回四个1的数组
    

    (3)若是没有return,相当于forEach()

    let arr = [
        {title:'aaa', read:100, hot:true},
        {title:'bbb', read:100, hot:true},
        {title:'ccc', read:100, hot:true},
        {title:'ddd', read:100, hot:true}
    ];
    arr.map((item,index,arr)=>{
        console.log(item,index,arr);
    });
    

    4. arr.filter()-->过滤

    (1) filter方法的return只有两种情况,true/false;如果返回true就保留这个数据,如果返回false,就删除这个数据。也是返回新数组,不改变原数组。

    newarr = [65,76,88];

    (2)过滤一些不合格“元素”,如果回调函数返回true,就留下来

    let arr = [
        {title:'aaa', read:100, hot:true},
        {title:'bbb', read:100, hot:false},
        {title:'ccc', read:100, hot:true},
        {title:'ddd', read:100, hot:false}
    ];
    let newArr = arr.filter((item,index,arr)=>{
        return item.hot == true;
    });
    console.log(newArr);
    

    5. arr.some()-->类似查找,数组里面某一个元素符合条件,返回true

    let arr = ['apple', 'banana', 'orange'];
    let b = arr.some((val, index, arr)=>{
        return val == 'banana';
    });
    console.log(b);
    -->输出true 
    
    • findInArray函数封装
    let arr = ['apple', 'banana', 'orange'];
    function findInArray(arr, item){
        return arr.some((val, index, arr)=>{
            return val == item;
        })
    }
    findInArray(arr, 'orange');
    -->返回true
    

    6. arr.every()-->数组里面所有的元素都要符合条件,才返回true

    eg:判断数组内部是否都为奇数

    let arr = [1,3,5,7,10];
    let a = arr.every((val, index, arr)=>{
       return val % 2 == 1;
    });
    console.log(a);
    -->false
    

    7. 以上五种循环方法,都可以接收两个参数

    arr.forEach/map...(循环回调函数,this指向谁)

    let arr = ['apple', 'banana', 'orange'];
    arr.forEach(function(val, index, arr){
        console.log(this,val,index,arr);
    },window);
    

    二. 内部参数更复杂一些的循环方法

    1. arr.reduce()-->从左往右

    (1)求数组的和

    let arr = [1,2,3,4,5,6,7,8,9,10];
    let sum = arr.reduce((prev, cur, item, arr)=>{
        return prev + cur;
    //代表上一次存储的结果+当前值
    });
    console.log(sum);
    

    (2)求次方

    let arr = [2,2,4];
    let res = arr.reduce((prev, cur, item, arr)=>{
        return Math.pow(prev , cur);
    });
    console.log(res);
    -->2的2次方,的4次方
    

    2. arr.reduceRight()-->从右往左

    let arr = [2,3,4];
    let res = arr.reduce((prev, cur, item, arr)=>{
       return Math.pow(prev , cur);
    });
    console.log(res);
    -->4的3次方,的2次方
    

    三.for...of...

    let arr = ['apple', 'banana', 'orange'];
    for(let val of arr){
        console.log(val);
    }
    -->
    apple
    banana
    orange
    
    • arr.keys() 数组下标
    let arr = ['apple', 'banana', 'orange'];
    for(let index of arr.keys()){
        console.log(index);
    }
    -->
    0
    1
    2
    

    arr.entries() 数组某一项

    let arr = ['apple', 'banana', 'orange'];
    for(let item of arr.entries()){
        console.log(item);
    }
    -->
    [0,'apple']
    [1,'banana']
    [2,'orange']
    
    let arr = ['apple', 'banana', 'orange'];
    for(let [key,val] of arr.entries()){
        console.log(key,val);
    }
    -->
    0 'apple'
    1 'banana'
    2 'orange'
    

    相关文章

      网友评论

          本文标题:ES6 数组循环

          本文链接:https://www.haomeiwen.com/subject/oyqnhqtx.html