前端常识-gj2

2018-03-12 dalexo2
  1. 在浏览器地址栏输入URL
  2. 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤
    如果资源未缓存,发起新请求
    如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证
    检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control
    HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期
    HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
  3. 浏览器解析URL获取协议,主机,端口,path
  4. 浏览器组装一个HTTP(GET)请求报文
  5. 浏览器获取主机ip地址,过程如下:
    浏览器缓存
    本机缓存
    hosts文件
    路由器缓存
    ISP DNS缓存
    DNS递归查询(可能存在负载均衡导致每次IP不一样)
  6. 打开一个socket与目标IP地址,端口建立TCP链接,三次握手如下:
    客户端发送一个TCP的SYN=1,Seq=X的包到服务器端口
    服务器发回SYN=1, ACK=X+1, Seq=Y的响应包
    客户端发送ACK=Y+1, Seq=Z
  7. TCP链接建立后发送HTTP请求
  8. 服务器接受请求并解析,将请求转发到服务程序,如虚拟主机使用HTTP Host头部判断请求的服务程序
  9. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜,返回304等对应状态码
  10. 处理程序读取完整请求并准备HTTP响应,可能需要查询数据库等操作
  11. 服务器将响应报文通过TCP连接发送回浏览器
  12. 浏览器接收HTTP响应,然后根据情况选择关闭TCP连接或者保留重用,关闭TCP连接的四次握手如下:
    主动方发送Fin=1, Ack=Z, Seq= X报文
    被动方发送ACK=X+1, Seq=Z报文
    被动方发送Fin=1, ACK=X, Seq=Y报文
    主动方发送ACK=Y, Seq=X报文
  13. 浏览器检查响应状态吗:是否为1XX,3XX, 4XX, 5XX,这些情况处理与2XX不同
  14. 如果资源可缓存,进行缓存
  15. 对响应进行解码(例如gzip压缩)
  16. 根据资源类型决定如何处理(假设资源为HTML文档)
  17. 解析HTML文档,构件DOM树,下载资源,构造CSSOM树,执行js脚本,这些操作没有严格的先后顺序,以下分别解释
  18. 构建DOM树:
    Tokenizing:根据HTML规范将字符流解析为标记
    Lexing:词法分析将标记转换为对象并定义属性和规则
    DOM construction:根据HTML标记关系将对象组成DOM树
  19. 解析过程中遇到图片、样式表、js文件,启动下载
  20. 构建CSSOM树:
    Tokenizing:字符流转换为标记流
    Node:根据标记创建节点
    CSSOM:节点创建CSSOM树
  21. 根据DOM树和CSSOM树构建渲染树:
    从DOM树的根节点遍历所有可见节点,不可见节点包括:1)script,meta这样本身不可见的标签。2)被css隐藏的节点,如display: none
    对每一个可见节点,找到恰当的CSSOM规则并应用
    发布可视节点的内容和计算样式
  22. js解析如下:
    浏览器创建Document对象并解析HTML,将解析到的元素和文本节点添加到文档中,此时document.readystate为loading
    HTML解析器遇到没有async和defer的script时,将他们添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序,他们可以遍历和操作script和他们之前的文档内容
    当解析器遇到设置了async属性的script时,开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器不会停下来等它下载。异步脚本禁止使用document.write(),它们可以访问自己script和之前的文档元素
    当文档完成解析,document.readState变成interactive
    所有defer脚本会按照在文档出现的顺序执行,延迟脚本能访问完整文档树,禁止使用document.write()
    浏览器在Document对象上触发DOMContentLoaded事件
    此时文档完全解析完成,浏览器可能还在等待如图片等内容加载,等这些内容完成载入并且所有异步脚本完成载入和执行,document.readState变为complete,window触发load事件
  23. 显示页面(HTML解析过程中会逐步显示页面)

    css部分

    CSS选择器有哪些

  • 通用选择器:选择所有元素,不参与计算优先级,兼容性IE6+

    #X id选择器:选择id值为X的元素,兼容性:IE6+

    .X 类选择器: 选择class包含X的元素,兼容性:IE6+

    X Y后代选择器: 选择满足X选择器的后代节点中满足Y选择器的元素,兼容性:IE6+

    X 元素选择器: 选择标所有签为X的元素,兼容性:IE6+

    :link,:visited,:focus,:hover,:active链接状态: 选择特定状态的链接元素,顺序LoVe HAte,兼容性: IE4+

    X + Y直接兄弟选择器:在X之后第一个兄弟节点中选择满足Y选择器的元素,兼容性: IE7+

    X > Y子选择器: 选择X的子元素中满足Y选择器的元素,兼容性: IE7+

    X ~ Y兄弟: 选择X之后所有兄弟节点中满足Y选择器的元素,兼容性: IE7+

    [attr]:选择所有设置了attr属性的元素,兼容性IE7+

    [attr=value]:选择属性值刚好为value的元素

    [attr~=value]:选择属性值为空白符分隔,其中一个的值刚好是value的元素

    [attr|=value]:选择属性值刚好为value或者value-开头的元素

    [attr^=value]:选择属性值以value开头的元素

    [attr$=value]:选择属性值以value结尾的元素

    [attribute*=value]:选择属性值中包含value的元素

    X:after, X::after:after伪元素,选择元素虚拟子元素(元素的最后一个子元素),CSS3中::表示伪元素。兼容性:after为IE8+,::after为IE9+

    :hover:鼠标移入状态的元素,兼容性a标签IE4+, 所有元素IE7+

    :not(selector):选择不符合selector的元素。不参与计算优先级,兼容性:IE9+

    ::first-letter:伪元素,选择块元素第一行的第一个字母,兼容性IE5.5+

    ::first-line:伪元素,选择块元素的第一行,兼容性IE5.5+

    :nth-child(an + b):伪类,选择前面有an + b - 1个兄弟节点的元素,其中n>= 0, 兼容性IE9+

    :nth-last-child(an + b):伪类,选择后面有an + b - 1个兄弟节点的元素其中n >= 0,兼容性IE9+

    X:nth-of-type(an+b):伪类,X为选择器,解析得到元素标签,选择前面有an + b - 1个相同标签兄弟节点的元素。兼容性IE9+

    X:nth-last-of-type(an+b):伪类,X为选择器,解析得到元素标签,选择后面有an+b-1个相同标签兄弟节点的元素。兼容性IE9+

    X:first-child:伪类,选择满足X选择器的元素,且这个元素是其父节点的第一个子元素。兼容性IE7+

    X:last-child:伪类,选择满足X选择器的元素,且这个元素是其父节点的最后一个子元素。兼容性IE9+

    X:only-child:伪类,选择满足X选择器的元素,且这个元素是其父元素的唯一子元素。兼容性IE9+

    X:only-of-type:伪类,选择X选择的元素,解析得到元素标签,如果该元素没有相同类型的兄弟节点时选中它。兼容性IE9+

    X:first-of-type:伪类,选择X选择的元素,解析得到元素标签,如果该元素是此此类型元素的第一个兄弟。选中它。兼容性IE9+

    css sprite是什么,有什么优缺点

    概念:将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

    优点:

    减少HTTP请求数,极大地提高页面加载速度

    增加图片信息重复度,提高压缩比,减少图片大小

    更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现

    缺点:

    图片合并麻烦

    维护麻烦,修改一个图片可能需要从新布局整个图片,样式

    display: none;与visibility: hidden;的区别

    相同点:它们都能让元素不可见

    区别:

    display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见

    display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility: hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式

    修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。

    读屏器不会读取display: none;元素内容;会读取visibility: hidden;元素内容

    specified value,computed value,used value计算方法

    specified value: 计算方法如下:

    如果样式表设置了一个值,使用这个值

    如果没有设置值,这个属性是继承属性,从父元素继承

    如果没设置,并且不是继承属性,使用css规范指定的初始值及浏览器初始值

    computed value: 以specified value根据规范定义的行为进行计算,通常将相对值计算为绝对值,例如em根据font-size进行计算。一些使用百分数并且需要布局来决定最终值的属性,如width,margin。百分数就直接作为computed value。line-height的无单位值也直接作为computed value。这些值将在计算used value时得到绝对值。computed value的主要作用是用于继承

    used value:属性计算后的最终值,对于大多数属性可以通过window.getComputedStyle获得,尺寸值单位为像素。以下属性依赖于布局,

    background-position

    bottom, left, right, top

    height, width

    margin-bottom, margin-left, margin-right, margin-top

    min-height, min-width

    padding-bottom, padding-left, padding-right, padding-top

    text-indent

    link与@import的区别

    link是HTML方式, @import是CSS方式

    link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUC无样式内容闪烁(Flash Of Unstyled Content)

    link可以通过rel=”alternate stylesheet”指定候选样式

    浏览器对link支持早于@import,可以使用@import对老浏览器隐藏样式

    @import必须在样式规则之前,可以在css文件中引用其他文件

    总体来说:link优于@import

    display: block;和display: inline;的区别

    block元素特点:

    1.处于常规流中时,如果width没有设置,会自动填充满父容器

    2.可以应用margin/padding

    3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素

    4.处于常规流中时布局时在前后元素位置之间(独占一个水平空间)

    5.忽略vertical-align

    inline元素特点

    1.水平方向上根据direction依次布局

    2.不会在元素前后进行换行

    3.受white-space控制

    4.margin/padding在竖直方向上无效,水平方向上有效

    5.width/height属性对非替换行内元素无效,宽度由元素内容决定

    6.非替换行内元素的行框高由line-height确定,替换行内元素的行框高由height,margin,padding,border决定

    6.浮动或绝对定位时会转换为block

    7.vertical-align属性生效

    PNG,GIF,JPG,webp,svg的区别及如何选

    GIF:

    8位像素,256色

    无损压缩

    支持简单动画

    支持boolean透明

    适合简单动画

    JPEG:

    颜色限于256

    有损压缩

    可控制压缩质量

    不支持透明

    适合照片

    PNG:

    有PNG8和truecolor PNG

    PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,无动画

    适合图标、背景、按钮

    未来趋势:

    webp(google推出的图片格式,目前存在浏览器兼容)

    svg(矢量图如:iconfont)

    CSS有哪些继承属性

    关于文字排版的属性如:

    font

    word-break

    letter-spacing

    text-align

    text-rendering

    word-spacing

    white-space

    text-indent

    text-transform

    text-shadow

    line-height

    color

    visibility

    cursor

    容器包含若干浮动元素时如何清理(包含)浮动

    容器元素闭合标签前添加额外元素并设置clear: both

    父元素触发块级格式化上下文(见块级可视化上下文部分)

    设置容器元素伪元素进行清理推荐的清理浮动方法

    /**
    * 在标准浏览器下使用
    * 1 content内容为空格用于修复opera下文档中出现
    *   contenteditable属性时在清理浮动元素上下的空白
    * 2 使用display使用table而不是block:可以防止容器和
    *   子元素margin-top折叠,这样能使清理效果与BFC,IE6/7
    *   zoom: 1;一致
    * 3 overflow: hidden;
    **/
    
    .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }
    
    .clearfix:after {
        clear: both;
    }
    
    /**
    * IE 6/7下使用
    * 通过触发hasLayout实现包含浮动
    **/
    .clearfix {
        *zoom: 1;
    }
    

