字节跳动最爱考的前端

最新推荐文章于 2024-07-25 09:53:54 发布
最新推荐文章于 2024-07-25 09:53:54 发布
阅读量97 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45424679/article/details/113804694
版权 
0.1 + 0.2 === 0.3 嘛？为什么？

JavaScirpt 使用 Number 类型来表示数字（整数或浮点数），
遵循 IEEE 754 标准，
通过 64 位来表示一个数字（1 + 11 + 52）
1 符号位，0 表示正数，1 表示负数 s
11 指数位（e）
52 尾数，小数部分（即有效数字）
最大安全数字：Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1，
转换成整数就是 16 位，所以 0.1 === 0.1，是因为通过 toPrecision(16) 
去有效位之后，
两者是相等的。

在两数相加时，会先转换成二进制，0.1 和 0.2 转换成二进制的时候尾数会
发生无限循环，
然后进行对阶运算，JS 引擎对二进制进行截断，所以造成精度丢失。

所以总结：精度丢失可能出现在进制转换和对阶运算中

实现函数能够深度克隆基本类型

function shallowClone(obj) {
  let cloneObj = {};
  
  for (let i in obj) {
    cloneObj[i] = obj[i];
  }
  
  return cloneObj;
}

深克隆

function deepCopy(obj) {
  if (typeof obj === 'object') {
    var result = obj.constructor === Array ? [] : {};
    
    for (var i in obj) {
      result[i] = typeof obj[i] === 'object' ? 
      deepCopy(obj[i]) : obj[i];
    }
  } else {
    var result = obj;
  }
return result;
}

事件流

事件流是网页元素接收事件的顺序，"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获，为截获事件提供机会。然后是实际的目标接受事件。最后一个阶段是时间冒泡阶段，可以在这个阶段对事件做出响应。虽然捕获阶段在规范中规定不允许响应事件，但是实际上还是会执行，所以有两次机会获取到目标对象。

事件冒泡

我是父元素 我是子元素

parEle.addEventListener(‘click’, function () {
alert(‘父级 冒泡’);
}, false);
parEle.addEventListener(‘click’, function () {
alert(‘父级 捕获’);
}, true);

sonEle.addEventListener(‘click’, function () {
alert(‘子级冒泡’);
}, false);
sonEle.addEventListener(‘click’, function () {
alert(‘子级捕获’);
}, true);

当容器元素及嵌套元素，即在捕获阶段又在冒泡阶段调用事件处理程序时：事件按DOM事件流的顺序执行事件处理程序：

父级捕获
子级冒泡
子级捕获
父级冒泡
且当事件处于目标阶段时，事件调用顺序决定于绑定事件的书写顺序，按上面的例子为，先调用冒泡阶段的事件处理程序，再调用捕获阶段的事件处理程序。依次alert出“子集冒泡”，“子集捕获”。

IE 兼容
attchEvent(‘on’ + type, handler)
detachEvent(‘on’ + type, handler)
事件是如何实现的？

在 Web 端，我们常见的就是 DOM 事件：

DOM0 级事件，直接在 html 元素上绑定 on-event，比如 onclick，取消的话，dom.onclick = null，同一个事件只能有一个处理程序，后面的会覆盖前面的。
DOM2 级事件，通过 addEventListener 注册事件，通过 removeEventListener 来删除事件，一个事件可以有多个事件处理程序，按顺序执行，捕获事件和冒泡事件
DOM3级事件，增加了事件类型，比如 UI 事件，焦点事件，鼠标事件
什么是闭包
闭包是一种特殊的对象，它由两部分组成：执行上下文（代号 A），以及在该执行上下文中创建的函数 （代号 B），当 B 执行时，如果访问了 A 中变量对象的值，那么闭包就会产生，且在 Chrome 中使用这个执行上下文 A 的函数名代指闭包

一般如何产生闭包
返回函数
函数当做参数传递
闭包的应用场景
柯里化 bind
模块
问：了解 this 嘛，bind，call，apply 具体指什么

它们都是函数的方法

call: Array.prototype.call(this, args1, args2])apply: Array.prototype.apply(this, [args1, args2]) ：ES6 之前用来展开数组调用, foo.appy(null, [])，ES6 之后使用 … 操作符

New 绑定时，如果是 new 一个硬绑定函数，那么会用 new 新建的对象替换这个硬绑定 this，

function foo(a) {
  this.a = a;
}

var bar = new foo(2);
console.log(bar.a)
手写 bind、apply、call
// call

Function.prototype.call = function (context, ...args) {
  context = context || window;
  
  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;
  
  context[fnSymbol](...args);
  delete context[fnSymbol];
}
// apply

