2021-10-09 JavaScript面试题之06-07

JavaScript面试题

1、简述while循环和do-while循环有什么区别？

while循环是循环结构中的一种基本循环，通过判断条件是否为true执行循环中的代码
do-while循环是循环结构中的一种基本循环，先执行一次循环内部的代码，然后根据判断的条件是否为true决定是否继续重复执行循环中的代码
它们之间的区别在于根据条件是否满足来执行循环中代码的过程，while循环条件如果不满足不会执行代码；do-while循环无论条件是否满足至少会执行一次循环内部代码

2、简述你对JavaScript语法规范中预解析的理解

JavaScript语法规范中，针对声明的变量，在其作用域空间中，执行一个声明提升的过程，将变量的声明提升到所有代码的前面，用于保障在作用域空间中该变量的时候不会出错！

• 语法规范中，针对函数也有预解析的操作，如果函数的声明方式是表达式声明语法，预解析过程和变量的预解析过程一致；如果是函数的标准声明方式，函数所在作用域空间会将函数的完整声明提升到作用域空间所有代码的最前面，保障函数在该作用域中的正常执行

3、流程控制语句有哪些？

JavaScript语法规范中规定了流程控制主要包含顺序结构、选择结构以及循环结构

• 顺序结构就是从上到下依次、逐行解释并执行代码的过程
• 选择结构根据不同的条件执行不同的分支代码的过程，不同的分支不会同时执行，语法中主要提供了if-else和switch-case两种选择结构
• 循环结构根据条件是否满足重复执行某段代码块的过程，语法中主要提供了for循环、while循环、do-while循环以及for…in循环

4、定时器有哪些？它们的用法和区别都是什么？

JavaScript语法规范中提供了定时器函数，主要包含计时器函数和延时器函数

• 计时器函数是setInterval()，间隔指定的时间重复执行指定的函数
• 延时器函数时setTimeout(),指定的时间之后执行一次某个指定的函数

5、封装一个获取指定元素样式的函数

/**
 * 获取指定元素样式的函数
 */
function getStyle(ele, styleName) {
if(ele.currentStyle){
    return ele.currentStyle[styleName]
} else {
    return getComputedStyle(ele)[styleName]
    }
}

6、简述你对作用域链的理解？

JavaScript语法规范中使用变量时，遵循就近原则；
首先从当前变量所在的作用域空间查询声明变量的位置，如果没有查询到；继续向上一级作用域空间查询变量声明的位置，如果没有查询到，继续查询javascript语法中变量的声明，如果没有查询到浏览器内核中是否有该变量的声明；如果没有查询到报错：变量 is not defined!
这个查询的过程就是作用域链，局部作用域->全局作用域->javascript语法->浏览器

7、简述JavaScript和ECMAScript的关系

• ECMAScript是一种脚本语言语法规范和标准
• JavaScript是ECMAScript语法规范/标准的一种语言实现
• ECMAScript本质上是通过JavaScript指定的语法规范和标准，所以一般称呼ECMAScript的时候指代的就是JavaScript！

8、简述你对window.onload的认识

一个网页在浏览器中渲染时，首先加载HTML标签和样式，标签和样式加载完成后才会加载标签中引入的图片、字体、音频、视频等静态资源；
为了保障网页中所有的数据全部加载后再执行JS代码，window.onload事件就是为了保障该功能而出现的，最大程度的保障JS代码操作页面数据的正确性！

9、编写代码，实现一个选项卡效果

<div>
<div class=”title”>选项卡标题</div>
<div class=”title”>选项卡标题</div>
<div class=”title”>选项卡标题</div>
</div>
<div>
<div class=”content”>选项卡内容</div>
<div class=”content”>选项卡内容</div>
<div class=”content”>选项卡内容</div>
</div>
<script>
// 获取选项卡标题和内容
var titles = document.getElementsByClassName(“title”)
var contents = document.getElementsByClassName(“content”)

// 循环添加事件
for( var i = 0; i < titles.length; i++ ){
   titles[i].index = i
   titles[i].onclick = function() {
        // 隐藏所有选项卡内容
        for(var j = 0; j < contents.length; j ++) {
             contents[i].style.display = “none”
          }
// 显示对应的选显卡
         	contents[this.index].style.display = “block”
// 高亮被点击的选项卡
      		 this.className = “active”
     }
}
</script>