面试题之ES基础知识

 1、介绍js的基本数据类型 ,类型判断用哪些方法?
  答: Undefined、Null、Boolean、Number、String、symbol

            类型判断typeof

         typeof xxx 得到的值有以下几种类型: undefined boolean number string object function 、 symbol ,比较简单,不再一一           演示了。这里需要注意的有三点: typeof null 结果是 object ,实际这是 typeof 的一个bug,null是原始值,非引用 类型               typeof [1, 2] 结果是 object ,结果中没有 array 这一项,引用类型除了 function 其他的全部都是 object typeof Symbol() 用           typeof 获取 symbol 类型的值得到的是 symbol ,这是 ES6 新增 的知识点

         instanceof 用于实例和构造函数的对应

         例如判断一个变量是否是数组,使用 typeof 无法判断,但可 以使用 [1, 2]                       instanceof Array 来判断。因为,             [1, 2] 是数组,它的构造函数就是 Array 。


 2、js有哪些内置对象?
  答:数据封装类对象:Object、Array、Boolean、Number 和 String
  其他对象:Function、Arguments、Math、Date、RegExp、Error


 3、this对象的理解
  答:this总是指向函数的直接调用者(而非间接调用者);
  如果有new关键字,this指向new出来的那个对象;
  在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent中的this总是指向全局对象Window。

 

4、eval是做什么的?
  答:它的功能是把对应的字符串解析成JS代码并运行;
  应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。
  由JSON字符串转换为JSON对象的时候可以用eval,var obj =eval('('+ str +')')。

 

