文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript中你不知道的函数有哪些

2024-04-02 19:55

关注

本篇文章给大家分享的是有关JavaScript中你不知道的函数有哪些,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

函数声明

在JavaScript中,对于函数的声明有两种表达形式, 声明式 和 表达式  ,至于其他函数(如立即执行函数,箭头函数等)都是基于这两种形式衍生的。

// 声明式 function foo () {   console.log('我是声明式') }  // 表达式 var foo = function () {   console.log('我是表达式') }

具名函数

故名思意,具名函数就是有名称的函数,这是我们最常见的一种函数,我们先来看看它的写法。

// 具名函数 function foo () {   console.log('我是具名函数') }

上边说了,函数声明的表达形式有两种,具名函数是经典的声明式,具名函数表达式的另外一种表现形式引出了另外一种函数类型- 具名函数表达式(NFE) 。

具名函数表达式

具名函数表达式就是具名函数的表达式写法,严格来说,它并不是一种函数类型,只是一种写法而已。

// 具名函数表达式 var fn = function foo () {   console.log('我是具名函数表达式'); } fn() // 输出:我是具名函数表达式

它有几个特点:

函数名标识符私有化:即具名函数表达式的函数名不能从外部调用,仅供函数体内部使用,当外部调用时就会报错。

// 函数名称私有化 var fn = function foo () {   console.log(typeof foo); } fn() // function foo() // Uncaught ReferenceError: foo is not defined

函数名标识符常量化:即具名函数表达式标识符的值不能修改,我们可以将其当作常量来使用。

var fn = function foo(){     foo = 12;     console.log(foo); }  fn() 

我们来看一道经典的面试题

// 改写以下代码,使其分别输出10、12 var foo = 10; (function foo   (){     foo = 12;     console.log(foo); })()  // 改写结果 var foo = 10; (function foo   (){     var foo = 12;   console.log(window.foo); // 10   console.log(foo); // 12 })()

匿名函数

匿名函数:即没有名称的函数,匿名函数不能像具名函数一样直接声明定义,在JavaScript中常见的用法就是将匿名函数当作回调参数使用或作为高阶函数的返回值。

// 作为回调参数 setTimeout(function () {   console.log('我是匿名函数'); }, 1000);  // 作为高阶函数的返回值 function foo () {   var num = 10;   return function (i) {     return num + i;   } }  foo()(5) // 输出:15

匿名函数有几个缺点我们需要注意一下:

立即执行函数

立即执行函数(IIFE):即当程序解析到该函数时就立即执行。

// 写法一 (function () {   console.log('我是立即执行函数'); })()  // 写法二 (function () {   console.log('我是立即执行函数'); }())

匿名函数的优点在于内部参数不会泄露,即变量私有化。

(function () {   var x = 10   console.log('我是立即执行函数'); }())  console.log(x); // Uncaught ReferenceError: x is not defined

有一道很经典的面试题,我们可以看一下。

// 改写以下代码,让其依次输出. for (var i = 0; i < 5; i++) {     setTimeout(function () {         console.log(`值为${i}`)     }, 0) } // 此时会输出5次 "值为5"

我们会立马想到用 let ,但是还有没有其他写法呢?当然有,立即执行函数就是了。

// 改写方法一 for (var i = 0; i < 5; i++) {   (function(num){     console.log(`值为${num}`)   })(i) }  // 改写方法二 for (var i = 0; i < 5; i++) {   var num = (function(){     return i;   })()   console.log(`值为${num}`) }

以上就是JavaScript中你不知道的函数有哪些,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