无意间看到了之前的笔记，顺手在简书上保存一下
函数
函数
将实现某一特定功能的代码段集合起来，使其能够重复使用
函数的声明
- 基本语法
- function 名字([参数1],[参数2]){
* 函数体
* [return 返回值]
}
- 字面量方式（匿名函数）
- var 变量名=function(){
}
- 以对象的形式来声明
运行函数
函数名 table()
变量名 aa()
自调用 (fn)()
事件
参数
rest参数
函数重载
同一个函数因为参数类型或数量的不同，可以对应多个函数的实现每种实现对应一个函数体
函数返回值
return
返回值默认 undefined
返回值是任意数据类型 只能返回一个值
判断是否是一个数组
aa instanceof Array
回调函数
在一个函数的名字当做另一个函数的参数,当调用这个参数的时候，这个函数就是回调函数
箭头函数
var bb= ele => ele
var 变量=参数=》返回值
代码运行环境
- 宿主环境
- 运行环境
- 全局环境
- 局部环境 函数环境
作用域（根据运行环境划分）
-
全局作用域
-
函数作用域
var a=1 function aaa(){ console.log(a)//输出1 a=2 console.log(a)//输出2 function bbb(){ console.log(a)//输出undefined var a=3 console.log(a)//输出3 } bbb() } aaa() console.log(a)//输出2
let
- 块级作用域
- let 作用域在{}内 console调用只能在 let之后 之前会报错
let使用
同var
注意
- 不能够重复定义
- 作用范围
- 嵌套
- 没有预解析，不存在变量提升，只能先声明后调用
- 暂时性死去 tdz
- 形参不能用let重新声明
不合理
- for循环下标 i会泄露
- 变量不提升
- let 记录当前循环下标
var arr=[];
for (let i = 0; i < 5; i++) {
arr[i]=function (){
console.log(i)
}
}
arr[3]()
动画函数 案例
animate(box,{width:400,height:400,left:300},function(){
box.style.background='green'
})
animate(box,{width:400,height:400,left:300},function(){
animate(box,{left:100})
})
function animate(obj,attr,callback){
// 对象，对象的属性和值 json格式 ，回调函数
let t=setInterval(move,200);
function move(){
for(let i in attr){
let currentV=parseInt(getComputedStyle(obj,null)[i])+10;
// 获取当前obj的长宽属性
if(currentV>=attr[i]){
// 如果实际尺寸达到要求，
currentV=attr[i];
// 让当前的值等于要求尺寸
clearInterval(t);
// 就清除时间函数
if(callback){
// 回调函数
callback.call()
}
}
obj.style[i]=currentV+'px';
}
}
}
轮播图双下标思路
- 状态初始化
- now next
- 排好位置 now在当前窗口，next位置放在右边，left值为width
- 开始动画
- now left：-width
- next left：0；
- 更新 now=next；
获取样式
getComputedStyle(box,null).width
正则
运用正则在字符串上分装一个去空函数，
var str=" ab3'4Rc3Yd4d5de8f5dg"
String.prototype.trims=function (type='l') {
let reg;
if(type=='l'){
reg=/^\s+/;
}else if(type=='r'){
reg=/\s+$/;
}else if(type=='a'){
reg=/^\s+|\s+$/g;
}
return this.replace(reg,'');
}
console.log(str.length)
let ss=str.trims('l');
console.log(ss.length)
（）
作用与用法：
- 分组，返回会多一个下标
- 优先级，单独处理，添加量词等
反向引用
常用于匹配字符串前后一致
