前端面试官必问题,js面试题?

1、字符串的方法 **

字符串的方法
charAt( ) 方法从一个字符串中返回某个下标上的字符
concat( ) 方法将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回。

search( ) 获取某个字符或者字符串片段首次出现的位置
match( ) 检索字符串或者正则表达式
replace( ) 替换
replace(参数 1,参数 2); 参数 1:替换谁 参数 2:替换值
split( 参数 1,参数 2 ) 字符串切割,切割后返回数组

slice( ) 和 substring( ) ( 开始位置,结束位置 ) 获取两个索引值之间的字符串片段 从下标 2 开始截取,到下标 4 结束,但不包含 4
substr ( 开始位置,截取的长度 ) 获取两个索引值之间的字符串片段

indexOf( ) 获取某个字符或者字符串首次出现的位置,找到则返回索引值,找不到则返回-1
lastIndexOf( ) 获取某个字符或者字符串最后出现的位置,找到则返回索引值,找不到则返回-1

2、this, call, apply, bind *

跟 this 指向的答案背一样就行

1.浏览器里,在全局范围内的 this 指向 window 对象; 2.在函数中,this 永远指向最后调用他的那个对象; 3.构造函数中,this 指向 new 出来的那个新的对象;
4.Call、apply、bind 中的 this 被强绑定在指定的那个对象上; 5.箭头函数中 this 比较特殊,箭头函数 this 为父作用域的 this,不是调用时的 this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的 this 指向是静态的,声明的时候就确定了下来;
6.apply、call、bind 都是 js 给函数内置的一些 API,调用他们可以为函数指定 this 的执行,同时也可以传参。

3、数组排序 ****

  1. 冒泡排序法
    将数组中的相邻两个元素进行比较,将比较大(较小)的数通过两两比较移动到数组末尾(开始),执行一遍内层循环,确定一个最大(最小)的数,外层循环从数组末尾(开始)遍历到开始(末尾)
  2. 插入排序法(插队排序)
    将要排序的数组分成两部分,每次从后面的部分取出索引最小的元素插入到前一部分的适当位置
    ·从第一个元素开始,该元素可以认为已经被排序;
    ·取出下一个元素,在已经排序的元素序列中从后向前扫描;
    ·如果该元素(已排序)大于新元素,将该元素移到下一位置;
    ·重复步骤 3,直到找到已排序的元素小于或者等于新元素的位置;
    ·将新元素插入到该位置后;
    ·重复步骤 2~5。
  3. 快速排序法
    实现思路是,将一个数组的排序问题看成是两个小数组的排序问题,以一个数为基准(中间的数),比基准小的放到左边,比基准大的放到右边,而每个小的数组又可以继续看成更小的两个数组,一直递归下去,直到数组长度大小最大为 2。

4、数组扁平化***

数组扁平化就是将一个多维数组转换为一个一维数组,比如
[[1,2,3],3,[2,3]] =>[1,2,3,3,2,3]
实现基本方式
1、对数组的每一项进行遍历。
2、判断该项是否是数组。
3、如果该项不是数组则将其直接放进新数组。
4、是数组则回到 1,继续迭代。
5、当数组遍历完成,返回这个新数组。

5、垃圾回收和内存机制

垃圾回收:
浏览器的 js 具有自动垃圾回收机制,垃圾收集器会定期的找出那些不在继续使用的变量,然后释放内存。垃圾回收器会按照固定的时间间隔周期性的执行。
js 中最常用的垃圾回收方式就是标记清除。例如,在函数中声明一个变量,就将这个变量标记为“进入环境”。而当变量离开环境时,则将其标记为“离开环境”。
引用计数的含义是跟踪记录每个值被引用的次数。当这个值的引用次数变成 0 时,则说明没有办法再访问这个值了,就把它回收掉。

内存泄漏:

  1. 循环引用
    一个很简单的例子:一个 DOM 对象被同一个多个 Javascript 对象引用,这个 DOM 对象可能会引发内存泄露。要想破坏循环引用,需要赋值为 null。
  2. 闭包
    在闭包中引入闭包外部的变量时,当闭包结束时此对象无法被垃圾回收(GC)。
  3. DOM 泄露
    当原有的 DOM 被移除时,子节点引用没有被移除则无法回收
  4. Times 计时器泄露

6. 原生 Ajax 的创建过程 ***

1.创建 xhr 核心对象
var xhr=new XMLHttpRequest();

