JS异步单线程与内置对象面试

什么是异步？

    <script>
        //异步
        console.log(1);
        setTimeout(function(){
            alert(2);
        },1000);
        console.log(3);

        //同步，存在阻塞
        console.log(1);
        alert(2);//不点击确定，不会打印3
        console.log(3);
    </script>

 

何时需要异步？

可能发生等待的情况

等待的过程不能阻塞程序运行

 

前端使用异步的场景：

1、定时任务 setTimtout  setInterval

2、网络请求 ajax请求 动态img加载

3、事件绑定

    <script>
        console.log('start');
        $.get('/test.json',function(data){
            console.log(data);
        })
        console.log('end');
    </script>

 

 

    <script>
        console.log('start');
        
        var img=document.createElement('img');
        img.onload=function(){
            console.log('loaded');
        }
        img.src="error.png";
        document.body.appendChild(img);
        
        console.log('end');
    </script>

 

 

    <script>
        console.log('start');
        
        var btn=document.getElementById('btn');
        btn.onclick=function(){
            console.log('clicked');
        }

        console.log('end');
    </script>

 

 

异步和单线程-单线程：

单线程的特点：不能同时干两件事

先执行同步的代码，将异步的代码暂存起来，不会立即执行

等所有程序执行完，处于空闲时间，查看有没有暂存的代码需要执行

如果有，则执行暂存的代码

 

日期和Math：

        console.log(Date.now());//获取当前时间的毫秒数
        var dt=new Date();
        console.log(dt.getTime());//毫秒数
        console.log(dt.getFullYear());//年
        console.log(dt.getMonth());//月(0-11)
        console.log(dt.getDate());//日
        console.log(dt.getHours());//小时
        console.log(dt.getMinutes());//分
        console.log(dt.getSeconds());//秒

 

 

数组API：

forEach 遍历所有元素

        //forEach
        var arr=['a','b','c'];
        arr.forEach(function(item,index){
            console.log(item+'+'+index);
        })

 

 

every 判断所有元素是否都符合条件

        //every
        var arr=[1,2,3,4];
        var res=arr.every(function(item,index){
            if(item<4){
                return true;
            }
        });
        console.log(res);

 

 

some 判断是否至少有一个元素符合条件

        //some
        var arr=[1,2,3,4];
        var res=arr.some(function(item,index){
            if(item<4){
                return true;
            }
        });
        console.log(res);

 

 

sort 排序

        //sort
        var arr=[2,5,3,4,1];
        var res=arr.sort(function(a,b){
            return a-b;//从小到大
        })
        console.log(res);

 

 

map 对元素重新组装，生成新数组

        //map
        var arr=[1,2,3];
        var res=arr.map(function(item,index){
            return '<b>'+item+'</b>';
        })
        console.log(res);

 

 

filter 过滤符合条件的元素

        //filter
        var arr=[1,2,3,4];
        var res=arr.filter(function(item,index){
            if(item<3){
                return true;
            }
        });
        console.log(res);

 

 

对象API：

        var obj={
            a:1,
            b:2,
            c:3
        }
        for(var key in obj){
            if(obj.hasOwnProperty(key)){
                console.log(key+':'+obj[key]);
            }
        }

 

 

    <script>
        //获取指定格式的日期
        function formatDate(dt){
            if(!dt) return new Date();

            var year=dt.getFullYear();
            var month=dt.getMonth()+1;
            var date=dt.getDate();

            if(month<10){
                month='0'+month;
            }
            if(date<10){
                date='0'+date;
            }

            return year+'-'+month+'-'+date;
        }
        var dt=new Date();
        console.log(formatDate(dt));
    </script>

 

 

    <script>
        //获取随机数，长度为指定长度
        //如：指定返回长度为10的随机数
        var random=Math.random();
        var random=random+'0000000000';
        //超出10位只截取前10位，不足10位补0
        random=random.slice(0,10);
        console.log(random);
    </script>

 

 

封装一个能同时遍历数组和对象的函数

    <script>
        //能同时遍历数组和对象
        function fn(obj){
            if(obj instanceof Array){
                //数组
                obj.forEach(function(item,index){
                    console.log(index+':'+item);
                })
            }else{
                //对象
                for(var key in obj){
                    if(obj.hasOwnProperty(key)){
                        console.log(key+':'+obj[key]);
                    }                   
                }
            }
        }
        var arr=['a','b','c'];
        fn(arr);
        var obj={name:'cyy',age:18};
        fn(obj);
    </script>