什么是FOUC?如何避免

Flash Of Unstyled Content:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁。解决方法:把样式表放到文档的head使用link元素。

什么是BFC?如何创建块级格式化上下文(block formatting context),BFC有什么用

BFC 即 Block Formatting Contexts (块级格式化上下文),它属于布局中的普通流。

创建规则:

根元素

浮动元素(float不是none)

绝对定位元素(position取值为absolute或fixed)

display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素

overflow不是visible的元素

作用:

可以包含浮动元素(父布局overflow: hidden)

不被浮动元素覆盖(两列自适应布局:子1浮动,子2不浮动且有overflow: hidden)

阻止父子元素的margin折叠(如果想要避免外边距的重叠,可以将其放在不同的 BFC 容器中)

display,float,position的关系

如果display为none,那么position和float都不起作用,这种情况下元素不产生框

否则,如果position值为absolute或者fixed,框就是绝对定位的,float的计算值为none,display根据下面的表格进行调整。

否则,如果float不是none,框是浮动的,display根据下表进行调整

否则,如果元素是根元素,display根据下表进行调整

其他情况下display的值为指定值

总结起来:绝对定位、浮动、根元素都需要调整display

外边距折叠(collapsing margins)

毗邻的两个或多个margin会合并成一个margin,叫做外边距折叠。规则如下:

1.两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠

2.浮动元素/inline-block元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠

3.创建了块级格式化上下文的元素,不会和它的子元素发生margin折叠

4.元素自身的margin-bottom和margin-top相邻时也会折叠

如何确定一个元素的包含块(containing block)

1.根元素的包含块叫做初始包含块,在连续媒体中他的尺寸与viewport相同并且anchored at the canvas origin;对于paged media,它的尺寸等于page area。初始包含块的direction属性与根元素相同。

2.position为relative或者static的元素,它的包含块由最近的块级(display为block,list-item, table)祖先元素的内容框组成。

3.如果元素position为fixed。对于连续媒体,它的包含块为viewport;对于paged media,包含块为page area

4.如果元素position为absolute,它的包含块由祖先元素中最近一个position为relative,absolute或者fixed的元素产生,规则如下:

如果祖先元素为行内元素,the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.

其他情况下包含块由祖先节点的padding edge组成

如果找不到定位的祖先元素,包含块为初始包含块

stacking context,布局规则

z轴上的默认层叠顺序如下(从下到上):

根元素的边界和背景

常规流中的元素按照html中顺序

浮动块

positioned元素按照html中出现顺序

如何创建stacking context:

根元素

z-index不为auto的定位元素

a flex item with a z-index value other than ‘auto’

