【面试题】作用域面试题

作用域

  1. 全局作用域
  2. 局部作用域(函数里)也称函数作用域
  3. 块级作用域 {}包裹的 例如if for 括号()也算

变量

  1. 全局变量 谁都能用,在函数内也可以
  2. 局部变量,只能在该函数内用,如果这个函数嵌套了子函数,那么父函数定义的变量,子函数也能用,不能颠倒,父亲的钱就是儿子的钱,儿子的钱不是父亲的钱
  3. 块级变量 (){} 只能在{}生效

函数作用域作用

  • 隔离变量,不同作用域下同名变量不会有冲突
  • 变量有一个坑,特殊情况
  • 如果函数内部或者块级作用域内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐
function fn(){num = 10
}
console.log(num)// 10
// 函数里面的形参是局部变量

作用域链:就近原则

//具名函数: 
function fn(){// fn 是函数名}  
//匿名函数 
let sum = function(){// sum 不是函数名,只是一个变量} 

立即执行函数

立即执行,无需调用 避免全局变量之间的污染

//写法一:
function(形参){})(实参)   
function fn(形参){//可写函数名,可不写 })(实参)
//写法二:
(function(形参){}(实参))

多个立即执行函数必须加结束符,否则报错

(function(){console.log(111)})();
(function(){console.log(222)})();

当函数没有设置形参,而调用时传递了实参,会在函数内默认用arguments这个伪数组来存储实参,说他是伪数组是因为没有 pop push等方法,但是有length属性

原生js

document.querySelector('css选择器') 返回匹配的第一个元素 得到的都是一个DOM对象 document.querySelectorAll('css选择器') 返回所有匹配的元素,放在一个伪数组里

let box = document.querySelector('div')
box.className = 'active' 
// 原生js增加类,active 是类名但是会覆盖之前的类,当要修改很多样式时,可以将之前的类也写在=‘’里面

通过classList操作类控制CSS

为了解决className容易覆盖以前的类名,我们可以通过classList方式追加和删除类名语法:

  1. 追加一个类 元素. classList.add('类名')
  2. 删除一个类 元素.classList.remove('类名')
  3. 切换一个类 元素. classList.toggle('类名')

定时器--间歇函数

  • 返回值 intervalID 是一个非零数值,用来标识通过setInterval()创建的定时器,这个值可以用来作为 clearInterval() 的参数来清除对应的定时器。
  • 一般let 一个变量来存储返回值,方便后续清除定时器 // clearInterval(存储返回值的变量)

开启定时器

//写法一:函数代码写在里面
setInterval(function(){
console.log('你好啊')
},1000)//每间隔1s ,就会调用这个函数一次//写法二:在外面定义一个函数,在setInterval(函数名,1000),只写函数名,不写(),因为一写就是调用,会立即执行,定时器就失去作用
function show(){console.log('你好啊')
}
setInterval(show,1000)

定时器--延迟函数

let qq  = setTimeout(function(console.log(111)
){
}10000) // 会在10s后调用这个函数,只会执行一次  //清除延时 
clearTimeout(qq)

实例化时间对象

new Date()
//获取当前本地时间
let operateTime = new Date().toLocaleString()

时间格式化

<div> {{item.date | format('yyyy-MM-dd hh-mm-ss')}} </div>Vue.filter('format',function(value,arg){function dateFormat(date,format){if(typeof date === "string"){var mts = date.match(/(\/Date\((\d+)\)\/)/);if(mts && mts.length >= 3){date = parseInt(mts[2]);}}date = new Date(date);if(!date || date.toUTCString() == "Tnvalid Date") {return "";}var map = {"M":date.getMonth() + 1,  // 月份“d”:date.getDate(),  // 日“h”:date.getHours(),  // 小时“m”:date.getMinutes(),  // 分“s”:date.getSeconds(),  // 秒“q”:Math.floor((date.getMonth() + 3) / 3),  // 季度“S”:date.getMilliseconds(),  // 毫秒};format = format.replace(/([yMdhmsqS])+/g,function(all,t){var v = map[t];if(v !== undefined) {if(all.length > 1) {v = '0' + v;v = v.substr(v.length - 2);}return v;}else if (t == 'y'){return (date.getFullYear() + ' ').substr(4 - all.length);}return all;});return format;}
})

判断类型

instanceof

  • 只能判断对象的具体类型(判断对象里面的属性和方法)
  • 其中instance 是实例 例子的意思
  • 能用===判断类型的只有两种 null undefined ,因为这两个类型只有一个值

typeof

  • 返回数据类型的字符串表达式
  • typeof 判断不了null 与 object ,object与array
  • 可以判断 undefined /字符串/数值/Boolean/function
  • null 和undefined 没有toString()方法
  • undefined是变量定义了但未赋值
  • null 是var a = null 定义赋值了,值为null
  • 初始赋值为 null,表明将要赋值为变量
  • 结束前,赋值为null,是为了让对象成为垃圾对象,被垃圾回收器回收
console.log(typeof null)   // 'object'
  • 数据类型分为 基本类型 和 对象类型
  • 变量类型分为 基本类型和引用类型(变量内存值的类型)
  • 基本类型:保存的就是基本类型的数据
  • 引用类型:保存的是地址值

var c = {}, c 保存的是这个对象的地址值,c准确的说是引用类型,{}这个数据,也是对象c

正则表达式

  1. 设定规则
  2. 进行检测匹配
let reg = /前端/
let str = '我要学前端'

检测方法一:reg.test(str)

  • 判断是否有符合规则的字符串
  • 要么是true 要么是false

检测方法二:reg.exec(str)

  • 检索(查找)是否有符合规则的字符串 找到返回数组 否则返回null
  • 普通字符:数字和英文字母
  • 元字符:[a-z] ,[0-9] // 相当于abcdefg......xyz 规定用户只能输入0-9
  • 边界符

^ 以什么开头

console.log(/^哈/.test( '二哈'))   // false
console.log(/^哈/.test('我开心的哈哈大笑'))  //faLse

& 以什么结尾

// 当 ^& 一起用时,表示精确查找   /^哈$/   被查找的字符串只能是哈
console.log(/^哈$/.test('我开心的哈哈大笑")) //  false
console.log(/^哈$/.test('哈哈')) // false 
console.log(/^哈$/.test('哈'))/ /true   精确匹配
  • 量词{n,m} 只能出现n到m次
  • 字符类[ ]
  • 连字符 - 表示一个范围 [a-z] ,[0-9] [a-zA-Z]只选其中一个

constructor 构造函数

  • 所有在class里面的函数都不用写 function //constructor(){} 是用来接收 new 实例化时传递的参数
// 创建类 classclass  Star {constructor(uname,age){this.uname = uname;this.age = age;}sing(){console.log("我唱歌")}
}
  • 多个函数方法之间,不需要逗号分隔
// 利用类创建对象 newlet  dh =  new  Star('刘德华',18)
  • in 运算符 ,检查某个属性是否在对象中,返回true 和 false
console.log("age" in  ldh)// true  
  • 基本数据类型变量在栈内存中,保存的就是值,引用数据类型保存的是内存地址

获取元素子节点

  • 元素.getElementsByTagName()
  • 元素.childNodes 子节点不是子元素,子节点有空白
  • childNodes 会返回包括文本节点在内的所有的节点,标签间的空白(换行)也当做是文本节点,但是在IE8及以下版本不会将空白计算到文本节点中
  • 元素.firstChild 子节点不是子元素,子节点有空白文本节点
  • 元素.lastChild 子节点不是子元素,子节点有空白文本节点

子元素

  • 元素.children 只包含标签
  • 元素.firstElementChild 不兼容IE8 及以下

其他元素

  • 获取body document.body
  • 获取html document.documentElement
  • 所有元素 document.all

读取样式

  • 通过 style 设置和读取的都是内联样式,优先级较高,读不到样式表
div.style.width
  • currentStyle 可以读取正在显示的样式
div.currentStyle.width  //只有IE 浏览器支持
  • 常用 getComputedStyle() 传递两个参数,第一个参数是目标元素,第二个一般是null
getComputedStyle(div,null) // 返回的是一个对象,所有样式都在这个对象obj中
getComputedStyle(div,null).width   // 不支持IE8 及以下

getComputedStyle(div,null) 与 currentStyle 区别

  • 在没有设置值时,getComputedStyle()会返回真实的值,而不是默认值,比如width,后者会返回auto,前者返回真实值
  • currentStyle 和 getComputedStyle() 获取的 样式都只是可读的,不能修改

 前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Arcgis 分区统计majority参数统计问题

利用Arcgis 进行分区统计时&#xff0c;需要统计不同矢量区域中栅格数据的众数&#xff08;majority&#xff09;&#xff0c;出现无法统计majority参数问题解决 解决&#xff1a;利用copy raster工具&#xff0c;将原始栅格数据 64bit转为16bit

kotlin 编写一个简单的天气预报app(三)broadcast换成eventbus

使用eventbus替换broadcast 将从Broadcast切换到EventBus有以下几个好处&#xff1a; 解耦性&#xff1a;通过使用EventBus&#xff0c;您可以实现组件之间的解耦。传统的Broadcast机制需要发送方和接收方明确知道对方的存在&#xff0c;并且需要在代码中设置Intent过滤器和广…

Vue中的插值表达式

Vue中的插值表达式&#xff08;Interpolation&#xff09;用于将数据动态绑定到HTML模板中。它的主要作用是在模板中直接显示变量的值&#xff0c;并实现数据的双向绑定。以下是插值表达式的一些作用&#xff1a; 1.变量展示&#xff1a;插值表达式允许将Vue实例中的数据直接显…

springboot项目如何自动重启(使用Devtools检测修改并自动重启springboot)

1. 问题&#xff1a; 我们在项目开发阶段&#xff0c;可能经常会修改代码&#xff0c;修改完后就要重启Spring Boot。经常手动停止再启动&#xff0c;比较麻烦。 所以我们引入一个Spring Boot提供的开发工具&#xff1b; 只要源码或配置文件发生修改&#xff0c;Spring Boot应用…

4年测试工程师,常用功能测试点总结,“我“不再走弯路...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 输入框测试 1、字…

如何把几个视频合并在一起?视频合并方法分享

当我们需要制作一个比较长的视频时&#xff0c;将多个视频进行合并可以使得整个过程更加高效。此外&#xff0c;合并视频还可以避免出现“剪辑断层”的情况&#xff0c;使得视频内容更加连贯&#xff0c;更加容易被观众理解和接受。再有&#xff0c;合并视频还可以减少视频文件…

【软件测试】说说你对TDD测试驱动开发的理解?

很多公司在面测试中高级岗时&#xff0c;都会不同程度地问到“有没有了解过TDD”“你认为TDD可以解决什么问题”或者“说说测试驱动开发的流程”等等&#xff0c;即使公司并不会用到此开发流程&#xff0c;面试官也会通过你对这个相对还比较“陌生”的概念的讲述来了解你对一些…

原型链污染,nodejs逃逸例子

文章目录 原型链污染原型链污染原理原型链污染小例子 原型链污染题目解析第一题第二题 Nodejs沙箱逃逸方法一方法二 原型链污染 原型链污染原理 原型链 function test(){this.a test; } b new test;可以看到b在实例化为test对象以后&#xff0c;就可以输出test类中的属性a…

“数智新应用”不再是口号,看汽车、医药、制造企业如何突出重围?

近日&#xff0c;以“释放数智生产力”为主题的 Kyligence 用户大会在上海前滩香格里拉大酒店成功举行。大会包含上午的主论坛和下午的 4 场平行论坛&#xff0c;并举办了闭门会议、Open Day 等活动。来自金融、零售、制造、医药等行业的客户及合作伙伴带来了超过 23 场主题演讲…

记录--一个好用的轮子 turn.js 实现仿真翻书的效果

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 国际惯例&#xff0c;官网链接 官网传送门 Github地址 github上有几个demos例子&#xff0c;介绍了基础用法。 我参考官网的例子&#xff0c;写了一个demo示例 安装 turn.js 依赖 jquery 库&#xff0…

web APIs-练习三

全选反选案例&#xff1a; <!DOCTYPE html><html><head lang"en"><meta charset"UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px s…

Redis Cluster 在Spring中遇到的问题

Redis集群配置可能会在运行时更改。可以添加新节点&#xff0c;可以更改特定插槽的主节点。还有可能因为master宕机或网络抖动等原因&#xff0c;引起了主从切换。 无法感知集群槽位变化 SpringBoot2.x 开始默认使用的 Redis 客户端由 Jedis 变成了 Lettuce&#xff0c;但是当…

2023.7月最新ORACLE考试通过|微思-ORACLE官方授权中心

微思-ORACLE官方授权培训中心 2022 ORACLE OCP考试战报https://blog.csdn.net/XMWS_IT/article/details/125866726?ops_request_misc%257B%2522request%255Fid%2522%253A%2522169089281916800182194373%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&r…

vue3学习-组件基础、深入组件

组件 基本概述 单独的 .vue文件 单文件组件&#xff08;SFC&#xff09;&#xff08;single file component&#xff09; 使用子组件 导入&#xff0c;无需注册&#xff0c;直接使用编译时&#xff0c;区分大小写可使用 />关闭标签 传递 props 需要再组件上声明注册 def…

深度学习:BatchNorm、LayerNorm、InstanceNorm、GroupNorm和SwitchableNorm的理解

深度学习&#xff1a;BatchNorm、LayerNorm、InstanceNorm、GroupNorm和SwitchableNorm的理解 深度学习中的NormBatchNormLayerNormInstanceNormGroupNormSwitchableNorm 附录 深度学习中的Norm 在深度学习中会经常遇到BatchNorm、LayerNorm、InstanceNorm和GroupNorm&#xf…

振弦采集仪完整链条的岩土工程隧道安全监测

振弦采集仪完整链条的岩土工程隧道安全监测 隧道工程是一种特殊的地下工程&#xff0c;其建设过程及运行期间&#xff0c;都受到各种内外力的作用&#xff0c;如水压、地震、地质变形、交通荷载等&#xff0c;这些因素都会对隧道的安全性产生影响。因此&#xff0c;对隧道的安…

SpringBoot项目使用MyBatisX+Apifox IDEA 插件快速开发

今天跟大家介绍两个快速开发项目的插件。能大大提高开发效率。希望能帮助到大家。 1、MyBatisX 插件 MyBatis-Plus为我们提供了强大的mapper和service模板&#xff0c;能够大大的提高开发效率。但是在真正开发过程中&#xff0c;MyBatis-Plus并不能为我们解决所有问题&#xf…

“深入理解Spring Boot:快速构建微服务架构的利器“

标题&#xff1a;深入理解Spring Boot&#xff1a;快速构建微服务架构的利器 摘要&#xff1a;Spring Boot是一种基于Spring框架的开源项目&#xff0c;它通过自动化配置和约定优于配置的原则&#xff0c;使得开发者能够快速构建微服务架构。本文将深入介绍Spring Boot的特点和…

[React]useMemoizedFn和useCallback对比

useMemoizedFn文档地址&#xff1a;https://ahooks.js.org/zh-CN/hooks/use-memoized-fn hooks组件内什么时候会更新自定义函数 在 React 中&#xff0c;自定义的 Hooks 内部的函数在以下常见的几种情况下会被重新赋值&#xff0c;导致更新引用&#xff1a; 组件重新渲染&…

AR开发平台 | 探索AR技术在建筑设计中的创新应用与挑战

随着AR技术的不断发展和普及&#xff0c;越来越多的建筑师开始探索AR技术在建筑设计中的应用。AR(增强现实)技术可以通过将虚拟信息叠加到现实场景中&#xff0c;为设计师提供更加直观、真实的建筑可视化效果&#xff0c;同时也可以为用户带来更加沉浸式的体验。 AR开发平台广…