函数基础知识

无意间看到了之前的笔记，顺手在上保存一下

函数

函数

将实现某一特定功能的代码段集合起来，使其能够重复使用

函数的声明

• 基本语法

• function 名字([参数1],[参数2]){
  * 函数体
  * [return 返回值]
  }

• 字面量方式（匿名函数）

• var 变量名=function(){
  }

• 以对象的形式来声明

运行函数

函数名 table()

变量名 aa()

自调用 (fn)()

事件

参数

rest参数

函数重载

同一个函数因为参数类型或数量的不同，可以对应多个函数的实现每种实现对应一个函数体

函数返回值

return

返回值默认 undefined
返回值是任意数据类型 只能返回一个值

判断是否是一个数组

aa instanceof Array

回调函数

在一个函数的名字当做另一个函数的参数,当调用这个参数的时候，这个函数就是回调函数

箭头函数

var bb= ele => ele
var 变量=参数=》返回值

代码运行环境

1. 宿主环境
2. 运行环境
   • 全局环境
   • 局部环境 函数环境

作用域（根据运行环境划分）

• 全局作用域

• 函数作用域

    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';
            }               
        }
    
    }

轮播图双下标思路

1. 状态初始化
2. now next
3. 排好位置 now在当前窗口，next位置放在右边，left值为width
4. 开始动画
5. now left：-width
6. next left：0；
7. 更新 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)

（）

作用与用法：

• 分组，返回会多一个下标
• 优先级，单独处理，添加量词等

反向引用

常用于匹配字符串前后一致