JS函数高级

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量716 收藏 2
点赞数
分类专栏： js 函数 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48469083/article/details/119938413
版权
js 同时被 2 个专栏收录
4 篇文章 1 订阅
订阅专栏
函数
2 篇文章 0 订阅
订阅专栏

函数高级

1.回调函数 callback

  • 异步：做一个操作的时候，可以去做其他的事情 定时器

  • 同步：做一个操作的时候，其他的都只能等待 alert for

    //- 异步：做一个操作的时候，可以去做其他的事情      定时器
console.log(1);
setTimeout(function () { console.log("定时器"); }, 2000);
console.log(2);
​
// - 同步：做一个操作的时候，其他的都只能等待   alert  for
alert(1);
alert(2);

  • 回调函数：作为参数传递给其他函数调用函数，是解决异步操作的有效途径

  • 调用：等某个动作或某个行为执行完以后调用

    //- 回调函数：将函数作为参数传递给其他函数调用，解决异步操作的有效途径，等某个动作或某个行为执行完以后调用
setTimeout(fun, 3000);
function fun() {
    console.log("回调函数");
}

2.匿名函数自执行（IIFE）

2.1 函数的种类

  • 匿名函数：没有名字的函数

  • 学过的函数类型

     //1.普通函数
function fun1(){
    console.log("普通函数");
}
​
//2.表达式函数
var fun2 = function (){
    console.log("表达式函数");
}
fun2();
​
//3.事件处理函数
document.onclick = function(){
    console.log("事件处理函数");
}
​
//4.回调函数
setTimeout(function(){ console.log("回调函数");},2000);
​
//5.匿名函数
function (){
   console.log("匿名函数");
}

2.2 匿名函数自执行

  • 匿名函数：没有名字的函数

    //2.匿名函数自执行  (函数的声明)(调用)
(function () {
    console.log("匿名函数");
})();

  • 匿名函数传参

    //3.函数传参
(function (a, b) {
    var c = a + b;
    console.log(c);
})(10, 20);

  • 匿名函数返回值

    //4.返回值
var s = (function (a, b) {
    var c = a + b;
    return c;
})(10, 20);
console.log(s);

2.3 特点和使用场景

  • 使用场景

    • 在外部js文件的开头添加一个匿名函数自执行

    • 在不影响其他代码的基础上添加功能

    • 闭包中使用

  • 优点：

    • 避免全局污染，（ 全局污染（大量使用全局变量，全局变量可以被任意的修改）

    • 完美的嵌入代码

  • 注意：再写匿名函数的时候前面加;

    ;(function(){
    console.log("匿名1");
})()
;(function(){
    console.log("匿名2");
})()

3.闭包函数（Closure）

3.1 回顾

  • 局部变量特性

    //局部变量、函数的特性
function fun(){
    var a = 10; //局部变量，外界不能使用，除了函数的括号就会被销毁
    console.log(a++);
}
fun(); 
fun();

3.1 闭包基础知识

  • 闭包的概念：能访问其他函数内部变量的函数(函数套函数，内部函数可以访问外部函数变量)

  • 特性：延伸变量的使用范围，闭包中使用的变量会一直存储在内存中，类似全局变量，避免污染

  • 缺点：可能造成内存泄漏， 慎用，不用的时候释放掉， f = null;

    //1.闭包:能访问其他函数内部变量的函数(函数套函数，内部函数可以使用外部函数变量)
function outer(){
    var s = 100;
    function inner(){
        console.log(s); //100
    }
    inner();
}
outer();


//2.完整的闭包
function wai(){
    var c = 10;
    return function (){
        console.log(c++);
    }
}
var inn = wai(); //inn = function(){console.log(c++);}
inn(); //10
inn(); //11
inn(); //12
inn(); //13

  • 每一次闭包都是独立的模块，相互没有影响

    //2.完整的闭包
function wai(){
    var c = 10;
    return function (){
        console.log(c++);
    }
}
var inn = wai(); //inn = function(){console.log(c++);}
inn(); //10
inn(); //11
inn(); //12
inn(); //13


//每一次闭包都是独立的模块，相互没有影响
var inn2 = wai();  //inn2 = function(){console.log(c++);}
inn2();

3.2 闭包的使用场景

  • 使用场景1：使用函数内部变量

    //1.使用函数内部的变量