5、DOM怎样添加、移除、移动、复制、创建和查找节点
  答:
  // 创建新节点
  createDocumentFragment() //创建一个DOM片段
  createElement() //创建一个具体的元素
  createTextNode() //创建一个文本节点
  // 添加、移除、替换、插入
  appendChild()
  removeChild()
  replaceChild()
  insertBefore() //在已有的子节点前插入一个新的子节点
  // 查找
  getElementsByTagName() //通过标签名称
  getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
  getElementById() //通过元素Id,唯一性

 6、null和undefined的区别?
  答:
  null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。
  undefined:
  (1)变量被声明了,但没有赋值时,就等于undefined。
  (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
  (3)对象没有赋值的属性,该属性的值为undefined。
  (4)函数没有返回值时,默认返回undefined。
  null:
  (1) 作为函数的参数,表示该函数的参数不是对象。
  (2) 作为对象原型链的终点。

 7、JSON 的了解?
  答:
  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
  格式:采用键值对,例如:{'age':'12', 'name':'back'}

 8、call() 和 apply() 的区别和作用?
  答:
  apply()函数有两个参数:第一个参数是上下文,第二个参数是参数组成的数组。如果上下文是null,则使用全局对象代替。
  如:function.apply(this,[1,2,3]);
  call()的第一个参数是上下文,后续是实例传入的参数序列。
  如:function.call(this,1,2,3);


9、你有哪些性能优化的方法?
  答:
  (1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
  (2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
  (3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
  (4) 当需要设置的样式很多时设置className而不是直接操作style。
  (5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
  (6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
  (7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

10.哪些常见操作会造成内存泄漏?
11.线程与进程的区别

12.原型和原型链

其实每个 JS 对象都有 __proto__ 属性,这个属性指向了原型。即 __proto__ 找到一个原型对象,在该对象中定义了很多函数让我们来使用。原型的 constructor 属性指向构造函数,构造函数又通过 prototype 属性指回原型。

13.什么是提升?什么是暂时性死区?var、let 及 const 区别?

  • 函数提升优先于变量提升,函数提升会把整个函数挪到作用域顶部,变量提升只会把声明挪到作用域顶部
  • var 存在提升,我们能在声明之前使用。letconst 因为暂时性死区的原因,不能在声明前使用
  • var 在全局作用域下声明变量会导致变量挂载在 window 上,其他两者不会
  • let 和 const 作用基本一致,但是后者声明的变量不能再次赋值
  • var定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问。
  • let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问。
  • const用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改。
  • 块级作用域 {}

    ES5 中作用域有:全局作用域、函数作用域。没有块作用域的概念。

    ES6 中新增了块级作用域。块作用域由 { } 包括,if语句和 for语句里面的{ }也属于块作用域。

14.数组去重

ES5

ES6

set()

15.深拷贝浅拷贝

深拷贝两种方法:JSON.parse(JSON.stringify(obj)),第二种可以使用for...in加递归

浅拷贝:引用类型之间进行赋值操作,只是拷贝了引用类型的引用地址而非值,一个改变另一个也改变。

16.阻止事件冒泡和默认行为

17.js的延迟加载

async,defer,把script方法哦html标签之后,定时器

17.1.异步编程(同步和异步的区别(忘记了看掘金小册前端面试指南高频考点))

js异步:回调函数,promise,async,await,定时器

18.严格模式:use strict 使用的好坏是什么?
代码严禁,监测代码:好处 压缩节约文件大小
阻塞后面代码的运行 :坏处 压缩出现错误

19.判断一个变量是否为数组

20.对象合并(数组合并)

var obj = Object.assign(a,b)

40.new共经过了4几个阶段

1、创建一个空对象

1. varobj=new Object();  

2、设置原型链

1. obj.__proto__= Func.prototype;  

3、让Func中的this指向obj,并执行Func的函数体。

1. var result =Func.call(obj);  

4、判断Func的返回值类型:

如果是值类型,返回obj。如果是引用类型,就返回这个引用类型的对象。

1. if (typeof(result) == "object"){  

2.   func=result;  

3. }  

4. else{  

5.     func=obj;;  

6. }  

41.事件委托
事件委托就是利用的DOM事件的事件捕获阶段。把具体dom上发生的事件,委托给更大范围的dom去处理。好比送信员,如果每次都把信件送给每一户,非常繁琐。但是如果交给一个大范围的管理者,比如小区的传达室,那么事情会变得非常简单。事件委托就类似这种原理,我页面中有很多按钮,如果不使用事件委托,我只能在每个按钮上注册事件。非常麻烦。但如果我把事件注册在一个大范围的div(假设所有的按钮都在这个div中),那么我只要注册一次事件,就可以处理所有按钮(只要按钮包含在上述div中)事件的响应了
 

43.什么是闭包,如何使用它,为什么要使用它?
包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点:

· 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

· 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

 44.http 和 https 有何区别?如何灵活使用?
 http是HTTP协议运行在TCP之上。所有传输的内容都是明文,客户端和服务器端都无法验证对方的身份。

https是HTTP运行在SSL/TLS之上,SSL/TLS运行在TCP之上。所有传输的内容都经过加密,加密采用对称加密,但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份,如果配置了客户端验证,服务器方也可以验证客户端的身份
45.创建对象的方法

1.字面量 var a ={}

2.构造函数 

3.通过new关键字 var a = new ob();

46.ajax请求的过程

1、创建XMLHttpRequest对象

2,创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

3,设置响应HTTP请求状态变化的函数.

4,发送HTTP请求.

5,获取异步调用返回的数据.

6,使用JavaScript和DOM实现局部刷新.

47.如何解决跨域问题

JSONP:利用script标签可跨域的特点,在跨域脚本中可以直接回调当前脚本的函数。

反向代理

48.请解释JSONP的工作原理,以及它为什么不是真正的AJAX。

49.cookie、session、localStorage、sessionStorage之不同

js操作数组的方法

join():join(separator): 将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符,该方法只接收一个参数:即分隔符。

push()和pop():push(): 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。 pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。

shift() 和 unshift():shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。 unshift:将参数添加到原数组开头,并返回数组的长度

sort():按升序排列数组项——即最小的值位于最前面,最大的值排在最后面

reverse():反转数组项的顺序。

concat():将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

slice():返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下, slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。

splice():splice():很强大的数组方法,它有很多种用法,可以实现删除、插入和替换。

删除:可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。例如, splice(0,2)会删除数组中的前两项。

插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项。例如,splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。

splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组。

indexOf()和 lastIndexOf() (ES5新增):indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。
lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回1。在比较第一个参数与数组中的每一项时,会使用全等操作符。

forEach() (ES5新增)forEach():对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型,默认有传参,参数分别为:遍历的数组内容;第对应的数组索引,数组本身。

map() (ES5新增)map():指“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

filter() (ES5新增)filter():“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。

every() (ES5新增)every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。

some() (ES5新增)some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

reduce()和 reduceRight() (ES5新增)这两个方法都会实现迭代数组的所有项,然后构建一个最终返回的值。reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。

传给 reduce()和 reduceRight()的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

猜你喜欢

转载自blog.csdn.net/weixin_42312074/article/details/91406354