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

发布时间:2021-02-22 整理:编程之家
编程之家收集整理的这篇文章主要介绍了前端面试题集锦-2021年前端面试题收集题库3编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!

常见的javascript 语句基本规范

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

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

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

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

3.其他使用规范

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

eval函数功能是什么

定义和用法

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

语法

eval(string)

需要注意的点

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

执行一下代码结果是什么["1","2","3"].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
    @H_502_7@所以最后的返回值为[1,NaN,NaN]

说说对this对象的理解

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

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

function person() {
 return this.name;
}

var obj = {
 name: 'jeskson'
}

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

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

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

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

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

    function test(){
        console.log(arguments.callee)
    }
    test()
    // 返回值是test函数本身,返回值可以直接调用类似 arguments.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)
    }
}

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

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

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

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

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

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

    @H_502_7@与 && @H_502_7@或 || @H_502_7@非 !

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

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

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

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

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

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

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

    @H_502_7@常用的定时器
      @H_502_7@setTimeOut @H_502_7@setTimeInterval
        @H_502_7@间隔一段时间重复执行
    @H_502_7@清除定时器

说说ViewState和SessionState有什么区别

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

什么是 === 运算符

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

总结

以上是编程之家为你收集整理的前端面试题集锦-2021年前端面试题收集题库3全部内容,希望文章能够帮你解决前端面试题集锦-2021年前端面试题收集题库3所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!