1. js 基本数据类型(6种)
- 5种简单1种复杂
- null
- undefined
- boolean
- number
- string
- object
2. 数组各个位置的添加 / 删除操作
数组开头:unshift / shift
数组末尾:push / pop
给定位置:splice(位置, 0, 参数, ...) / splice(位置, 删除个数)
3. 防抖(Debounce) / 节流(Throttle)的异同与简单实现
同:都是为了优化一定时间内高频率执行 js 代码的一种技巧
防抖:只在最后一次触发事件后才执行一次函数
节流:不管事件触发的多频繁,都会保证在规定的时间内一定会执行一次真正的事件处理函数
- 防抖(延迟执行直到不在触发)
function debounce (fn, delay) {
let timer = null
return function () {
let self = this,
args = arguments
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(self, args)
}, delay)
}
}
- 节流 (记录时间比对时间差)
function throttle (fn, delay) {
let timer = null
return function () {
let now = Date.now(),
self = this,
args = arguments
if (now - timer > delay || !timer) {
fn.apply(self, args)
timer = now
}
}
}
4. promise 实现
- promise简介:
主要是为了解决异步回调的问题
有3种状态,等待 / 执行成功 / 执行失败 (pending、fulfilled、rejected)
function fn (resolve, reject) {
let number = Math.random()
if (number >= 0.5) {
resolve('success')
} else {
reject('fail')
}
}
return new Promise(fn)
5. 数组去重(多种方法)
- 创建新数组,依次判断添加 ( 利用indexOf )
function uniq (array) {
let list = []
for (let i = 0; i < array.length; i ++) {
if (list.indexOf(array[i]) == -1) {
list.push(array[i])
}
}
return list
}
- 双重循环依次比对,去掉重复值
function uniq (array) {
let list = array
for (let i = 0; i < list.length - 1; i ++) {
for (let t = i + 1; t < list.length; t ++) {
if (list[i] == list[t]) {
list.splice(t, 1)
t --
}
}
}
return list
}
- 利用空对象属性是否存在判断
function uniq (array) {
let list = [],
obj = {}
for (let i in array) {
let val = array[i]
if (!obj[val]) {
list.push(val)
obj[val] = true
}
}
return list
}
6. js 将图片转换成base64
- 将在线图片转换成 base64
function getBase64 (url) {
// 通过地址获取图片
let img = document.createElement('img')
img.crossOrigin = "anonymous"
img.src = url
// 创建画布
let canvas = document.createElement('canvas')
// 设定画布大小
canvas.width = img.width
canvas.height = img.height
// 指定绘图环境
let ctx = canvas.getContext('2d')
// 开始绘画
ctx.drawImage(img, 0, 0, img.width, img.height)
// 获取文件后缀类型
// substring 获取指定位置之间的字符串
// lastIndexOf 获取最后一次出现的位置
// toLowerCase 转化为小写
let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
// toDataURL 方法获取 base64 (传入文件类型)
let dataURL = canvas.toDataURL("image/" + ext)
return dataURL
}
7. css3 实现瀑布流
.waterfall {
width: 90%;
column-gap: 10px;
column-count: 4;
margin: 0 auto;
}
.item {
break-inside: avoid;
}
8. 简述 Vue 双向绑定的实现原理
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。