xinggevip

Es2015 数组热闹的循环
index.html<!DOCTYPE html> <html lang="en&qu...
扫描右侧二维码阅读全文
12
2019/06

Es2015 数组热闹的循环

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul id="demo"></ul>

<script>

    let arr = ["apple","banana","organge"];
    
    for(let i = 0; i < arr.length;i++){
        console.log("for循环----" + arr[i]);
    }
    // 相当于普通的For
    arr.forEach(function(val,index,arr1){
        console.log(this,val,index,arr1);    //val相当于arr[i],index相当于i
    }.bind(123))                             //可以传值
    // },Object)

    arr.forEach((val,index,arr2)=>{
        console.log(this,index,arr2);       // 无论给箭头函数传什么值都不会接受
    },3000)



    let arr1 = [
        {
            title:"t1",
            read:100,
            hot:false
        },
        {
            title:"t2",
            read:1000,
            hot:true
        },
        {
            title:"t3",
            read:10000,
            hot:false
        }

    ]


    // map非常有用 ,做数据交互,“映射”
    // 正常情况下需要return,如果没有return功能和forEach一样
    let newarr = arr1.map((val,index,arr3)=>{
        console.log(val,index,arr3);
        return 1;   //默认返回undefined
    });
    console.log(newarr);

    let newarr1 = arr1.map((val,index,arr4)=>{
        let json = {};
        json.t =   `${val.title}已修改`;
        json.r = val.read + 10
        json.h = val.hot == true && "非常棒";
        return json
    })
    console.log(newarr1);

    // filter过滤数据
    let newarr2 = arr1.filter((val,index,arr)=>{
        return val.hot == true;
    });
    console.log(newarr2);   // {title:"t2",read:1000,hot:true}
    // some 类似于查找,数组里符合条件,返回true
    let arr5 = ["apple","banana","orange"];
    let newarr5 = arr.some((val,index,arr)=>{
        return val == "banana"
    });
    console.log(newarr5);  // true

    // some的应用
    function findInArray(arr,item){
        return arr.some((val,index,arr)=>{
            return val == item
        })
    };
    console.log(findInArray(arr5,"apple")); // true

    // 每一项都符合条件才返回true
    let arr6 = [1,3,5];
    let newarr6 = arr6.every((val,index,arr)=>{
        return val%2 == 1   // 每一项除以2余1都要返回为真,否则返回为假
    });
    console.log(newarr6);   // true

    let sumarr = arr6.reduce((prev,val,indexarr)=>{
        
        return prev+val;
        // 类似于 prev = prev + val;
    });
    console.log(sumarr);    // 9 数组的和 

    let chengarr = arr6.reduce((prev,val,index,arr)=>{
        return prev + val*val;  
    });
    console.log(chengarr);  // 35 平方和

    let rightcheng = arr6.reduceRight((prev,val,index,arr)=>{
        return prev ** val  //5的三次方的一次放 从右到左
    });
    console.log(rightcheng);    //125
    // for...of...
    // 只循环值
    for(let val of arr6){
        console.log(val); //1 3 5 
    };
    // 只循环下标
    for(let index of arr6.keys()){
        console.log(index); // 0 1 2
    }
    // 循环下标和值
    for(let item of arr6.entries()){
        console.log(item);  //[0,1] [1,3] [2,5]
    }
    // 优化循环下标和值---利用解构
    for(let [index,val] of arr6.entries()){
        console.log(index,val);  // 01 13 25
    }

</script>
</body>
</html>
Last modification:June 12th, 2019 at 10:55 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment