【前端面试3+1】01闭包、跨域

一、对闭包的理解

定义

闭包是指在一个函数内部定义的函数,并且该内部函数可以访问外部函数的变量。闭包使得函数内部的变量在函数执行完后仍然可以被访问和操作。

特点:

闭包可以访问外部函数的变量,即使外部函数已经执行完毕。闭包可以保持外部函数的作用域不被销毁,从而延长变量的生命周期。

 应用:

闭包在 JavaScript 中被广泛应用,例如用于模块化开发、事件处理、异步编程等场景。闭包可以帮助我们隐藏变量,保护数据,以及实现高阶函数等功能。

作用:

  1. 封装变量:闭包可以帮助我们封装变量,避免全局变量污染。
  2. 保持作用域:闭包可以保持外部函数的作用域,延长变量的生命周期。
  3. 实现模块化:通过闭包可以实现模块化开发,将代码组织成独立的模块。
  4. 实现高阶函数:闭包可以作为参数传递给其他函数,实现高阶函数的功能。
  5. 实现私有变量:通过闭包可以实现私有变量和方法,保护数据安全。

优点:

  1. 封装性:闭包可以帮助我们封装变量和实现数据隐藏,提高代码的安全性和可维护性。
  2. 灵活性:闭包可以让函数拥有记忆功能,保持状态,实现更灵活的编程方式。
  3. 模块化:闭包可以帮助我们实现模块化开发,将代码组织成独立的模块,提高代码的可复用性。

缺点:

  1. 内存泄漏:如果闭包中引用了大量的外部变量,可能导致内存泄漏问题,需要注意内存管理。
  2. 性能问题:闭包会增加函数的作用域链长度,可能影响函数的执行效率,需要谨慎使用。
  3. 理解难度:闭包的概念相对抽象,可能增加代码的理解难度,需要深入理解才能正确应用。
function outerFunction() {
  let outerVar = 'I am outer';
  
  function innerFunction() {
    console.log(outerVar);
  }
  
  return innerFunction;
}