opacity小于1的元素

在移动端webkit和chrome22+,z-index为auto,position: fixed也将创建新的stacking context

如何水平居中一个元素

如果需要居中的元素为常规流中inline元素,为父元素设置text-align: center;即可实现

如果需要居中的元素为常规流中block元素,1)为元素设置宽度,2)设置左右margin为auto。

如果需要居中的元素为浮动元素,1)为元素设置宽度,2)position: relative;,3)浮动方向偏移量(left或者right)设置为50%,4)浮动方向上的margin设置为元素宽度一半乘以-1

如果需要居中的元素为绝对定位元素,1)为元素设置宽度,2)偏移量设置为50%,3)偏移方向外边距设置为元素宽度一半乘以-1

如果需要居中的元素为绝对定位元素,1)为元素设置宽度,2)设置左右偏移量都为0,3)设置左右外边距都为auto

如何竖直居中一个元素

需要居中元素为单行文本,为包含文本的元素设置大于font-size的line-height

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

6 Methods For Vertical Centering With CSS

JavaScript概念部分

DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系

e.getAttribute(),是标准DOM操作文档元素属性的方法,具有通用性可在任意文档上使用,返回元素在源文件中设置的属性

e.propName通常是在HTML文档中访问特定元素的特性,浏览器解析元素后生成对应对象(如a标签生成HTMLAnchorElement),这些对象的特性会根据特定规则结合属性设置得到,对于没有对应特性的属性,只能使用getAttribute进行访问

e.getAttribute()返回值是源文件中设置的值,类型是字符串或者null(有的实现返回””)

e.propName返回值可能是字符串、布尔值、对象、undefined等

大部分attribute与property是一一对应关系,修改其中一个会影响另一个,如id,title等属性

一些布尔属性’‘的检测设置需要hasAttribute和removeAttribute来完成,或者设置对应property

像’link‘中href属性,转换成property的时候需要通过转换得到完整URL

一些attribute和property不是一一对应如:form控件中’input value=”hello”‘对应的是defaultValue,修改或设置value property修改的是控件当前值,setAttribute修改value属性不会改变value property

offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同

clientWidth/clientHeight返回值只包含content + padding,如果有滚动条,也不包含滚动条

scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

XMLHttpRequest通用属性和方法

1.readyState:表示请求状态的整数,取值:

UNSENT(0):对象已创建

OPENED(1):open()成功调用,在这个状态下,可以为xhr设置请求头,或者使用send()发送请求

HEADERS_RECEIVED(2):所有重定向已经自动完成访问,并且最终响应的HTTP头已经收到

LOADING(3):响应体正在接收

DONE(4):数据传输完成或者传输产生错误

2.onreadystatechange:readyState改变时调用的函数

3.status:服务器返回的HTTP状态码(如,200, 404)

4.statusText:服务器返回的HTTP状态信息(如,OK,No Content)

5.responseText:作为字符串形式的来自服务器的完整响应

6.responseXML: Document对象,表示服务器的响应解析成的XML文档

7.abort():取消异步HTTP请求

8.getAllResponseHeaders(): 返回一个字符串,包含响应中服务器发送的全部HTTP报头。每个报头都是一个用冒号分隔开的名/值对,并且使用一个回车/换行来分隔报头行

9.getResponseHeader(headerName):返回headName对应的报头值

10.open(method, url, asynchronous [, user, password]):初始化准备发送到服务器上的请求。method是HTTP方法,不区分大小写;url是请求发送的相对或绝对URL;asynchronous表示请求是否异步;user和password提供身份验证

11.setRequestHeader(name, value):设置HTTP报头

12.send(body):对服务器请求进行初始化。参数body包含请求的主体部分,对于POST请求为键值对字符串;对于GET请求,为null

mouseover/mouseout与mouseenter/mouseleave的区别与联系

mouseover/mouseout是标准事件,所有浏览器都支持;mouseenter/mouseleave是IE5.5引入的特有事件后来被DOM3标准采纳,现代标准浏览器也支持

mouseover/mouseout是冒泡事件;mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时,推荐mouseover/mouseout托管,提高性能

标准事件模型中event.target表示发生移入/出的元素,vent.relatedTarget对应移出/如元素;在老IE中event.srcElement表示发生移入/出的元素,event.toElement表示移出的目标元素,event.fromElement表示移入时的来源元素

sessionStorage,localStorage,cookie区别

都会在浏览器端保存,有大小限制,同源限制

cookie会在请求时发送到服务器,作为会话标识,服务器可修改cookie;web storage不会发送到服务器

cookie有path概念,子路径可以访问父路径cookie,父路径不能访问子路径cookie

有效期:cookie在设置的有效期内有效,默认为浏览器关闭;sessionStorage在窗口关闭前有效,localStorage长期有效,直到用户删除

共享:sessionStorage不能共享,localStorage在同源文档之间共享,cookie在同源且符合path规则的文档之间共享

localStorage的修改会促发其他文档窗口的update事件

cookie有secure属性要求HTTPS传输

浏览器不能保存超过300个cookie,单个服务器不能超过20个,每个cookie不能超过4k。web storage大小支持能达到5M

javascript跨域通信

同源:两个文档同源需满足

协议相同

域名相同

端口相同

跨域通信:js进行DOM操作、通信时如果目标与当前窗口不满足同源条件,浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法

如果是log之类的简单单项通信,新建img,script,link,iframe元素,通过src,href属性设置为目标url。实现跨域请求

如果请求json数据,使用script进行jsonp请求

现代浏览器中多窗口通信使用HTML5规范的targetWindow.postMessage(data, origin);其中data是需要发送的对象,origin是目标窗口的origin。window.addEventListener(‘message’, handler, false);handler的event.data是postMessage发送来的数据,event.origin是发送窗口的origin,event.source是发送消息的窗口引用

内部服务器代理请求跨域url,然后返回数据

跨域请求数据,现代浏览器可使用HTML5规范的CORS功能,只要目标服务器返回HTTP头部Access-Control-Allow-Origin: *即可像普通ajax一样访问跨域资源