2.调用 open 准备发送
(参数一:请求方式
参数二: 请求地址
参数三:true 异步,false 同步
xhr.open('post','http://www.baidu.com/api/search',true)

3.如果是 post 请求,必须设置请求头。

4.调用 send 发送请求 (有参数就写在括号里,)
xhr.send()

  1. 可以用 onload 事件 触发请求成功的操作
    或者也可以用
    (监听异步回调 onreadystatechange
    判断 readyState 为 4 表示请求完成
    判断 status 状态码 为 200 表示接口请求成功
    responeseText 为相应数据。字符串类型。)

备注:如果是 post 请求,想要传 json 格式参数。

设置请求头的时候设置为 json 格式

1.xhr.setRequestHeader('Content-Type', 'application/json')

open 发送数据
2.xhr.open({_id:xxx,user:xxxx,age:xxxx})

7.Jsonp 的原理 ****

JSONP 原理:

ajax 请求受同源策略影响,不允许进行请求,我们利用 script 标签的 src 属性不受同源策略的约束,利用这个特性 jsonp 需要以下步骤:

  1. 动态创建<script></script>(document.createElement('script'))
  2. 设置 src 属性,(src 中要包含参数 callback=fn)进行跨域请求
  3. 将 <script></script>添加到页面中执行 (body.appendChild('script'))
  4. 页面要提前定义好 callback。
  5. 后端会返回回调函数执行并包裹参数 callback(data)
    备注:
    服务端不再返回 JSON 格式的数据,而是返回回调函数包裹数据(fn({name:'tom',age:18}),在 src 中进行了调用,这样实现了跨域。

8.存储 *

本地存储分为 cookie、localStorage、sessionStorage,
Cookie
Cookie 设计初衷是用来和服务器通讯,而不是本地存储,他只是被‘借用’到本地存储。
Cookie 有一些缺点:存储空间小,最大 4k、用的时候比较麻烦

localStorage、sessionStorage
在 HTML5 中,新加入了一个 localStorage/sessionStorage 特性,这个特性主要是用来作为本地存储来使用的,解决了 cookie 存储空间不足的问题(cookie 中每条 cookie 的存储空间为 4k),localStorage 中一般浏览器支持的是 5M 大小。
优点:HTML5 专门为存储而设计,最大可存 5M、API 简单易用 setItem getItem、不会随着 http 请求被发送出去

localStorage、sessionStorage.cookie 不同点:

Cookie 可以设置过期时间 存储容量比较小 用起来没有方便的方法
localStorage 数据会永久存储,除非代码或手动删除
sessionStroage 数据只存在于当前会话,浏览器关闭则清空
一般用 localStorage 会更多一些

注意:localStorage 只支持 string 类型的存储。

9.宏任务和微任务 ( 也是同步异步的答案)

js 中的一个机制,就是遇到宏任务,先执行宏任务,将宏任务放入 eventqueue,然后在执行微任务。

宏任务和微任务都包含一些事件
宏任务:setTimeout,setInterval,Ajax,DOM 事件
微任务:Promise async/await

js 是单线程的,只能做一件事情,如果碰到异步任务就会把异步任务放在任务队列里等待执行,等到同步任务执行完成了,而且异步任务准备好了就会被放进主线程等待依次执行。异步的特点不会阻塞后面代码的执行。也就是请求处理过程中,你不能闲着,会产生异步的请求。回头再处理,然后继续执行下面的请求。
异步和单线程是相辅相成的,js 是一门单线程脚本语言,所以需要异步来辅助

10.dom 操作 (不必要全背 挑几个背)

DOM 是网页中用来表示文档中对象的标准模型,他是由节点和对象组成的结构集合。在浏览器解析 HTML 标签时,会构建一个 DOM 树结构。
由此呢 js 也提供了一些 dom 的操作
一、dom 元素获取
1.document.getElementById(id 的值) 通过 id 来获取元素的对象,返回值是一个对象
2.document.getElementsByName(name) 通过 name 属性来获取对象的,返回值是一个数组,与 getElementById()方法类似,但他是查询的 name 元素,而不是 id 属性
3.document.getElementsByTagName() 通过标签来获取元素的对象, 返回值是一个数组
4.document.getElementsByClassName() 通过 class 类名来获取的对象,返回值是一个数组
5.document.querySelector() css 选择器,返回与该模式匹配的第一个元素,结果为一个元素;如果没找到匹配的元素,则返回 null
6.document.querySelectorAll() css 选择器,返回与该模式匹配的所有元素,结果为一个类数组二、dom 创建
二、dom 操作

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

推荐阅读更多精彩内容