JS基础知识（下）

什么是异步

console.log(100)
setTimeout(function () {
      console.log(200)
},1000)
console.log(300)
//先打印100再打印300最后打印200


对比同步
console,log(1000)
alert(2000)  //1秒之后点击确认
console.log(3000)

何时需要异步

1 在可能发生等待的情况
2 等待过程中不能像alert一样阻塞程序运行
3 因此，所有的“等待的情况”都需要异步

前端使用异步的场景

1 定时任务 ： setTimeout,setInverval
2 网络请求 : ajax请求，动态<img>加载
3 事件绑定

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 待所有程序执行完后，处于空闲状态时，会立马看有没有暂存起来的要执行
5 发现暂存起来的setTimeout中的函数无需等待时间，就立即过来执行。

同步和异步的区别是什么？

1 同步会阻塞代码执行，而异步不会
2 alert 是同步，setTimeout是异步

一个关于setTimeout的笔试题

console.log (1)
setTimeout(function () {
  console.log(2)
},0)
console.log(3)
setTimeout(function () {
	console.log(4)
},1000)
console.log(5)

总结重点

1 异步和同步的区别
2 异步和单线程的区别
3 异步在前端的应用场景

获取2017-06-10格式的日期

Date.now() //获取当前时间的毫秒数
var  dt = new  Date()
dt.getTime() //获取毫秒数
dt.getFullYear() //年
dt.getMonth() //月
dt.getDate() //日
dt.getHours() //小时
dt.getMinutes() //分钟
dt.getSeconds() //秒


function  formatDate(dt) {
   if  ( !dt ) {
        dt = 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 + " - " + moth + " - "+date
}

var  dt = new Date()
var  formatDate = formatDate(dt)
console.log(formatDate)

获取随机数，要求是长度一直的数

获取随机数Math.random()

var  random = Math.random()
var  random = random + "0000000000"
var   random = random.slice(0,10)
console.log(random)

写一个能遍历对象和数组的通用的forEach函数

forEach: 遍历所有的元素
every:  判断所有元素是否都符合条件
some:  判断是否有至少一个元素符合条件
sort:   排序
map:  对元素重新组装，生成新数组
filter:   过滤符合条件的元素


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)
     }
   }
}



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)
})

forEach

var  arr = [1,2,3]
arr.forEach(function (item,index) {
   //forEach 里面是一个函数
   console.log(index,item)
})

every

var arr = [1,2,3]
var  result = arr.every(function (item,index) {
          //用来判断所有的数组元素，都满足一个条件
          if （item < 4） {
             return  ture
         }
} )
console.log(result)

sort

var   arr = [1,3,5,3,2,3,6]
var  arr2 = arr.sort (function(a,b) {
  // 从小到大排序
  return   a - b
  //从大到小排序
  return  b - a
})
console.log (arr2)

map

var  arr = [1,2,3]
var  arr2 = arr.map(function (item,index) {
    //将元素重新组装，并返回
    return item+1
})
console.log(arr2)

filter

var  arr = [1,2,3]
var arr2 = arr.filter(function (item,index){
  //通过某一个条件过滤数组
  if(item <2) {
     return  true
  }
})
console.log(arr2)

function  formatDate(dt){
  if (!dt){
    dt = 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+"-"+day+”-”
}

var   random = Math.random()
var random = random+"0000000000"
var  random = random.slice(0,10)
console.log(random)





function  forEach(obj,fn) {

}


var arr =  [1,2,3]
forEach(arr,function(index,item) {
    console.log(index,item)
})

var   obj = {x:100,y:200}
forEach(obj,function (key,val) {
})