异步单线程
知识点
- 什么是异步（对比同步）
例：
console.log(100)
setTimeout(function () {
console.log(200)
},1000)
console.log(300)
何时需要异步
- 在可能发生等待的情况
- 等待过程中不能像 alert 一样阻塞程序运行
- 因此，所有的“等待的情况" 都需要异步
- 前端使用异步的场景
1、定时任务：setTimeout，setInverval
2、网络请求：ajax 请求， 动态加载
3、事件绑定（addEventListener）
- 异步和单线程
例：
console.log(100)
setTimeout(function () {
console.log(200)
})
console.log(300)
- 执行第一行，打印100
- 执行setTimeout后，传入setTimeout的函数会被暂存起来，不会立即执行（单线程的特点，不能同时干两件事）
- 执行最后一行，打印300
- 待所有程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行。
- 发现暂存起来的setTimeout中的函数无需等待时间，就立即执行。
题目
- 同步和异步的区别是什么？分别举一个同步和异步的例子
同步遇到等待会阻塞，异步不会阻塞
alert是同步，setTimeout是异步
//异步
console.log(100)
setTimeout(function () {
console.log(200)
})
console.log(300)
//同步
console.log(100)
alert(200)
console.log(300)
- 一个关于setTimeout的笔试题
例：
console.log(1)
setTimeout(function () {
console.log(2)
}，0)
console.log(3)
setTimeout(function () {
console.log(4)
},1000)
console.log(5)
//执行代码结果1 3 5 2 4
- 前端使用异步的场景有哪些
- 定时任务：setTimeout,setInverval
- 网络请求：ajax请求，动态
加载
- 事件绑定
JS内置对象
知识点
- 日期
例：
Date.now() // 获取当前时间的毫秒数
var dt = new Date()
dt.getTime() // 获取毫秒数
dt.getFullYear // 年
dt.getMonth() // 月（0-11）
dt.getDate() // 日 （1-31）
dt.getHours() // 小时 （0-23）
dt.getMinutes() // 分钟（0-59）
dt.getSeconds() // 秒（0-59）
- 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 判断是否有至少一个元素符合条件
例：
var arr = [1,2,3]
var result = arr.some(function (item,index) {
//用来判断所有的数组元素，只要有一个满足条件即可
if (item < 2) {
return true
}
})
console.log(result)
- sort 排序
例：
var arr = [1,4,2,3,5]
var arr2 = arr.sort(function(a,b) {
// 从小到大排序
return a - b
//从大到小排序
// return b-a
})
console.log(arr2)
- 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 屏蔽了来自原型的属性
if (obj.hasOwnProperty(key)) {
console.log(key,obj[key])
}
}
题目
- 获取如2017-06-10格式的日期
例：
function formatDate(dt) {
if (!dt) {
dt = new Date()
}
var year = dt.getFullYear()
var month = dt.getMonth() + 1
var date = dt.getDate()
if(mouth < 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 random = 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,z:300}
forEach(obj,function(key,value){
console.log(key,value)
})