let closure = outerFunction();
closure(); // 输出 'I am outer'
```

在这个例子中,`innerFunction` 是一个闭包,可以访问 `outerFunction` 中定义的 `outerVar` 变量。

二、跨域的理解

定义:

       跨域是指在浏览器中,当前页面的域名、协议、端口和请求的目标资源的域名、协议、端口不一致时,浏览器会限制页面对资源的访问,这就是跨域。跨域是浏览器出于安全考虑而设置的限制,用于防止恶意网站获取用户的隐私信息。

如何解决跨域问题?


1. JSONP:通过动态创建 `<script>` 标签,利用 `<script>` 标签的跨域特性来获取数据。
2. CORS:跨域资源共享(Cross-Origin Resource Sharing),在服务端设置响应头,允许跨域请求。
3. 代理:通过服务器端转发请求,实现跨域访问

### 代理的原理:


代理是通过服务器端转发请求的方式解决跨域问题

具体原理如下:
1. 前端发送请求:前端将请求发送给自己的服务器,由自己的服务器代为转发。
2. 服务器接收请求:服务器接收到请求后,再向目标服务器发送请求。
3. 目标服务器响应:目标服务器响应结果后,服务器再将结果返回给前端。

        通过代理,前端请求的是自己的服务器,避免了跨域问题,而服务器之间的请求不受同源策略限制,可以正常通信。代理可以在服务器端对请求进行处理,如添加请求头、修改请求参数等,更加灵活地控制请求和响应。

总的来说,代理是一种常见的解决跨域问题的方法,通过服务器端转发请求实现前端与目标服务器之间的通信,避免浏览器的跨域限制。

三、路由模式有哪些?

  1. 哈希模式:使用 URL 中的 # 符号来标记路由,通过监听 hashchange 事件来实现路由的切换。例如:http://example.com/#/home。

  2. History 模式:利用 HTML5 的 History API,可以在不刷新页面的情况下改变 URL,实现路由的切换。例如:http://example.com/home。

四、 【算法】两数之和

给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target  的那 两个 整数,并返回它们的数组下标。

你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。

你可以按任意顺序返回答案。

1.解法一

暴力法:

int* twoSum(int* nums, int numsSize, int target, int* returnSize) {
    for (int i = 0; i < numsSize; ++i) {
        for (int j = i + 1; j < numsSize; ++j) {
            if (nums[i] + nums[j] == target) {
                int* ret = malloc(sizeof(int) * 2);
                ret[0] = i, ret[1] = j;
                *returnSize = 2;
                return ret;
            }
        }
    }
    *returnSize = 0;
    return NULL;
}

作者:力扣官方题解

        代码中通过两层循环遍历整数数组nums,找到两个数的索引ij,使得这两个数的和等于目标值target。如果找到了这样的两个数,则动态分配一个包含两个整数的数组ret,将这两个数的索引存入数组中,并将结果数组的大小设为2,最后返回这个数组ret。如果未找到满足条件的两个数,则将结果数组的大小设为0,并返回NULL

2.解法二

使用哈希表

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/488060.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

抖音视频关键词无水印下载软件|手机网页视频批量提取工具

全新视频关键词无水印下载软件&#xff0c;助您快速获取所需视频&#xff01; 随着时代的发展&#xff0c;视频内容已成为人们获取信息和娱乐的重要途径。为了方便用户获取所需视频&#xff0c;推出了一款功能强大的视频关键词无水印下载软件。该软件主要功能包括关键词批量提取…

【经验分享||快速解决】VScode+Python配置Selenium环境配置问题。ERROR: Cannot uninstall ‘certifi‘.

目录 正常安装遇到的问题 当在控制台输入pip install selenium时候&#xff0c;遇到的问题如下&#xff1a; 主要爆红的问题为 解决办法和正确安装方法 降低selenium的版本即可 在vscode控制台输入上面的代码即可。 总结 正常安装遇到的问题 当在控制台输入pip instal…

基于nodejs+vue发艺美发店管理系统python-flask-django-php

系统根据现有的管理模块进行开发和扩展&#xff0c;采用面向对象的开发的思想和结构化的开发方法对发艺美发店管理的现状进行系统调查。采用结构化的分析设计&#xff0c;该方法要求结合一定的图表&#xff0c;在模块化的基础上进行系统的开发工作。在设计中采用“自下而上”的…

文件编辑命令—vim

1.vim vim 是vi的升级版本.vi 文件名(vi方向键用不了) vim 的官方网站 (welcome home : vim online) 自己也说 vim 是一个程序开发工具而不是文字处理软件。 2.安装vim sudo apt install vim 如果出错了:apt update:刷新软件源; 出现"无法获得锁 之类的"sudo rm 文件…

8.软件工程

整个章节偏向于记忆、背诵&#xff1b; 主要议题&#xff1a; 软件体系&#xff1a;3层&#xff1b; UML重点&#xff0c;重点记3要素中的关系、图&#xff1b; 1.软件体系结构 分层 优点&#xff1a;利于软件的重复利用&#xff1b; 缺点&#xff1a;以什么方式分层&#…

小迪安全47WEB 攻防-通用漏洞Java 反序列化EXP 生成数据提取组件安全

#知识点&#xff1a; 1、Java 反序列化演示-原生 API 接口 2、Java 反序列化漏洞利用-Ysoserial 使用 3、Java 反序列化漏洞发现利用点-函数&数据 4、Java 反序列化考点-真实&CTF 赛题-审计分析 #内容点&#xff1a; 1、明白-Java 反序列化原理 2、判断-J…

Echarts 利用多X轴实现未来15天天气预报

Echarts 利用多X轴实现未来15天天气预报 UI 设计图 Echarts 实现效果 代码实现 代码分解 echarts 图表上下均显示数据 通过设置 grid.top 和 grid.bottom 设置白天和夜间天气展示区域 grid: {top: 36%,bottom: 36%,left: 5%,right: 5%}, 天气图标的设置 由于 axisLabel 的…

SpringBoot学习之ElasticSearch下载安装和启动(Mac版)(三十一)

本篇是接上一篇Windows版本,需要Windows版本的请看上一篇,这里我们继续把Elasticsearch简称为ES,以下都是这样。 一、下载 登录Elasticsearch官网,地址是:Download Elasticsearch | Elastic 进入以后,网页会自动识别系统给你提示Mac版本的下载链接按钮 二、安装 下载…

C++ 简单模拟实现 STL 中的 list 与 queue

目录 一&#xff0c;list 1&#xff0c; list 的节点与迭代器 2&#xff0c;list 的数据结构、一些简单的功能、构造函数 3&#xff0c;list 的对元素操作 4&#xff0c;C 11 的一些功能 5&#xff0c;完整代码&#xff1a; 二&#xff0c;queue 一&#xff0c;list std…

织梦地方php分类信息源码带数据库【附下载】

织梦地方&#xff08;DedeCMS&#xff09;是一款基于PHPMySQL技术的开源内容管理系统&#xff08;CMS&#xff09;。它以其强大的功能、灵活的扩展性和友好的用户界面&#xff0c;成为了众多网站建设者的首选。 在功能方面&#xff0c;织梦地方CMS提供了丰富的模板标签和灵活的…

问卷调查数据分析指南!掌握方法,精准把握用户需求!

“我们可以用自定义报表、交叉报表、自定义过滤器等放方式进行问卷调查数据分析。“ 问卷调查的过程中&#xff0c;问卷设计、问卷分发、问卷收集可能都不是让我们最头疼的。经过几天的奋战&#xff0c;终于拿到了数据&#xff0c;但是问题也随之而来。收集上来的问卷信息&…

word文件如何转PDF格式?word转PDF的方法

在当今数字化时代&#xff0c;文档格式的转换已成为日常生活和工作中不可或缺的一部分。其中&#xff0c;将Word文档转换为PDF格式更是受到了广大用户的青睐。本文将详细介绍Word转PDF的方法&#xff0c;帮助读者轻松实现文档格式的转换&#xff0c;并探讨转换过程中的注意事项…

03-CSS盒模型(padding、margin、opactiy、cursor、display、css3前缀)

一、CSS盒模型 CSS 盒模型规定了处理元素内容、内边距、边框 和 外边距 的方式。最内部分是元素内容&#xff0c;直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距。 1.元素的尺寸: height 设置元素的高度。属性值&#xff1a;auto&am…

用BI来做金蝶的数据分析,真能随时自助分析?

BI数据分析快的事&#xff0c;大家都知道&#xff0c;那用BI来分析金蝶ERP上的数据也很快&#xff0c;也能随时想怎么分析就怎么分析&#xff0c;想分析哪些数据就分析哪些数据吗&#xff1f; 用BI分析金蝶数据&#xff0c;不仅可随时自助分析&#xff0c;还可极大提高分析效率…

Nginx 内存池

目录 零、基本框架 一、基础结构 二、对外接口 三、函数实现 1、ngx_create_pool 2、ngx_destroy_pool 3、ngx_reset_pool 4、ngx_palloc 5、ngx_pnalloc 6、ngx_pmemalign 7、ngx_pfree 8、ngx_pcalloc 9、ngx_pool_cleanup_add 10、ngx_pool_run_cleanup_file…

Flask python 开发篇:上传文件(在指定目录下创建文件夹)

flask上传文件以及常见问题 一、flask文档上传文件的介绍二、上传文件的实现2.1、生成一个from表单&#xff0c;用来提交图片2.2、编写上传的逻辑 三、运行代码、以及常见异常四、写在最后 一、flask文档上传文件的介绍 Flask上传文件的文档介绍&#xff0c;文件上传的基本思想…

基于nodejs+vue的nuct产品售后管理系统python-flask-django-php

同时还能为用户提供一个方便实用的nuct产品售后管理系统&#xff0c;使得用户能够及时地找到合适自己的产品。管理员在使用本系统时&#xff0c;可以通过后台管理员界面管理用户的信息&#xff0c;也可以发布产品售后信息&#xff0c;让用户及时了解nuct产品售后信息。这样&…

web前端之3D标签动画、指定范围的随机数、动态设置css变量、文档片段对象、反向动画

MENU 效果图htmlJavaScriptstyle 效果图 html <div class"container"></div>JavaScript // 祝词 var words [健康码常绿,股票飙红,生意兴隆,财源广进,心想事成,永远十八,身体健康,大富大贵,大吉大利,万事如意,美梦成真,吉祥如意,鸿运当头,五福临门,吉…

uniapp的配置文件、入口文件、主组件、页面管理部分

pages.json 配置文件&#xff0c;全局页面路径配置&#xff0c;应用的状态栏、导航条、标题、窗口背景色设置等 main.js 入口文件&#xff0c;主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex&#xff0c;注意uniapp无法使用vue-router&#xff0c;路由须在pag…

每日一练:LeeCode-200、岛屿数量【DFS递归+BFS队列】

给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此外&#xff0c;你可以假设该网格的四条边…