function outer() {
    var a = 10;
    return function () {
        console.log(a++);
    }
}

  • 使用场景2：解决全局作用域问题

    //2.解决全局作用域问题
var arr = [];
for (var i = 0; i < 5; i++) {
    arr.push(function () {
        console.log(i);
    })
}
//代码执行后的结果是？
//arr[fun,fun,fun,fun,fun]  i = 5,条件不成立，结束循环
//                arr[3]() = function(){console.log(i)}
arr[3](); //5
arr[2](); //5

//使用闭包修改
var arr1 = [];
for (var i = 0; i < 5; i++) {
    (function (i) { //var i;
        arr1.push(function () {
            console.log(i);
        })
    })(i);
}
arr1[3](); //3
arr1[2](); //2

  • 使用场景3：私有属性

    //3.私有属性 (idCard外界不可见，可以设置和获取)
function Person() {
    //this.idCard = "431102200312124568";
    var idCard = "431102200312124568";
    return {
        "getId": function () {
            return idCard;
        },
        "setId":function(id){
            idCard = id;
        }
    }
}
var p = new Person();  // p = function(){ return idCard;}
console.log(p);


//获取id
console.log(p.getId()); //431102200312124568

//设置id
p.setId("431102200412122222");
console.log(p.getId()); //431102200412122222

  • 使用场景4：防抖和节流

3.3 闭包面试题

  • 面试题1：代码运行完后的结果是，怎么修改

    //1.面试题1：i是全局变量， 变成局部变量
var arr = [];
for (var i = 0; i < 5; i++) {
    (function (i) { //var i
        arr.push(function () {
            console.log(i);
        })
    })(i);
}
arr[3]();  //3
arr[2]();  //2

  • 面试题2：使用闭包模拟私有变量

    //2.闭包面试题：使用闭包模拟私有属性  id外界不可见
function Person() {
    // this.idCard = "431102200312124568";
    //设置成局部变量，外面就看不到了，但是出了函数括号就会被销毁
    var idCard = "431102200312124568";
    
    //形成闭包，闭包中使用的变量会一直存储在内存中，不会被销毁
    return {
        "getId":function(){ //获取id的函数
            return idCard;
        },
        "setId":function(id){ //设置id的函数
            idCard = id;
        }
    }
}
var p = new Person();
console.log(p); //{getId: ƒ, setId: ƒ}

console.log(p.getId());
p.setId("431102200312124560");

  • 面试题3：代码执行后的结果是

    //3.闭包面试3： 代码执行后的结果
function fun(n,o){
    console.log(o);
    return {
        "fun":function(m){
            return fun(m,n);
        }
    }
}
/* 
   var a = fun(0,undefined)            闭包中使用的变量会一直存储在内存中  n = 0   
      a = {
           "fun":function(m){
               return fun(m,n);
            }
          }
    a.fun(1)  //m = 1;  fun(1,0)
    a.fun(2)  //m = 2;  fun(2,0)
    a.fun(3)  //m = 3;  fun(2,0)
*/
var a = fun(0); //undefined
a.fun(1);  //0 
a.fun(2);  //0
a.fun(3);  //0

  • 面试题4：代码执行后的结果是

    //4.闭包面试4：看代码写程序
for(var i = 0;i<5;i++){
    setTimeout(function(){
        console.log(new Date(),i); //Thu Aug 26 2021 15:03:50 GMT+0800 (中国标准时间) 5
    },1000);
}
console.log(new Date(),i); //Thu Aug 26 2021 15:03:49 GMT+0800 (中国标准时间) 5

4.递归函数

  • 递归：函数内部调用函数本身

  • 和循环的区别：循环无限执行会变成死循环，卡死，递归有最大堆栈调用次数，超过会报错

4.1 阶乘

  • 递归的实现过程

    • 找规律

    • 递：函数内部调用函数本身

    • 归：在函数的开头，结束递归的执行

      //1.先找规律
//6! 阶乘  6*5*4*3*2*1
//6!  6 * 5！
//5!  5 * 4!
//4!  4 * 3!
//n! = n * (n-1)


//2.递://超出最大调用堆栈大小
// function jc(n) {  
//     return n * jc(n-1);
// }
// jc(6);

