面试大总结

WebProblem

一、网页布局

一、HTML面试题

• 1. DOCTYPE的作用是什么？
  • 声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问
• 2. 标准模式与兼容模式各有什么区别？
  • 标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行
  • 兼容模式中，页面以向后兼容的方式显示 ，模拟老式浏览器的行为以防止站点无法工作
• 3. HTML5 为什么只需要写 ，而不需要引入 DTD？
  • HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为，即让浏览器按照它们应该的方式来运行。而 HTML4.01 是基于 SGML ，所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型
• 4. 什么是DTD？
  • DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。
    DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）
• 5. SGML 、 HTML 、XML 和 XHTML 的区别？
  • SGML：是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源
  • HTML：是超文本标记语言，主要是用于规定怎么显示网页
  • XML：是可扩展标记语言，是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多， 而 HTML 的标签都是固定的而且数量有限
  • XHTML：也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等
• 6. 空元素定义
  • 标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的
  • 常见的空元素有：br hr img input link meta
• 7. 你是如何理解语义化的？
  • 语义化，顾名思义，就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的、标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后在开发的过程中，一定要注意了，尽量使用官方的、有语义的标签，不要再使用一堆无意义的标签去堆你的结构
• 8. H5 是什么？
  • H5是HTML5的简称，就是 “ HTML ” 的第5个版本，也就是第5个版本的超文本标记语言
• 9. 简述一下src与href的区别？
  • src用于替换当前元素，href用于在当前文档和引用资源之间确立联系
  • src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
- href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式

• 10. Label 的作用是什么？是怎么用的？
  • label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上
  • Number:
    
• 11. 很多网站都不常用table、iframe这两个元素，你知道什么原因吗？
  • 因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好
• 12. jpg和png格式的图片有什么区别？
  • jpg是有损压缩格式，png是无损压缩格式。所以，相同的图片，jpg体积会小。比如我们一些官网的banner图，一般都很大，所以适合用jpg类型的图片。但png分8位的和24位的，8位的体积会小很多，但在某些浏览器下8位的png图片会有锯齿
• 13. a标签的伪类中，active hover link visited 的正确顺序是什么？
  • a:link a:visited a:hover a:active
• 14. 前端页面由哪三层构成？分别是什么？作用是什么？
  • ① 结构层：HTML，主要负责搭建页面的整体架构
  • ② 样式层：CSS，主要负责为页面添加样式，进行美化
  • ③ 行为层：JavaScript，主要负责页面与用户的交互
• 15. 简述你对html语义化的理解？
  • html语义化其实就是用正确的标签做正确的事，html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析，即使在没有css样式的情况下，也是以一种文档的格式显示，并且是容易阅读的。搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重，利于SEO。同时使阅读源代码的人对网站更容易分块，便于阅读维护理解