javascript有哪几种数据类型

六种基本数据类型

undefined

null

string

boolean

number

symbol(ES6)

一种引用类型

Object

什么闭包,闭包有什么用

闭包是在某个作用域内定义的函数,它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分:

函数本身作用域。

闭包定义时的作用域。

全局作用域。

闭包常见用途:

创建特权方法用于访问控制

事件处理程序及回调

javascript有哪几种方法定义函数

函数声明表达式

function操作符

Function 构造函数

ES6:arrow function

应用程序存储和离线web应用

HTML5新增应用程序缓存,允许web应用将应用程序自身保存到用户浏览器中,用户离线状态也能访问。

1.为html元素设置manifest属性:’

‘,其中后缀名只是一个约定,真正识别方式是通过text/cache-manifest作为MIME类型。所以需要配置服务器保证设置正确

2.manifest文件首行为CACHE MANIFEST,其余就是要缓存的URL列表,每个一行,相对路径都相对于manifest文件的url。注释以#开头

3.url分为三种类型:CACHE:为默认类型。NETWORK:表示资源从不缓存。 FALLBACK:每行包含两个url,第二个URL是指需要加载和存储在缓存中的资源, 第一个URL是一个前缀。任何匹配该前缀的URL都不会缓存,如果从网络中载入这样的URL失败的话,就会用第二个URL指定的缓存资源来替代。以下是一个文件例子:

CACHE MANIFEST

CACHE:
myapp.html
myapp.css
myapp.js

FALLBACK:
videos/ offline_help.html

NETWORK:
cgi/

客户端存储localStorage和sessionStorage

localStorage有效期为永久,sessionStorage有效期为顶层窗口关闭前

同源文档可以读取并修改localStorage数据,sessionStorage只允许同一个窗口下的文档访问,如通过iframe引入的同源文档。

Storage对象通常被当做普通javascript对象使用:通过设置属性来存取字符串值,也可以通过setItem(key, value)设置,getItem(key)读取,removeItem(key)删除,clear()删除所有数据,length表示已存储的数据项数目,key(index)返回对应索引的key

cookie及其操作

cookie是web浏览器存储的少量数据,最早设计为服务器端使用,作为HTTP协议的扩展实现。cookie数据会自动在浏览器和服务器之间传输。

通过读写cookie检测是否支持

cookie属性有name,value,max-age,path, domain,secure;

cookie默认有效期为浏览器会话,一旦用户关闭浏览器,数据就丢失,通过设置max-age=seconds属性告诉浏览器cookie有效期

cookie作用域通过文档源和文档路径来确定,通过path和domain进行配置,web页面同目录或子目录文档都可访问

通过cookie保存数据的方法为:为document.cookie设置一个符合目标的字符串如下

读取document.cookie获得’; ‘分隔的字符串,key=value,解析得到结果

javascript有哪些方法定义对象

对象字面量: var obj = {};

构造函数: var obj = new Object();

Object.create(): var obj = Object.create(Object.prototype); // Object.create(proto[, propertiesObject])

===运算符判断相等的流程是怎样的

如果两个值不是相同类型,它们不相等

如果两个值都是null或者都是undefined,它们相等

如果两个值都是布尔类型true或者都是false,它们相等

如果其中有一个是NaN,它们不相等

如果都是数值型并且数值相等,他们相等, -0等于0

如果他们都是字符串并且在相同位置包含相同的16位值,他它们相等;如果在长度或者内容上不等,它们不相等;两个字符串显示结果相同但是编码不同和=都认为他们不相等

如果他们指向相同对象、数组、函数,它们相等;如果指向不同对象,他们不相等

==运算符判断相等的流程是怎样的

如果两个值类型相同,按照===比较方法进行比较

如果类型不同,使用如下规则进行比较

如果其中一个值是null,另一个是undefined,它们相等

如果一个值是数字另一个是字符串,将字符串转换为数字进行比较

如果有布尔类型,将true转换为1,false转换为0,然后用==规则继续比较

