前言
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群 今天继续对前端知识的小结
手写instanceOf
~<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>手写instanceOf</title>
</head>
<body>
<script>
function myInstanceof(target, origin) {
if (typeof target !== 'object' || target === null) return false
if (typeof origin !== 'function')
throw new TypeError('origin must be function')
let proto = Object.getPrototypeOf(target) // 相当于 proto = target.__proto__;
while (proto) {
if (proto === origin.prototype) return true
proto = Object.getPrototypeOf(proto)
}
return false
}
// 测试
function Car(make, model, year) {
this.make = make
this.model = model
this.year = year
}
const auto = new Car('Honda', 'Accord', 1998)
console.log(myInstanceof(auto, Car)) // true
console.log(myInstanceof(auto, Object)) // true
</script>
</body>
</html>
手写节流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>手写节流</title>
</head>
<body>
<script>
// 节流就是限制一个函数在一段时间内只能执行一次，过了这段时间，在下一段时间又可以执行一次。应用场景如：
// 输入框的联想，可以限定用户在输入时，只在每两秒钟响应一次联想。
// 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。
// 表单验证
// 按钮提交事件。
function throttle(fn, delay) {
// 重置定时器
let timer = null
// 返回闭包函数
return function () {
// 记录事件参数
let args = arguments
// 如果定时器为空
if (!timer) {
// 开启定时器
timer = setTimeout(() => {
// 执行函数
fn.apply(this, args)
// 函数执行完毕后重置定时器
timer = null
}, delay)
}
}
}
</script>
</body>
</html>
手写防抖函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>手写防抖</title>
</head>
<body>
<script>
//函数防抖，就是指触发事件后，函数在 n 秒后只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。
// fn是你要调用的函数，delay是防抖的时间
function debounce(fn, delay) {
// timer是一个定时器
let timer = null
// 返回一个闭包函数，用闭包保存timer确保其不会销毁，重复点击会清理上一次的定时器
return function () {
// 保存事件参数，防止fn函数需要事件参数里的数据
let arg = arguments
// 调用一次就清除上一次的定时器
clearTimeout(timer)
// 开启这一次的定时器
timer = setTimeout(() => {
// 若不改变this指向，则会指向fn定义环境
fn.apply(this, arg)
}, delay)
}
}
// 搜索框搜索输入。只需用户最后一次输入完，再发送请求；
// 用户名、手机号、邮箱输入验证；
// 浏览器窗口大小改变后，只需窗口调整完后，再执行resize事件中的代码，防止重复渲染。
</script>
</body>
</html>
找出在第一个数组出现,第二个数组不出现数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组问题</title>
</head>
<body>
<script>
var geyao = ["1","2","3","4"]
var fangfang=["1","5"]
function getArr(arr1,arr2){
var str=arr2.join("")
console.log(str,"str")
var result=[]
for(var i=0,x=0;i<arr1.length;i++){
if(str.indexOf(arr1[i])==-1){
result[x]=arr1[i]
x++
}
}
return result
}
console.log(getArr(geyao,fangfang))
</script>
</body>
</html>
数组去重方式1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
function ArrayCommon(arr) {
//判断是不是数组 不是数组就返回一个false
if (!Array.isArray(arr)) {
console.log('这不是一个数组哦')
return
}
let res = [],
obj = {}
//如果对象的属性值不存在 就放进去 不然就赋值+1
for (let i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
res.push(arr[i])
obj[arr[i]] = 1
console.log( obj[arr[i]],"obj[arr[i]]")
} else {
obj[arr[i]]++
console.log( obj[arr[i]],"obj[arr[j]]")
}
}
return res
}
console.log(ArrayCommon(geyao, 'geyao'))
</script>
</body>
</html>
数组去重方式2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
function ArrayCommon(arr) {
//判断是不是数组 不是数组就返回一个false
if (!Array.isArray(arr)) {
console.log('这不是一个数组哦')
return
}
return [...new Set(arr)]
}
console.log(ArrayCommon(geyao, 'geyao'))
</script>
</body>
</html>
数组去重方式3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
function ArrayCommon(arr) {
//判断是不是数组 不是数组就返回一个false
if (!Array.isArray(arr)) {
console.log('这不是一个数组哦')
return
}
//先对数组进行排序
arr = arr.sort()
console.log(arr,"arr")
//判断相邻得元素是不是相等 如果不相等就放进数组里面去
let res = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== arr[i - 1]) {
res.push(arr[i])
}
}
return res
}
console.log(ArrayCommon(geyao, 'geyao'))
</script>
</body>
</html>
数组去重方式4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>数组去重的第一种方式</title>
</head>
<body>
<div id="geyao"></div>
</body>
<script>
var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
function ArrayCommon(arr) {
//判断是不是数组 不是数组就返回一个false
if (!Array.isArray(arr)) {
console.log('这不是一个数组哦')
return
}
//设置初始值为空数组
var res = []
//数组遍历
for (let i = 0; i < arr.length; i++) {
//设置一个初始值
let flag = true
//继续二次遍历 如果值相同 就不放入新数组
for (let j = 0; j < res.length; j++) {
if (arr[i] === res[j]) {
flag = false
break
}
}
if (flag) {
res.push(arr[i])
}
//当flag1为true的时候 数组push
}
return res
}
console.log(ArrayCommon(geyao, 'geyao'))
// document.getElementById("geyao").innerText=ArrayCommon(geyao)
</script>
</html>
数组去重方式5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>数组去重的第二种方式</title>
</head>
<body>
<div id="geyao"></div>
</body>
<script>
var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
function ArrayCommon(arr) {
//判断是不是数组 不是数组就返回一个false
if (!Array.isArray(arr)) {
console.log('这不是一个数组哦')
return
}
//设置初始值为空数组
var res = []
//数组遍历
for (let i = 0; i < arr.length; i++) {
//只要这个值在数组中是唯一出现就push到新数组里面
if(res.indexOf(arr[i])===-1){
res.push(arr[i])
}
}
return res
}
console.log(ArrayCommon(geyao, 'geyao'))
// document.getElementById("geyao").innerText=ArrayCommon(geyao)
</script>
</html>
总结
我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