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>
(0)

相关推荐

  • this 的值到底是什么?一次说清楚

    你可能遇到过这样的 JS 面试题: var obj = { foo: function(){ console.log(this) }}var bar = obj.fooobj.foo() // 打印出 ...

  • 一个不确定内容的数组,统计每个元素出现的次数的方法

    第一种方法使用reduce方法,通过传入的内容来确定 var arrs=['a','a','d','c','f','d','我','我','他',2,2,5,4,6,8]; function a(){ ...

  • 前端面试题之JavaScript

    ES6语法有哪些,分别怎么用 参考链接:http://es6.ruanyifeng.com/ new的执行过程 创建一个空对象: 将构造函数的 prototype 属性赋值给新对象的 __proto_ ...

  • JS的绑定对象this

    this的含义 this表示的是绑定的对象,通常在函数中使用. 不同的代码形式下,绑定的对象代表不同的东西. 下面看一下常见的几种代码形式: 一.独立的函数 function foo() { cons ...

  • 深拷贝学习笔记

    在开发过程中,我碰到了一个问题,让我找了好久问题在哪里,最后我发现是最开始赋值的时候没有深拷贝值,导致了原本值被覆盖污染,这里和大家分享下我的解决方法 var i = 5; var j = i; j= ...

  • JavaScript 函数用法实例

    JavaScript 函数用法实例

  • JavaScript 的 对象

    学习目标:能够说出为什么需要对象 能够使用字面量创建对象 能够使用构造函数创建对象 能够说出new的执行过程 能够遍历对象 1.对象 1.1万物皆对象,对象是一个具体的事物 在程序里面,一个服务器,一 ...

  • 遍历数组,对象和JSON

    遍历数组 var arr2 = [3,4,5,6,7,8]; //第一种方法 for(var i =0;i<arr.length;i++){ console.log(arr2[i]); } // ...

  • javascript工厂模式,调用的方法

    function obj(){ var o={}; o.name="jim"; o.age=29; o.func=function(){ console.log(this.name ...

  • 原生JS内置对象的字符串操作习题

    (一)获取字符串长度 console.log(str.length); // 33 (二)取出指定位置的字符,如:0,3,5,9等 console.log(str[0], str[3], str[5] ...

  • python - 内置对象 之 变量

    一.变量命名规划 1.命名规则 (1)命名内容只能是字母.下划线.数字 (2)名字第1字符只能是字母或下划线 (3)区分大小写 2.私有变量 (1)_xxx "单下划线" 开始的成 ...

  • 【Asp.net】 七大内置对象

    本文主要分析Asp.net的7大内置对象. 利用提供的内置对象可以实现页面之间的数据传递和一些特定的功能,如数据输出,页面重定向等.5个核心常用内置对象分别是Application,Session, ...

  • thymeleaf基础语法及内置对象

    在上一篇中已经讲解了thymeleaf的应用,下面再来介绍一下thymeleaf基础语法及内置对象与工具类.thymeleaf基础语法thymeleaf基础语法主要有以下四种:变量表达式${}选择变量 ...

  • javascript内置对象的innerText、innerHTML、join方法的认识

    innerText语法规范:HTMLElement.innerText = string ;//后面的赋值是一个字符串形式 innerText是一个非标准形式,不识别HTML标签 返回值会去除空格和换 ...

  • 内置对象Math.random()随机数方法的三种示例

    内置对象Math.random()随机数方法的三种示例

  • 内置对象Array-2

    pop() 原文:MDN - pop() 功能:pop() 方法从数组中删除最后一个元素,并返回该元素的值.此方法更改数组的长度. 语法: arr.pop():返回从数组中删除的元素 返回值:一个新数 ...

  • JavaScript——常用内置对象

    JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... 此外I,JavaScript还提供多个内建对象,比如 Array,Date,Math 等等 对象只是带有属性和方法的特殊数据 ...

  • JavaScript的内置对象

    内置对象:对象是由属性和方法组成的,使用点语法访问 一,array数组 1. 特点: 数组用于存储若干数据,自动为每位数据分配下标,从0开始 数组中的元素不限数据类型,长度可以动态调整 动态操作数组元 ...