前端面试题集锦-2021年前端面试题收集题库3 常见的javascript 语句基本规范 eval函数的功能是什么 执行一下代码结果是什么["1","2","3"].map(parseInt) 说说对this对象的理解 JavaScript中存在哪些伪数组,如何将伪数组转化为数组 JavaScript中的callee和caller的作用是什么 统计字符串中字母的个数或统计最多的字母 写一个函数清除字符串前后的空格 写一个函数实现一个数组合并的方法 工作中,常用的逻辑运算符有哪些 什么是事件代理(事件委托) 未声明和未定义的变量有什么区别 什么是全局变量,这些变量如何声明,使用全局变量有哪些问题 常用的定时器工作说明,使用定时器的缺点 说说ViewState和SessionState有什么区别 什么是 === 运算符

1.变量和函数的命名规则

  • 命名规则-驼峰命名法
  • 构造函数首字母大写

2.空格,缩进,注释的使用规范

  • 一般使用2空格代替tab
  • 注释多行用 /** */
  • 单行注释直接 //

3.其他使用规范

  • 判断变量是否相等时使用===强等类型判断一起
  • switch语句必须有default分支
  • 使用字面量创建数组和对象代替new Array()
  • 不要在同一行声明多个变量
  • 不要使用全局函数
  • 函数不应该有时有返回值,有时没有返回值

eval函数的功能是什么

定义和用法

用来计算某个字符串,并且执行其中的JavaScript代码

语法

eval(string)

需要注意的点

  • 如果传入 eval() 的参数不是字符串,则会直接返回该参数
  • 非严格模式下直接调用 eval() 时,里面使用 var 声明的变量和使用 function 声明的函数会修改当前词法作用域,里面使用 let 和 const 声明的变量不会修改当前词法作用域,但是会在当前创建新的词法作用域。
  • 非严格模式下间接引用 eval() 时,会直接运行在全局环境中,里面使用 var 声明的变量和使用 function 声明的函数会修改全局词法作用域,里面使用 let 和 const 声明的变量不会修改全局词法作用域,但是会在全局环境创建新的词法作用域
  • 使用 window.eval() 等同于间接引用 eval()
  • eval() 中执行的代码只能调用 JS 解释器(Interpreter)来解释执行,无法被即时编译器(JIT Compiler)优化, eval() 中的执行的代码可能会导致 JS 引擎在已经生成的机器代码中进行变量查找和赋值,带来性能问题。
  • eval() 使用不当可能会导致里面执行的字符串容易遭受恶意修改,带来安全问题(比如 XSS 攻击)。
  • 使用 eval() 会干扰代码压缩工具的行为。代码压缩工具一般会将局部变量名重命名为更短的变量名(如 a 和 b 等),以便减小代码体积。当使用了 eval() 时,由于外部的局部变量可能会被 eval() 访问到,代码压缩工具便不会对可能会被 eval() 访问到的局部变量名进行压缩,会降低代码压缩率。

  • 上面代码主要考察高阶函数 mapparseInt 函数
    ['1','2','3'].map(parseInt(item,index))
    => parseInt('1',0)
    => parseInt('2',1)
    => parseInt('3',2)
    // parseInt 第一个参数为 需要被转换的字符串
    // parseInt 第二个参数为 被转换字符串的进制
    // parseInt('2',1) 表示将 1进制的 字符串‘2’转换为10进制,不存在1进制的字符串'2',所以返回值为NaN
  • 所以最后的返回值为[1,NaN,NaN]

说说对this对象的理解

  • this执行上下文
  • 表示函数执行时的上下文
  • 默认指向函数执行的上下文 全局执行则是window,引用对象调用则是引用对象
var name = 'jeskson';
function person() {
 return this.name;
}

console.log(this.name); // jeskson
console.log(window.name); // jeskson
console.log(person()); // jeskson
  • 使用call和apply可以指定上下文

function person() {
 return this.name;
}

var obj = {
 name: 'jeskson'
}

console.log(person.call(obj)); // jeskson
console.log(person.apply(obj)); // jeskson
  • 构造函数中this指向构造出来的新对象
function Person(name) {
 this.name = name;
 return name;
}
console.log(new Person('jeskson').name); // jeskson

  • 复杂的this指向问题,需要考虑函数执行上下文的出栈和压栈问题判断

JavaScript中存在哪些伪数组,如何将伪数组转化为数组

  • 常见的伪数组:arguments document.getElementsByTagName获取的元素标签集合
  • 区别和相似:
    • 相似: 都具有 length 属性,都是有序的引用组合,可以下标获取元素,伪数组也是可迭代对象,可以调用 for of
    • 区别:Array.isArray,伪数组为false,并且数组的类方法不能使用,例如遍历的forEach等
  • 如何转换:
    • Array.from (伪数组) 可以将伪数组转化为正常的标准数组
    • Array.prototype.slice.call(伪数组) 实际上是调用数组的 slice 方法
    • 利用伪数组的可迭代特性,for of 手动 push 到空的标准数组