如果一个值是对象,另一个是数字或字符串,将对象转换为原始值然后用==规则继续比较

其他所有情况都认为不相等

对象到字符串的转换步骤

如果对象有toString()方法,javascript调用它。如果返回一个原始值(primitive value如:string number boolean),将这个值转换为字符串作为结果

如果对象没有toString()方法或者返回值不是原始值,javascript寻找对象的valueOf()方法,如果存在就调用它,返回结果是原始值则转为字符串作为结果

否则,javascript不能从toString()或者valueOf()获得一个原始值,此时throws a TypeError

对象到数字的转换步骤

  1. 如果对象有valueOf()方法并且返回元素值,javascript将返回值转换为数字作为结果
  2. 否则,如果对象有toString()并且返回原始值,javascript将返回结果转换为数字作为结果
  3. 否则,throws a TypeError

    <,>,<=,>=的比较规则

    所有比较运算符都支持任意类型,但是比较只支持数字和字符串,所以需要执行必要的转换然后进行比较,转换规则如下:
    如果操作数是对象,转换为原始值:如果valueOf方法返回原始值,则使用这个值,否则使用toString方法的结果,如果转换失败则报错
    经过必要的对象到原始值的转换后,如果两个操作数都是字符串,按照字母顺序进行比较(他们的16位unicode值的大小)
    否则,如果有一个操作数不是字符串,将两个操作数转换为数字进行比较

    函数内部arguments变量有哪些特性,有哪些属性,如何将它转换为数组

    arguments所有函数中都包含的一个局部变量,是一个类数组对象,对应函数调用时的实参。如果函数定义同名参数会在调用时覆盖默认对象
    arguments[index]分别对应函数调用时的实参,并且通过arguments修改实参时会同时修改实参
    arguments.length为实参的个数(Function.length表示形参长度)
    arguments.callee为当前正在执行的函数本身,使用这个属性进行递归调用时需注意this的变化
    arguments.caller为调用当前函数的函数(已被遗弃)
    转换为数组:var args = Array.prototype.slice.call(arguments, 0);

    列举数组相关的常用方法

    参考答案: push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter

    列举字符串相关的常用方法

    参考答案: indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase

    请用代码写出(今天是星期x)其中x表示当天是星期几,如果当天是星期一,输出应该是”今天是星期一”

    var days = ['日','一','二','三','四','五','六'];
    var date = new Date();
    
    console.log('今天是星期' + days[date.getDay()]);
    

js里的作用域是什么样子的?

参考答案:大多数语言里边都是块作作用域,以{}进行限定,js里边不是.js里边叫函数作用域,就是一个变量在全函数里有效.比如有个变量p1在函数最后一行定义,第一行也有效,但是值是undefined.

var globalVar = 'global var';

function test() {
alert(globalVar); // undefined, 因为globalVar在本函数内被重定义了,导致全局失效,这里使用函数内的变量值,可是此时还没定义
var globalVar = 'overrided var'; // globalVar在本函数内被重定义
alert(globalVar); // overrided var
}
alert(globalVar); // global var,使用全局变量

js里边的this指的是什么?

参考答案: this指的是对象本身,而不是构造函数.

apply, call和bind有什么区别?

参考答案:三者都可以把一个函数应用到其他对象上,注意不是自身对象.apply,call是直接执行函数调用,bind是绑定,执行需要再次调用.apply和call的区别是apply接受数组作为参数,而call是接受逗号分隔的无限多个参数列表,

caller, callee和arguments分别是什么?

参考答案: caller,callee之间的关系就像是employer和employee之间的关系,就是调用与被调用的关系,二者返回的都是函数对象引用.arguments是函数的所有参数列表,它是一个类数组的变量.

本文标题: 前端常识-gj2

文章作者: 余真帆-fanerge

发布时间: 2018年03月11日 - 20:03

最后更新: 2018年03月11日 - 21:03

原始链接: https://fanerge.github.io/前端常识-gj2.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

坚持技术分享,您的支持将鼓励我继续创作!

-------------本文结束 fanerge在此感谢您的阅读-------------