Function.prototype.apply = function (context, argsArr) {
  context = context || window;
  
  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;
  
  context[fnSymbol](...argsArr);
  delete context[fnSymbol];
}
// apply

Function.prototype.apply = function (context, argsArr) {
  context = context || window;
  
  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;
  
  context[fnSymbol](...argsArr);
  delete context[fnSymbol];
}
手写题：Promise 原理

class MyPromise {
  constructor(fn) {
    this.resolvedCallbacks = [];
    this.rejectedCallbacks = [];
    
    this.state = 'PENDING';
    this.value = '';
    
    fn(this.resolve.bind(this), this.reject.bind(this));
    
  }
  
  resolve(value) {
    if (this.state === 'PENDING') {
      this.state = 'RESOLVED';
      this.value = value;
      
      this.resolvedCallbacks.map(cb => cb(value));   
    }
  }
  
  reject(value) {
    if (this.state === 'PENDING') {
      this.state = 'REJECTED';
      this.value = value;
      
      this.rejectedCallbacks.map(cb => cb(value));
    }
  }
  
  then(onFulfilled, onRejected) {
    if (this.state === 'PENDING') {
      this.resolvedCallbacks.push(onFulfilled);
      this.rejectedCallbacks.push(onRejected);
      
    }
    
    if (this.state === 'RESOLVED') {
      onFulfilled(this.value);
    }
    
    if (this.state === 'REJECTED') {
      onRejected(this.value);
    }
  }
}
      
什么是原型链？

当对象查找一个属性的时候，如果没有在自身找到，那么就会查找自身的原型，
如果原型还没有找到，那么会继续查找原型的原型，直到找到 Object.prototype 
的原型时，此时原型为 null，查找停止。这种通过 通过原型链接的逐级向上的查
找链被称为原型链

什么是原型继承？

一个对象可以使用另外一个对象的属性或者方法，就称之为继承。具体是通过
将这个对象的原型设置为另外一个对象，这样根据原型链的规则，如果查找
一个对象属性且在自身不存在时，就会查找另外一个对象，相当于一个对象
可以使用另外一个对象的属性和方法了。

数组能够调用的函数有那些？

push
pop
splice
slice
shift
unshift
sort
find
findIndex
map/filter/reduce 等函数式编程方法
还有一些原型链上的方法：toString/valudOf
如何判断数组类型

Array.isArray

PWA使用过吗？serviceWorker的使用原理是啥？

渐进式网络应用（PWA）是谷歌在2015年底提出的概念。基本上算是web应用程序，
但在外观和感觉上与原生app类似。支持PWA的网站可以提供脱机工作、
推送通知和设备硬件访问等功能。

Service Worker是浏览器在后台独立于网页运行的脚本，它打开了通向不需
要网页或用户交互的功能的大门。现在，它们已包括如推送通知和后台同
步等功能。将来，Service Worker将会支持如定期同步或地理围栏等其他功能。
本教程讨论的核心功能是拦截和处理网络请求，包括通过程序来管理缓存中的响应。

function foo(a) {
  this.a = a;
}

var bar = new foo(2);
console.log(bar.a)
手写 bind、apply、call
// call

Function.prototype.call = function (context, ...args) {
  context = context || window;
  
  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;
  
  context[fnSymbol](...args);
  delete context[fnSymbol];
}
// apply

Function.prototype.apply = function (context, argsArr) {
  context = context || window;
  
  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;
  
  context[fnSymbol](...argsArr);
  delete context[fnSymbol];
}
// apply

Function.prototype.apply = function (context, argsArr) {
  context = context || window;
  
  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;
  
  context[fnSymbol](...argsArr);
  delete context[fnSymbol];
}
手写题：Promise 原理

class MyPromise {
  constructor(fn) {
    this.resolvedCallbacks = [];
    this.rejectedCallbacks = [];
    
    this.state = 'PENDING';
    this.value = '';
    
    fn(this.resolve.bind(this), this.reject.bind(this));
    
  }
  
  resolve(value) {
    if (this.state === 'PENDING') {
      this.state = 'RESOLVED';
      this.value = value;
      
      this.resolvedCallbacks.map(cb => cb(value));   
    }
  }
  
  reject(value) {
    if (this.state === 'PENDING') {
      this.state = 'REJECTED';
      this.value = value;
      
      this.rejectedCallbacks.map(cb => cb(value));
    }
  }
  
