2024年Web前端最新【面试题】作用域面试题_前端作用域面试题，前端开发达内

2401_84619432

于 2024-05-06 00:02:26 发布

阅读量458

点赞数 3

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84619432/article/details/138477514

版权

程序员专栏收录该内容

96 篇文章 0 订阅

订阅专栏

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

删除一个类 元素.classList.remove('类名')
切换一个类 元素. 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

正则表达式

设定规则
进行检测匹配

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 实例化时传递的参数

// 创建类 class
     class  Star {
        constructor(uname,age){
           this.uname = uname；
           this.age = age；
          }
       sing（）{
          console.log("我唱歌")
       }
}

多个函数方法之间，不需要逗号分隔

// 利用类创建对象 new
  let  dh =  new  Star('刘德华'，18)

in 运算符，检查某个属性是否在对象中，返回true 和 false

console.log("age" in  ldh)// true

基本数据类型变量在栈内存中，保存的就是值，引用数据类型保存的是内存地址

获取元素子节点

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

子元素

总结

对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！