1. 同步与异步
同步和异步的区别是什么？分别举一个同步和异步的例子
同步会阻塞代码执行，而异步不会阻塞代码执行。
alert 是同步，setTimeout 是异步
前端使用异步的场景有哪些
定时任务： setTimeout，setInterval
网络请求：ajax请求，动态 img 加载
事件绑定
🎈 前端使用异步的场景
- 定时任务：setTimeout, setInterval
- 网络请求：ajax 请求，动态 img 加载
- 事件绑定
🎈 ajax 请求代码示例
console.log('start')
$.get('./data.json', function (res) {
console.log(res)
})
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')
2. 日期
获取 2020-07-06 格式的日期
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 + '-' + date;
}
formatDate();
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）
3. 获取随机数
获取随机数 Math.random()
获取随机数，要求是长度一致的字符串格式
function random () {
var rd = Math.random() + '0000000000';
return rd.slice(0, 10);
}
random();
4. 写一个能遍历对象和数组的通用 forEach 函数
function forEach(obj, fn) {
var key;
if (obj instanceof Array) { // 如果传入的obj是Array的实例，就说明它为数组格式
obj.forEach(function (item, index) {
fn(index, item)
})
} else {
for (key in obj) {
if (obj.hasOwnProperty(key)) { // hasOwnProperty返回布尔值 用来判断自身属性是否存在
fn(key, obj[key])
}
}
}
}
5. 数组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 >== 3) {
return item
}
}
console.log(arr2)
6. 阻止冒泡事件
vue 中 event.stopPropagation() 和 event.preventDefault() 使用
🎈 1. event.stopPropagation()方法
这是阻止事件的 冒泡 方法，不让事件向document上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。
🎈 2. event.preventDefault()方法
这是阻止 默认事件 的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素。
🎈 3. return false
这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()
网友评论