  then(onFulfilled, onRejected) {
    if (this.state === 'PENDING') {
      this.resolvedCallbacks.push(onFulfilled);
      this.rejectedCallbacks.push(onRejected);
      
    }
    
    if (this.state === 'RESOLVED') {
      onFulfilled(this.value);
    }
    
    if (this.state === 'REJECTED') {
      onRejected(this.value);
    }
  }
}
      
什么是原型链？

当对象查找一个属性的时候，如果没有在自身找到，那么就会查找自身的原型，如果原型还没有找到，那么会继续查找原型的原型，直到找到 Object.prototype 的原型时，此时原型为 null，查找停止。这种通过 通过原型链接的逐级向上的查找链被称为原型链

什么是原型继承？

一个对象可以使用另外一个对象的属性或者方法，就称之为继承。具体是通过将这个对
象的原型设置为另外一个对象，这样根据原型链的规则，如果查找一个对象属性且在自
身不存在时，就会查找另外一个对象，相当于一个对象可以使用另外一个对象的属
性和方法了。

数组能够调用的函数有那些？

push
pop
splice
slice
shift
unshift
sort
find
findIndex
map/filter/reduce 等函数式编程方法
还有一些原型链上的方法：toString/valudOf
如何判断数组类型

Array.isArray

PWA使用过吗？serviceWorker的使用原理是啥？

渐进式网络应用（PWA）是谷歌在2015年底提出的概念。
基本上算是web应用程序，但在外观和感觉上与原生app类似。
支持PWA的网站可以提供脱机工作、推送通知和设备硬件访问等功能。

Service Worker是浏览器在后台独立于网页运行的脚本，它打开了通向
不需要网页或用户交互的功能的大门。现在，它们已包括如推送通知和
后台同步等功能。将来，Service Worker将会支持如定期同步或地理围栏
等其他功能。本教程讨论的核心功能是拦截和处理网络请求，包括通过
程序来管理缓存中的响应。

function foo() {
  return (a) => {
    console.log(this.a);
  }
}

var obj1 = {
  a: 2
}

var obj2 = {
  a: 3 
}

var bar = foo.call(obj1);
bar.call(obj2);

let 闭包

