第四章 js基础知识下

题目

  • 同步和异步的区别是什么?分别举一个同步和异步的例子
同步会阻塞代码执行,而异步不会
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])
    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,615评论 25 709
  • 刚旅行完写游记记忆是最新鲜的,记得的细节是最多的。就像朱自清写完《桨声灯影里的秦淮河》一样,我还等着ln同学的游记...
    abcdhp阅读 305评论 4 2
  • 当那一刻不来临, 放不下的都能放下。 你不能预料,你不常挂在心里的, 会不会突然不在了。 于是,我们开始后悔,开始...
    littlewish阅读 380评论 0 0
  • (共收入诗词33篇) 【引言】 扇子,不仅是时令用物。更是中华文明的古老符号之一。 尧传位给舜,舜便做一把五明扇,...
    肖三羊阅读 1,022评论 1 7
  • 今天首次尝试跑10公里,还好跑下来了,没觉得很吃力。自从鼓山回来,好像体力好了很多,突破了十公里大关,半马就在不远...
    空格儿阅读 279评论 15 2