第四章 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请求、动态加载
事件绑定

共同点: 都需要等待

知识点

  • 什么是异步(对比同步)
// 异步
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请求、动态加载
事件绑定

// 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 '' + item + ''
})
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基础知识下)