let 会产生临时性死区，在当前的执行上下文中，会进行变量提升，
但是未被初始化，
所以在执行上下文执行阶段，执行代码如果还没有执行到变量赋值，
就引用此变量就
会报错，此变量未初始化
故事只若初见
关注
字节跳动最爱考的前端面试题：CSS 基础
pig_html的博客
03-10 798
注意：每道题前面出现的 (xx) 数字代表这道题出现的频次，此 CSS 基础是基于 30+ 篇前端面经整理出的问题和对应的回答、参考链接等。文章内容为拿到 Offer 的本人整理。 （2）写代码：css div 垂直水平居中，并完成 div 高度永远是宽度的一半（宽度可以不指定） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=.
字节跳动最爱考的前端面试题：JavaScript 基础
指尖泛出的繁华
02-01 2052
注意：每道题前面出现的 (xx) 数字代表这道题出现的频次，此 JS 基础是基于 30+ 篇前端面经整理出的问题和对应的回答、参考链接等。（2）问：0.1 + 0.2 === 0.3 嘛...
字节跳动最爱考的前端面试题：CSS-基础
2401_84435942的博客
05-02 932
复制代码。
字节跳动最爱考的web前端面试题：计算机网络基础
xuezhangmen的博客
07-25 343
然后说一下 JS 中属性的查找：当我们试图引用实例对象的某个属性时，是按照这样的方式去查找的，首先查找实例对象上是否有这个属性，如果没有找到，就去构造这个实例对象的构造函数的 prototype 所指向的对象上去查找，如果还找不到，就从这个 prototype 对象所指向的构造函数的 prototype 原型对象上去查找。具体是通过将这个对象的原型设置为另外一个对象，这样根据原型链的规则，如果查找一个对象属性且在自身不存在时，就会查找另外一个对象，相当于一个对象可以使用另外一个对象的属性和方法了。
字节跳动最爱考的前端面试题：JavaScript-基础
2301_79655473的博客
04-22 394
ES5 中只存在两种作用域：全局作用域和函数作用域。在 JavaScript 中，我们将作用域定义为一套规则，这套规则用来管理引擎如何在当前作用域以及嵌套子作用域中根据标识符名称进行变量（变量名或者函数名）查找。
字节跳动最爱考的前端面试题|JavaScript 基础到底是什么？
实验楼
04-12 231
点击蓝字 关注我们字节跳动最爱考的前端面试题：JavaScript 基础到底是什么？我们从 JavaScript 的定义说起。JavaScript 简称“JS” ，它是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 最开始是专门为浏览器设计的一门语言，但是现在也被用于很多其他的环境，也已经成为了与 HTML/CSS 完全集成的，使用最广泛的浏...
2024年前端最全字节跳动最爱考的前端面试题：JavaScript-基础(1)，面试的内涵是什么
2401_84617131的博客
05-13 598
当对象查找一个属性的时候，如果没有在自身找到，那么就会查找自身的原型，如果原型还没有找到，那么会继续查找原型的原型，直到找到 Object.prototype 的原型时，此时原型为 null，查找停止。这种通过 通过原型链接的逐级向上的查找链被称为原型链。
字节跳动最爱考的前端面试题：计算机网络基础
weixin_73136678的博客
01-05 450
注意：每道题前面出现的 (xx) 数字代表这道题出现的频次，此 计算机网络 基础是基于 30+ 篇前端面经整理出的问题和对应的回答、参考链接等。文章内容为拿到 Offer 的本人整理。
created里面怎么拿取dom之$nextTick怎么用？，字节跳动最爱考的前端面试题
2401_84092423的博客
04-03 867
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
双非大三，无实习经历，如何以 hard 模式逆袭字节跳动(1)
k186____5189的博客
12-27 1237
以牛客网为例，打开近期新鲜的内推帖（5～6篇就差不多了），分类罗列中间涉及的知识点(及频度) 保证每天抽出定量的时间，去刷帮助系统化学习的书：《你不知道的 JS》，《深入解析 CSS》等（按个人阅读的喜好选） 按知识点图谱，看相关的文章，沉淀知识图谱，中间可以再翻翻工具书/规范 JS：冴羽，神三元；网络：透视 http 协议… 基础的范围，其实说小也不小 在复习 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》 【docs.qq.com/doc/DSkN..
Android字节跳动一面，被面试官吊打
weixin_43901866的博客
03-03 882
缘起 最近看到很多准备春招的童靴，面试被各种吊打。除了提升专业技术水平外。程序员招聘校招相关的注意事项也是大家需要熟悉的。 像下面这位同学，分享自己Android字节跳动一面，被面试官吊打！ 实习项目介绍；如何实现的；为什么使用反射；XML解析的方式；DOM和SAX解析的区别；注解的分类；ButterKnife实现原理 MVP模型是怎么样的；如何实现的；P层是怎么实现的* 为什么选用OkHttp库；拦截器链是如何实现的；自己实现的拦截器是用哪里的；是如何做DNS的； 处于onResume的activity
web前端进阶大厂面试资料合集
m0_67537062的博客
03-26 1509
最近整理了下web前端面试的资料，包含了web前端、数据结构和算法、计算机基础、版本控制工具、经验分享、视频课程和面试书籍等资料，还有比这更全的没有？ 废话不多说，直接上干货，欢迎收藏，不用客气。 前端 面试官求你别再问我hook了 前端开发技术面试指南及真题讲解带你入坑BAT 一线大厂前端面试题年末大汇总 web企业面试题精讲 2年前端(外包经历) 6月部分面试记录 （高级、资深岗位） 三十七个常见Vue面试题，背就完事了 看过 100 份前端简历之后，汇总一下常见的问题 2021
基于Java开发的国际象棋棋盘游戏设计源码
最新发布
10-05
该项目是一款采用Java语言开发的国际象棋棋盘游戏，包含40个文件，其中包括15个Java源文件、13个PNG图像文件、4个中文文件、3个WAV音频文件、1个Git忽略文件、1个LICENSE许可文件和1个Markdown文件。
基于Java核心的志愿汇系统开源设计源码实现
10-05
该项目是一款开源的志愿汇系统，采用Java核心技术实现，并融合了JavaScript, HTML, CSS等前端技术。系统源码包含3648个文件，其中SVG文件2164个，PNG文件640个，JavaScript文件333个，HTML文件140个，CSS文件136个，Java文件56个，SCSS文件42个，LESS文件26个，JPG文件17个，XML文件11个。此系统提供了一个简单的开源实现，便于用户学习和定制。
新疆大学在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-05
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
ic客栈-ic卡分析助手.exe
10-05
目前应用最广的梯控分析修改软件
字节跳动社招编程面试题集：数据结构与数据库
在字节跳动社招的第一轮面试中，考察了应聘者的基础编程能力和数据库管理理解。以下是三个具体的题目及对应知识点： **题目一：类型与集合比较** 此题考察的是Java基础中的数据类型和集合框架的理解。面试者被要求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

故事只若初见

坚持就是胜利

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值