• 16. 下面关于HTML5 中表格的说法错误的是（）？
  • A. 表格只能包含0 或1 个
  • B. 表格

  • 子元素定义标题

    可以有且仅能定义一个子元素
  • C. 表格
  • 用定义表格行，用
  • D. 表格

  • 定义表格列

    用定义表格头
  • 答案：B
  • 17. HTML5 正确的doctype是（）？
    • A.
    • B.
    • C. .
    • D.
    • 答案：A
  • 18. 标签是不是最小的节点?

    • 答案

      • 一个<标签名>是一个标签，一个标签不会成为节点对象。只有由开始标签+结束标签联合表示的一个元素才是一个元素节点对象。节点不分大小，只区分上下级。而元素节点不一定就是最底层的节点。还可能包含子元素或子文本。但是，在元素树中，最底层节点一定都是元素节点
  • 19. href=""能不能表示空连接？
    • 不行，href=""，表示没有href属性，a也就不是一个超链接元素了。鼠标放上去，是变不成手指的。因为，"“是所有无效属性的默认值。href=”"，相当于让href属性失效
  • 20. 空链接: 和 有什么差别?

    • 答案

      • href="#" 不是不跳转，而是在当前页面内跳转。而且只写一个#，表示回到顶部的意思。如果页面很长，且发生了滚动，用href="#"，会导致页面跳回顶部

      • href=“javascript:;”，其实href中有两种选择

        • 1. href=“url或#锚点” 执行跳转操作
        • 2. href=“javascript: js语句;” 当href中以javascript:开头时，浏览器不再执行跳转操作。而是执行javascript:后规定的js语句。但是，多数情况下，不会这么写，因为不符合内容与行为分离的原则。但是javascript:;经常用来表示什么也不做。“;” 本来是js语句的结束，如果分号单用，表示空语句，什么也不做
  • 21. iframe的优缺点？

    • 优点

      • 1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
      • 2. Security sandbox
      • 3. 并行加载脚本

    • 缺点

      • 1. iframe会阻塞主页面的Onload事件
      • 2. 即时内容为空，加载也需要时间
      • 3. 没有语意
  • 22. div+css的布局较table布局有什么优点？
    • 1. 改版的时候更方便 只要改css文件
    • 2. 页面加载速度更快、结构化清晰、页面显示简洁
    • 3. 表现与结构相分离
    • 4. 易于优化（seo）搜索引擎更友好，排名更容易靠前

  • 二、CSS面试题

    • 1. rem与em区别？
      • rem：相对于根元素html的font-size，假如html为font-size:12px，那么，将其中的div设置为font-size:2rem，此时div字体大小为：12*2=24px
      • em：相对于父元素计算，假如某个p元素为font-size:12px，在它内部有个span标签，设置font-size:2em，那么这时候的span字体大小为：12*2=24px
    • 2. display:none; 和 visibility:hidden; 的区别是什么？
      • display：隐藏对应的元素并且挤占该元素原来的空间
      • visibility：隐藏对应的元素但是不挤占该元素原来的空间
      • 也就是说，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在
    • 3. 请写出至少5五种解决浮动造成的高度坍塌的方法？
      • 1. 父级div定义伪类：after加clear:both
      • 2. 父级div定义overflow:hidden
      • 3. 父级div定义height
      • 4. 在结尾处添加空div标签clear:both
      • 5. 父级div定义overflow:auto
      • 6. 父级div也一起浮动
      • 7. 父级div定义display:table
      • 8. 结尾处加br标签clear:both
    • 4. 谈谈你对 BFC 规范的理解有哪些？（BFC是什么？）

      • BFC（Block formatting context）直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干

        • BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
        • BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

      • BFC 布局规则

        • a. 内部的 Box 会在垂直方向，一个接一个地放置
        • b. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
        • c. 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此
        • d. BFC 的区域不会与 float box 重叠
        • e. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
        • f. 计算 BFC 的高度时，浮动元素也参与计算

      • 触发 BFC

        • A. 根元素
        • B. float 属性不为 none
        • C. position 为 absolute 或 fixed
        • D. display 为 inline-block， table-cell， table-caption， flex， inline-flex
        • E. overflow 不为 visible
    • 3. 页面中有一个不知道尺寸的div，请写出三种方法，实现div的水平垂直居中？
      • div{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        }
      • div{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        }
      • // 给div加父容器container
        #container{
        display:flex;
        justify-content:center;
        align-items:center;
        }
    • 4. 页面导入样式使用 link 和 import 有什么区别？
      • 1. link是XHTML标签，而@import是CSS提供的
      • 2. link写在html页面中，只能存在于 head 部分，而@import写在CSS文件中
      • 3. link引用CSS时，在页面载入时同时加载，而@import需要页面网页完全载入以后加载
      • 4. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本（IE5及以下）的浏览器不支持
      • 5. link支持使用Javascript控制DOM去改变样式，而@import不支持
      • 6. link方式的样式的权重高于@import的权重

      • 详细

        • 1. 从属关系区别：@import是CSS提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性、引入网站图标等
        • 2. 加载顺序区别：加载页面时，link标签引入的CSS文件被同时加载；而@import引入的CSS文件将在页面加载完毕后被加载
        • 3. 兼容性区别：@import时CSS 2.1才有的语法，故只可在IE5+才能识别；link标签作为HTML标签，不存在兼容性问题
        • 4. DOM可控性区别：可以通过JS操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方法插入样式
    • 1. css sprite 是什么？有什么优缺点？

      • css sprite是将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案，即我们所说的精灵图，也叫雪碧图

      • 优点

        • 减少http请求数，极大地提高页面加载速度
        • 增加图片信息重复度，提高压缩比，减少图片大小
        • 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

      • 缺点

        • 图片合并麻烦
        • 维护麻烦，修改一个图片可能需要从新布局整个图片，样式
    • 6. 行内元素和块级元素的具体区别是什么？行内元素的margin和padding可以设置吗？
      • 1. 块级元素(block)特性
        • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
      • 2. 行内元素(inline)特性
        • 和相邻的内联元素在同一行。宽度(width)、高度(height)、内边距的top(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小，内容区域的大小是由内容撑开的
    • 8. rgba()和opacity的透明效果有什么不同？
      • rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度。而rgba()只能作用于元素的颜色或其背景颜色，同时，设置rgba透明的元素的子元素不会继承透明效果
    • 10. 列出display的值，说明他们的作用？position的值relative和absolute定位原点是谁？

      • display的值

        • block：设置元素为块级元素显示；
        • inline：设置元素为行内元素显示；
        • inline-block：设置元素为行内块元素显示；
        • none：彻底的隐藏元素包括位置也不在占据；

      • positon的值

        • relative：生成相对定位的元素，相对于其本身位置进行定位
        • absolute：生成绝对定位元素，当绝对定位元素的祖先元素，没有已定位元素，相对于浏览器的左上角进行定位，当绝对定位元素的祖先元素，有已定位元素的时候，以“最近的”，“已定位的”，“祖先元素”的左上角进行定位
    • 11. 当 a. 内联样式 b. 内部样式 c. 外部样式 d. 浏览器缺省设置 等多个样式层叠，以下正确优先级顺序是（）？
          A. acdb
          B. abcd
          C. bacd
          D. dbac
      • 结果：B
    • 12. 下面 E 代表元素，attr代表属性，错误的属性选择表示是（）？
          A. E[attr]
          B. E[attr=value]
          C. E[attr%=“value”]
          D. E[attr$=“value”]
      • 结果：C
    • 13. 要你出一套适应不同分辨率，不同终端的前端实现方案你有什么思路？
      • 流式布局： 使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局方式，就是移动 web开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备
      • 响应式开发：简而言之，就是一个网站能够兼容多个终端。CSS3 中的 Media Query（媒介查询），通过查询 screen 的宽度来指定某个宽度区间的网页布局
        超小屏幕（移动设备） 768px 以下
        小屏设备 768px-992px
        中等屏幕 992px-1200px
        宽屏设备 1200px 以上
        由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如 bootstrap 来完成一部分工作，当然也可以自己写响应式
    • 14. 主流浏览器及其内核？
      • IE：trident
      • chrome：webkit/blink
      • Safari：webkit
      • Opera：presto
      • Firefox：gecko
    • 15. 介绍一下css盒子模型？
      • W3C盒子模型(标准盒模型) box-sizing: content-box;
        根据 W3C 的规范，标准模式下，盒子的最终宽度/高度 = 原始宽度/高度 + 左右/上下的内边距 + 左右/上下的外边距
      • IE盒子模型(怪异盒模型) box-sizing: border-box;
        在该模式下，怪异模式下，盒子的最终宽度/高度 = 原始宽度/高度+左右/上下的外边距
    • 16. 搭建页面实现，左右两边定宽，中间⾃适应的的布局(写出关键代码)
      • .wrap{
        width: 100%;
        height: 100px;
        display: flex;
        }
        .wrap>div:first-child,.wrap>div:last-child{
        width: 100px;
        height: 100%;
        }
        .wrap>div:nth-child(2){
        flex-grow: 1;
        }
    • 17. CSS选择器有哪些？哪些属性可以继承？

      • CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=“external”]）、伪类选择器（a:hover, li:nth-child）

      • 可继承的属性：font-size, font-family, color

      • 不可继承的样式：border, padding, margin, width, height

      • 优先级（就近原则）：!important > [ id > class > tag ]

        • !important 比内联优先级高

    二、BootStrap

    1. 为什么要使用 less/sass 预处理器（优点、缺点）

    • 优点

      • 1. CSS 无法递归式定义
      • 2. CSS 的 mixin 式复用性支持不够
      • 3. 预编译可缓解多浏览器兼容造成的冗余，css 并不能算是一们真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css 的不足，开发者们想到了编写一种对 css 进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成 css 供浏览识别，这样既一定程度上弥补了css 的不足，也无需一种新的语言来代替 css 以供浏览器识别。于是 css 预处理语言就应运而生了
      • 4. CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS
           更易维护和扩展

    • 缺点

      • 1. CSS 的好处在于简便、随时随地被使用和调试。预编译 CSS 步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了
      • 2. 预编译很容易造成后代选择器的滥用因此，实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预编译有没有解决更大的麻烦。降低了自己对最终代码的控制力
      • 3. 更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵

    2. less/sass 区别？

    • 1. sass 是基于 Ruby 的，然后是在服务器端处理的。很多开发者不会选择 LESS 因为JavaScript 引擎需要额外的时间来处理代码然后输出修改过的 CSS 到浏览器
    • 2. 关于变量在 LESS 和 Sass 中的唯一区别就是，LESS 用@，Sass 用$

    三、Git与GitHub

    四、JavaScript

    一、变量

    • 1. Javascript中，以下哪条语句一定会产生运行错误？
         A. var _变量=NaN;
         B. var 0bj = [];
         C. var obj = //;
         D. var obj = {};
      • 结果：B C
    • 2. 以下哪条语句会产生运行错误：（）
         A. var obj = ();
         B. var obj = [];
         C. var obj = {};
         D. var obj = //;
      • 结果：A D
    • 3. 以下哪个单词不属于javascript保留字：（）
         A. with
         B. parent
         C. class
         D. void
      • 结果：B
    • 4. 以下 js 的运行结果是什么，为什么？
         var txt=‘hx’;
         function hello(){
         var txt;
         fn();
         var fn=function(){alert(‘hello’)}
         function fn(){alert(‘world’);}
         alert(txt);
         fn();
         fn=function(){alert(‘hello’)}
         }
         hello();
      • var txt=‘hx’;
        function hello(){
        var txt;
        fn(); //world 函数名与变量名重复的时候，以函数名为主
        var fn=function(){alert(‘hello’)}
        function fn(){alert(‘world’);}
        alert(txt); //undefined 局部变量，只是声明，没有赋值
        fn(); //hello 先进行声明，后赋值，执行
        fn=function(){alert(‘hello’)}
        }
        hello();

    二、数据类型

    • 1. JavaScript 有哪几种数据类型？
      • 原始类型：数值型（number）/字符串型（string）/布尔型（boolean）/undefined/null
      • 引用类型：对象（object）、数组（array）、函数（function）
    • 2. typeof 返回的类型有哪些？
      • number 、string 、boolean 、undefined 、object 、function
    • 3. null 和 undefined的区别？
      • null 是 Null 类型，代表 “ 空值 ”，代表一个空对象指针，使用 typeof 运算得到 “ object ”，所以你可以认为它是一个特殊的对象值。undefined 是 Undefined 类型，当声明了一个变量未初始化时，得到的就是undefined。null 和 undefined 都表示 “ 值的空缺 ”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。null值则是表示空对象指针。（undefined是访问一个未初始化的变量时返回的值，而null是访问一个尚未存在的对象时所返回的值。因此，可以把undefined看作是空的变量，而null看作是空的对象。在定义一个想保存对象的变量时，就可以让该变量先保存null值，这样既能体现null是一个空指针对象，也能更好的区分null和undefined）
    • 4. 下面程序执行后，会输出几个true？（）
         console.log([][]);
         console.log({}{});
         console.log(/\d//\d/);
         console.log(MathMath)
         A. 1个 B.2个 C.3个 D.4个

      • 结果：A

        • console.log([][]); // false
          console.log({}{}); // false
          console.log(/\d//\d/); // false
          console.log(MathMath) // true
    • 5. 下面程序的执行结果为？
         var a=“2.2”;
         var b=1.8;
         var c=parseInt(a+b)
         console.log©
         A.2 B. 3 C. 4 D. 5
      • 结果：A
    • 6. 例举3种强制类型转换和2种隐式类型转换?
      • 强制转换：parseInt()、parseFloat()、Number()
      • 隐式转换：== 、!!
    • 7. 看下列代码输出为何？解释原因？
         var a;
         alert(typeof a);
         alert(b);
      • a的输出结果为undefined，undefined是一个只有一个值的数据类型，这个值就是 “ undefined ”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是 undefined。而b由于未声明将报错。注意未声明的变量（b is not defined）和声明了未赋值的是不一样的
    • 8. 看下列代码,输出什么？解释原因？
         var a = null;
         alert(typeof a);
      • 输出结果为object，null是一个只有一个值的数据类型，这个值就是null，表示一个空指针对象，所以用typeof检测会返回 ” object ”
    • 9. 看下列代码,输出什么？解释原因？
         var undefined;
         undefined == null;
         1 == true;
         2 == true;
         0 == false;
         0 == ‘’;
         NaN == NaN;
         [] == false;
         [] == ![];
      • var undefined;
        console.log(undefined == null); //true
        console.log(1 == true); //true
        console.log(2 == true); //false
        console.log(0 == false); //true
        console.log(0 == ‘’); //true
        console.log(NaN == NaN); //false
        console.log([] == false); //true
        console.log([] == ![]); //true
      • 解析：
    1. undefined 与 null 相等，但不恒等，undefined和null进行比较的过程中，会先将undefined隐式转换为null再进行比较
       2.3.4.5 == 比较，默认情况下一切转为number进行比较
    2. NaN不等于，不大于，不小于一切，因为NaN表示所有不是数字的内容，是一个范围，不表示一个具体值，做比较无任何意义
    3. 在和对象比较的过程中，将对象转换为number或string，取决于另一个对比量的类型
    4. [][]为false，所有[]![]为true
    • 10. 请选择结果为真的表达式：（）
          A. null instanceof Object
          B. null === undefined
          C. null == undefined
          D. NaN == NaN
      • 结果：C
    • 11. 下面的代码将输出到控制台什么，为什么？
          (function(){
          var a = b = 3;
          })();
          console.log("a defined? " + (typeof a !== ‘undefined’));
          console.log("b defined? " + (typeof b !== ‘undefined’));

      • a defined? false
        b defined? true

        • 解析：b没有声明直接赋值，程序会自动在全局下定义一个全局变量b，所有b的值可以获取到，结果为3，不是undefined，但是a时声明在函数中的，所有在全局下是得不到a的值的，默认为undefined
    • 12. 如下代码输出的结果是什么：
          console.log(1+ “2”+“2”);
          console.log(1+ +“2”+“2”);
          console.log(“A”- “B”+“2”);
          console.log(“A”- “B”+2);
          A.122 122 NaN NaN
          B.122 32 NaN NaN2
          C.122 32 NaN2 NaN
          D.122 32 NaN2 NaN2

      • 结果：C

        • a. console.log(1+ “2”+“2”);
          做加法时要注意双引号，当使用双引号时，JavaScript 认为是字符串，字符串相加等于字符串合并。因此，这里相当于字符串的合并，结果为：122
        • b. console.log(1+ +“2”+“2”);
          第一个+"2"中的加号是一元加操作符，+"2"会变成数值 2，因此 1+ +"2"相当于 1+2=3，然后和后面的字符串 “2” 相合并，变成了字符串 “32”
        • c. console.log(“A”- “B”+“2”);
          “A”-“B"的运算中，需要先把"A"和"B"用 Number 函数转换为数值，其结果为 NaN，在减法操作中，如果有一个是 NaN，则结果是 NaN，因此"A”-"B"结果为 NaN，然后和"2"进行字符串合并，变成了 NaN2
        • d. console.log(“A”- “B”+2);
          根据上题所述，“A”-"B"结果为 NaN，然后和数值 2 进行加法操作，在加法操作中，如果有一个操作数是 NaN，则结果为 NaN

    三、逻辑结构

    • 1. continue和 break有什么区别？
      • break和continue都是用来控制循环结构的
      • break：终止循环，跳出循环体执行循环后面的语句
      • continue：跳过本次循环，执行下一次循环
    • 2. JavaScript中循环语句书写正确的是（）？
         A. if(i<10;i++)
         B. for(i=0;i<10)
         C. for i=1 to 10
         D. for(i=0;i<=10;i++)
      • 答案：D
    • 3. 写出程序运行的结果？
         for(i=0, j=0; i<10, j<6; i++, j++){
         k = i + j;
         }
         console.log(k)
      • 结果：10
    • 4. 试写出程序运行结果
         for(var i=4,s=1;i>0;i–){s*=i}
         console.log(s)
      • 结果：24

    四、运算符

    • 1. i++和++i的区别？计算：var n=5; 求 var num=n+++++n+n+++++n+n; 的结果？
      • i++ ：先用i值后加1；
      • ++i ：先加1后用i值；
      • 结果：37
    • 2. 请说出 (true+false)>2+true 的执行结果？
      • 答案：false
    • 3. == 和 === 有什么不同？
      • == 抽象相等，比较时，会先进行类型转换，然后再比较值
      • === 严格相等，判断两个值相等同时数据类型也得相同
    • 4. 下面程序的执行结果为？
         var a=3
         var b=4
         var c=a++ +b++ + ++a+ ++b
         console.log©
         A. 17 B.18 C.19 D.20
      • 结果：B
    • 5. 2==[[[2]]] 是真是假？为什么？

      • 引用类型转换为基本类型

        • 1. 所有的引用类型转换为布尔型的结果都是true
        • 2. 引用类型转换为字符串
          • a. 优先调用toString方法（如果有），看其返回结果是否是原始数据类型，如果是，转换为字符串，返回
          • b. 否则，调用valueOf方法（如果有），看其返回结果是否是原始数据类型，如果是，转换为字符串，返回
          • c. 其他报错
        • 3. 引用类型转换为数字
          • a. 优先调用valueOf方法（如果有），看其返回结果是否是原始数据类型，如果是，转换为数字，返回
          • b.否则，调用toString方法（如果有），看其返回结果是否是原始类型，如果是，转化为数字，返回
          • c. 其他报错

      • 解析：因为是与数字进行比较，所有优先调用valueOf()方法，返回的本身不是原始数据类型，然后调用toString()方法得到“2”，然后就变成了字符串“2”和数字2进行比较

      • 结果：true

      • valueOf()

        • 提示：返回指定对象的原始值

        • object.valueOf()

          • Object：返回对象本身
          • String：字符串值
          • Number：数字值
          • Boolean：返回布尔值
          • Array：返回数组本身
          • Date：存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数
          • Function：返回函数本身
    • 6. 读程序，写结果：
         var x=10;
         var y=20;
         var z=x console.log(‘x=’+x+’;y=’+y+’;z=’+z)
      • 结果：x=11 y=20 z=10
    • 7. 下面四个表达式中，结果为NaN的是（）？
         ① 100/0 ② 0/0 ③ parseInt(“邮政储蓄”) ④ “NaNxyz”-“xyz”
         A. ①
         B. ②
         C. ②③
         D. ②③④
      • ① 100/0：infinity
      • ② 0/0：NaN
      • ③ parseInt(“邮政储蓄”)：NaN
      • ④ “NaNxyz”-“xyz”：NaN
      • 结果：D
    • 8. 看下面的代码，输出什么，foo的值为什么？
         var foo = “11”+2-“1”;
         console.log(foo);
         console.log(typeof foo);
      • 执行完后foo的值为111，foo的类型为Number
    • 9. foo = foo||bar ，这行代码是什么意思？为什么要这样写？
      • if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo
      • 短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值
    • 10. 下面程序的执行结果为？（）
          var a= 5 && true;
          var b= false || 6;
          console.log(a+b)
          A. 5 B. 7 C. 13 D.1

      • 答案：B