//3.归（一定要结束）
function jc(n){
    //归：一定是函数的开头
    if(n == 1) return 1
    //递
    return n * jc(n-1);
    //     return n * jc(n-1);
    //            // 6 * jc(5)  6*5*4*3*2*1
    //                   //5 * jc(4)  5*4*3*2*1
    //                         //4 * jc(3)  4*3*2*1
    //                               //3 * jc(2) 3*2*1
    //                                     //2 * jc(1)  1
    //                                            //1
}
console.log(jc(10));

4.2 斐波那契数列

  • 数列特点：1,1,2,3,5,8,13,21,34 。。。

  • 数列规律：f(n) = f(n-1) + f(n-2)

    //1.找规律  1 1 2 3 5 8 13 21 34
//f(6) = f(5) + f(4)
//f(5) = f(4) + f(3)

//2.递
// function rabbit(n){
//     return rabbit(n-1) + rabbit(n-2);
// }
// console.log(rabbit(6)); //8


//3.归
function rabbit(n){
    if(n == 1 || n == 2) return 1;
    return rabbit(n-1) + rabbit(n-2);
}
console.log(rabbit(6)); //8
console.log(rabbit(9)); //34

4.3 快速排序

  • 实现思路

    arr.length <=1   return arr;
   var arr = [2,7,1,5,4,6,8]
1.获取数组中间的元素 (从数组中将中间元素删除)
  var middle = arr.aplice(arr.length/2,1)[0];
2.创建两个空数组，left,right
3.循环数组和中间值进行比较，比中间值小的放left，比中间值大的放后面
  middle = 5  left = [2,1,4]   right = [7,6,8]
4.组合
  return quick(left).concat(middle,quick(right))

  • 代码实现

    function quick(arr) {
    //5.结束递归的条件
    if(arr.length<=1) return arr;
    //1.找中间值  （删除掉中间值）
    var middle = arr.splice(Math.floor(arr.length / 2), 1)[0];

    //2.创建两个空数组
    var left = [];
    var right = [];

    //3.循环数组和中间值进行比较，比中间值小的放前面，大的放后面
    for(var i = 0;i<arr.length;i++){
        if(arr[i] < middle){
            left.push(arr[i]);
        }else{
            right.push(arr[i]);
        }
    }
    //4.组合
    return quick(left).concat(middle,quick(right));
}
var arr = [2, 7, 1, 5, 4, 6, 8]
console.log(quick(arr));;

5.防抖与节流

  • 作用：用于处理性能优化

5.1 防抖（debounce)

  • 防抖：在规定的事件内触发一次，开启一个定时器，延迟某个时间执行(500ms),如果在这500ms内，有再次触发事件，重新计数

  • 防抖的目的：让高频发的事件，在规定时间内，触发1次

  • 实现思路： 开一个定时器，事件延迟某个时间（30ms），如果在这30ms内再次触发整个事件，重新开始计数

  • 基础实现

    //2.在div中移动，数字+1
oDiv.onmousemove = debounce(fun,30);
function fun() {
    oDiv.innerText++;
}

//3.防抖：事件发生的时候开启定时器，开始计数(30)，如果在计数范围内又触发了事件，那就重新开始计数
var timer;
function change() {
    //判断，如果之前已经开启了定时器，就清除掉之前的
    if (timer) { clearTimeout(timer) }
    timer = setTimeout(function () {
        fun();
    }, 30);
}

  • 封装

    function debounce(fun,wait) { //fun:事件处理函数， wait:延迟事件
    var timer; //维护全局纯净，借助闭包来实现
    return function () {
        if (timer) {  //timer有值为真，这个事件已经触发了一次，重新开始计数
            clearTimeout(timer); 
        }
        timer = setTimeout(function () {
            fun();
        }, wait);
    }
}
  • 5.2 节流
  • 在规定的事件内触发一次，开启定时器，延迟某个时间执行一次，如果在等待的这个时间内再处触发事件，不处理，控制事件的执行频率

