数组常用方法
变量提升
console.log(name) // undefined
var name = 'zhangsan'
if (name.length<20) {
var age = 23
}
console.log(age) // undefined 不会报错
函数提升
console.log(fun) // function fun() {}
function fun() {}
if (false) {
function fun2(){}
}
console.log(fun2) // undefined 不会报错
函数提升优先级 > 变量提升优先级
console.log(fun) // function fun() {}
var fun = 'zhangsan'
function fun() {}
console.log(fun) // 'zhangsan'
0.1 + 0.2 === 0.3，对吗？
不对，JavaScript的计算存在精度丢失问题
console.log(0.1 + 0.2 === 0.3) // false
原因：JavaScript中小数是浮点数，需转二进制进行运算，有些小数无法用二进制表示，所以只能取近似值，所以造成误差
解决方法：
先变成整数运算，然后再变回小数
toFixed() 性能不好，不推荐
<meta charset="utf-8">
防抖的概念
防抖又叫为函数防抖（debounce）：指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
前端开发中，常见的事件如，onresize，scroll，mousemove** ,mousehover 等会短时间内多次触发（频繁触发），不做限制的话可能一秒执行几百次，
在这些函数内部如果还执行了其他函数，尤其是执行了操作 dom 的函数的话浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，
还会降低程序运行速度，甚至造成浏览器卡死、崩溃。
除此之外，短时间内重复调用 ajax 还会造成网络拥堵，增加服务器压力等问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js防抖与节流</title>
</head>
<body>
<!--按钮-->
<button id="btn">点击提交</button>
<script type="text/javascript">
var num = 1;
const seckill = () => {
console.log('我是防抖，你点击了按钮' + num++)
}
// 防抖函数
const debounce = (fun, wait) => {
let timeout;
return function () {
if (timeout) {
clearTimeout(timeout);
}
//第一次执行任务，timeout是null，此时callNow是true，需要立即执行
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait);
if (callNow) {
fun.apply(this);
}
}
};
//点击提交按钮
let btn = document.getElementById('btn');
//调用方法（ 1s内只允许一次操作）
btn.addEventListener('click', debounce(seckill, 1000));
</script>
</body>
</html>
节流的概念
节流又叫函数节流（throttle）：指当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js防抖与节流</title>
</head>
<body>
<!--按钮-->
<button id="btn">点击提交</button>
<script type="text/javascript">
var num = 1;
const seckill = () => {
console.log('点击了按钮' + num++)
}
function throttle(callback, delay) {
var timer, begin = new Date();
return function () {
//记录事件触发时的时间
var current = new Date();
//清除上一次定时器任务
clearTimeout(timer);
//判断距上一次触发是否已过了delay的时间
if (current - begin >= delay) {
callback();
begin = current;
} else {
timer = setTimeout(() => {
callback();
}, delay);
}
}
}
//点击提交按钮
let btn = document.getElementById('btn');
//调用方法（ 1s内只允许一次操作）
btn.addEventListener('click', throttle(seckill, 1000));
</script>
</body>
</html>
防抖和节流的区别
函数防抖：是n秒内只执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
函数节流：是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
call()和apply()
在JavaScript中，每个函数对象都带有call()和apply()方法，即Function.prototype.call()和Function.prototype.apply()，这两个方法都是挂载在原型上的。
官方解释如下：
call：
**call()**方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。
apply:
apply()方法调用一个具有给定this值的函数，以及以一个数组（或<u style="border-bottom: 1px solid rgb(68, 68, 68); text-decoration: none;">类数组对象</u>）的形式提供的参数。
通过官网的解释，大家可能对这两个方法有了一个大致的了解，其实简单来说，call和apply两个方法最主要的作用就是改变this指向。
call：
function.call(thisArg, arg1, arg2, ...)
apply：
func.apply(thisArg, [argsArray])
参数说明：
thisArg： 函数在运行时的this值，如果函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象。
arg1, arg2, ...和[argsArray]：函数接收的参数列表。
<script>
let obj1 = {
name: "张三",
age: 24,
user: function (args) {
console.log("姓名：", this.name);
console.log("年龄：", this.age);
console.log("参数", args);
}
}
let obj2 = {
name: "李四",
age: 30,
user: function (args) {
console.log("姓名：", this.name);
console.log("年龄：", this.age);
console.log("参数", args);
}
}
// 正常的调用
// obj1.user('我是参数');
// obj2.user('我是参数');
// 改变this指向
obj1.user.call(obj2, "我是参数"); // 使用call方法改变
obj2.user.apply(obj1, ["我是参数"]); // 使用apply方法改变
</script>
两个方法没有什么区别，唯一的区别就是接收的参数不同，一个接收参数列表，一个接收参数数组，才上面的代码示例中也可以看出来。
