1. 同步与异步

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

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

前端使用异步的场景有哪些

定时任务： setTimeout，setInterval
网络请求：ajax请求，动态 img 加载
事件绑定

🎈 前端使用异步的场景

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

🎈 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()