爱敲代码的狼仔
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS高级总结（函数）
m0_44981797的博客
09-17 1231
js高级笔记--函数
Js高级总结2 JavaScript函数高级
weixin_54372875的博客
01-15 264
<!-- ****函数原型**** 1函数的prototype属性 每个函数都有一个prototype属性 默认指向一个空object空对象 (原型对象) 原型对象中有一个属性constructor 指向函数对象 2给原型对象 添加属性（一般是方法） 函数的所有实例对象自动拥有所有原型中的属性（方法） ****显式原型 隐式原型**** 每个函数function都有一个prototype即显式原型 每个对象都有一个__proto...
回调函数callback()的学习
weixin_46037781的博客
08-05 769
文章目录一、什么事回调函数？二、异步回调2.1、javascript中内置异步处理模式Promise三、`callback && callback(data)`什么意思 一、什么事回调函数？ 官方是这样写的： 被作为实参传入另一函数，并在该外部函数内被调用，用以来完成某些任务的函数，称为回调函数. 官方示例 function greeting(name) { alert('Hello ' + name); } function processUserInput(callback)
【JS】JS高阶函数——reduce()用法详解总结。你不得不知道的数组reduce高级用法!
余浩的博客
06-05 887
reduce() 方法对数组中的每个元素执行一次提供的回调函数，且该函数为升序执行，并将其结果汇总为单个返回值。
JS函数高级用法
新手第一次写代码
05-02 672
JS函数高级用法
JavaScript函数高级
langhuage的博客
02-18 59
JS高级——节流函数
@SCY
02-26 4703
在某个时间内（比如500ms），某个函数只能被触发一次；过程：当事件触发时，相应的函数并不会立即触发，按照一定的频率去执行默认情况下，我们的防抖函数最后一次是不会执行的因为没有达到最终的时间，也就是条件满足不了的但是，如果我们希望它最后一次是可以执行的，那么我们可以让其传入对应的参数来控制我们来看一下代码如何实现：我们增加了else语句：所以我们可以使用timer变量来记录定时器是否已经开启已经开启的情况下，不需要开启另外一个定时器了else语句表示没有立即执行的情况下，就会开启定时器；
JS高级——防抖函数
@SCY
02-26 2756
防抖函数具体实现过程
JavaScript高级 函数进阶篇
qq_57162921的博客
12-22 1093
相同点：都可以改变函数内部this指向；区别点：（1）、call()和apply()会调用函数，并且改变函数内部this指向；（2）、call()和apply()传递的参数不一样，call()传递参数arg1 、arg2… ，apply()必须是数组形式[arg]；（3）、bind()不会调用函数，可以改变函数内部this指向；主要应用场景：（1）、call()经常做继承；（2）、apply()经常跟数组有关系，比如借助于数学对象实现数组最大值最小值；
JS高级函数/AOP
weixin_43476141的博客
10-17 306
JS高级函数/AOP高级函数AOP 面向切片编程实现 高级函数 高级函数 ==> 参数 或者是 返回值 是函数的函数 AOP 面向切片编程 当需要使用某个公共函数时需要在这个函数执行前后添加自己的逻辑， 通常我们的做法不能是直接修改这个函数， 而是通过AOP的方法利用高级函数和原型链的特点处理 实现 // 目标函数 function say(who) { console.log(...
JavaScript中的高级函数
10-18
在JavaScript中，函数的功能十分强大，除了函数相关的基础知识外，掌握一些高级函数并应用起来，不仅能让JS代码看起来更为精简，还可以提升性能，本文是小编总结的一些常用的、重要的函数
JavaScript高级函数应用之分时函数实例分析
10-18
主要介绍了JavaScript高级函数应用之分时函数,结合实例形式分析了javascript通过合理分时函数应用避免浏览器卡顿或假死的相关操作技巧,需要的朋友可以参考下
js高级函数之闭包
12-17
js高级中的函数之闭包函数全解与应用场景(循环闭包,定时器,面试题)
javascript高级编程之函数表达式 递归和闭包函数
11-23
在JavaScript高级编程中，函数表达式是至关重要的概念，它涉及到如何定义和使用函数。函数表达式有两种主要的形式：函数声明和函数表达式。 1. **函数声明**： 函数声明采用`function functionName(args) {...}`的...
javascript指南和函数式编程
01-17
而《JavaScript函数式.zip》可能是一份关于JavaScript函数式编程的资料集合，函数式编程是一种编程范式，强调使用函数和避免改变状态。其中可能涵盖以下知识点： 1. **纯函数**：理解纯函数的定义，即给定相同的...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1116
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 162
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 126
【代码】vue el-select的下拉树形结构。
掌握Javascript函数与对象：从基础到高级应用
通过本课程的学习，学生将能够熟练运用函数和对象进行JavaScript编程，实现更高级的动态网页功能，并具备与DOM进行交互的能力，从而提升Web开发的效率和代码的可维护性。对于那些希望通过JavaScript进行Web开发的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值