一、es6
(一)filter
三个参数:current
=> 当前值, index
=> 当前值的下标, array
=> 原数组对象
let a = [1,3,5,12,15]
let b = a.filter((current, index, array) => {
return current > 10
})
console.log(a)
console.log(b)
(二)let
const
var
区别
var
- 声明(变量)提升
- 变量覆盖
- 没有块级作用域
function fn2(){
for(var i=0; i<3; i++){
console.log(i) // 0,1,2
}
console.log(i) //0,1,2,3
}
const
- 声明之后必须赋值,否则就报错
- 定义的值不能修改,否则报错
- 支持let的其他属性
let
二、 undefined
和null
(一)undefined
- 已声明 未赋值
let o
console.log(o) //undefined
- 对象某个属性不在
let obj = {}
console.log(obj.a)
- 函数调用,少了个参数
function fn(a,b){
console.log(a,b)
}
fn(4)
- 函数默认返回值为
undefined
return
function abcd(){
console.log("124")
return 345
}
console.log(abce())
undefined
console.log(undefined) //undefined
(二)null
- 手动释放内存
let obj = {}
obj = null
- 作为函数的参数(此参数不是对象)
let num = null
- 原型链的顶端
- null
console.log(null) //null
三、foreach()
和 map()
(一)foreach()
- 没有返回值
- 不能用
break
打断 - 遍历的是
value
let arr = ["a", "b", "c"]
let res = arr.foreach(value => {
console.log(value)// "a" "b" "c"
break; //报错
return value + "1" //undefined
})
conlose.log(res)
(二)map()
- 有返回值(数组),默认
return
是undefined
- 接受参数是一个函数
(key, value)
- 不能用
break
打断
let arr = ["a", "b", "c"]
let res = arr.map((value, key) => {
break; //报错
return value + 1
})
console.log(res)
四、递归实现 1-100 求和
function add(num1,num2){
let num = num1 + num2
if(num2+1>100){
return num
}else{
return add(num,num2+1)
}
}
let sum = add(1, 2)
console.log(sum)
五、闭包
- 闭包是什么——方法里返回一个方法
function a(){
let a=1
return function(){
return a1
}
}
- 闭包存在的意义
- 延长变量的生命周期
- 创建私有环境
- 有自己的词法作用域
- 闭包的弊端
- 闭包会常驻内存 => 慎用闭包,手动回收
- 会造成内存泄漏
function makeCount(){
let num = 0
function changeValue(val){
num += val
}
return {
add: function(){ //加
return changeValue(1)
},
reduce: function(){ //减
return changeValue(-1)
},
value: function(){ //查询
return num
}
}
}
let count = makeCount()
conlose.log(count.add()) //1
conlose.log(count.add()) //2
conlose.log(count.add()) //3
conlose.log(count.reduce()) //2
conlose.log(count.reduce()) //1
conlose.log(count.reduce()) //0
六、防抖和节流
(一)、防抖 — 将多次操作变成一次
<input type="text" placeholder="请输入" id="inp">
function debounce(fn,wait){
let timeout = null
return args => {
if(timeout)clearTimeout(timeout)
timeout = setTimeout(fn,wait)
}
}
let inp = document.getElementById("inp")
function demo(){
console.log("发送请求")
}
inp.addEventLister("input",debounce(demo,2000))
(二)、节流 — 一定时间内只调用一次函数
=== 应用场景:1.提交表单 2.高频监听事件 ===
<style>
#box{width:200px; height:200px; background:#ff0000;}
</style>
<div id="box"></div>
function throttle(event,time){
let timer = null
return function(){
if(!timer){
timer = setTimeout(()=>{
event()
timer = null
},time)
}
}
}
function demo(){
console.log("发送请求")
}
let box = document.getEventById("box")
box.addEventListen("touchmove",throttle(demo,2000))