JavaScript中的callee和caller的作用是什么

  • caller 是JavaScript中函数类型的*属性,用来标识函数的调用的函数,如果是父函数中引用调用子函数,则子函数的caller是父函数,如果函数直接在顶层JavaScript环境中调用,那么caller则是 null
  • callee 则是函数调用时 伪数组 arguments 的属性,此属性返回的是当前函数执行本体,例如
    function test(){
        console.log(arguments.callee)
    }
    test()
    // 返回值是test函数本身,返回值可以直接调用类似 arguments.callee()
  • 作用:
    • caller 用来朔源,标识函数的调用链,用来调试和观察
    • callee 用来函数本身对自身的回调,例如 递归调用,可以脱离函数名,通过这个属性直接调用自身

统计字符串中字母的个数或统计最多的字母

function countStr(str) {=
    let dic = str.split('').reduce((prev,current)=>{
        if(prev[current] && prev[current].value === current) ++prev[current].count
        else prev[current] = {
            value:current,
            count:0
        }
        return prev
    },{})
    for(let index = 0;index< Object.keys(dic).length;index++){
        let k = Object.keys(dic)[index]
        console.log(dic[k].value + ' : '+ dic[k].count)
    }
}

写一个函数清除字符串前后的空格

  • 考察正则
function trim(str) {
    if (str && typeof str === "string") {
        return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
    }
}

  • 另一种方式
function quickTrim(str) {
    let temp = str.split('')
    let resultArry = temp.reduce((count,ele)=>{
        if(ele !== ' ') count.push(ele)
        return count
    },[])
    return resultArry.join('')
}

写一个函数实现一个数组合并的方法

  • 遍历
 b.forEach(ele=>{
     a.push(a)
 })
  • Array自带的concat方法
    a.concat(b)
  • 巧用apply和push
    • push可以接受多个参数,全部push到数组里面
    • apply会把数组当作参数组合传入
    a.push.apply(a,b)

工作中,常用的逻辑运算符有哪些

  • &&
  • ||
  • !

什么是事件代理(事件委托)

  • 原理
    • 事件冒泡:js在处理事件时,如果当前 dom 没有对事件进行接收和捕获,事件会顺着 dom树的结构自下往上传递,最终在根节点dom
  • 实现
    • 在 父dom结构上进行事件捕获和事件处理,通过 Event target 对象判断具体触发对象
    • 子元素例如 li 元素不监听事件,将事件委托给 ul 元素处理和捕获
  • 优点
    • 减少dom树的遍历和dom事件的绑定,性能优化
    • 子元素修改或者新增时不需要重新进行事件绑定

未声明和未定义的变量有什么区别

  • 未声明
    • 内存空间没有开辟
    • 没有这个东西存在
    • 不存在 但是直接调用
    • 或报错,提示未声明
  • 未定义
    • 已开辟内存空间
    • 但是内存空间并没有东西
    • 用来形容这种状态的 js 数据类型叫做 undefined

什么是全局变量,这些变量如何声明,使用全局变量有哪些问题

  • 作用域
    • js 中只有函数可以包裹作用域
  • 全局作用域
    • 没有包裹在函数内部,最外层的作用域
  • 怎么声明
    • 直接在最外层声明
    • 用window对象 声明
    • 不用var 关键字,直接写变量名也会提升到全局
  • 会有什么问题
    • 容易出现变量名冲突,影响全局
    • 不利于回收,出现内存性能问题
    • 变量和代码混乱

常用的定时器工作说明,使用定时器的缺点

  • 常用的定时器
    • setTimeOut
      • 定时一段时间之后执行
    • setTimeInterval
      • 间隔一段时间重复执行
  • 清除定时器
    • clearTimeInterval
      • 只有知道具体的定时器名称才可以关闭
      • 如果不关闭定时器,会一直执行,直到页面退出,内存释放

说说ViewState和SessionState有什么区别

  • ViewState 是.net 提出的一种客户端数据存储的方式,通过一个隐藏的dom节点,存储一些可序列化的数据结构
  • SessionState 是存储于服务端的一种数据结构,同主机域名下的所有tab页面可以共享
  • 这个都没接触过了

什么是 === 运算符

  • 强等运算符
  • 比较过程中不进行强制类型转换
  • 并且在比较之前优先进行类型判断,如果数据类型不一样,直接返回 false