前端面试题集锦-2021年前端面试题收集题库3

常见的javascript 语句基本规范

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() 访问到的局部变量名进行压缩，会降低代码压缩率。

---

执行一下代码结果是什么["1","2","3"].map(parseInt)

• 上面代码主要考察高阶函数 map 和 parseInt 函数

    ['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