=前端面试汇总

1.清除盒模型的浮动方式

way 1: 最后追加元素,

设置 clear:both;

way 2: 伪元素清除

div::after{

clear:both,

content:'',

height:0;

line-height:0;

display:block;

visiablity:hidden;

}

div{

zoom:1; // ie下生效设置或者检索缩放比例

}

way 3: 父元素增加overflow:hidden;

2.谷歌浏览器在标准模式下不支持小于12px的文字,如何让它支持小于12px的文字

使用 -webkit-text-size-adjust:none;  对谷歌的27.0一下版本有效,27.0以上无效,只支持英文,对英文无效,新的版本已经禁止了修改该属性,可以使用transform:scale(0.8) 来进行调整,当然容器也会随着缩小,要注意重新调整位置。

3.火狐下文本无法撑开整个容器高度,如何解决?css hack

div{

height:auto!important;

height:200px;

min-height:200px;

}

4.CSS3新增的选择器有哪些?

子元素选择器,相邻兄弟选择器,通用兄弟选择器,群组选择器

子元素:    父 > 子

相邻兄弟:  元素 + 兄弟

通用兄弟: 元素 ~ 兄弟

群组:  元素1,元素2,,,, ,

css3属性选择器:

Element[attribute]    Element[attribute=”value”]  可以用通配符  ^ 开头 $ 结尾 ~ 包含属性  * 属性值包含

Element[attribute^=”value”]

css3伪类选择器:

行为伪类:

:hover  :active(点击) :focus(input光标选中)

锚点伪类:

:link  :visited

状态伪类:

:enabled :disabled  :checked :unchecked

伪元素:

::before    和content配合使用

::after 和content配合使用 多用于清除浮动

::selection  选中文本的背景色  ie9支持

E:first-child 获取第一个

E:last-child  获取最后一个

E:nth-child(n) 获取e类型的第几个后代  从1开始计数

E:nth-child(an + b)  这里的n 代表 从 0 开始,依次递增的自然数

E:nth-child(even)

E:nth-child(odd)

:not 否定选择器

Element::first-line 根据“first-line”伪元素中的样式对Element元素的第一行文本进行格式化

Element::first-letter  用于向文本的首字母设置特殊样式

Element:nth-last-child(N)    匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数

Element:nth-of-last-type(N)    匹配属于父元素的特定类型的第N个子元素的每个元素,从最后一个子元素开始计数  带着type都是要和选择器元素的类型相同,child则是直接返回所有子元素

Element:empty  没有子节点的元素

Element:only-child

Element:last-of-type 匹配属于父元素的特定类型的最后一个子元素的每个元素

Element:first-of-type  匹配属于其父元素的特定类型的首个子元素的每个元素

html5新增标签

aricle:页面上构建完整并且独立的内容 如小说,文章,报道类

aside:用来装载非正文类的内容 如 广告 侧边栏

section:标签定义文档中的节 例如小说中的一章

header:页面头部?

footer:页脚

nav:标签定义显示导航链接

hgroup:标签用于网页或区段

figure>figcaption

<figure>:标签包含独立的媒体内容,如图像 图表 照片等等

<figcaption>标签定义figure元素的标题(caption)

details>summary

<details>标签用于描述文档或文档某个部分的细节,而这个细节并不需要文档加载时就展示,而是可以折叠。

属性:open定义details是否可见

<summary>默认显示的details元素的标题

datalist>option

输入框提示列表 ? ?input的list属性值为datalist的id

progress :进度条 ?属性:max:进度完成 value:定义当前进度值

mark:标记需要突出显示的文本

keygen:表单的密钥对生成器

权重:

行内样式(1000)>ID选择器(100)>类,属性选择器和伪类选择器(10)>元素和伪元素(1)>*(0)

background-origin(指定背景图片从哪里开始显示)

box-sizing(控制盒模型的组成模式)

content-box:  使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border;

border-box:    使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的整体宽高不变

5.CSS3动画animate

关键帧(@keyframes)

animation: dropdown 8s linear infinite;

.c:hover{animation: 2s change 3 forwards;}  forwards为保持在结束状态

不需要触发 可以循环播放

transition  0.4s linear background 1s

