【知识图谱】【JS基础】--循环迭代方法

会返回新数组：map、filter、reduce，都不会改变原数组。(map、filter、reduce返新不改旧 20210627午)

	forEach	map	for...in	for...of	reduce
数组	✅	✅	✅	✅	✅
对象	❌	❌	✅	❌	❌

 

	相同点	异同点	用法
forEach	1.只能遍历数组 2.匿名函数中的this都指向window 3.不能使用continue、break，使用return和return false也只能跳过当次循环 4.都不会改变原数组	不会返回新数组	arr.forEach(function(item,index,arr){...})
map		会返回新数组	arr.map(function(item,index,arr){...})

 

	相同点	异同点	用法
for...in	1.匿名函数中的this都指向window 2.使用break中断循环，并退出所有 3.使用continue跳过当次循环，并继续执行下次循环	1.遍历对象可枚举的属性，类似Object.keys() 2.遍历数组返回元素下标，返回的是string类型	for(let key in arr){...}
for...of		1.只可循环iterable类型，Array、Set、Map	for(let value of arr){...}

 

	相同点	不同点
some	接收一个回调函数 (item,index,arr)	返回布尔值，只要有一个满足就行
every		返回布尔值，必须全部满足才行
filter		返回一个新数组，把满足条件的过滤出来
find		返回满足条件的第一个元素

 

【扩展】JS中数组迭代方法

 

20210617晚：JS高阶用法

1. JS高阶函数——reduce()用法总结    

    25个你不得不知道的数组reduce高级用法 [Get!]

    累加；累乘；找出最大值(最小值)；去重；字符统计/单词统计；数组纬度转换(多维转一维)

    统计数组成员个数

点击查看代码

// 统计数组成员个数
function shushu(arr = []){
    return arr.reduce((t,v)=>{
         t[v] = t[v] ? ++t[v] : 1;
         return t;
    },{});
}

    划分千分位[todo]

    1. number.toLocalsString();// 就把整数转换为千分位了，缺点是小数位不行

    2. 

点击查看代码

function test(num = 0){
    let a = String(parseInt(num)).split('');// 1. 转换成数组
    let result = '';
    while(a.length>3){
        result = ',' + a.splice(-3,3).join('') + result;// 2. 利用splice会改变原数组的特性
    }
    result = a.join('') + result;// 3. 把剩余的部分连接
    return result;
}

    异步累计[todo]

点击查看代码

// 异步累计
async function deps(arr){
   return   arr.reduce(async(t,v)=>{
                let dep = await t;
                let temp = await (v);
                dep[v] = temp;
                return dep;
            },Promise.resolve({}));
}

let result = await deps([1,2]);
console.log(result);

    斐波那契数列[Get!]

点击查看

function febo(length){
    if(length == 0) return [];
    if(length == 1) return [0];
    if(length == 2) return [0,1];
    let arr = [ ...new Array(length).keys() ];
    
    return arr.reduce((prev,curr,i)=>(i > 1 && prev.push( prev[i-1] + prev[i-2] ),prev),[0,1]);
}

febo(0);

    数组转对象：巧妙利用...rest

点击查看代码

// 数组转对象
let list = [
    {
        name: 'zhangsan',age: 25, height: 180,
    },
    {
        name: 'lisi',age: 29, height: 170,
    }
];

function trans(arr = [],){
    return arr.reduce((t,v)=>{
        let { name,...rest } = v;
        t[name] = rest;
        return t;
    },{});
}

trans(list);

    九九乘法表：

点击查看代码

// 利用reduce写九九乘法表
function jiujiu(){
    let col = [...new Array(9).keys()];// 竖向数量 9
    return  col.reduce((t,v)=>{
                        // v + 1是横向长度
                        let row = [...new Array(v+1).keys()];
                return  t  + row.reduce((u,w)=>{
                                return (`${u}${w+1}x${v+1}=${(v+1)*(w+1)} `);
                             },'\n');// 一行的计算
            },'');
}
console.log(jiujiu());

 

20210625晚：

    while(){}// 条件成立，一直循环，挺好用

    普通for循环// 简单而强大~

    

20210626午：从何处学习高超的编码技巧

    从网络技巧总结性博文学习 =》从Vue源码中学习 =》从GitHub上学习！