美文网首页
第四章 js基础知识下

第四章 js基础知识下

作者: qqqc | 来源:发表于2018-06-07 23:58 被阅读0次

    题目

    • 同步和异步的区别是什么?分别举一个同步和异步的例子
    同步会阻塞代码执行,而异步不会
    alert是同步、setTimeout 是异步
    
    • 一个关于setTimeout的笔试题
    console.log(1)
    setTimeout(function(){
        console.log(2)
    },0)
    console.log(3)
    setTimeout(function(){
        console.log(4)
    },1000)
    console.log(5)
    
    • 前端使用异步的场景有哪些
    定时任务: setTimeout 、setTimeInterval
    网络请求: ajax请求、动态<img>加载
    事件绑定
    
    共同点: 都需要等待
    

    知识点

    • 什么是异步(对比同步)
    // 异步
    console.log(100)
    setTimeout(function(){
        console.log(200)
    },1000)
    console.log(300)
    
    // 对比同步
    console.log(100)
    alert(200) //1秒之后点击确认
    console.log(300)
    
    // 异步和同步的一个区别就是有没有阻塞程序的执行,
    
    • 前端使用异步的场景
    // 何时需要异步
    在可能发生等待的情况
    等待过程中不能像alert一样阻塞程序运行
    因此,所有的“等待情况”都需要异步
    
    //场景
    定时任务: setTimeout 、setTimeInterval
    网络请求: ajax请求、动态<img>加载
    事件绑定
    
    // ajax请求代码示例
    console.log('start')
    $.get('./data1.json', function(data1){
        console.log(data1)
    })
    console.log('end')
    
    // img
    console.log('start')
    var img = document.createElement('img')
    img.onload = function(){
        console.log('loaded')
    }
    img.src = '/xxx.png'
    console.log('end')
    
    // 事件绑定
    console.log('start')
    document.getElementById('btn1').addEventListener('click', function{
        alert('clicked')
    })
    console.log('end')
    
    • 异步和单线程
    console.log(100)
    setTimeout(function(){
        console.log(200)
    })
    console.log(300)
    1.执行第一行,打印100
    2.执行setTimeout后,传入setTimeout的函数会被暂存起来,不会立即执行(单线程的特定,不能同时干两件事)
    3.执行最后一行,打印300
    4.待所有的程序执行完,处于空闲状态,会立即看有没有暂存起来的要执行
    4.发现暂存起来的setTimeout中的函数无需等待时间,就立即过来执行
    

    其他知识

    题目

    • 获取2017-06-10格式日期
    function formatDate(dt){
        if(!dt){
          dt = new Date()
        }
        var year = dt.getFullYear()
        var month = dt.getMonth()
        var date = dt.getDate()
        if(month< 10){
            month = '0' + month
        }
        if(date< 10){
            date = '0' + date
        }
        return year + '-' + month + '-' + date
    }
    var dt = new Date()
    var formatDate = formatDate(dt)
    console.log(formatDate)
    
    • 获取随机数,要求是长度一直的字符串格式
    var randon = Math.random()
    var random = random + '0000000000'
    var random = random.slice(0, 10)
    console.log(random)
    
    • 写一个能遍历对象和数组的通用forEach 函数
    function forEach(obj, fn){
        var key
        if(obj instanceof Array){
            // 准确判断是不是数组
            obj.forEach(function(item, index){
                fn(index, item)
          })
        } else {
            // 不是数组就是对象
            for(key in obj){
                fn(key, obj[key])
            }
        }
    }
    
    var arr = [1,2,3]
    forEach(arr, function(index, item){
        console.log(index, item)
    })
    
    var obj = {x: 100, y: 200}
    forEach(obj, function(key, value){
        console.log(key, value)
    })
    

    知识点

    • 日期
    Date.now() //获取当前时间毫秒数
    var dt = new Date()
    dt.getTime()
    dt.getFullYear()
    dt.getMonth()
    dt.getDate()
    dt.getHours()
    dt.getMinutes()
    dt.getSeconds()
    
    • Math
    获取随机数 Math.random()
    
    
    • 数组API
    // forEach 遍历所有元素
    var arr = [1,2,3]
    arr.forEach(function(item,index){
      //遍历所有元素
      console.log(index, item)
    })
    //every 判断所有元素是否都符合条件
    var arr = [1,2,3]
    var result = arr.every(function(item, index){
      // 用来判断所有的数组元素,都满足一个条件
      if(item < 4){
          return true
      }
    })
    console.log(result)
    // some 判断是否有至少一个元素符合条件
    // sort 排序
    // map 对元素重新组装,生成新数组
    var arr = [1,2,3,4]
    var arr2 = arr.map(function(item, index){
        // 将元素重新组装,并返回
        return '<b>' + item + '</b>'
    })
    console.log(arr2)
    // filter 过滤符合条件的元素
    var arr = [1,2,3]
    var arr2 = arr.filter(function(item, index){
        // 通过某一个条件过滤数组
        if(item >= 2){
            return true
        }
    })
    console.log(arr2)
    
    • 对象API
    var obj = {
        x: 100,
        y: 200,
        z: 300
    }
    var key
    for(key in obj){
        // 注意这里的 hasOwnProperty 
        // 所有继承了 Object 的对象都会继承到 `hasOwnProperty` 方法。这个方法可以用来检测一个对象是否含有特定的自身属性
    
        if(obj.hasOwnProperty(key)){
            console.log(key, obj[key])
        }
    }
    

    相关文章

      网友评论

          本文标题:第四章 js基础知识下

          本文链接:https://www.haomeiwen.com/subject/vabnsftx.html