• ES6数组知识点,巧妙运用数组,对循环说88


    <!DOCTYPE html>
    <html>
    <head>
    <title>ES6数组</title>
    <script type="text/javascript">
    // ES6数组新添加的一些方法:
    // arr.forEach()	//循环遍历
    // arr.map()	//有返回值得遍历
    // arr.filter()	//过滤一个新数组
    // arr.some()	//查找
    // arr.every()	//满足
    // arr.reduce()	//一般叠加用
    // arr.reduceRight()	//同上
    
    // arr.find()	//查找,并返回符合条件的第一个对象,否则返回undefined 
    //类似arr.findIndex('str') 返回第一次出现的下标,否则返回-1 ES5老函数
    
    //arr.fill('str',startindex,endindex);//在某个位置插入一个成员
    //arr.includes()//数组查找某个成员是否存在 类似字符串中的includes函数 返回boolean
    
    //for of [ES6版本] forEach的简化版 
    //for in [老版本] forEach的简化版 
    // java中的foreach; 
    // Python中的 for in; 
    // js 中的for of;遍历数组,set//for in遍历对象
    
    // Array、Object、Set、Map四种数据结构中for、for in和for of循环的区别?
    // 一、普通for循环在Array和Object中都可以使用。
    // 二、for in在Array和Object中都可以使用。// 注意:在对象中包含原型上的属性。
    // 三、for of在Array、Object、Set、Map中都可以使用。
    // 四、forEach循环在Array、Set、Map中都可以使用。
    
    
    // arr.forEach()
    let arr=['apple','banana','orange','tomato'];
    //传统写法
    // for (var i = 0; i < arr.length; i++) {
    // console.log(arr[i]);
    // }
    
    //ES6 forEach写法
    //参数说明:forEach函数的参数一:是一个函数,参数二:方法内this指向(不常用) 如果不指定默认window
    //forEach会向这个函数传入三个参数
    //(当前值,当前下标,所在数组)
    // arr.forEach(function(val,index,arr,tem){	
    // console.log(val,index,arr,tem);
    // });
    // 输出结果:
    // apple 0 ["apple", "banana", "orange", "tomato"] undefined
    // banana 1 ["apple", "banana", "orange", "tomato"] undefined
    // orange 2 ["apple", "banana", "orange", "tomato"] undefined
    // tomato 3 ["apple", "banana", "orange", "tomato"] undefined
    
    //ES6 forEach+箭头函数写法
    //参数说明:forEach函数的参数一:是一个函数,参数二:箭头函数时此参数无效
    //forEach会向这个函数传入三个参数
    //(当前值,当前下标,所在数组)
    // arr.forEach((val,index,arr)=>{
    // console.log(val,index,arr);
    // });
    // 输出结果:
    // apple 0 ["apple", "banana", "orange", "tomato"] 
    // banana 1 ["apple", "banana", "orange", "tomato"] 
    // orange 2 ["apple", "banana", "orange", "tomato"] 
    // tomato 3 ["apple", "banana", "orange", "tomato"]
    
    
    // arr.map() 
    // map的重要作用:重置数据结构 //map没有返回值得时候和forEach()方法一模一样 
    //有返回值的时候 是每个function都会返回一个值,最终形成一个数组,返回
    //let newarr=arr.forEach()//返回的是undefined
    //let newarr=arr.map()//返回的是每个function 返回值 组成的数组(可能是普通数组,也可以能对象数组)
    let arr2=[
    {title:'aaaaa',read:100,hot:true},
    {title:'bbbbb',read:100,hot:true},
    {title:'ccccc',read:100,hot:true},
    {title:'ddddd',read:100,hot:true}
    ];
    let newarr2=arr2.map((item,index,arr)=>{
    //console.log(item,index);
    return {
    index:index,
    title:item.title,
    read:item.read,
    hot:item.hot
    }
    });
    console.log(newarr2);
    //总结map的重要作用:重置数据结构 
    //用需要返回值用map不需要返回值用forEach
    
    
    //arr.filter()
    //主要作用:过滤 返回值 true||false true留下 false删除 
    // 最后返回一个过滤好的新数组
    let arr3=[
    {title:'aaaaa',read:100,hot:true},
    {title:'bbbbb',read:100,hot:false},
    {title:'ccccc',read:100,hot:true},
    {title:'ddddd',read:100,hot:false}
    ];
    let newarr3=arr3.filter((item,index,arr)=>{
    //console.log(item,index);
    return item.hot;
    });
    console.log(newarr3);
    
    
    //arr.some() //子函数返回 boolean 最后根据boolean数组||运算 即只要一个满足就返回true
    //arr.every() //子函数返回 boolean 最后根据boolean数组&&运算 即必须每一个满足才返回true
    
    let arr4=[1,2,3,4,5,6,7,8,9,10];
    let res1=arr4.reduce((pre,cur,idnex,arr)=>{//会传一个上一个元素的值
    return pre+cur;
    });
    console.log(res1);//55
    
    let arr5=[1,2,3,4,5,6,7,8,9,10];
    let res2=arr5.reduceRight((pre,cur,idnex,arr)=>{//同上,但是这个是从右往左遍历数组
    return pre+cur;
    });
    console.log(res2);//55
    
    
    // Array.find()//查找 参数是一个函数,函数做判断条件满足条件就返回当前对象,如果没找到,返回 undefined
    let arr7=[23,900,102,80];
    let res=arr7.find((val,index,arr)=>{
    return val>100;
    });
    console.log(res);//返回第一个符合条件的
    
    
    //ES6.2(ES8) 2017版本
    //幂运算符2**3 相同与 Math.pow(2,3);
    
    //for of
    let arr6=["apple", "banana", "orange", "tomato"];
    
    for(let val of arr6){
    console.log(val);
    }
    
    //这是一种错误的写法,因为有了上面的下方,所以下面的这个不存在的
    // for(let val of arr6.values()){
    // console.log(val);
    // }
    
    for(let index of arr6.keys()){
    console.log(index);
    }
    
    for(let item of arr6.entries()){
    console.log(item);
    }
    
    for(let [key, val] of arr6.entries()){ //解构写法
    console.log(key,val);
    }
    
    //----------------------------------------------------------------------------------------
    //数组其他知识:
    // Array.from()
    
    let jsonstr={
    8:'aaaaaa',
    6:'bbbbbb',
    2:'cccccc',
    3:'dddddd',
    length:10
    }
    let newarr=Array.from(jsonstr);
    console.log(newarr);
    
    // Array.of()//把多个值合并成一个数组 Array.of(1,2,3) 返回[1,2,3]
    
    /*------------------------------------------------------------
    一个很帅很装逼却没有什么用的知识点:
    Array.from() //参数:类数组 返回一个数组
    把一个类似数组的对象转换成数组
    //from转换的关键在于 预转换的对象内是否有length这个属性 和属性的key
    只有满足有lenth这个属性,而且key 为整形才行
    let json={
    0:'aaaa',
    1:'bbbb'
    }
    let newarr=Array.from(json);//newarr 为 []
    let jsonstr={
    8:'aaaaaa',
    6:'bbbbbb',
    2:'cccccc',
    3:'dddddd',
    length:10
    }
    let newarr=Array.from(jsonstr);
    console.log(newarr);//newarr 为 
    [undefined, undefined, "cccccc", "dddddd", undefined, undefined, "bbbbbb", undefined, "aaaaaa", undefined]
    
    ------------------------------------------------------------*/
    
     
    
    
    </script>
    </head>
    <body>
    
    </body>
    </html>
    

      

  • 相关阅读:
    减治算法之寻找第K小元素问题
    OpenGL的版本号历史和发展
    动态注冊监听
    Thinking in Java -- 类型信息RTTI
    Unity3D
    Oracle改动字段类型
    函数定义
    foreach
    数组
    结构体
  • 原文地址:https://www.cnblogs.com/bigfire/p/9518100.html
Copyright © 2020-2023  润新知