题目

• 同步和异步的区别是什么？分别举一个同步和异步的例子

同步会阻塞代码执行，而异步不会
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])
    }
}