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>