前端—每天5道面试题（十四）

淡淡的烟草味﹌ 2022-08-30 01:42 145阅读 0赞

# 前端—每天5道面试题（十四） #

> ### 每天进步1% 不多 就1% ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]

# 一、JavaScript 是一门什么样的语言，它有哪些特点？ #

javaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML网页上使用，用来给HTML网页增加动态功能。JavaScript兼容于ECMA标准，因此也称为ECMAScript。

**JavaScript基本特点：**  
1．是一种解释性脚本语言（代码不进行预编译）。

2．主要用来向 HTML（标准通用标记语言下的一个应用）页面添加交互行为。

3．可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构和行为的分离。

4．跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如 Windows、Linux、Mac、  
Android、iOS 等）

# 二、用原生 js 实现一个倒计时项目 #

左侧输入为大于 0 的整数，单位为毫秒，右侧显示倒计时的时间，间隔是 1000ms,注意小于1000ms 的时间的处理。中间是开始的按钮可以重复点击，重复点击后则从新计算

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <input type="text" id="leftTime" placeholder="请输入 0 以上的整数">
        <button id="btn">开始</button>
        <input type="text" id="rightTime" placeholder="开始倒计时">
        <script>
            var btn = document.getElementById("btn");
            var leftTime = document.getElementById("leftTime");
            var rightTime = document.getElementById("rightTime");
            btn.onclick = function() { 
                if (leftTime.value > 0) { 
                    rightTime.value = leftTime.value
                } else { 
                    rightTime.value = 1
                }
                var cle = setInterval(function() { 
                    rightTime.value--;
                    if (rightTime.value == 0) { 
                        window.clearInterval(cle)
                    }
                }, 1000)
            }
        </script>
    </body>
    
    </html>

# 三、BOM 之常用 API ？ #

*  navigator：window 中封装浏览器属性和配置信息的对象
 *  cookieEnabled：识别浏览器是否启用 cookie，返回值 true/false
 *  userAgent：保存了浏览器名称和版本的字符串
 *  plugins：保存浏览器中所有插件信息的集合，每个 plugin 对象的 name 属性保存了插件的名称
 *  screen：保存显示屏信息的对象
 *  history：保存窗口的历史记录栈
 *  location：指代当前窗口正在访问的 url 地址对象
 *  location.href：保存了当前窗口正在访问的 url 地址，设置 href 属性为新 url，会在当前窗口打开新 url
 *  location.search()：获取 url 上面？后面的参数
 *  location.reload()：刷新当前页面
 *  location.assign(url)：设置当前窗口的新 url
 *  location.reload(true/false):true —— 无论是否更改，都获取更新；false —— 被修改的页面，重新获 取，未被修改的页面，从缓冲获取
 *  定时器：让程序按指定时间间隔，自动执行任务，任务是所有定时器的核心

# 四、jquery中attr和prop的区别是什么？ #

## （一）、attr和prop区别？ ##

*  attr 是从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说较慢。
 *  prop是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。

## （二）、attr和prop怎么选择？ ##

*  对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
 *  对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

**上面的描述也许有点模糊，举几个例子说明一下**

这个例子里`<a>`元素的 DOM 属性有“href、target 和 class"，这些属性就是`<a>`元素本身就带有的属性，也是W3C 标准里就包含有这几个属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法。

这个例子里`<a>`元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，`<a>`元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

<input id="chke1" type="checkbox" />记住密码
    <input id="chke2" type="checkbox" checked="checked" />记住密码

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$("#chke1").prop("checked");// false
    $("#chke2").prop("checked");// true
     
    $("#chke1").attr("checked"); //undefined
    $("#chke2").attr("checked"); //"checked"

# 五、null 和 undefined 的区别？ #

*  null 是一个表示”无”的对象，转为数值时为 0；undefined 是一个表示”无”的原始值，转为数值时为 NaN。
 *  当声明的变量还未被初始化时，变量的默认值为 undefined。
 *  null 用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
 *  undefined 表示”缺少值”，就是此处应该有一个值，但是还没有定义。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]: /images/20220829/7881ad67f39c4376ab5247cf02e5ebd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]: /images/20220829/9865e2cd3f7c44ee85cb6d3d5ffb4610.png