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>

標籤：JavaScript

上一篇：挑戰全網最幽默的Vuex系列教程：第二講 Vuex旗下的State和Getter

下一篇：3.JavaScript求余和求模的區別