6.ES6实现数组去重

1. newarray = [... new Set(oldarray)]

2 .newarray = Array.from(new Set(oldarray))

3 .  function unique(arr) {

const res = new Map();

return arr.filter((a) => !res.has(a) && res.set(a, 1))

}

7.Vue中v-if和v-show的区别

v-if 直接添加或者删除整个dom元素

v-show dom渲染出来了  但是设置了display:none

8.Vue阻止事件冒泡

事件后增加  .stop  阻止冒泡

.prevent 阻止默认事件

.native  原生事件绑定到组件

如果原生组件在其他元素的包裹下,使用。native方法可能会失效,这是可以使用 this.$listener,v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素,和计算属性配合使用。

Vue.component('base-input', {

  inheritAttrs: false,

  props: ['label', 'value'],

  computed: {

inputListeners: function () {

  var vm = this

  // `Object.assign` 将所有的对象合并为一个新对象

  return Object.assign({},

// 我们从父级添加所有的监听器

this.$listeners,

// 然后我们添加自定义监听器,

// 或覆写一些监听器的行为

{

  // 这里确保组件配合 `v-model` 的工作

  input: function (event) {

vm.$emit('input', event.target.value)

  }

}

  )

}

  },

  template: `

<label>

  {{ label }}

  <input

v-bind="$attrs"

v-bind:value="value"

v-on="inputListeners"

  >

</label>

  })

9.Vue的生命周期

beforCreate 

create

beforeMounted

mounted

beforeUpdate

update

beforeDestroy

destroy

10.Vue的watch是怎么运作的

Vue的数据双向绑定有3大核心:Observer,Dep,Watcher

12.实现水平垂直居中

way 1:

对于行级元素或者行级块元素:display:table-cell和vertical-align、text-align,使父元素内的所有行内元素水平垂直居中(内部div设置display:inline-block即可)。这在子元素不确定宽高和数量时,

对table-cell元素设置百分比(如100%)的宽高值时无效的,但是可以将父元素设置display:table,再将父元素设置百分比宽高,子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中

way2:

div {

position: relative; /* 相对定位或绝对定位均可 */

width:500px;

height:300px;

top: 50%;

left: 50%;

margin: -150px 0 0 -250px;    /* 外边距为自身宽高的一半 */

  }

  way3:

  div {

position: absolute; /* 相对定位或绝对定位均可 */

width:500px;

height:300px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

way4:

  .container {

display: flex;

align-items: center; /* 垂直居中 */

justify-content: center; /* 水平居中 */

}

.container div {

width: 100px;

height: 100px;

13.cookie、localStore和sessionStore的区别

共同点:都是保存在浏览器端、且同源的

区别:

1、cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下

2、存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大

3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭

4、作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的

5、web Storage支持事件通知机制,可以将数据更新的通知发送给监听者

6、web Storage的api接口使用更方便

14.get和post的区别

对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据); ff浏览器发送一个包  不管是post还是get

网络差的时候可以判断数据是否完整。

而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。

get参数通过url传递,post放在request body中。

get请求在url中传递的参数是有长度限制的,而post没有。

get比post更不安全,因为参数直接暴露在url中,所以不能用来传递敏感信息。

get请求只能进行url编码,而post支持多种编码方式。

get会主动cache,请求参数会被完成的保留到浏览记录里,而post不会。

15.浏览器渲染页面的过程

HTML解析出DOM Tree

CSS解析出Style Rules

将二者关联生成Render Tree

Layout 根据Render Tree计算每个节点的信息

Painting 根据计算好的信息绘制整个页面

Repaint ——屏幕的一部分要重画,比如某个CSS的背景色变了。但是元素的几何尺寸没有变。

Reflow 元件的几何尺寸变了,我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow,或是Layout。

发起请求;

解析HTML;

解析样式;

执行JavaScript;

布局;

绘制

页面优化:

HTML文档结构层次尽量少,最好不深于六层;

脚本尽量后放,放在前即可;

少量首屏样式内联放在标签内;

样式结构层次尽量简单;

在脚本中尽量减少DOM操作,尽量缓存访问DOM的样式信息,避免过度触发回流;

减少通过JavaScript代码修改元素样式,尽量使用修改class名方式操作样式或动画;

动画尽量使用在绝对定位或固定定位的元素上;

隐藏在屏幕外,或在页面滚动时,尽量停止动画;

尽量缓存DOM查找,查找器尽量简洁;

涉及多域名的网站,可以开启域名预解析

16.CSS怎么渲染的

  浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。

  css样式规则渲染是先就近渲染,然后才依据选择符权重进行渲染。

  :important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 >通配符 > 继承

浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。

在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。

如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。

并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。

样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。

JS、CSS中如有重定义,后定义函数将覆盖前定义函数。

  渲染效率与下面三点有关:

css选择器的查询定位效率

浏览器的渲染模式和算法

要进行渲染内容的大小

17.怎么理解原型链

object.prototype

18.transition和keyframes的区别

1:transition需要一个事件来触发,比如hover,所以没法在网页加载时自动发生

2: transition是一次性的,不能重复发生,除非一再触发。

3: transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。

4:一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

keyframes 可以定义中间状态,还可以设定是否循环调用,不需要事件触发。

19. 实现一个方法,返回一个boolean值,判断输入是否为回文。

str = str.replace(/W/g, '').toLowerCase();      //将非a-Z0-9-的字符替换为空,转为小写字符

return (str == str.split('').reverse().join(''));  //字符串分割 反转 重新连接 如果等于原先则为true

20.js中的数据类型

基本:string 、 number 、 symbol 、boolean 、undefined

复杂类型:Object 、 array、 function

1. undefined:未定义的变量,或未赋值的变量,或不存在的变量属于undefined;

2. NaN:非数字类型,但是NaN属于number,可用isNaN();来判断是否属于非数字。NaN不和任何值相等,包括NaN本身。NaN两个N大写,中间的a小写。

3. boolean:布尔值,我们常说的真假,真为1,假为0。只有这两个值。

4. null:空,属于object,但是判断null == undefined时返回true。判断null === undefined时为false;

21.反转字符串

1. 使用 Array的reverse()方法

char[] c = original.spilt('');

Array.Reverse(c);

2. 逆序遍历

3. public static String strReverseWithRecursive(String string){

        if(string==null||string.length()==0)return string;

        int length = string.length();

        if(length==1){

            return string;

        }else{

            return  strReverseWithRecursive(string.substring(1))+string.charAt(0);

        }

    }

22.用CSS实现三角形

div{

width:0px;

height:0px;

border-left:20px solid transparent;

border-right:20px solid transparent;

border-top:20px solid #000;

border-bottom:0px;

}

23.不使用border,画个1px的线,在标准模式和怪异模式下展示一样

<divstyle="width:100%;height:1px;background-color:black"></div>

<  hr size="1" > 不太兼容

24.说一下CSS Reset的作用和好处

css  reset的作用就是重置这些默认样式,使样式表现一致;

为了让页面获得浏览器跨浏览器的兼容性,需要用重置文件css代码覆盖浏览器默认的样式来统一样式。

25.什么是BFC,作用是什么?

1. BFC 块级格式上下文,浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),

以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。

2. 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。

特点:  内部的Box会在垂直方向上一个接一个的放置

垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠,与方向无关。)

每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)

BFC的区域不会与float的元素区域重叠

计算BFC的高度时,浮动子元素也参与计算

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

看到以上的几条约束,让我想起学习css时的几条规则

Block元素会扩展到与父元素同宽,所以block元素会垂直排列

垂直方向上的两个相邻DIV的margin会重叠,而水平方向不会(此规则并不完全正确)

浮动元素会尽量接近往左上方(或右上方)

为父元素设置overflow:hidden或浮动父元素,则会包含浮动元素

3.产生条件

1).float的值不是none。

2)、position的值不是static或者relative。

3)、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4)、overflow的值不是visible,

4. 作用

1).阻止垂直外边距(margin-top、margin-bottom)折叠

2).包含浮动元素

与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖,可以实现左右固定宽度  中间自适应。  左右模块设置浮动,中间元素设置overflow:hidden

总结一句话:就是垂直方向上的margin会重合

27.Restful的规范理解

    RESTful是一种架构的规范与约束、原则,符合这种规范的架构就是RESTful架构。

28.怎么解决浏览器的跨域

1. jsonp  为啥script请求不存在跨域:因为script  link  和 img  等请求不受同源策略限制,ajax异步请求则受同源策略限制。

2. 后端进行处理  过滤器中指定可跨域  Access-control-allow-origin

3. document.domain  Cookie是服务器写入浏览器的一段信息,只有同源的网页才能共享,但是,两个网页一级域名相同,只是二级域名不同,浏览器允许通过设置document.domain共Cookie。

4. 浏览器窗口有window.name属性。这个属性的最大特点是,无论是否同源,只要在同一个窗口里,前一个网页设置这个属性,后一个网页就可以读取它。

29.实现一个方法,传入一个参数,判断这个参数是不是整数,用运算表达式实现

1. X^0 === X;

2. Math.round(x) === x;  或者可以使用ceil和floor判断

3. (typeof x === 'number') && (x % 1 === 0);   

注意:  使用parseInt的时候,存在局限性 当数值比较大的时候,数据在进行parseInt的时候会转化为String,这时会出现科学计数法即指数形式,1e+21 这时解析到1以后就不解析了 直接返回1了。结果错误 使用parseInt的时候,存在局限性 当数值比较大的时候,数据在进行parseInt的时候会转化为String,这时会出现科学计数法即指数形式,1e+21 这时解析到1以后就不解析了 直接返回1了。结果错误

实现一个方法,返回一个boolean值,判断输入是否为回文。

str = str.replace(/W/g, '').toLowerCase();      //将非a-Z0-9-的字符替换为空,转为小写字符

return (str == str.split('').reverse().join(''));  //字符串分割 反转 重新连接 如果等于原先则为true

30.正则

不以 。。 开头    ^(?!ab)[a-z]+$    不以ab开头的字符串

不以 。。 结尾   ^[a-z]+(?<!bc)$    不以bc结尾的字符串

31. 页面的防抖和节流

防抖:使用延时处理,基本是使用setTimeOut进行处理。

    function debouce(func,delay,immediate){

      var timer = null;

      return function(){

        var context = this;

        var args = arguments;

        if(timer) clearTimeout(time);

        if(immediate){

            //根据距离上次触发操作的时间是否到达delay来决定是否要现在执行函数

            var doNow = !timer;

            //每一次都重新设置timer,就是要保证每一次执行的至少delay秒后才可以执行

            timer = setTimeout(function(){

                timer = null;

            },delay);

            //立即执行

            if(doNow){

                func.apply(context,args);

            }

        }else{

            timer = setTimeout(function(){

                func.apply(context,args);

            },delay);

        }

    }

}

节流流:节流函数允许一个函数在规定的时间内只执行一次。

节流和防抖动最大的区别就是,节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。

节流时间戳实现:

var throttle = function(func,delay){

    var prev = Date.now();

    return function(){

        var context = this;

        var args = arguments;

        var now = Date.now();

        if(now-prev>=delay){

            func.apply(context,args);

            prev = Date.now();

        }

    }

}

节流定时器实现:

// 简单的节流函数

function throttle(func, wait, mustRun) {

var timeout,startTime = new Date();

return function() {

var context = this,args = arguments,curTime = new Date();

clearTimeout(timeout);

// 如果达到了规定的触发时间间隔,触发 handler

if(curTime - startTime >= mustRun){

func.apply(context,args);

startTime = curTime;

// 没达到触发间隔,重新设定定时器

}else{

timeout = setTimeout(func, wait);

}

};

};

32.深度克隆

1.function copyObject(Target,Origin){

var Target = Target||{};

for (const key in Origin) {

//判断是否是自己的属性

if (Origin.hasOwnProperty(key)) {

if( Origin[key]!== null &&  typeof(Origin[key]) == "Object"){

if(Object.prototype.toString.call(Origin[key]) == "[Object Array]"){  //call方法表示调用 

Target[key] = [];

}else{

Target[key] = {};

}

copyObject(Target[key],Origin[key]);

}else{

Target[key] = Origin[key];

}

}

}

}

2. 使用object.assign参数为true时为深拷贝

  判断一个对象是array的方法:

  1. arr instance Array ;

  2. arr.constructor === Array     1 2 存在漏洞

  3. Object.prototype.toString    最严谨

33 . transform属性

功能:该属性允许我们对元素进行旋转、缩放、移动或倾斜。

属性  translate(x,y)  按照x y 轴移动距离

  scale(x,y)      按照 水平 垂直距离缩放 

  rotate(angle)    按照角度旋转  参数为角度  360度 为  2*Math.pi

  skew(x-angle,y-angle)  按照角度倾斜   

  matrix(n,n,n,n,n,n)  矩阵转换

34.vuex中mutation需要在methods中调用,值可以在computed中获取

store中只有mutation是的时候  不存在action的时候   

methods中调用

this.$store.commit(mutation下定义的名称); 

获取的时候 

this.$store.state.获取对象的名称

存在action的时候  action中执行 

  increment(context){

context.commit(mutation中定义的函数);

  },

methods中使用 

this.$store.dispatch(actions下定义的名称);

获取的时候 

this.$store.state.获取对象的名称

35.css预处理语言

saaa  变量  $mainColor: #0982c1;    引用    color: $publicColor;

less  变量 @mainColor: #0982c1;    引用    color: @publicColor;

stylus Stylus对变量名没有任何限定,你可以是$开始,也可以是任意字符,

而且与变量值之间可以用冒号、空格隔开,需要注意的是 Stylus (0.22.4) 将会编译 @ 开始的变量,但其对应的值并不会赋予该变量,换句话说,在 Stylus 的变量名不要用 @ 开头。

预处理优点:

1.层级关系更明确

2 section {

  margin: 10px;

  nav {

height: 25px;

a {

  color: #0982C1;

  &amp;:hover {

text-decoration: underline;

  }

}

  }

}

36.axios跨域处理:原理为服务器代理

1. 修改config下的index.js 中的

proxyTable: {

  '/api': {

target: 'https://api.douban.com',// 请换成你的地址

changeOrigin: true,

pathRewrite: {

  '^/api': ''

}

  }

}

2 .增加main.js中的Vue.prototype.HOST = '/api'

请求时 路径就变为  this.HOST + 后边地址+参数

38.created中使用axios加载数据  值放在data中的时候 then方法中使用箭头函数 

then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。

解决:声明self  self.users= res.data;或者使用 ES6 的 箭头函数arrow function,箭头方法可以和父方法共享变量。

created() {       

axios.post('http://jsonplaceholder.typicode.com/users'').then((res) => {           

this.users= res.data;     

})   

},

39.标准模式:浏览器按W3C标准解析执行代码。

  怪异模式:兼容老页面。使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样

① 不存在doctype或形式不正确会导致怪异模式;

② 有过渡/框架dtd没有URI会导致页面以怪异模式呈现;

③ IE中,如果doctype声明在xml之后,会导致怪异模式。

40.浮动的原理

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,自动增加display:block属性,而不论它本身是何种元素

float设置的浮动元素对块级元素不可见,会覆盖掉浮动元素,对文本元素和bfc元素可见。

41. Javascript 中函数声明和函数表达式是存在区别的,函数声明在JS解析时进行函数提升,因此在同一个作用域内,

不管函数声明在哪里定义,该函数都可以进行调用。而函数表达式的值是在JS运行时确定,并且在表达式赋值完成后,该函数才能调用

42. #main-navigation {  }      /* ID(最快) */

body.home #page-wrap {  }  /* ID */

.main-navigation {  }      /* Class */

ul li a.current {  }      /* Class *

ul {  }                    /* Tag */

ul li a {  }                /* Tag */

* {  }                    /* Universal(慢) */

#content [title='home']    /* Universal */

43. property是DOM中的属性,是JavaScript里的对象;

attribute是HTML标签上的特性,它的值只能够是字符串

property会从attribute中获取同步,然而attribute不会从property中获取同步

attribute(特性),是我们赋予某个事物的特质或对象。

property(属性),是早已存在的不需要外界赋予的特质。

44. 自调用函数执行之后,如果没有return 返回值或者声明变量接受返回值,都会立即消失, 

output为一个输出文本的函数,执行

output(typeof (function (){output('hello world')})());

执行结果为  hello world  undefined

首先执行 自执行函数  函数打印  hello world 

然后执行 typeof 空  输出 undefined

45. noscript  标签用来定义在脚本未被执行时的替代内容

此标签可被用于可识别 script标签但无法支持其中的脚本的浏览器。

46 .js引擎

1. 创建一个全局对象(Global Object) , 这个对象全局只存在一份,它的属性在任何地方都可以访问,它的存在伴随着应用程序的整个生命周期  将 window  math date string等  取得时候直接用即可放在全局对象上

2. JS引擎需要构建一个执行环境栈 也要创建一个全局执行环境EC ,并将这个全局执行环境EC压入执行环境栈中。执行环境栈的作用是为了保证程序能够按照正确的顺序被执行。

3. JS引擎还要创建一个与EC关联的全局变量对象vo  并把VO指向全局对象,VO中不仅包含了全局对象的原有属性,还包括在全局定义的变量x 和函数 A,与此同时,在定义函数A的时候,

还为 A 添加了一个内部属性scope,并将scope指向了VO。每个函数在定义的时候,都会创建一个与之关联的scope属性,scope总是指向定义函数时所在的环境。此时的ECStack结构如下:

4. S引擎会创建函数A的执行环境EC,然后EC推入执行环境栈的顶部并获取执行权。此时执行环境栈中有两个执行环境,分别是全局执行环境和函数A执行环境,A的执行环境在栈顶,全局执行环境在栈的底部。然后,创建函数A的作用域链(Scope Chain) ,在javascript中,每个执行环境都有自己的作用域链,用于标识符解析,当执行环境被创建时,它的作用域链就初始化为当前运行函数的scope所包含的对象。

47.JS的执行机制是:

js解析过程分为两个阶段:预编译期(预处理)与执行期。

首先判断JS是同步还是异步,同步就进入主进程,异步就进入event table

异步任务在event table中注册函数,当满足触发条件后,被推入event queue 

同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中

执行一个宏任务,过程中如果遇到微任务,就将其放到微任务的“事件队列”里

当前宏任务执行完成后,会查看微任务的“事件队列”,并将里面全部的微任务依次执行完

重复以上2步骤,结合event loop(1) event loop(2),就是更为准确的JS执行机制

48 . match是string的方法

regex中方法

1. test(); 是否匹配 

2. exec(); 匹配的结果

3. complie(); 在执行脚本中编译整则表达式

49. 异步async

1. async 函数中可能会有 await 表达式,这会使 async 函数暂停执行,等待表达式中的 Promise 解析完成后继续执行 async 函数并返回解决结果。

2. async 函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。

51.  boolean 转为false的6个值    undefined 、null 、 '' 、NaN 、 0 、 false 。

false == '0'  true

false === '0' false

52. 预编译(函数执行前)※

1. 创建AO对象(Active Object)

2. 查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined

3. 实参形参相统一,实参值赋给形参

4. 查找函数声明,函数名作为AO对象的属性,值为函数引用

预编译(脚本代码块script执行前)

1. 查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined

3. 查找函数声明,函数名作为全局对象的属性,值为函数引用】

注意: 预编译阶段发生变量声明和函数声明,没有初始化行为(赋值),匿名函数不参与预编译只有在解释执行阶段才会进行变量初始化

53. 闭包  :函数执行返回值为次函数声明的内部函数  会产生闭包  闭包会产生内存泄漏,settimeout的第一个参数不是函数的时候,也容易产生内存泄漏。

54. cookie怎么存储 存储在哪里

cookie使用 set存储  get获取   

cookie存储在浏览器端,每次请求会携带cookie

是客户端用来存储数据的一种选项,它既可以在客户端设置也可以在服务器端设置。cookie会跟随任意HTTP请求一起发送。

缺点:一是增加了网络流量,二是数据容量有限,最多只能存储4kb的数据,浏览器之间各有不同,三是不安全。

55. promise.all().then()  race() 

.then 执行回调函数

Promise.all() // 所有的都有完成,相当于 且

 Promise.race() // 完成一个即可,相当于 或 不管成功与否,也可以返回失败


**就先发这么多吧,后边的一百多道我再总结总结**

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容