zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    Leetcode 16.25 LRU缓存 哈希表与双向链表的组合
    Leetcode437 路径总和 III 双递归与前缀和
    leetcode 0404 二叉树检查平衡性 DFS
    Leetcode 1219 黄金矿工 暴力回溯
    Leetcode1218 最长定差子序列 哈希表优化DP
    Leetcode 91 解码方法
    Leetcode 129 求根到叶子节点数字之和 DFS优化
    Leetcode 125 验证回文串 双指针
    Docker安装Mysql记录
    vmware虚拟机---Liunx配置静态IP
  • 原文地址:https://www.cnblogs.com/bigfire/p/9518100.html
Copyright © 2011-2022 走看看