Nothing so bad, as not to be good for something.
zhaofeihao / no-cross-no-crown Goto Github PK
View Code? Open in Web Editor NEWNothing so bad, as not to be good for something.
License: MIT License
Nothing so bad, as not to be good for something.
License: MIT License
快排:
const quickSort = (array) => {
if (array.length <= 1) {
return array;
}
let pos = Math.floor(array.length / 2);
let posNum = array.splice(pos, 1)[0]; //需要将其从原数组删除。
let leftArray = [];
let rightArray = [];
for (let i = 0; i < array.length; i++) {
if (array[i] <= posNum) {
rightArray.push(array[i]);
} else {
leftArray.push(array[i]);
}
}
return quickSort(leftArray).concat(posNum, quickSort(rightArray));
}
冒泡:
const bubbleSort = (array) => {
if (array.length <= 1) {
return;
}
for (let i = 0; i < array.length; i++) {
for (let j = i + 1; j < array.length; j++) {
//从大到小
if (array[i] < array[j]) {
[array[i], array[j]] = [array[j], array[i]];
}
}
}
return array;
}
选择:
const insertionSort = (array) => {
let newArray = [...array];
if (array.length <= 1) {
return;
}
let preIndex, current;
for (let i = 1; i < newArray.length; i++) {
preIndex = i - 1;
current = newArray[i];
//将小的向前插入(将大的向后赋值)
while (preIndex >= 0 && newArray[preIndex] > current) {
newArray[preIndex + 1] = newArray[preIndex];
preIndex--;
}
newArray[preIndex + 1] = current;
}
return newArray;
}
希尔:
const shellSort = (array) => {
if (newArray.length <= 1) {
return;
}
let newArray = [...array];
let len = newArray.length;
let gap = 1;
while (gap < len / 3) {
gap = gap * 3 + 1; //动态间隔
};
for (gap; gap > 0; gap = Math.floor(gap / 3)) {
for (let i = gap; i < len; i++) {
//间隔选择一个值
temp = arr[i];
//间隔做交换
for (let j = i - gap; j >= 0 && arr[j] > temp; j -= gap) {
arr[j + gap] = arr[j];
}
arr[j + gap] = temp;
}
}
};
[TOC]
分别能答出 是啥、咋用、解决了什么问题
是啥 | 咋用 | 解决什么问题/新增的特性 | |
---|---|---|---|
let、const | ES6新增的用来声明变量的关键字 | ① let 声明一个后续可改变的变量 ② const声明一个只读的常量 | ① 为 JavaScript 新增了块级作用域,杜绝了变量在声明前可使用的方式,防止内层变量泄露为全局变量,如for循环的计数器 ② 使用let、const全局作用域声明的变量不会挂到window上③不能重复声明 |
箭头函数 | 函数表达式的新语法,创建一个函数 | ① 使用“箭头”(=>)定义函数 ② 箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回 | ①箭头函数没有自己的this,其this指向离他最近的非箭头函数的this ② 不可作为构造函数 ③无arguments对象,使用rest参数替代 |
class 语法 | 构造函数的语法糖 | class关键字、constructor、原型方法是如何一一对应的 | 更符合面向对象的** |
ES6 模块化 | ES6 在语言标准的层面上,实现了模块功能,可以取代 CommonJS 和 AMD 规范 | ① export 可以导出变量、函数或类,与其对应的值是动态绑定关系 ② import语句会执行所加载的模块;import命令具有提升效果,会提升到整个模块的头部,首先执行 | ES6 模块的设计**是尽量的静态化,使得编译时就能确定模块的依赖关系。可以说一下前端模块化发展历史 |
Promise | Promise 是异步编程的一种解决方案,它是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果 | Promise对象是一个构造函数,用来生成Promise实例,构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。这两个函数由 JavaScript 引擎提供,不用自己部署。Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。 | ①对象的状态不受外界影响,只有异步操作的结果,可以决定当前是哪一种状态 ② 一旦状态改变,就不会再变 |
Promise为我们解决了什么问题?
在传统的异步编程中,如果异步之间存在依赖关系,我们就需要通过层层嵌套回调来满足这种依赖,如果嵌套层数过多,可读性和可维护性都变得很差,产生所谓“回调地狱”,而Promise将回调嵌套改为链式调用,增加可读性和可维护性。
Promise的调用流程:
这是个「观察者模式」,这种 收集依赖 -> 触发通知 -> 取出依赖执行
的方式,被广泛运用于观察者模式的实现,在Promise里,执行顺序是then收集依赖 -> 异步触发resolve -> resolve执行依赖
。
1. BAT前端经典面试问题:史上最最最详细的手写Promise教程
2. 八段代码彻底掌握 Promise - 掘金
JS引擎在执行JS脚本的时候是单线程的,脚本会顺序放入执行栈中依次解析并执行,如果遇到setTimeout这种延时任务,会交给Web APIs线程处理,web api 等到延时结束后把回调函数推进宏任务队列,遇到promise这种异步任务时,会把它推进微任务队列。宏微任务也有其执行规则,每次执行完一个宏任务,就要把微任务队列中的所有微任务取出来执行,微任务执行完毕,开始检查渲染。这就是JavaScript的异步执行机制,也叫事件循环。
宏任务包括:
微任务包括:
图解搞懂JavaScript引擎Event Loop
从面试题看 JS 事件循环与 macro micro 任务队列(带async/await)
微任务、宏任务与Event-Loop
深入理解NodeJS事件循环机制
this是动态变化的,谁调用它,就指向哪里,this有四种绑定规则:
var name = "windowsName";
function a() {
var name = "Cherry";
console.log(this.name); // windowsName
console.log("inner:" + this); // inner: Window
}
a();
console.log("outer:" + this) // outer: Window
var name = "windowsName";
var a = {
name: "Cherry",
fn : function () {
console.log(this.name); // Cherry
}
}
a.fn();
// 构造函数:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
this.sayName = function(){
console.log(this.lastName)
}
}
// This creates a new object
var a = new myFunction("Li","Cherry");
a.sayName();
var name = "windowsName";
function fn() {
var name = 'Cherry';
innerFunction();
function innerFunction() {
console.log(this.name); // windowsName
}
}
fn()
什么是闭包?
简单讲,闭包就是指有权访问另一个函数作用域中的变量的函数。
如何产生一个闭包?
创建闭包最常见方式,就是在一个函数内部创建另一个函数并返回。
闭包的作用域链包含着它自己的作用域,以及包含它的函数的作用域和全局作用域。
闭包的注意事项:
通常,函数的作用域及其所有变量都会在函数执行结束后被销毁。但是,在创建了一个闭包以后,这个函数的作用域就会一直保存到闭包不存在为止。
闭包的应用:
设计私有的方法和变量。
函数柯里化
[] == ![] !? 浅析JS的类型系统和隐式类型转换
JavaScript 运算符规则与隐式类型转换详解
currentTarget始终是监听事件者,而target是事件的真正发出者。
load 与 DOMContentLoaded
DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。
意思是HTML下载、解析完毕之后就触发。
load
load 应该仅用于检测一个完全加载的页面 当一个资源及其依赖资源已完成加载时,将触发load事件。
意思是页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。
跨域的几种解决方式。
...
后端如何设置cors?
app.use('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*'); //这个表示任意域名都可以访问,这样写不能携带cookie了。
//res.header('Access-Control-Allow-Origin', 'http://www.baidu.com'); //这样写,只有www.baidu.com 可以访问。
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');//设置方法
if (req.method == 'OPTIONS') {
res.send(200); // 意思是,在正常的请求之前,会发送一个验证,是否可以请求。
}
else {
next();
}
});
首先,async
函数返回的是⼀个Promise
对象;
然后,async
函数内部 return
返回的值。会成为 then
方法回调函数的参数; 如果 async
函数内部抛出异常,则会导致返回的 Promise
对象状态变为 reject
状态。抛出的错误而会被 catch
方法回调函数接收到。
async
函数返回的 Promise
对象,必须等到内部所有的 await
命令的 Promise
对象执行完,才会发生状态改变.
正常情况下,await
命令后面跟着的是 Promise
,如果不是的话,也会被转换成一个 立即 resolve
的 Promise
.
首先,采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
其次,容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
最后,项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
容器属性,指定容器内元素的排列、对齐方式
项目属性,指定元素本身的排列、对齐方式
1. Flex 布局教程:语法篇
2. Flex 布局教程:实例篇
float: left; /* 表明元素必须浮动在其所在的块容器左侧。*/
float: right; /*表明元素必须浮动在其所在的块容器右侧*/
float: none; /*表明元素不进行浮动*/
float: inline-start; /*表明元素必须浮动在其所在块容器的开始一侧,在ltr脚本中是左侧,在rtl脚本中是右侧。*/
float: inline-end; /*表明元素必须浮动在其所在块容器的结束一侧,在ltr脚本中是右侧,在rtl脚本中是左侧。*/
当一个元素浮动之后,它会被移出正常的文档流,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。
也就是说,right 会挨着 left,而不是重叠。
<div class="left" style="float:left;background-color:#000;width:100px;height:110px"></div>
<div class="right" style="float:left;background-color:#ccc;width:110px;height:100px"></div>
这种情况与 position:absolute
正好相反
<div class="left" style="position:absolute;background-color:#000;width:100px;height:110px"></div>
<div class="right" style="position:absolute;background-color:#ccc;width:110px;height:100px"></div>
这时候,right 会覆盖在 left 上面。
但是,有时可能需要强制一个浮动元素移至任何浮动元素下方,那么使用clear: both;
:
position是一种描述物体相对位置的艺术,它的核心是「参考坐标系」的选择
值 | 描述 |
---|---|
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
sticky | 元素根据正常文档流进行定位,然后相对它的最近滚动祖先和最近块级祖先,包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。 |
1. MDN - position
2. 前端重构范式之 position
.outer1 .left {
width: 200px;
float: left;
}
.outer1 .right {
width: auto;
margin-left: 200px;
}
<div class="outer outer1">
<div class="left">1-left</div>
<div class="right">1-right</div>
</div>
.outer2 {
display: flex;
}
.outer2 .left {
flex: 0 0 200px; /* flex-grow: 0;flex-shrink:0; flex-basis:200px; */
}
.outer2 .right {
flex: auto;
}
<div class="outer outer2">
<div class="left">2-left</div>
<div class="right">2-right</div>
</div>
.outer3 {
position: relative;
}
.outer3 .left {
position: absolute;
width: 200px;
}
.outer3 .right {
margin-left: 200px;
}
<div class="outer outer3">
<div class="left">3-left</div>
<div class="right">3-right</div>
</div>
.outer1 {
position: relative;
}
.outer1 .left {
position: absolute;
width: 100px;
}
.outer1 .middle {
margin: 0 200px 0 100px;
}
.outer1 .right {
position: absolute;
width: 200px;
top: 0;
right: 0;
}
/*注意:左右分别使用绝对定位,中间设置外边距*/
<div class="outer outer1">
<div class="left">1-left</div>
<div class="middle">1-middle</div>
<div class="right">1-right</div>
</div>
.outer2 {
display: flex;
}
.outer2 .left {
flex: 0 0 100px;
}
.outer2 .middle {
flex: auto;
}
.outer2 .right {
flex: 0 0 200px;
}
<div class="outer outer2">
<div class="left">2-left</div>
<div class="middle">2-middle</div>
<div class="right">2-right</div>
</div>
.outer3 .left{
float: left;
width: 100px;
}
.outer3 .right {
float: right;
width: 200px;
}
.outer3 .middle {
margin: 0 200px 0 100px;
}
<div class="outer outer3">
<div class="left">3-left</div>
<div class="right">3-right</div>
<div class="middle">3-middle</div>
</div>
<style>
*{
box-sizing:content-box;/* 伸缩项目自动box-sizing:border-box,所以需调整为content-box */
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;/* 头、中部、脚纵向显示 */
}
header,footer{
flex:0 0 50px;/* 头、脚尺寸固定,不放大、不缩小 */
background:#3f3f3f;
}
.main{
display:flex;
/*
flex:1 == 1 1 auto:剩余空间放大比例(flex-grow) 空间不足缩小比例(flex-shrink) 分配多余空间之前项目占据的主轴空间(flex-basis)
flex:1指的是:中部区域自由伸缩
auto指的是项目本来大小,因未给main设置高度,main高度由子元素最高者决定,若子元素高度为0,则main高度为0
块级元素未主动设置高度或未被子元素撑起高度,浏览器默认为块级元素分配高度为0。
*/
flex:1;
}
.content{
background:red;
height:1000px;
/*
横向中间内容区自适应,即使未指定宽度,但会分配宽度
块级元素未主动设置宽度或未被子元素撑起宽度,浏览器默认为块级元素分配宽度为可使用的全部宽度,比如全屏宽。
*/
flex:1;
}
.left,.right{
height:800px; /*不设置高度,则自动撑满整个高度*/
background:blue;
flex:0 0 100px;/* 左右两列固定宽 */
}
.left{
order:-1;/* 让left居于左侧 */
}
</style>
<html>
<body>
<header></header>
<div class="main">
<div class="content">中间栏要在放在文档流前面以优先渲染。</div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</body>
</html>
.box {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -25px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover 来描述这个元素的状态。虽然它和普通的 css 类相似,可以为已有的元素添加样式,但是它只有处于 dom 树无法描述的状态下才能为元素添加样式,所以将其称为伪类,伪类的操作对象是文档树中已有的元素。
li:first-child {}
p:first-letter {}
a:hover {}
伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before(或::before,CSS3标准) 来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。
分为强缓存和协商缓存:
1)浏览器在加载资源时,先根据这个资源的一些http header(expries和cache-control)判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器;
no-cache
在发布缓存副本之前,强制要求缓存把请求提交给原始服务器进行验证(协商缓存验证)。
no-store
缓存不应存储有关客户端请求或服务器响应的任何内容,即不使用任何缓存。
2)当强缓存没有命中的时候,浏览器一定会发送一个请求到服务器,通过服务器端依据资源的另外一些http header(last-modified和etag)验证这个资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回,但是不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,于是浏览器就又会从自己的缓存中去加载这个资源;
3)强缓存与协商缓存的共同点是:如果命中,都是从客户端缓存中加载资源,而不是从服务器加载资源数据;区别是:强缓存不发请求到服务器,协商缓存会发请求到服务器。
4)当协商缓存也没有命中的时候,浏览器直接从服务器加载资源数据。
(精辟)流云诸葛 - 浏览器缓存知识小结及应用
彻底理解浏览器的缓存机制
首先讲HTTP的缺点:
https的出现就是为了解决这三个问题:
https = 加密 + 认证 + 完整性保护
掘金 - HTTP和HTTPS详解
掘金 - 看完这篇 HTTPS,和面试官扯皮就没问题了
每个tcp连接只能发送一个请求,下一个请求发送需要重新建立tcp连接,性能很差
针对http1.0的问题,http1.1做了很大的优化
http1.1默认connection:keep-alive,一个tcp连接可以持续传输请求。
因为http1.1支持长连接,发送一个请求之后还可以发送第二个请求,如果第二个请求要等待第一个请求返回之后才发送,效率就很低,所以引入了管道机制,多个请求可以按顺序同时发送,响应按顺序返回
因为一个tcp可以同时发送多个请求,我们需要一个字段来区分多个请求,Content-length表示当前请求响应共有多少字段,超过这个值的响应就不是该请求的响应
因为http1.1是按顺序发送请求和响应,如果一个顺序靠前的请求响应时间较长,会阻碍后面请求的响应,造成很大的延迟,这就是线头阻塞。故http1.1支持分块传输:Transfer-Encoding: chunked,每个响应头前都有一个16进制数字表示该块儿大小,如果为0表示本次分块数据传输完成
新增PUT、PATCH、HEAD、 OPTIONS、DELETE请求方法
客户端请求头新增Host字段,有了Host字段,就可以将请求发往同一台服务器上的不同网站,为虚拟主机的兴起打下了基础。
主要还是线头阻塞问题,为了避免这个问题,只有两种方法:一是减少请求数,二是同时多开持久连接。这导致了很多的网页优化技巧,比如合并脚本和样式表、将图片嵌入CSS代码、域名分片(domain sharding)等等。如果HTTP协议设计得更好一些,这些额外的工作是可以避免的。
http2.0是基于SPDY的,两者没有太大的区别,主要是header压缩方式以及http2.0支持明文传输。
对比http1.1,主要区别有以下几个
多路复用可能会带来一个新的问题,多个请求并发可能导致关键请求被阻塞,故http2.0支持request设置优先级
header中的一些信息是重复的,采用合适的压缩算法减少请求大小
正常文档流请求style.css后服务端会主动推送script.js到客户端,服务端请求的时候直接从缓存读取
浏览器的本地存储主要分为Cookie、localStorage、sessionStorage 和 IndexedDB。
Cookie 本质上就是浏览器里面存储的一个很小的文本文件,向同一个域名下发送请求,都会携带相同的 Cookie,服务器拿到 Cookie 进行解析,便能拿到客户端的状态。
cookie 就是用来做状态存储的,但是也有缺陷:
localStorage有一点跟Cookie一样,在同一个域名下,会存储相同的一段localStorage。
相对Cookie的区别:
应用场景:
与localStorage基本相同。
但sessionStorage和localStorage有一个本质的区别,那就是前者只是会话级别的存储,并不是持久化存储。会话结束,也就是页面关闭,这部分sessionStorage就不复存在了。
应用场景:
IndexedDB是运行在浏览器中的非关系型数据库, 本质上是数据库,理论上容量是没有上限的。
重要特性:
浏览器灵魂之问 - 能不能说一说浏览器的本地存储?各自优劣如何?
简单的说,就是在保证只有一个 HTML 页面,且与用户交互时不刷新和跳转页面的同时,为 SPA 中的每个视图展示形式匹配一个特殊的 url。在刷新、前进、后退和SEO时均通过这个特殊的 url 来实现。
为实现这一目标,我们需要做到以下 2 点:
接下来要介绍的 hash 模式和 history 模式,就是实现了上面的功能.
这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 "www.baidu.com/#hashhash" ,其中 "#hashhash" 就是我们期望的 hash 值。
由于 hash 值的变化不会导致浏览器向服务器发送请求,而且 hash 的改变会触发 hashchange 事件,浏览器的前进后退也能对其进行控制,所以在 H5 的 history 模式出现之前,基本都是使用 hash 模式来实现前端路由。
在 HTML5 之前,浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转:
history.go(-1); // 后退一页
history.go(2); // 前进两页
history.forward(); // 前进一页
history.back(); // 后退一页
在 HTML5 的规范中,history 新增了以下几个 API:
history.pushState(); // 添加新的状态到历史状态栈
history.replaceState(); // 用新的状态代替当前状态
history.state // 返回当前状态对象
sql 注入
要理解sql注入的场景,它的原理是什么,当前的数据库的解决方案是什么?
xss 攻击
分为 DOM xss、反射型xss、存储型 xss
常见的攻击场景,什么类型的网站容易被xss攻击,整个流程的原理是什么?
恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,其他用户看到这个包括恶意脚本的页面并执行,获取用户的cookie等敏感信息,从而达到恶意攻击用户的目的。
预防措施:防止下发界面显示html标签,把</>等符号转义 。
csrf 攻击
其实就是一个钓鱼网站,要理解为什么会收到攻击,应该采取什么策略进行防御。
CSRF通过伪装来自受信任用户的请求来利用受信任的网站。用户C首先登录受信任网站A,并在本地生成Cookie。在不登出A的情况下,访问危险网站B。B要求访问站点A,浏览器会自动带上用户C的cookie,并且A站点也分辨不清好坏,B就可以冒充受信任用户C来进行操作。
预防措施:请求中加入随机数,让钓鱼网站无法正常伪造请求。
cookie 安全
要理解为什么用token,优势等
密码安全
主要是用户登陆,用户数据提交,加密,存入数据库的一整个流程
https
https解决了什么问题
1. 前端安全知识
2. 前端安全系列(二):如何防止CSRF攻击?
记住一个公式:UI = f(state)
React 的声明式编程,抛弃了直接操作DOM的方式,只关注数据变动,引入virtual-dom,使得DOM操作由框架完成,提升了可读性可维护性。遵循从高阶组件到低阶组件的单向数据流。
componentDidMount 中通常都做些什么操作?
如果要从另一个角度看的话:
假设在es5要实现继承,首先定义一个父类:
//父类
function sup(name) {
this.name = name;
}
//定义父类原型上的方法
sup.prototype.printName = function (){
console.log(this.name);
}
再定义他sup的子类,继承sup的属性和方法:
function sub(name, age){
sup.call(this,name); //调用call方法,继承sup超类属性
this.age = age;
}
sub.prototype = new sup(); //把子类sub的原型对象指向父类的实例化对象,这样即可以继承父类sup原型对象上的属性和方法
sub.prototype.constructor = sub; //这时会有个问题子类的constructor属性会指向sup,手动把constructor属性指向子类sub
//这时就可以在父类的基础上添加属性和方法了
sub.prototype.printAge = function (){
console.log(this.age);
}
这时调用父类生成一个实例化对象:
let jack = new sub('feihao', 18);
jack.printName() ; //输出 : feihao
jack.printAge(); //输出 : 18
这就是es5中实现继承的方法。
而在es6中实现继承:
class sup {
constructor(name) {
this.name = name
}
printName() {
console.log(this.name)
}
}
class sub extends sup{
constructor(name,age) {
super(name) // super代表的事父类的构造函数
this.age = age
}
printAge() {
console.log(this.age)
}
}
let jack = new sub('feihao', 18)
jack.printName() //输出 : feihao
jack.printAge() //输出 : 18
背景:
react在进行组件渲染时,从setState开始到渲染完成整个过程是「一气呵成」的。如果需要渲染的组件比较复杂,js执行会占据主线程时间较长,会导致页面响应速度变差,使得react在动画、手势等应用中效果比较差。
原因:
在setState后,react会立即开始reconciliation过程,从父节点(Virtual DOM)开始遍历,以找出不同。将所有的Virtual DOM遍历完成后,reconciler才能给出当前需要修改真实DOM的信息,并传递给renderer,进行渲染,然后屏幕上才会显示此次更新内容。对于特别庞大的vDOM树来说,reconciliation过程会很长,在这期间,主线程是被js占用的,因此任何交互、布局、渲染都会停止,给用户的感觉就是页面被卡住了。
解决:
fiber的机制是每次只做一个很小的任务,做完后能够“喘口气儿”,回到主线程看下有没有什么更高优先级的任务需要处理,如果有则先处理更高优先级的任务,没有则继续执行。
对于如何区别优先级,React 有自己的一套逻辑。比如对于动画这种实时性很高的东西,也就是 16 ms 必须渲染一次保证不卡顿的情况下,React 会每 16 ms(以内) 暂停一下更新,返回来继续渲染动画。
render 函数并不做实际的渲染动作,它只是返回一个JSX描述的结构,最终由React来操作渲染过程。(render函数并不往DOM树上渲染或者装载内容,它只是返回一个JSX表示的对象,然后由React库来根据返回对象决定如何渲染。而React库肯定是要把所有组件返回的结果综合起来,才能知道该如何产生对应的DOM修改。)
render函数还可以返回 字符串 / 数组
场景:组件内有两种状态,对应渲染不同的元素
1.性能!!让你的 React 组件跑得再快一点 - 政采云前端团队
2. React优化:竭尽全力的减少render渲染
setState 三种用法:
setState({key: value})
this.setState((prevState) => ({ count: prevState.count + 1 }))
setState(partialState, callback)
setState 同步/异步 如何表现:
答题思路:
传统DOM的劣势 --> react diff --> vdom的出现解决什么问题 --> vdom的优势
传统前端编程方式是命令式的,直接操作DOM,代码可读性差可维护性低;
react的声明式编程,抛弃了直接操作DOM,只关注数据变动,DOM操作由框架完成,提升了可读性可维护性;
最初react在更新的过程中会刷新整个页面,后来引入的diff过程,对比数据变动前后的DOM结构,但DOM结构diff起来太复杂,由此引出了vdom;
VDOM 和 Diff 算法的出现是为了解决由命令式编程转变为声明式编程、数据驱动后所带来的性能问题的。换句话说,直接操作 DOM 的性能并不会低于虚拟 DOM 和 Diff 算法,甚至还会优于。
这么说的原因是因为 Diff 算法的比较过程,比较是为了找出不同从而有的放矢地更新页面。但是比较也是要消耗性能的。而直接操作 DOM 就是有的放矢,我们知道该更新什么不该更新什么,所以不需要有比较的过程。所以直接操作 DOM 效率可能更高。
React 厉害的地方并不是说它比 DOM 快,而是说不管你数据怎么变化,我都可以以最小的代价来进行更新 DOM。 方法就是我在内存里面用新的数据刷新一个虚拟 DOM 树,然后新旧 VDOM 进行比较,找出差异,再更新到 DOM 树上。
虚拟DOM的作用:
虚拟DOM的缺点:
首次渲染大量 DOM 时,由于多了一层虚拟 DOM 的计算,会比 innerHTML 插入慢。
虚拟 DOM 需要在内存中维护一份 DOM 的副本(跟上面一条其实也差不多,上面一条是从速度上,这条是从空间上)。
如果虚拟 DOM 大量更改,这是合适的。但是单一频繁地更新的话,虚拟 DOM 将会花费更多的时间处理计算的工作。所以,如果你有一个 DOM 节点相对较少页面,用虚拟 DOM,它实际上有可能会更慢。但对于大多数单页面应用,这应该都会更快。
把这篇文章看完 - 从 React 历史的长河里聊虚拟 DOM 及其价值
Virtual Dom 的优势在哪里?
对于开发项目中不经常会变更的静态依赖文件。类似于我们的elementUi、vue全家桶等等。因为很少会变更,所以我们不希望这些依赖要被集成到每一次的构建逻辑中去。 这样做的好处是每次更改我本地代码的文件的时候,webpack只需要打包我项目本身的文件代码,而不会再去编译第三方库。以后只要我们不升级第三方包的时候,那么webpack就不会对这些库去打包,这样可以快速的提高打包的速度。
这里我们使用webpack内置的DllPlugin
DllReferencePlugin
进行抽离.
具体步骤:
①. 在与webpack配置文件同级目录下新建webpack.dll.config.js
②. 在package.json中配置dll命令
③. 接下来在我们的webpack.config.js中增加配置代码
④. 执行 npm run dll
⑤. 会发现生成了我们需要的集合第三方代码的vendor.dll.js 我们需要在html文件中手动引入这个js文件
⑥. 这样如果我们没有更新第三方依赖包,就不必npm run dll。直接执行npm run dev npm run build的时候会发现我们的打包速度明显有所提升。因为我们已经通过dllPlugin将第三方依赖包抽离出来了。
基于策略一,React 对树的算法进行了简洁明了的优化,即对树进行分层比较,两棵树只会对同一层次的节点进行比较。
即同一个父节点下的所有子节点。当发现节点已经不存在,则该节点及其子节点会被完全删除掉,不会用于进一步的比较。这样只需要对树进行一次遍历,便能完成整个 DOM 树的比较。
React 是基于组件构建应用的,对于组件间的比较所采取的策略也是简洁高效。
Tree-Shaking能帮助我们删除掉没有使用的代码,将会大大缩减打包后的代码量。
这里有个坑。tree-shaking的主要作用是用来清除代码中无用的部分。目前在webpack4 我们设置mode为production的时候已经自动开启了tree-shaking。 但是要想使其生效,生成的代码必须是ES6模块。不能使用其它类型的模块如CommonJS之流。 如果使用Babel的话,这里有一个小问题,因为Babel的预案(preset)默认会将任何模块类型都转译成CommonJS类型,这样会导致tree-shaking失效。修正这个问题也很简单,在.babelrc文件或在webpack.config.js文件中设置modules: false就好了
[ id ]
– 返回块ID。[ path ]
– 返回文件路径。[ name ]
– 返回文件名称。[ ext ]
– 返回扩展名。[ hash ]
– 返回构建Hash。如果构建任何部分发生更改,则也会发生更改。[ chunkhash ]
– 返回条目块特定的hash。在配置中定义的每个entry都会收到自己的hash。如果entry的任何部分发生变化,那么hash也会发生改变。[chunkhash]比[hash]定义更细。[ contenthash ]
– 返回特定于内容的hash。[contenthash]只适用于ExtractTextPlugin,是可用的、最具体的选项。三种类型:alert、confirm、modal
样式是否支持自定义
前端的规模越来越大,已经上升到了工程学的问题,如何提高前端工程师的开发效率变得非常重要。这就是前端工程化所要解决的问题。前端工程化是根据业务特点,将前端开发流程规范化,标准化,它包括了开发流程,技术选型,代码规范,构建发布等,用于提升前端工程师的开发效率和代码质量。
一个符合前端工程化要求的方案应该包含以下要素:
设置某个元素width=100px,border=1px, padding=5px, 在content-box 和 border-box 下分别是多宽
cookie、localStorage、sessionStorage异同
对session的理解
打开同一域名的两个窗口,关闭其中一个,sessionstorage还存在吗
for (var i = 0; i < 6; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}
输出结果,以及如何每隔1s输出一个数字
给定形如 ['w','w','w','.','t','o','u','t','i','a','o','.','c','o','m']的 字符数组,将其转换成 ['c','o','m','.','t','o','u','t','i','a','o','.','w','w','w'] 的形式,要求必须原地操作 空间复杂度O(1)
一面
function func1(){
func2 = ()=>{
func3 = () => {
console.log(this)
}
func3()
}
func2()
}
func1()
二面(基础技术部)
2.深度拷贝,实现深度拷贝的时候有什么坑需要注意,使用递归的话如果是函数怎办,直接赋值吗?如果某个对象一直引用自身怎么办?
3.判断变量类型的方式,instanceof的原理,获取原型的方法是什么
4. 下段代码的执行机制
function f1(){
console.time('time span')
}
function f2(){
console.timeEnd('time span')
}
setTimeout(f1,100);
setTimeout(f2,200);
function waitForMs(n){
var now = Date.now();
while(Date.now() - now < n){
}
}
waitForMs(500)
//输出:time span: 0.075927734375ms
setTimeout的执行机制,不是直接推入宏任务,而是先放到web api中去计时,时间到了再放进宏任务,所以阻塞500ms之后,f1 f2 都进宏任务队列了,随后几乎一起执行
14.setState的原理,什么时候同步什么时候异步?钩子函数有哪些?setState写在一个循环里不停的执行setState,页面会有更新吗
15.usestate怎么用,返回属性和设置属性的函数,为什么这个属性的值可以被再次修改
const [count, setCount] = useState(0); //const修饰, 为什么count再执行setCount之后能被修改
redux
2.在项目中你是如何使用的,讲一下整个过程
用redux之后state是如何更新的?组件是如何拿到state的?state是怎么做到全局共享的?
store可以有多个吗?如果一个项目比较复杂,维护的state太多,有什么优化手段?store可以拆分吗?如何拆分?
connect的作用是什么,怎么连接react和redux的,内部是怎么实现的
6 如果有异步请求,请求发出去之后结果延迟到达,这种情况下state是如何更新的
mobx
node
[TOC]
// 非立即执行版本
function debounce(fn, wait){
let timer = null;
return function(){
const context = this;
const args = arguments;
if(timer){
clearTimeout(timer);
}
timer = setTimeout(()=>{
fn.apply(context, args);
timer = null;
}, wait);
}
}
timer=null 起不到终止计时器的作用,只是给timer变量赋了值
// 立即执行版本
function debounce(fn, wait){
let timer = null;
return function(){
const context = this;
const args = arguments;
if(!timer){
fn.apply(context, args);
}
if(timer){
clearTimeout(timer);
}
timer = setTimeout(()=>{
timer = null;
}, wait);
}
}
节流:wait时间内,函数只执行一次,分为定时器版和时间戳版
// 时间戳版
function throttle(fn, wait){
let prev = Date.now();
return function(){
const context = this;
const args = arguments;
let now = Date.now();
if(now - prev > wait){
fn.apply(context, args);
prev = Date.now();
}
}
}
// 定时器版
function throttle(fn, wait){
let timer = null;
return function(){
const context = this;
const args = arguments;
if(!timer){
timer = setTimeout(()=>{
fn.apply(context, args);
timer = null;
}, wait)
}
}
}
Function.prototype.myCall = function(context){
const context = context || window;
// 给context添加一个属性
// 如 getValue.call(a,'zfh',18) => a.fn = getValue
context.fn = this;
// 将参数取出
const args = [...arguments].slice(1);
const result = context.fn(...args);
// 删除fn
delete context.fn;
return result;
}
Function.prototype.myApply = function(context){
const context = context || window;
context.fn = this;
let result;
// 需要判断是否存在第二个参数
// 如果存在则将第二个参数展开
if(arguments[1]){
result = context.fn(...arguments[1]);
}else{
result = context.fn();
}
delete context.fn;
return result;
}
Function.prototype.myBind = function(context){
let args = [].slice.call(arguments, 1);
const context = context;
const fn = this;
let fbound = function(){
const newArgs = args.concat([].slice.call(arguments));
return fn.apply(this instanceof fn ? this : context, newArgs)
};
function Constructor(){};
Constructor.prototype = fn.prototype;
fbound.prototype = new Constructor();
return fbound;
}
function create(){
// 创建一个新对象
let obj = new Object();
// 获得构造函数
let Con = [].shift.call(arguments);
// 链接到原型
obj.__proto__ = Con.prototype;
// 绑定this,执行构造函数
let result = Con.apply(obj, arguments);
// 确保new出来的是个对象
return typeof result === 'object' ? result : obj;
}
// 实现一下 instanceof
function instanceof(left, right) {
// 获得类型的原型
let prototype = right.prototype
// 获得对象的原型
left = left.__proto__
// 判断对象的类型是否等于类型的原型
while (true) {
if (left === null)
return false
if (prototype === left)
return true
left = left.__proto__
}
}
二叉树遍历
使用JavaScript完成二叉树的一些基本操作
BAT前端经典面试问题:史上最最最详细的手写Promise教程
闭包面试题两道
题2的另一种解法:
function repeat(func, times, wait){
return function(){
var args = Array.from(arguments);
for(let i = 0; i < times; i++){
setTimeout(func, wait * i, ...args);
}
}
}
解决循环引用的问题,使用一个set记录遍历过的值,每次拷贝前查出Set中存在这个值,就直接返回。
JavaScript中的浅拷贝和深拷贝
面试官:请你实现一个深克隆
// 方法 1
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
var result = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (Array.isArray(arr[i])) {
result = result.concat(flatten(arr[i]))
}
else {
result.push(arr[i])
}
}
return result;
}
// 方法2
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
return arr.toString().split(',').map(function(item){
return +item // +会使字符串发生类型转换
})
}
// 方法3
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
return arr.reduce(function(prev, next){
return prev.concat(Array.isArray(next) ? flatten(next) : next)
}, [])
}
// 方法4
function flatten(arr){
arr.flatMap(item=>Array.isArray(item)?item.flat():item);
return arr;
}
从一道面试题认识函数柯里化
前端进击的巨人(五):学会函数柯里化(curry)
Array.prototype.fakeMap = function(fn,context) {
let arr = this;
let temp = [];
for(let i=0;i<arr.length;i++){
let result = fn.call(context,arr[i],i,arr);
temp.push(result);
}
return temp;
}
Array.prototype.fakeReduce = function fakeReduce(fn, base) {
if (typeof fn !== "function") {
throw new TypeError("arguments[0] is not a function");
}
let initialArr = this;
let arr = initialArr.concat();
if (base) arr.unshift(base);
let index, newValue;
while (arr.length > 1) {
index = initialArr.length - arr.length + 1;
newValue = fn.call(null, arr[0], arr[1], index, initialArr);
arr.splice(0, 2, newValue); // 直接用 splice 实现替换
}
return newValue;
};
// 精简版
Array.prototype.reduce = function(cb, init){
let arr = this;
if(init){
arr.unshift(init);
}
while(arr.length > 1){
let args = arr.splice(0, 2);
let res = cb.apply(this, args);
arr.unshift(res);
}
return arr[0]
}
循序渐进教你实现一个完整的node的EventEmitter模块
EventEmitter 源码分析与简易实现
.outer1 .left {
width: 200px;
float: left;
}
.outer1 .right {
width: auto;
margin-left: 200px;
}
<div class="outer outer1">
<div class="left">1-left</div>
<div class="right">1-right</div>
</div>
.outer2 {
display: flex;
}
.outer2 .left {
flex: 0 0 200px; /* flex-grow: 0;flex-shrink:0; flex-basis:200px; */
}
.outer2 .right {
flex: auto;
}
<div class="outer outer2">
<div class="left">2-left</div>
<div class="right">2-right</div>
</div>
.outer3 {
position: relative;
}
.outer3 .left {
position: absolute;
width: 200px;
}
.outer3 .right {
margin-left: 200px;
}
<div class="outer outer3">
<div class="left">3-left</div>
<div class="right">3-right</div>
</div>
.outer1 {
position: relative;
}
.outer1 .left {
position: absolute;
width: 100px;
}
.outer1 .middle {
margin: 0 200px 0 100px;
}
.outer1 .right {
position: absolute;
width: 200px;
top: 0;
right: 0;
}
/*注意:左右分别使用绝对定位,中间设置外边距*/
<div class="outer outer1">
<div class="left">1-left</div>
<div class="middle">1-middle</div>
<div class="right">1-right</div>
</div>
.outer2 {
display: flex;
}
.outer2 .left {
flex: 0 0 100px;
}
.outer2 .middle {
flex: auto;
}
.outer2 .right {
flex: 0 0 200px;
}
<div class="outer outer2">
<div class="left">2-left</div>
<div class="middle">2-middle</div>
<div class="right">2-right</div>
</div>
.outer3 .left{
float: left;
width: 100px;
}
.outer3 .right {
float: right;
width: 200px;
}
.outer3 .middle {
margin: 0 200px 0 100px;
}
<div class="outer outer3">
<div class="left">3-left</div>
<div class="right">3-right</div>
<div class="middle">3-middle</div>
</div>
<style>
*{
box-sizing:content-box;/* 伸缩项目自动box-sizing:border-box,所以需调整为content-box */
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;/* 头、中部、脚纵向显示 */
}
header,footer{
flex:0 0 50px;/* 头、脚尺寸固定,不放大、不缩小 */
background:#3f3f3f;
}
.main{
display:flex;
/*
flex:1 == 1 1 auto:剩余空间放大比例(flex-grow) 空间不足缩小比例(flex-shrink) 分配多余空间之前项目占据的主轴空间(flex-basis)
flex:1指的是:中部区域自由伸缩
auto指的是项目本来大小,因未给main设置高度,main高度由子元素最高者决定,若子元素高度为0,则main高度为0
块级元素未主动设置高度或未被子元素撑起高度,浏览器默认为块级元素分配高度为0。
*/
flex:1;
}
.content{
background:red;
height:1000px;
/*
横向中间内容区自适应,即使未指定宽度,但会分配宽度
块级元素未主动设置宽度或未被子元素撑起宽度,浏览器默认为块级元素分配宽度为可使用的全部宽度,比如全屏宽。
*/
flex:1;
}
.left,.right{
height:800px; /*不设置高度,则自动撑满整个高度*/
background:blue;
flex:0 0 100px;/* 左右两列固定宽 */
}
.left{
order:-1;/* 让left居于左侧 */
}
</style>
<html>
<body>
<header></header>
<div class="main">
<div class="content">中间栏要在放在文档流前面以优先渲染。</div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</body>
</html>
其实就是左右两侧定宽,中间自适应的三列布局,跟圣杯差不多
.box {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -25px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
console.log('1');
setTimeout(function() {
console.log('2');
new Promise(function(resolve) {
console.log('3');
resolve();
}).then(function() {
console.log('4')
})
})
new Promise(function(resolve) {
console.log('5');
resolve();
}).then(function() {
console.log('6')
})
console.log('7')
setTimeout(function() {
console.log('8');
new Promise(function(resolve) {
console.log('9');
resolve();
}).then(function() {
console.log('10')
})
})
写一个useEffect,只在componentDidMount 执行
如何diff一个react组件
render函数的作用
diff有什么问题
讲解fiber
tree shaking 机制
tree shaking 存在的问题
css也有tree shaking,是用什么插件做的
webpack从1.0 到 4.0,做了什么优化
// 从扑克牌中随机抽 5 张牌,判断是不是一个顺子,即这 5 张牌是不是连续的。
//2 ~ 10 为数字本身,A 为 1,J 为 11,Q 为 12,K 为 13,而大、小王可以看成任意数字。
/**
*
* @param {Array} numbers
*/
function isContinuous(numbers) {
}
/**
* 测试代码
*/
console.log(isContinuous([3, 8, 0, 0, 1])); // false
console.log(isContinuous([8, 10, 0, 6, 0])); // true
猿辅导一面
说一下最近做的项目
css优先级。
js单线程(event loop)
let var const的区别
实现Person,new方法的实现。
const p1 = new Person('zhang'); {name: 'zhang'} p1.hello(); zhang节流和防抖。防抖的实现。
Promise.all([]).then()的实现,要求all按顺序返回所有的结果,一旦有一个错误就直接reject
多叉树给出根节点和层级,找到那一层的宽度
猿辅导2面
this指向问题
var a = {
f1: () => console.log(this),
f2: function() {
console.log(this)
}
}
a.f1();
a.f2();var f3 = a.f2;
f3()var b = new a.f1();
this分别都是什么
Set和Map
Promise相关问题,很深入。
cookies问题,包括跨站cookies
csrf问题
- imageUrls = ['url1', 'url2', 'url3', 'url4', url5', 'url6', 'url7'];
- function fetchImage(url): Promise {}
- loadImages limit = 3
function downloadImagesWithLimit(imageUrls, limit);// 实现每次同时下载的图片不超过 limit
// 同时又要满足尽快下载完这批图片
this.setState({ a: 1 })
this.setState({ b: 1 })
this.setState({ a: 2 })
// state最终的结果是什么,render几次
前端性能监控都有哪些手段
性能监控收集到的数据如何处理
redux原理
高阶组件是什么,作用是什么,业务场景
说一下你对构建工具的理解
webpack打包的原理和流程
webpack除了常见的plugin,你还用过哪些比较好用的,印象深刻的plugin
异步请求,失败后重试,最多limit次,全部失败输出最后一次的错误,用promise实现
redux 异步数据流
reduxthunk
react是如何管理状态的,有几种方式让状态共享
有一个数组,给定一个数,找出数组中和为这个数的倆元素,
arr = [2, 1, 2, 1, 3, 0, 4, 1, 3,...] target = 4
输出[
[2,2],
[1,3], // [3,1] 被认为是重复的 要剔除
[0,4]
]
要求复杂度小于o(n^2),不允许出现重复的元素,不允许出现原数组中没有的元素
cache-control有几个值
redux-thunk
applyMiddleWare
写过loader吗
babel-preset 和 插件的执行顺序
对babel-preset-env的了解
对runtimemanifest的了解
项目中如何配置polyfill
脉脉
你的项目经验
你在工作里主要解决的问题
webpack优化
移动端高清适配
rn原理
nodejs原理
打包发布流程(发布自动化)
埋点监控与报警
前端攻击解决方案
node端路由搭建与跨域转发
antd按需加载实现
滴滴
大量的原理,记不住了。。。
一面
二面
[TOC]
Compiler
对象,加载所有配置的插件,执行对象的 run
方法开始执行编译entry
找出所有的入口文件Loader
对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理Loader
翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系Chunk
,再把每个 Chunk
转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会简化版:
初始化:启动构建,读取与合并配置参数,加载 Plugin,实例化 Compiler
编译:从 Entry 出发,针对每个 Module 串行调用对应的 Loader 去翻译文件的内容,再找到该 Module 依赖的 Module,递归地进行编译处理
输出:将编译后的 Module 组合成 Chunk,将 Chunk 转换成文件,输出到文件系统中
Webpack 的热更新又称热替换(Hot Module Replacement),缩写为 HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
HMR的核心就是客户端从服务端拉去更新后的文件,准确的说是 chunk diff (chunk 需要更新的部分),实际上 WDS 与浏览器之间维护了一个 Websocket,当本地资源发生变化时,WDS 会向浏览器推送更新,并带上构建时的 hash,让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容(文件列表、hash),这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该chunk的增量更新。
后续的部分(拿到增量更新之后如何处理?哪些状态该保留?哪些又需要更新?)由 HotModulePlugin 来完成,提供了相关 API 以供开发者针对自身场景进行处理,像react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。
使用高版本
的 Webpack 和 Node.js
多进程/多实例
构建:HappyPack(不维护了)、thread-loader
压缩代码
图片压缩
缩小打包作用域
提取页面公共资源
DLL
充分利用缓存提升二次构建速度
Tree shaking
Scope hoisting
动态Polyfill
「吐血整理」再来一打Webpack面试题
掘金 - webpack面试题
2020年了,再不会webpack敲得代码就不香了
.outer1 .left {
width: 200px;
float: left;
}
.outer1 .right {
width: auto;
margin-left: 200px;
}
<div class="outer outer1">
<div class="left">1-left</div>
<div class="right">1-right</div>
</div>
.outer2 {
display: flex;
}
.outer2 .left {
flex: 0 0 200px; /* flex-grow: 0;flex-shrink:0; flex-basis:200px; */
}
.outer2 .right {
flex: auto;
}
<div class="outer outer2">
<div class="left">2-left</div>
<div class="right">2-right</div>
</div>
.outer3 {
position: relative;
}
.outer3 .left {
position: absolute;
width: 200px;
}
.outer3 .right {
margin-left: 200px;
}
<div class="outer outer3">
<div class="left">3-left</div>
<div class="right">3-right</div>
</div>
.outer1 {
position: relative;
}
.outer1 .left {
position: absolute;
width: 100px;
}
.outer1 .middle {
margin: 0 200px 0 100px;
}
.outer1 .right {
position: absolute;
width: 200px;
top: 0;
right: 0;
}
/*注意:左右分别使用绝对定位,中间设置外边距*/
<div class="outer outer1">
<div class="left">1-left</div>
<div class="middle">1-middle</div>
<div class="right">1-right</div>
</div>
.outer2 {
display: flex;
}
.outer2 .left {
flex: 0 0 100px;
}
.outer2 .middle {
flex: auto;
}
.outer2 .right {
flex: 0 0 200px;
}
<div class="outer outer2">
<div class="left">2-left</div>
<div class="middle">2-middle</div>
<div class="right">2-right</div>
</div>
.outer3 .left{
float: left;
width: 100px;
}
.outer3 .right {
float: right;
width: 200px;
}
.outer3 .middle {
margin: 0 200px 0 100px;
}
<div class="outer outer3">
<div class="left">3-left</div>
<div class="right">3-right</div>
<div class="middle">3-middle</div>
</div>
<style>
*{
box-sizing:content-box;/* 伸缩项目自动box-sizing:border-box,所以需调整为content-box */
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;/* 头、中部、脚纵向显示 */
}
header,footer{
flex:0 0 50px;/* 头、脚尺寸固定,不放大、不缩小 */
background:#3f3f3f;
}
.main{
display:flex;
/*
flex:1 == 1 1 auto:剩余空间放大比例(flex-grow) 空间不足缩小比例(flex-shrink) 分配多余空间之前项目占据的主轴空间(flex-basis)
flex:1指的是:中部区域自由伸缩
auto指的是项目本来大小,因未给main设置高度,main高度由子元素最高者决定,若子元素高度为0,则main高度为0
块级元素未主动设置高度或未被子元素撑起高度,浏览器默认为块级元素分配高度为0。
*/
flex:1;
}
.content{
background:red;
height:1000px;
/*
横向中间内容区自适应,即使未指定宽度,但会分配宽度
块级元素未主动设置宽度或未被子元素撑起宽度,浏览器默认为块级元素分配宽度为可使用的全部宽度,比如全屏宽。
*/
flex:1;
}
.left,.right{
height:800px; /*不设置高度,则自动撑满整个高度*/
background:blue;
flex:0 0 100px;/* 左右两列固定宽 */
}
.left{
order:-1;/* 让left居于左侧 */
}
</style>
<html>
<body>
<header></header>
<div class="main">
<div class="content">中间栏要在放在文档流前面以优先渲染。</div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</body>
</html>
其实就是左右两侧定宽,中间自适应的三列布局,跟圣杯差不多
.box {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -25px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
猿辅导
一面
css选择器,优先级
讲解promise,实现promiseAll
3.节流和防抖是什么 ,区别,使用场景
4.实现节流或防抖
格式化字符串"abc sdf dd" 变成[abc,sdf,dd]
还是格式化字符串,"abc sdf,dd" 变成[abc,sdf,dd]
实现一个compare函数
const DOGS = [
{
name: 'k',
age: 3
},
{
name: 'B',
age: 10
},
{
name: 'H',
age: 10
},
{
name: 'D',
age: 10
}
]
// 将数组,按照age的从小到大排序 输出
还是上边的数组,如果年龄一致的话,根据name做比较,比较规则按照下方给定的数组元素出现的顺序排序
const NAME_ORDER = ['kh','DAB']
求二叉树的最大深度
二叉树的最小深度
二叉树如果左子树为空,输出右子树的深度,若右子树为空,输出左子树的深度,若都不为空输出最小深度
移动端调试方法
diff算法,react在哪些方面进行优化的
12.还有一些小问题,忘了
二面
1.问项目,挨个问,做了什么,学到了什么,项目中涉及的东西也问
2.关于跨域,各种方式以及原理,跨域判断是浏览器做的还是后端做的
3.关于node,node进程管理,node单线程多线程
4.关于移动端真机调试,配置代理的原理是什么
5.关于发布流程,如何设置参数,都有什么过程
6.实现promise
7.axios在node中和前端中使用的区别
8.react中的connect
9.hooks中 useState的原理
三面
1.文字的颜色
<style>
.classA{
color:blue;
}
.classB{
color:red;
}
</style>
<p class="classB classA">123</p>
2.child的border,padding,盒子大小
<style>
.parent {
background: red;
width: 100px;
height: 100px;
padding: 0;
margin: 0;
}
.child {
background: green;
width: 50px;
height: 50px;
padding: 10%;
border: 10px solid black;
box-sizing: border-box;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
Function.prototype.a = () => alert(1);
Object.prototype.b = () => alert(2);
function A() {}
const a = new A();
a.a();
a.b();
a.__proto__ = ?
A.prototype = ?
var x = 10;
function a(y) {
var x = 20;
return b(y);
}
function b(y) {
return x + y
}
a(20);
console.log(1);
setTimeout(() => {
console.log(2)
});
process.nextTick(() => {
console.log(3);
});
setImmediate(() => {
console.log(4)
});
new Promise(resolve => {
console.log(5);
resolve();
console.log(6);
}).then(() => {
console.log(7)
});
Promise.resolve().then(() => {
console.log(8);
process.nextTick(() => {
console.log(9)
});
});
6.数组随机洗牌,请实现一个算法,实现数组乱序,要求每个数字出现在每个位置的概率是平均的
function radomArr(arr){
return arr.sort(compare)
}
function compare(){
var x = Math.random()
//console.log(x)
var label = x > 0.5 ? 1 : -1
return label
}
console.log(radomArr([1,2,3,4,5]))
function add() {
}
function one() {
}
function two() {
}
console.log(one(add(two())))
// 3
console.log(two(add(one())))
// 3
8 数字逆转,不可以使用数组或者字符串的reverse方法
123 -> 321
-56 -> -65
780 -> 87
[TOC]
印象笔记转过来的,部分图片丢失
提到 React 就必需会的生命周期
很全面 - React生命周期管理
graph TD
A[jsx] -->|createElement| B(virtual-DOM)
B -->|mountComponent| C(真实DOM)
C --> D(state/props发生改变)
D --> E(重新生成V-DOM)
E --> F{diff算法}
F -->|节点类型不同| G[删旧建新]
F -->|节点类型相同| H[DOM/React]
H -->|DOM元素| I[更新属性]
H -->|React组件| J[更新状态]
虚拟的DOM的核心**是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。
DOM很慢,而javascript很快,用javascript对象可以很容易地表示DOM节点。DOM节点包括标签、属性和子节点,通过VElement表示如下。
// 用JavaScript表示一个DOM节点
function VElement(tagName,props,children){
this.tagName = tagName;
this.props = props;
this.children = children;
}
var ul = new VElement('ul', {id: 'list'}, [
new VElement('li', {class: 'item'}, ['Item 1']),
new VElement('li', {class: 'item'}, ['Item 2']),
new VElement('li', {class: 'item'}, ['Item 3'])
])
现在ul只是一个 JavaScript 对象表示的 DOM 结构,页面上并没有这个结构。我们可以根据这个ul构建真正的
VElement.prototype.render = function(){
var el = document.createElement(this.tagName);
var props = this.props;
for(var prop in props){
var value = props[prop];
el.setAttribute(prop,value);
}
var children = this.children || [];
children.forEach(function(child){
var childEL = (child instanceof VElement)
?child.render()
: document.createTextNode(child);
el.appendChild(childEL);
})
return el;
}
render方法会根据tagName构建一个真正的DOM节点,然后设置这个节点的属性,最后递归地把自己的子节点也构建起来。所以只需要:
var ulRoot = ul.render();
document.body.appendChild(ulRoot);
你不知道的Virtual DOM(这篇实现DOM写的好)
【React深入】深入分析虚拟DOM的渲染原理和特性
答题思路:
传统DOM的劣势 --> react diff --> vdom出现解决什么问题 --> vdom的优势
传统前端编程方式是命令式的,直接操作DOM,代码可读性差可维护性低;
react的声明式编程,抛弃了直接操作DOM,只关注数据变动,DOM操作由框架完成,提升了可读性可维护性;
最初react在更新的过程中会刷新整个页面,后来引入的diff过程,对比数据变动前后的DOM结构,但DOM结构diff起来太复杂,由此引出了vdom;
VDOM 和 Diff 算法的出现是为了解决由命令式编程转变为声明式编程、数据驱动后所带来的性能问题的。换句话说,直接操作 DOM 的性能并不会低于虚拟 DOM 和 Diff 算法,甚至还会优于。
这么说的原因是因为 Diff 算法的比较过程,比较是为了找出不同从而有的放矢地更新页面。但是比较也是要消耗性能的。而直接操作 DOM 就是有的放矢,我们知道该更新什么不该更新什么,所以不需要有比较的过程。所以直接操作 DOM 效率可能更高。
React 厉害的地方并不是说它比 DOM 快,而是说不管你数据怎么变化,我都可以以最小的代价来进行更新 DOM。 方法就是我在内存里面用新的数据刷新一个虚拟 DOM 树,然后新旧 VDOM 进行比较,找出差异,再更新到 DOM 树上。
虚拟DOM的作用:
虚拟DOM的缺点:
首次渲染大量 DOM 时,由于多了一层虚拟 DOM 的计算,会比 innerHTML 插入慢。
虚拟 DOM 需要在内存中维护一份 DOM 的副本(跟上面一条其实也差不多,上面一条是从速度上,这条是从空间上)。
如果虚拟 DOM 大量更改,这是合适的。但是单一频繁地更新的话,虚拟 DOM 将会花费更多的时间处理计算的工作。所以,如果你有一个 DOM 节点相对较少页面,用虚拟 DOM,它实际上有可能会更慢。但对于大多数单页面应用,这应该都会更快。
把这篇文章看完 - 从 React 历史的长河里聊虚拟 DOM 及其价值
Virtual Dom 的优势在哪里?
React 在比较新旧 2 棵虚拟 DOM 树的时候,会同时考虑两点:
React 选用了启发式的算法,将时间复杂度控制在 O(n) 的级别。这个算法基于以下 2 个假设:
另外,React 只会对同一层的节点作比较,不会跨层级比较,如图所示:
最高效的算法应该是直接将 A 子树移动到 D 节点,但这样就涉及到跨层级比较,时间复杂度会陡然上升。React 的做法比较简单,它会先删除整个 A 子树,然后再重新创建一遍。结合到实际的使用场景,改变一个组件的从属关系的情况也是很少的。
同样道理,当 D 节点改为 G 节点时,整棵 D 子树也会被删掉,E、F 节点会重新创建。
对于列表的 Diff,节点的 key 有助于节点的重用
如上图所示,当没有 key 的时候,如果中间插入一个新节点,Diff 过程中从第三个节点开始的节点都是删除旧节点,创建新节点。当有 key 的时候,除了第三个节点是新创建外,第四和第五个节点都是通过移动实现的。
nextIndex | lastIndex | _mountIndex |
---|---|---|
遍历 nextChildren 时候的 index,每遍历一个元素加 1 | 上一次从 prevChildren 中取出来元素时,这个元素在 prevChildren 中的 index | 元素在数组中的位置 |
下面我们来走一遍流程:
参考 - Diff 算法详解(主要看带key diff)
react diff 策略(这篇更全)
基于策略一,React 对树的算法进行了简洁明了的优化,即对树进行分层比较,两棵树只会对同一层次的节点进行比较。
即同一个父节点下的所有子节点。当发现节点已经不存在,则该节点及其子节点会被完全删除掉,不会用于进一步的比较。这样只需要对树进行一次遍历,便能完成整个 DOM 树的比较。
React 是基于组件构建应用的,对于组件间的比较所采取的策略也是简洁高效。
16.x render函数新增的返回类型
render 函数
React优化:竭尽全力的减少render渲染
性能!!让你的 React 组件跑得再快一点
constructor
中的 super(props)
的作用?传与不传有什么区别?调用super的原因:
如果要从另一个角度看的话:
假设在es5要实现继承,首先定义一个父类:
//父类
function sup(name) {
this.name = name;
}
//定义父类原型上的方法
sup.prototype.printName = function (){
console.log(this.name);
}
再定义他sup的子类,继承sup的属性和方法:
function sub(name, age){
sup.call(this,name); //调用call方法,继承sup超类属性
this.age = age;
}
sub.prototype = new sup(); //把子类sub的原型对象指向父类的实例化对象,这样即可以继承父类sup原型对象上的属性和方法
sub.prototype.constructor = sub; //这时会有个问题子类的constructor属性会指向sup,手动把constructor属性指向子类sub
//这时就可以在父类的基础上添加属性和方法了
sub.prototype.printAge = function (){
console.log(this.age);
}
这时调用父类生成一个实例化对象:
let jack = new sub('feihao', 18);
jack.printName() ; //输出 : feihao
jack.printAge(); //输出 : 18
这就是es5中实现继承的方法。
而在es6中实现继承:
class sup {
constructor(name) {
this.name = name
}
printName() {
console.log(this.name)
}
}
class sub extends sup{
constructor(name,age) {
super(name) // super代表的事父类的构造函数
this.age = age
}
printAge() {
console.log(this.age)
}
}
let jack = new sub('feihao', 18)
jack.printName() //输出 : feihao
jack.printAge() //输出 : 18
[TOC]
每个tcp连接只能发送一个请求,下一个请求发送需要重新建立tcp连接,性能很差
针对http1.0的问题,http1.1做了很大的优化
http1.1默认connection:keep-alive,一个tcp连接可以持续传输请求。
因为http1.1支持长连接,发送一个请求之后还可以发送第二个请求,如果第二个请求要等待第一个请求返回之后才发送,效率就很低,所以引入了管道机制,多个请求可以按顺序同时发送,响应按顺序返回
因为一个tcp可以同时发送多个请求,我们需要一个字段来区分多个请求,Content-length表示当前请求响应共有多少字段,超过这个值的响应就不是该请求的响应
因为http1.1是按顺序发送请求和响应,如果一个顺序靠前的请求响应时间较长,会阻碍后面请求的响应,造成很大的延迟,这就是线头阻塞。故http1.1支持分块传输:Transfer-Encoding: chunked,每个响应头前都有一个16进制数字表示该块儿大小,如果为0表示本次分块数据传输完成
新增PUT、PATCH、HEAD、 OPTIONS、DELETE请求方法
客户端请求头新增Host字段,有了Host字段,就可以将请求发往同一台服务器上的不同网站,为虚拟主机的兴起打下了基础。
主要还是线头阻塞问题,为了避免这个问题,只有两种方法:一是减少请求数,二是同时多开持久连接。这导致了很多的网页优化技巧,比如合并脚本和样式表、将图片嵌入CSS代码、域名分片(domain sharding)等等。如果HTTP协议设计得更好一些,这些额外的工作是可以避免的。
http2.0是基于SPDY的,两者没有太大的区别,主要是header压缩方式以及http2.0支持明文传输。
对比http1.1,主要区别有以下几个
多路复用可能会带来一个新的问题,多个请求并发可能导致关键请求被阻塞,故http2.0支持request设置优先级
header中的一些信息是重复的,采用合适的压缩算法减少请求大小
正常文档流请求style.css后服务端会主动推送script.js到客户端,服务端请求的时候直接从缓存读取
https是运行在tcp协议上基于SSL/TLS的安全通信机制,其实整个加密过程比较简单,通过一张图就能很清晰,但是一些细节还是值得探究的。先上图:
TLS是在SSL基础上发展过来的,实质上是一个东西。那么TLS主要做的几件事:
前面是正常的tcp连接过程:
如果是正常的http连接,直接将ACK确认码发送给Server,Server收到就可以建立连接了。但是Https在这里才真正的开始。
4. Client1: Client将ACK确认码+TLS版本号+所支持加密套件列表+希望使用的TLS选项发送给Server
5. Server1: Server收到后从加密套件列表中选择合适的加密套件,将选择的加密套件+自己的公钥+自己的安全证书+希望使用的TLS选项(+要求Client证书)发送给Client
6. Client2: CLient经过一系列验证和加密后,将(Client自己的证书+)经过公钥加密后的秘钥发送给Server
7. Server2: Server使用私钥进行解密后得到秘钥,发送加密的Finish消息,表明完成握手
Client拿到Server证书后需要验证证书的有效性,流程一般是:
CRL(Certificate Revocation List)即证书撤销名单。证书颁发者会提供一份已经失效证书的名单,供浏览器验证证书使用。当然这份名单是巨长无比的,浏览器不可能每次TLS都去下载,所以常用的做法是浏览器会缓存这份名单,定期做后台更新。这样虽然后台更新存在时间间隔,证书失效不实时,但一般也OK
OCSP(Online Certificate StatusProtocol)即在线证书状态协议。除了离线文件,证书颁发者也会提供实时的查询接口,查询某个特定证书目前是否有效。实时查询的问题在于浏览器需要等待这个查询结束才能继续TLS握手,延迟会更大
参考资料:
http总结
上海头条:
前端数据处理有没有用到 node
设计**
编写语法
数据绑定
diff算法
性能优化
适用场景
前端框架用vue还是react?清晰对比两者差异
React还是Vue:选哪个?
前端跨域如何解决,cors如何设置
按需加载怎么做
常用插件和loader
redux工作流
mapStateToProps
异步数据流
解决的问题,影响的生命周期
valueOf 和 toString 的区别
我的代码可读性好吗
几个正整数之间一般存在多个共有的约数,即这几个正整数除以这个约数后都没有余数,这些约数中最大的一个称为最大公约数。
几个正整数会存在许多个共有的倍数,每个倍数除以这几个正整数后都没有余数,而这些倍数之中最小的一个则称为最小公倍数。
暴力求解,思路很简单,即将两个数分别递减,获取能同时被二者除尽的最大的一个数,即最大公约数:
function getGcd(a, b) {
for (let i = a; i > 0; i--) {
for (let j = b; j > 0; j--) {
if (a % i === 0 && b % j === 0 && i === j) {
return j;
}
}
}
}
思路是用两个数中的最大项除以最小项,如果能除尽,那么最小项便是这两个数的最大公约数;不能除尽则用最大项除以最小项所得余数,与最小项再进行同样的递归操作,最后得到最大的约数,也就是所谓的辗转相除.
扩展:
辗转相除法, 又名欧几里得算法(Euclidean algorithm),目的是求出两个正整数的最大公约数。
这条算法基于一个定理:两个正整数a和b(a>b),它们的最大公约数等于a除以b的余数c和b之间的最大公约数。比如10和25,25除以10商2余5,那么10和25的最大公约数,等同于10和5的最大公约数。
function getGcd(a, b) {
let max = Math.max(a, b);
let min = Math.min(a, b);
if (max % min === 0) {
return min;
} else {
return getGcd(max % min, min);
}
}
最大公约数和最小公倍数求解,常用的方法是短除法进行因式分解,然后最大公约数是所有公共因子的乘积,最小公倍数是所有因子的乘积。
本质上求最小公倍数就是求最大公倍数:x=m*a
, y=m*b
;m是最大公约数,那最小公倍数就是m*a*b
。所以可以得到最大公约数与最小公倍数的关系:
LCM(A,B)×GCD(A,B)=A×B
有了求最大公约数的函数后,再来求最小公倍数就简单了:
function getLcm(a, b) {
return a * b / getGcd(a, b);
}
9.react的state是异步的吗,是一直表现异步还是有同步的表现
10.项目中遇到过什么比较难解决的问题,怎么解决的
11.如果让你去设计一个搜集网络请求崩溃的功能,你会考虑从哪些方面收集
12.对RN是怎么理解的
13.jsBridge的原理,RN的jsBridge实现和web的jsBridge实现有什么区别吗
新版本的生命周期如何跟老版本对应
hooks优点
useEffect如何进行深比较
constructor指向
flex实现垂直水平居中
// 1.在一个二维数组中,每一行都按照从左到右递增,每一列都从上到下递增的顺序排序,
// 完成一个函数,输入这个二维数组和一个整数,判断数组中是否含有该整数
function isInArray(arr, num){
let middle = Math.floor(arr.length / 2);
if(arr[middle].includes(num)){
return true;
}else{
if(num > arr[middle][arr[middle].length - 1]()){
isInArray(arr.slice(middle), num);
}else{
isInArray(arr.slice(0, middle), num);
}
}
}
function isInArray2(arr, num){
for(let i = 0; i < arr.length; i++){
if(arr[i][arr[i].length - 1] < num){
continue;
}else{
return arr[i].includes(num);
}
}
return false;
}
// 2. 实现一个深拷贝函数,可以对象的深拷贝
function deepClone(source){
if(!source || typeof source !== 'object'){
throw new Error('error arguments');
}
let target = Array.isArray(source) ? [] : {};
for(let prop in source){
if(source.hasOwnProperty(prop)){
if(typeof source[prop] === 'object'){
target[prop] = deepClone(source[prop]);
}else{
target[prop] = source[prop];
}
}
}
return target;
}
// 3.实现promise.all
Promise.all = function(promises){
let results = [];
let length = promises.length;
let counter = 0;
function processAll(index, value, resolve){
counter++;
results[index] = value;
if(counter === length){
resolve(results);
}
}
return new Promise((resolve, reject) => {
for(let i = 0; i < length; i++){
promises[i].then(processAll(i, value, resolve), reject);
}
})
}
// 4.求两个数组的交集和并集
function jiaoji(arr1, arr2){
let result = [];
for(let i = 0; i < arr1.length; i++){
if(arr2.includes(arr1[i])){
results.push(arr1[i]);
}
}
}
function bingji(arr1, arr2){
return Array.from(new Set(arr1.concat(arr2)));
}
// 5.给定一个数组,获取数组中重复的数及重复次数,将数和重复次数按照键值对的方式返回;例如:[2, 10, 35, 2, 2, 35],返回:{2:3,10:1,35:2}
function repeatKey(arr){
let obj = {};
arr.forEach(item => {
obj[item] ? obj[item]++ : obj[item] = 1;
});
return obj;
}
[TOC]
from boya
(1)工厂模式:在函数中定义该对象,并定义该对象的属性,为避免重复创建方法,可以将方法定义到函数外;
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
}
return o;
}
解决的问题 | 存在的问题 |
---|---|
传统Object构造函数或对象字面量创建对象的方式,会产生大量重复代码 | 没有解决对象识别的问题(即怎样知道一个对象的类型) |
(2)构造函数:无需函数内部重新创建对象,而是用this代替,也无需return,同样也要将方法定义到函数外;
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
}
}
var person1 = new Person('feihao', '27', 'FE');
解决的问题 | 存在的问题 |
---|---|
可以将构造函数的实例标识为一种特定的类型,如 person1 instanceof Person //true |
1.每个方法都要在每个实例上重新创建一遍。2.如果将函数定义在构造函数外部解决问题1的话,新问题又来了,在全局作用域中定义的函数只能被某个对象调用,失去封装性。 |
要创建Person的新实例,必须使用 new 操作符,4个步骤:
// new 实现
function create(){
// 创建一个新对象
let obj = new Object();// 也可不使用new关键字
// 获得构造函数
let Con = [].shift.call(arguments);
// 链接到原型
obj.__proto__ = Con.prototype;
// 绑定this,执行构造函数
let result = Con.apply(obj,arguments);
// 确保new出来的是个对象
return typeof result === 'object' ? result : obj;
}
要检测对象类型,instanceof操作符更可靠一点,可以看一下instanceof是怎么实现的:
// instanceof 实现
function instanceof(left, right) {
// 获得类型的原型
let prototype = right.prototype
// 获得对象的原型
left = left.__proto__
// 判断对象的类型是否等于类型的原型
while (true) {
if (left === null)
return false
if (prototype === left)
return true
left = left.__proto__
}
}
(3)原型模式:函数中不对对象进行定义,而是用prototype定义属性;
function Person() {}
Person.prototype.name = 'feihao';
Person.prototype.age = '27';
Person.prototype.job = 'FE';
Person.prototype.sayName = function(){
alert(this.name);
}
var person1 = new Person();
person1.sayName(); // feihao
var person2 = new Person();
person2.sayName(); // feihao
person1.sayName === person2.sayName; // true
解决的问题 | 存在的问题 |
---|---|
可以让所有对象实例共享它所包含的属性和方法 | 无需传递初始化参数,原型中所有属性都是被实例共享的,引用类型会相互影响 |
(4)构造函数+原型模式的组合模式:函数中定义对象的方法之外的属性,原型定义对象的方法;
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ['tom', 'jerry']
}
Person.prototype = {
constructor: Person,
sayName: function() {
alert(this.name);
}
}
解决的问题 | 存在的问题 |
---|---|
每个实例都会有自己的一份实例属性的副本,同时又共享方法的引用,最大限度节省内存;还支持向构造函数传参 | 使用广泛,认同度较高,暂无问题 |
(1)原型链继承:
function SuperClass(){
this.name = "women";
this.bra = ["a","b"];
}
function SubClass(){
this.subname = "your sister";
}
SubClass.prototype = new SuperClass();
var sub1 = new SubClass();
sub1.name = "man";
sub1.bra.push("c");
console.log(sub1.name);//man
console.log(sub1.bra);//["a","b","c"]
var sub2 = new SubClass();
console.log(sub1.name);//woman
console.log(sub2.bra);//["a","b","c"]
使用原型链实现继承时有一些需要我们注意的地方:
constructor
的变化。此处sub的constructor
指向的是SuperClass,因为SubClass的原型指向了SuperClass的原型(而SuperClass.prototype.constructor===SuperClass
)。在了解原型链时,不要忽略掉在末端还有默认的Object对象,这也是我们能在所有对象中使用toString
等对象内置方法的原因优点 | 缺点 |
---|---|
简单易实现;实例是子类的的实例,也是父类的实例;父类增加属性,子类都能访问到。 | 为子类添加属性不能在构造器中,只能放在new父类之后;无法实现多继承;创造子类实例时,无法向父类构造传参;来自原型对象的属性是所有子类共享的。 |
(2)构造函数继承(经典继承):
function SuperClass() {
this.name = "women";
this.bra = ["a", "b"];
}
function SubClass() {
this.subname = "your sister";
//将SuperClass的作用域赋予当前构造函数,实现继承
SuperClass.call(this);
}
var sub1 = new SubClass();
sub1.bra.push("c");
console.log(sub1.bra);//["a","b","c"]
var sub2 = new SubClass();
console.log(sub2.bra);//["a","b"]
优点 | 缺点 |
---|---|
解决了引用类型的共享问题 | 如果在构造函数中有方法的定义,那么对于每一个实例都存在一份单独的Function引用,我们的目的其实是想共用这个方法,而且我们在超类型原型中定义的方法,在子类型实例中是无法调用到的 |
(3)实例继承:
function Child(arg){
return new Parent(arg);
};
优点 | 缺点 |
---|---|
不限制调用方式,不管是new Child() 还是Child() ,返回的对象具有相同的效果 |
实例是父类的实例,不是子类的实例; |
(4)拷贝继承:
function child(arg){
var son = new parent();
for(var p in parent){
child.prototype[p] = parent[p]
}
};
new child();
优点 | 缺点 |
---|---|
实现了多继承 | 效率低,内存占用高;无法继承父类不可枚举属性。 |
(5)组和继承:
function SuperClass() {
this.name = "women";
this.bra = ["a", "b"];
}
SuperClass.prototype.sayWhat = function(){
console.log("hello");
}
function SubClass() {
this.subname = "your sister";
SuperClass.call(this); //第二次调用SuperClass
}
SubClass.prototype = new SuperClass(); //第一次调用SuperClass
var sub1 = new SubClass();
console.log(sub1.sayWhat());//hello
优点 | 缺点 |
---|---|
函数可复用;可传参;实例既是子类实例又是父类实例;不存在引用属性共享问题;可以继承原型属性,也可以继承实例属性; | 调用了两次超类型的构造函数 |
赋值和浅拷贝的区别,看下面这个例子:
var obj1 = {
'name' : 'zhangsan',
'age' : '18',
'language' : [1,[2,3],[4,5]],
};
var obj2 = obj1;
var obj3 = shallowCopy(obj1);
function shallowCopy(src) {
var target = {};
for (var prop in src) {
if (src.hasOwnProperty(prop)) {
target[prop] = src[prop];
}
}
return target;
}
obj2.name = "lisi";
obj3.age = "20";
obj2.language[1] = ["二","三"];
obj3.language[2] = ["四","五"];
console.log(obj1);
//obj1 = {
// 'name' : 'lisi',
// 'age' : '18',
// 'language' : [1,["二","三"],["四","五"]],
//};
console.log(obj2);
//obj2 = {
// 'name' : 'lisi',
// 'age' : '18',
// 'language' : [1,["二","三"],["四","五"]],
//};
console.log(obj3);
//obj3 = {
// 'name' : 'zhangsan',
// 'age' : '20',
// 'language' : [1,["二","三"],["四","五"]],
//};
obj1 | obj2 | obj3 |
---|---|---|
原始对象 | 赋值操作得到的对象 | 浅拷贝得到的对象 |
结论:
改变 obj2
的 name
属性和 obj3
的 age
属性,可以看到,改变赋值得到的对象 obj2
同时也会改变原始值 obj1
,而改变浅拷贝得到的的 obj3
则不会改变原始对象 obj1
。这就可以说明赋值得到的对象 obj2
只是将指针改变,其引用的仍然是同一个对象,而浅拷贝得到的的 obj3
则是重新创建了新对象。
此外,还可以通过 Object.assign()
、 Array.prototype.slice()
和 Array.prototype.concat()
返回一个数组或者对象的浅拷贝。
function deepClone(source){
if(!source || typeof source !== 'object'){
throw new Error('error arguments', 'shallowClone');
}
var targetObj = source.constructor === Array ? [] : {};
for(var keys in source){
if(source.hasOwnProperty(keys)){
if(source[keys] && typeof source[keys] === 'object'){
targetObj[keys] = deepClone(source[keys]);
}else{
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
// test example
var o1 = {
arr: [1, 2, 3],
obj: {
key: 'value'
},
func: function(){
return 1;
}
};
deepClone(o1);
var XHR;
if(window.XMLHttpRequest){
XHR = new XMLHttpRequest();
}else{
XHR = new ActiveXobject("Microsoft.XMLHTTP");
};
XHR.open(GET/POST, url, true(异步)/false(同步));
XHR.send(string);
XHR.onreadystatechange = function(){
if(XHR.readyState === 4 && XHR.status === 200){
// readyState
// 0: 请求未初始化;
// 1: 服务器连接已建立;
// 2: 请求已接收;
// 3: 请求处理中;
// 4: 请求已完成,且响应已就绪;
// status 200: "OK";404: 未找到页面
ele.innerHTML = XHR.responseText;//responseXML时需要解析一下
};
};
ajax的优缺点:
优点 | 缺点 |
---|---|
<1>.无刷新更新数据。AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息,减少用户等待时间,带来非常好的用户体验。 | <1>.AJAX干掉了Back和History功能,即对浏览器机制的破坏。 |
<2>.异步与服务器通信。AJAX使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。优化了Browser和Server之间的沟通,减少不必要的数据传输、时间及降低网络上数据流量。 | <2>.AJAX的安全问题。 |
<3>.前端和后端负载平衡。AJAX可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能。 | <3>.对搜索引擎支持较弱。 |
<4>.基于标准被广泛支持。AJAX基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继问世。同样,也出现了另一种辅助程序设计的技术,为那些不支持JavaScript的用户提供替代功能。 | <4>.破坏程序的异常处理机制。 |
<5>.界面与应用分离。Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离),有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。 | <5>.违背URL和资源定位的初衷。 |
<6>.AJAX不能很好支持移动设备。 | |
<7>.客户端过肥,太多客户端代码造成开发上的成本。 |
优点:
缺点:
function fn1(){
function fn2(){
statement;
};
};
优缺点:污染了全局变量,无法保证不与其他函数模块之间发生冲突,而且各个变量之间没有直接的关系。
var myModule = {
val1:1,
val2:2,
fn1:function(){
statement;
},
fn2:function(){
statement;
},
};
优缺点:解决了变量污染的问题,但是可以直接在变量外部修改相应的对象值,带来严重的安全隐患。
var myModule = (function(){
var val1 = 1;
var val2 = 2;
function fn1(){
statement;
};
function fn2(){
statement;
};
return {
fn1:fn1,
fn2:fn2,
};
})();
优缺点:解决了对象值暴露的问题,是现代模块化规范的基础。
模块化规范是由服务器端的JavaScript应用带来的,CommonJS规范是由NodeJS发扬光大。
1、定义模块:根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性
2、输出模块:模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入该对象
3、加载模块:加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象
4、同步读取模块,适合nodejs,由于网络的原因并不适合浏览器端(异步加载)
// 模块定义 myModel.js
var name = 'Byron';
function printName(){
console.log(name);
}
function printFullName(firstName){
console.log(firstName + name);
}
module.exports = {
printName: printName,
printFullName: printFullName
}
// 加载模块
var nameModule = require('./myModel.js');
nameModule.printName();
CommonJS的解决方案在服务端的实现很容易,但是仔细看上面的代码,会发现require是同步的。模块系统需要同步读取模块文件内容,并编译执行以得到模块接口。
产生的问题:脚本标签天生异步,传统CommonJS模块在浏览器环境中无法正常加载。
一种解决思路是,用一套标准模板来封装模块定义,但是对于模块应该怎么定义和怎么加载,又产生两种分歧:
AMD(Asynchronous Module Definition),中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范。
其原理是异步加载模块,模块的加载不影响其后面语句的运行。所有依赖这个模块的语句都会添加进一个回调函数中,等到模块加载完成,回调函数就会执行。
由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数,也就是大名鼎鼎RequireJS
,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。
requireJS主要解决两个问题
一个使用requireJS的例子:
// 定义模块 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
// 加载模块
require(['myModule'], function (my){
my.printName();
});
requireJS定义了一个函数 define,它是全局变量,用来定义模块.
define(id?, dependencies?, factory);
id
:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)dependencies
:是一个当前模块依赖的模块名称数组factory
:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值 在页面上使用require函数加载模块require([dependencies], function(name){});
[dependencies]
:是一个数组,表示所依赖的模块function
:是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
CMD(Common Module Definition)通用模块定义,CMD规范是国内发展出来的,就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,SeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同
Sea.js 推崇一个模块一个文件,遵循统一的写法。
define(id?, deps?, factory)
CMD推崇:
factory是一个函数,有三个参数,function(require, exports, module)
// 定义模块 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加载模块
seajs.use(['myModule.js'], function(my){
// ...
});
最明显的区别就是在模块定义时对依赖的处理不同:
这种区别各有优劣,只是语法上的差距,而且requireJS和SeaJS都支持对方的写法
AMD和CMD最大的区别是对依赖模块的执行时机处理不同,注意不是加载的时机(都是异步加载)或者方式不同。
AMD依赖前置,js可以方便知道依赖模块是谁,立即加载,而CMD就近依赖,需要使用把模块变为字符串解析一遍才知道依赖了那些模块,这也是很多人诟病CMD的一点,牺牲性能来带来开发的便利性,实际上解析模块用的时间短到可以忽略。
同样都是异步加载模块,AMD在加载模块完成后就会执行该模块,所有模块都加载执行完后会进入require的回调函数,执行主逻辑,这样的效果就是依赖模块的执行顺序和书写顺序不一定一致,看网络速度,哪个先下载下来,哪个先执行,但是主逻辑一定在所有依赖加载完成后才执行。
CMD加载完某个依赖模块后并不执行,只是下载而已,在所有依赖模块加载完成后进入主逻辑,遇到require语句的时候才执行对应的模块,这样模块的执行顺序和书写顺序是完全一致的。
这也是很多人说AMD用户体验好,因为没有延迟,依赖模块提前执行了,CMD性能好,因为只有用户需要的时候才执行的原因
好处:
坏处:
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
将图片src设为空,将图片url放到自定义属性上(如 data-src)
监听页面scroll,遍历图片并判断,符合条件的图片将自定义属性上的url赋值给src
function lazyload() { //监听页面滚动事件
var seeHeight = document.documentElement.clientHeight; //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
var img = document.querySelectorAll('img');
var n = 0;
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
<html>
<ul id='drag'>
<li draggable="true">1</li>
<li draggable="true">2</li>
<li draggable="true">3</li>
</ul>
</html>
<script>
var ele;
document.querySelector('#drag').addEventListener('dragstart', function (e) {
ele = e.target;
ele.classList.add('draging');
})
document.querySelector('#drag').addEventListener('dragover', function (e) {
e.preventDefault();
if (e.target.nodeName === 'LI') {
e.target.parentNode.insertBefore(ele, e.target);
}
})
document.querySelector('#drag').addEventListener('drop', function (e) {
ele.classList.remove('draging');
})
</sctipt>
@import
是 CSS 提供的语法规则,只有导入样式表的作用;link
是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。link
标签引入的 CSS 被同时加载;@import
引入的 CSS 将在页面加载完毕后被加载@import
是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link
标签作为 HTML 元素,不存在兼容性问题。link
标签来改变样式;由于DOM方法是基于文档的,无法使用@import
的方式插入样式。慎重使用高性能属性:浮动、定位;
尽量减少页面重排、重绘
触发重排的操作主要是几何因素:
1).页面第一次渲染 在页面发生首次渲染的时候,所有组件都要进行首次布局,这是开销最大的一次重排。
2).浏览器窗口尺寸改变
3).元素位置和尺寸发生改变的时候
4).新增和删除可见元素
5).内容发生改变(文字数量或图片大小等等)
6).元素字体大小变化。
7).激活CSS伪类(例如::hover)。
8).设置style属性
9).查询某些属性或调用某些方法。比如说:
offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight
除此之外,当我们调用getComputedStyle方法,或者IE里的currentStyle时,也会触发重排,原理是一样的,都为求一个“即时性”和“准确性”。
触发重绘的操作主要有:
1).vidibility、outline、背景色等属性的改变
优化重排:
去除空规则:{};
属性值为0时,不加单位;
属性值为浮动小数0.xx,可以省略小数点之前的0;
标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后;
不使用@import前缀,它会影响css的加载速度,并且可能出现FOUC(无样式内容闪烁(html先于css加载出来));
充分利用css继承属性,减少代码量;
抽象提取公共样式,减少代码量;
选择器优化嵌套,尽量避免层级过深;
css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚,再使用;
将css文件放在页面最上面
第一种运用clear的方式在需要清浮动的元素下放一个div,并加上clear:both
.clear{
clear:both;
}
第二种方式是用伪元素:before或:after
.content:after{
content:'';
display:'block';
clear:both;
}
该方法利用了BFC的特性,当元素有以下特性时,触发BFC
规则(BFC)
flex-container:
flex-item:
.border-bottom{
position: relative;
border-top: none !important;
}
.border-bottom::after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #e4e4e4;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
问题
页面卡顿,帧率下降
优化:
关闭TCP连接:
<body>
<p id='jsonp'>JSONP:</p>
<script>
let jsonpDOM = document.querySelector('#jsonp');
// JSONP 访问测试
function addScriptTag(src) {
let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = src;
document.body.appendChild(script);
};
// 可指定任意请求触发
window.onload = function() {
addScriptTag('http://127.0.0.1:3000/jsonp?callback=test');
// addScriptTag('http://127.0.0.1:3000/users?callback=test');
};
function test(data) {
jsonpDOM.innerHTML += JSON.stringify(data.content);
};
</script>
</body>
后端:
let server = function (req, res) {
res.setHeader('Access-Control-Allow-Origin', 'http://piao.qunar.com');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
res.setHeader('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
res.setHeader('Set-Cookie', 'name=lei.li');
let urlObj = url.parse(req.url,true);
if (urlObj.pathname === '/' || urlObj.pathname === '/index.html') {
fs.readFile('./index.html', (err, data) => {
if (err) {
res.writeHead(500);
res.end('server error');
} else {
res.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
res.end(data);
}
})
} else if (req.method === 'GET' && urlObj.pathname === '/users') {
// 判断其他接口
res.writeHead(200, {
'Content-Type': 'application/json'
});
if(urlObj.query.callback) {
res.end(urlObj.query.callback+'('+JSON.stringify(data)+')');
} else {
res.end(JSON.stringify(data));
}
} else if (urlObj.pathname === '/jsonp') {
res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
let data = {
"content": "这是一条通过 jsonp 方式获取的数据"
};
data = JSON.stringify(data);
//假设这里定义的回调函数名为test
var callback = 'test'+'('+data+');';
res.end(callback);
} else {
res.writeHead(404, { 'Content-Type': 'application/json' });
res.end('404 Not Found');
}
}
优点:不像XHR对象那样调用AJAX时受到同源策略限制;兼容性很好;请求完毕后可以通过调用callback的方式回传结果,方便调用。
缺点:只支持GET;只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题;要确定jsonp请求是否失败并不容易。
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://www.script.a.com/b.html';
ifr.display = none;
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
//在这里操作doc,也就是b.html
ifr.onload = null;
};
document.domain = 'a.com';
创建a.com/cs1.html
创建a.com/proxy.html,并加入如下代码
<head>
<script>
function proxy(url, func){
var isFirst = true,
ifr = document.createElement('iframe'),
loadFunc = function(){
if(isFirst){
ifr.contentWindow.location = 'http://a.com/cs1.html';
isFirst = false;
}else{
func(ifr.contentWindow.name);
ifr.contentWindow.close();
document.body.removeChild(ifr);
ifr.src = '';
ifr = null;
}
};
ifr.src = url;
ifr.style.display = 'none';
if(ifr.attachEvent)
ifr.attachEvent('onload', loadFunc);
else
ifr.onload = loadFunc;
document.body.appendChild(iframe);
}
</script>
</head>
<body>
<script>
proxy('http://www.baidu.com/', function(data){
console.log(data);
});
</script>
</body>
<script>
window.name = '要传送的内容';
</script>
<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
var ifr = document.getElementById('ifr');
var targetOrigin = 'http://b.com'; // 若写成'http://b.com/c/proxy.html'效果一样
// 若写成'http://c.com'就不会执行postMessage了
ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>
<script type="text/javascript">
window.addEventListener('message', function(event){
// 通过origin属性判断消息来源地址
if (event.origin == 'http://a.com') {
alert(event.data); // 弹出"I was there!"
alert(event.source); // 对a.com、index.html中window对象的引用
// 但由于同源策略,这里event.source不可以访问window对象
}
}, false);
</script>
var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
socket.send('hello WebSockt');
socket.onmessage = function(event){
var data = event.data;
}
AJAX Long-Polling:
客户端使用普通的http方式向服务器端请求网页
客户端执行网页中的JavaScript脚本,向服务器发送数据、请求信息
服务器并不是立即就对客户端的请求作出响应,而是等待有效的更新
当信息是有效的更新时,服务器才会把数据推送给客户端
当客户端接收到服务器的通知时,立即会发送一个新的请求,进入到下一次的轮询
HTML5 Server Sent Events (SSE) / EventSource:
客户端使用普通的http方式向服务器端请求网页
客户端执行网页中的JavaScript脚本,与服务器之间建立了一个连接
当服务器端有有效的更新时,会发送一个事件到客户端
服务器到客户端数据的实时推送,大多数内容是你需要的
你需要一台可以做Event Loop的服务器
不允许跨域的连接
HTML5 Websockets:
客户端使用普通的http方式向服务器端请求网页
客户端执行网页中的JavaScript脚本,与服务器之间建立了一个连接
服务器和客户端之间,可以双向的发送有效数据到对方
服务器可以实时的发送数据到客户端,同时客户端也可以实时的发送数据到服务器
你需要一台可以做Event Loop的服务器
使用 WebSockets 允许跨域的建立连接
它同样支持第三方的websocket主机服务器,例如Pusher或者其它。这样你只需要关心客户端的实现 ,降低了开发难度。
WebRTC:
WebRTC是一种点对点类型的传输方式,它支持多种传输协议,如:UDP、TCP甚至是抽象层的协议。设计它时同时考虑到了允许使用可靠和不可靠的两种方式传输数据。这种技术一般应用在传输数据量较大的内容,比如音、视频等流媒体的传输。
Comet:
Comet是一种用于web的推送技术,能使服务器实时地将更新的信息传送到客户端,而无须客户端发出请求,目前有两种实现方式,长轮询和iframe流。
Event Loop
Event Loop是一个程序结构,用于等待和发送消息和事件。
长轮询
长轮询是在打开一条连接以后保持,等待服务器推送来数据再关闭的方式。
iframe流
iframe流方式是在页面中插入一个隐藏的iframe,利用其src属性在服务器和客户端之间创建一条长链接,服务器向iframe传输数据(通常是HTML,内有负责插入信息的JavaScript),来实时更新页面。iframe流方式的优点是浏览器兼容好,Google公司在一些产品中使用了iframe流,如Google Talk。
PS:关于Cookie的问题,带宽是次要的,安全隔离才是主要的。关于多域名,也不是越多越好,虽然服务器端可以做泛解释,浏览器做dns解释也是耗时间的,而且太多域名,如果要走https的话,还有要多买证书和部署的问题。
优点:
HTTP请求的方法:
HTTP/1.1协议**定义了八种方法(有时也叫“动作”),来表明Request-URL指定的资源不同的操作方式
OSI体系结构分为7层:应用层、表示层、会话层、传输层、网路层、链路层、物理层。
DNS协议在应用层。他的作用就是将域名解析成对应的IP地址。
DNS在进行区域传输的时候使用TCP协议,其它时候则使用UDP协议;
DNS的规范规定了2种类型的DNS服务器,一个叫主DNS服务器,一个叫辅助DNS服务器。在一个区中主DNS服务器从自己本机的数据文件中读取该区的DNS数据信息,而辅助DNS服务器则从区的主DNS服务器中读取该区的DNS数据信息。当一个辅助DNS服务器启动时,它需要与主DNS服务器通信,并加载数据信息,这就叫做区传送(zone transfer)。
为什么既使用TCP又使用UDP?
首先了解一下TCP与UDP传送字节的长度限制:
UDP报文的最大长度为512字节,而TCP则允许报文长度超过512字节。当DNS查询超过512字节时,时则使用TCP发送。通常传统的UDP报文一般不会大于512字节。
区域传送时使用TCP,主要有一下两点考虑:
1.辅域名服务器会定时(一般时3小时)向主域名服务器进行查询以便了解数据是否有变动。如有变动,则会执行一次区域传送,进行数据同步。区域传送将使用TCP而不是UDP,因为数据同步传送的数据量比一个请求和应答的数据量要多得多。
2.TCP是一种可靠的连接,保证了数据的准确性。
域名解析时使用UDP协议:
客户端向DNS服务器查询域名,一般返回的内容都不超过512字节,用UDP传输即可。不用经过TCP三次握手,这样DNS服务器负载更低,响应更快。虽然从理论上说,客户端也可以指定向DNS服务器查询的时候使用TCP,但事实上,很多DNS服务器进行配置的时候,仅支持UDP查询包。
辗转相除法:
function getGcd(a, b) {
let max = Math.max(a, b);
let min = Math.min(a, b);
if (max % min === 0) {
return min;
} else {
return getGcd(max % min, min);
}
}
function getLcm(a, b) {
return a * b / getGcd(a, b);
}
js
const first = () => (new Promise((resovle,reject)=>{
console.log(3);
let p = new Promise((resovle, reject)=>{
console.log(7);
setTimeout(()=>{
console.log(5);
resovle(6);
},0)
resovle(1);
});
resovle(2);
p.then((arg)=>{
console.log(arg);
});
}));
first().then((arg)=>{
console.log(arg);
});
console.log(4);
CSS
<div tooltip="Welcome to Meituan" position="bottom">Here is your Message</div>
css 如何获取当前鼠标悬浮的元素 ,没有id,没有class
css布局
(1)实现一个header,left,right布局;header宽度100%,left和right宽度各占一半,宽度大小自适应
(2)实现一个“品”字布局,三个div大小相同,都是正方形
页面逻辑加载?? 大概意思是,优先渲染用户比较关心的内容,像一些不重要的提示,侧边栏放在后边渲染,如何实现?
rem是什么? 与px的关系
计算机网络
项目
开放题
共享屏幕的技术是如何实现的?
由于各方面的不可抗因素,该学习小组的诞生旨在实现相互学习、资源共享,发挥各自的能动性,更高效的学习
目前我能想到的,是在issue里发布【笔记】+【面经】两种形式的任何资源,【笔记】可按专题划分,同时在右侧【labels】上打标签,同一专题可在同一issue中进行备忘与讨论,互通互补。
可以【分类-专题名】为题做title,如
JS-继承
网络-缓存相关
性能优化-汇总
等
举例:
1. js中类的创建有几种方式?
原型模式实例化需要用到 new 关键字,那么new是如何实现的?
// new polyfill
// bla bla...
代码中检测对象类型用到了 typeof,其他检测对象类型的方式有哪些?
类型检测离不开instanceof,那么instanceof是如何实现的
// ...
可以【时间-公司】为题做title,如
20200320-今日头条
20200321-京东-工程效率部门-大前端
可在当条issue下进行补充答案,也可塞进专题讨论。
关于算法,可以单独成文,便于收集同一算法下的多种解法,举例:
如冒泡排序的多种实现的递进优化,斐波那契的多种变形问题,或者一些智力题...
没时间整理的优质文章,可直接贴上链接。
形式上的东西,只是为了更好的翻阅,更多细节也可不拘小节,群策群力共渡难关,希望这个repo能很快停更,加油加油。
[TOC]
DNS解析其实是一个递归的过程
(1)递归查询
递归查询是一种DNS 服务器的查询模式,在该模式下DNS 服务器接收到客户机请求,必须使用一个准确的查询结果回复客户机。如果DNS 服务器本地没有存储查询DNS 信息,那么该服务器会询问其他服务器,并将返回的查询结果提交给客户机。
(2)迭代查询
DNS 服务器另外一种查询方式为迭代查询,DNS 服务器会向客户机提供其他能够解析查询请求的DNS 服务器地址,当客户机发送查询请求时,DNS 服务器并不直接回复查询结果,而是告诉客户机另一台DNS 服务器地址,客户机再向这台DNS 服务器提交请求,依次循环直到返回查询的结果
为止。
输入www.google.com网址后,首先在本地的域名服务器中查找,没找到去根域名服务器查找,没有再去com顶级域名服务器查找,,如此的类推下去,直到找到IP地址,然后把它记录在本地,供下次使用。大致过程就是.-> .com ->google.com. -> www.google.com.。 (这个.对应的就是根域名服务器,默认情况下所有的网址的最后一位都是.,既然是默认情况下,为了方便用户,通常都会省略,浏览器在请求DNS的时候会自动加上)
TCP提供一种可靠的传输,这个过程涉及到三次握手,四次挥手。
第一次握手:
客户端发送syn包(Seq=x)到服务器,并进入SYN_SEND状态,等待服务器确认;
第二次握手:
服务器收到syn包,必须确认客户的SYN(ack=x+1),同时自己也发送一个SYN包(Seq=y),即SYN+ACK包,此时服务器进入SYN_RECV状态;
第三次握手:
客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=y+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手。
握手过程中传送的包里不包含数据,三次握手完毕后,客户端与服务器才正式开始传送数据。理想状态下,TCP连接一旦建立,在通信双方中的任何一方主动关闭连接之前,TCP 连接都将被一直保持下去。
采用三次握手是为了防止A失效的连接请求报文段突然又传送到主机B,因而产生错误。失效的连接请求报文段是指:主机A发出的连接请求没有收到主机B的确认,于是经过一段时间后,主机A又重新向主机B发送连接请求,且建立成功,顺序完成数据传输。考虑这样一种特殊情况,主机A第一次发送的连接请求并没有丢失,而是因为网络节点导致延迟达到主机B,主机B以为是主机A又发起的新连接,于是主机B同意连接,并向主机A发回确认,但是此时主机A根本不会理会,主机B就一直在等待主机A发送数据,导致主机B的资源浪费。
为什么不是四次握手呢? 大家应该知道通信中著名的蓝军红军约定, 这个例子说明, 通信不可能100%可靠, 而上面的三次握手已经做好了通信的准备工作, 再增加握手, 并不能显著提高可靠性, 而且也没有必要。
数据传输完毕后,双方都可释放连接。最开始的时候,客户端和服务器都是处于ESTABLISHED状态,假设客户端主动关闭,服务器被动关闭。
第一次挥手:
客户端发送一个FIN,用来关闭客户端到服务器的数据传送,也就是客户端告诉服务器:我已经不 会再给你发数据了(当然,在fin包之前发送出去的数据,如果没有收到对应的ack确认报文,客户端依然会重发这些数据),但是,此时客户端还可 以接受数据。
FIN=1,其序列号为seq=u(等于前面已经传送过来的数据的最后一个字节的序号加1),此时,客户端进入FIN-WAIT-1(终止等待1)状态。 TCP规定,FIN报文段即使不携带数据,也要消耗一个序号。
第二次挥手:
服务器收到FIN包后,发送一个ACK给对方并且带上自己的序列号seq,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号)。此时,服务端就进入了CLOSE-WAIT(关闭等待)状态。TCP服务器通知高层的应用进程,客户端向服务器的方向就释放了,这时候处于半关闭状态,即客户端已经没有数据要发送了,但是服务器若发送数据,客户端依然要接受。这个状态还要持续一段时间,也就是整个CLOSE-WAIT状态持续的时间。
此时,客户端就进入FIN-WAIT-2(终止等待2)状态,等待服务器发送连接释放报文(在这之前还需要接受服务器发送的最后的数据)。
第三次挥手:
服务器发送一个FIN,用来关闭服务器到客户端的数据传送,也就是告诉客户端,我的数据也发送完了,不会再给你发数据了。由于在半关闭状态,服务器很可能又发送了一些数据,假定此时的序列号为seq=w,此时,服务器就进入了LAST-ACK(最后确认)状态,等待客户端的确认。
第四次挥手:
主动关闭方收到FIN后,发送一个ACK给被动关闭方,确认序号为收到序号+1,此时,客户端就进入了TIME-WAIT(时间等待)状态。注意此时TCP连接还没有释放,必须经过2∗MSL(最长报文段寿命)的时间后,当客户端撤销相应的TCB后,才进入CLOSED状态。
服务器只要收到了客户端发出的确认,立即进入CLOSED状态。同样,撤销TCB后,就结束了这次的TCP连接。可以看到,服务器结束TCP连接的时间要比客户端早一些。
第一,保证客户端发送的最后一个ACK报文能够到达服务器,因为这个ACK报文可能丢失,站在服务器的角度看来,我已经发送了FIN+ACK报文请求断开了,客户端还没有给我回应,应该是我发送的请求断开报文它没有收到,于是服务器又会重新发送一次,而客户端就能在这个2MSL时间段内收到这个重传的报文,接着给出回应报文,并且会重启2MSL计时器。
第二,防止类似与“三次握手”中提到了的“已经失效的连接请求报文段”出现在本连接中。客户端发送完最后一个确认报文后,在这个2MSL时间中,就可以使本连接持续的时间内所产生的所有报文段都从网络中消失。这样新的连接中不会出现旧连接的请求报文。
建立连接的时候, 服务器在LISTEN状态下,收到建立连接请求的SYN报文后,把ACK和SYN放在一个报文里发送给客户端。
而关闭连接时,服务器收到对方的FIN报文时,仅仅表示对方不再发送数据了但是还能接收数据,而自己也未必全部数据都发送给对方了,所以己方可以立即关闭,也可以发送一些数据给对方后,再发送FIN报文给对方来表示同意现在关闭连接,因此,己方ACK和FIN一般都会分开发送,从而导致多了一次。
发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口 请求报文由请求行,请求头,请求体组成。
请求行的格式为
Method Request-URL HTTP-Version CRLF(回车换行)
eg: GET index.html HTTP/1.1
注意一点你也可以在GET里面藏body,POST里面带参数
重点区别:
GET会产生一个TCP数据包,而POST会产生两个TCP数据包(不是所有浏览器)。
当使用POST, PUT等方法时,通常需要客户端向服务器传递数据。这些数据就储存在请求体中。在请求头中有一些与请求体相关的信息,例如: 现在的Web应用通常采用Rest架构,请求的数据格式一般为json。这时就需要设置Content-Type: application/json。
浏览器地址栏中写入URL,回车
浏览器发现缓存中有这个文件了,不用继续请求了,直接去缓存拿。(最快)
F5
F5就是告诉浏览器,别偷懒,好歹去服务器看看这个文件是否有过期了。于是浏览器就战战兢兢的发送一个请求带上If-Modify-since。
Ctrl+F5
告诉浏览器,你先把你缓存中的这个文件给我删了,然后再去服务器请求个完整的资源文件下来。于是客户端就完成了强行更新的操作.
它会对TCP连接进行处理,对HTTP协议进行解析,并按照报文格式进一步封装成HTTP Request对象,供上层使用。这一部分工作一般是由Web服务器去进行,我使用过的Web服务器有Tomcat, Nginx和Apache等等
HTTP报文也分成三部分,状态码 ,响应报头和响应报文
略
常见的响应报头字段有: Server, Connection...
从服务器请求的HTML,CSS,JS文件就放在这里面
当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流。
会导致回流的操作:
一些常用且会导致回流的属性和方法:
重绘
当页面中元素样式的改变并不影响它在文档流中的位置时(例如:color、background-color、visibility等),浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。
优化
css:
JavaScript:
JS的解析
JS的解析是由浏览器的JS引擎完成的。由于JavaScript是单线程运行,也就是说一个时间只能干一件事,干这件事情时其他事情都有排队,但是有些任务比较耗时(例如IO操作),所以将任务分为同步任务和异步任务,所有的同步任务放在主线程上执行,形成执行栈,而异步任务等待,当执行栈被清空时才去看看异步任务有没有东西要搞,有再提取到主线程执行,这样往复循环(冤冤相报何时了,阿弥陀佛),就形成了Event Loop事件循环
事件循环就是另一个话题了:
图解搞懂JavaScript引擎Event Loop
从面试题看 JS 事件循环与 macro micro 任务队列(带async/await)
微任务、宏任务与Event-Loop
new Promise((resolve, reject) => {
console.log(1);
resolve();
}).then(() => {
console.log(2);
new Promise((resolve, reject) => {
console.log(3);
resolve();
}).then(()=>{
console.log(4);
}).then(() => {
console.log(5);
});
}).then(()=>{
console.log(6)
})
constructor
中的 super(props)
的作用传与不传有什么区别?
this
16.x render函数新增的返回类型
render 函数
React优化:竭尽全力的减少render渲染
性能!!让你的 React 组件跑得再快一点
class HOC extends React.Component{
constructor(wrappedComponent){
this.wrappedComponent = wrappedComponent;
this.state = {
isLoading: false
}
}
render(){
return(
this.state.isLoading ? <Loading /> : <WrappedComponent ...this.props/>
)
}
}
子父组件通信,回调函数不推荐使用了,为什么?
子组件可以直接修改props吗,为什么?
「Virtual Dom 的优势」其实这道题目面试官更想听到的答案不是上来就说「直接操作/频繁操作 DOM 的性能差」,如果 DOM 操作的性能如此不堪,那么 jQuery 也不至于活到今天。所以面试官更想听到 VDOM 想解决的问题以及为什么频繁的 DOM 操作会性能差。
DOM 引擎、JS 引擎 相互独立,但又工作在同一线程(主线程)
JS 代码调用 DOM API 必须 挂起 JS 引擎、转换传入参数数据、激活 DOM 引擎,DOM 重绘后再转换可能有的返回值,最后激活 JS 引擎并继续执行若有频繁的 DOM API 调用,且浏览器厂商不做“批量处理”优化,
引擎间切换的单位代价将迅速积累若其中有强制重绘的 DOM API 调用,重新计算布局、重新绘制图像会引起更大的性能消耗。
其次是 VDOM 和真实 DOM 的区别和优化:
class Animal() {
constructor() {
this.type = 'animal'
}
says(say) {
setTimeout(() => {
console.log(this.type + ' says ' + say)
}, 1000)
}
}
var animal = new Animal()
animal.says('hi')
抽离第三方依赖
如想把react 单独拆成一个包。
loader的作用
fiber 讲解
getDerivedStateFromProps
getSnapshotBeforeUpdate
const p1 = new Person('zhang');
{name: 'zhang'}
p1.hello(); => zhang
讲讲 window.performance api
1
/ | \
2 3 4
/ \ | /|\
5 6 7 8 9 10
\
11
一个数字123,是用链表表示的,1->2->3,现在想要对这个数字进行加1操作,实现这个函数,考虑连续进位
class ListNode {
next,
value
}
function plusOne(head) {
//output head
}
给出一个单调不降的数组 arr,和一个目标值 target
找出数组中最接近target的值所在的位置,要求 时间复杂度最优
// e.g.
arr: 1 2 2 3 4 5 6
target: 2.5
2 2 3
[TOC]
数组的创建有三种方式:构造函数方式、字面量方式、ES6新增的Array.of() 方法创建。
构造函数方式
let arr = new Array(); // 创建一个空数组
let arr = new Array(10); // 创建长度为10的数组
let arr = new Array('a'); // 创建包含一个字符串元素a的数组
let arr = new Array(10, 'a'); // 创建包含10和字符串a两个元素的数组
注意:
1.new 关键字是可省略的
2.当只传一个number类型参数时,创建的是参数指定长度的数组。即构造函数形式创建数组,不能创建只包含一个number类型元素的数组
字面量方式
let arr = [10, 'a']; // 字面量方式,即直接给数组赋值
Array.of方法(ES6新增)
这个方法弥补了构造函数创建数组的不足。可以实现创建只有一个number类型元素的数组。
let arr = Array.of(3);
console.log(arr); // [3]
// 参数可以是各种类型
let arr1 = Array.of(1, 'a', true, null, undefined, {name: "zhangsan"}, [45]);
console.log(arr1); // [ 1, 'a', true, null, undefined, { name: 'zhangsan' }, [ 45 ] ]
两种较为准确的检测方法:
Object.prototype.toString.call([]) === "[object Array]"; // true
Array.isArray([1, 2, 3]); // true
length属性:
作用:1.设置或返回数组的长度 2.可用来增加和删除数组项
let arr = [1, 2];
arr.length = 1;
console.log(arr); // [1]
arr.length = 3;
console.log(arr); // [1, , ]
JavaScript的数组方法包括数组原型的方法、构造函数的方法(ES6新增部分)
(一)原型上的方法
let arr = [1, 2, 3];
let temp = arr.push('a', 'b');
console.log(arr, temp); // [1, 2, 3, 'a', 'b'] 5
let arr = [1, 2, 3];
let temp = arr.pop();
console.log(arr, temp); // [1, 2] 3
let arr = [1, 2, 3];
let temp = arr.unshift('a', 'b');
console.log(arr, temp); // ['a', 'b', 1, 2, 3] 5
let arr = [1, 2, 3];
let temp = arr.shift();
console.log(arr, temp); // [2, 3] 1
let arr = [1, 2, 3];
// 插入元素
let temp = arr.splice(1, 0, 'a', 'b'); // 在索引1的位置插入元素'a'和'b'
console.log(arr, temp); // [1, 'a', 'b', 2, 3] []
// 删除元素
let temp1 = arr.splice(1, 2); // 删除从索引1的位置开始的2项
console.log(arr, temp1); // [1, 2, 3] ['a', 'b']
// 替换一个元素
let temp2 = arr.splice(1, 1, 'a'); // 将索引1的位置的元素替换为'a'
console.log(arr, temp2); // [1, 'a', 3 ] [2]
// 替换多个元素
let temp3 = arr.splice(0, 2, 'b', 'c'); // 将索引0的位置开始的两项,替换成’b‘和’c‘
console.log(arr, temp3); // [’b‘, 'c', 3] [1, 'a']
// 只传第一个参数,则删除从第一个参数指定的位置到数组结尾的所有项
let temp4 = arr.splice(0); //从索引0的位置开始,删除后面的所有项
console.log(arr, temp4); // [] [’b‘, 'c', 3]
let arr = [1, 2, 3, 4, 5];
// 用索引0~4范围内的元素,替换索引3~4范围内的元素,因为要替换的位置只有两个,所以只将4,5替换为了1,2
let temp = arr.copyWithin(3);
console.log(arr, temp); // [1, 2, 3, 1, 2] [1, 2, 3, 1, 2]
let arr1 = [1, 2, 3, 4, 5];
// 用索引2~4范围内的元素,替换索引3~4范围内的元素,因为要替换的位置只有两个,所以只将4,5替换为了3,4
let temp1 = arr1.copyWithin(3, 2);
console.log(arr1, temp1); // [1, 2, 3, 3, 4] [1, 2, 3, 3, 4]
let arr = [1, 2, 3];
let temp = arr.reverse();
console.log(arr, temp); // [ 3, 2, 1 ] [ 3, 2, 1 ]
// 数组从小到大排序
let arr = [1, 4, 6, 7, 8, 3, 2];
let temp = arr.sort((a, b) => {
return a - b;
})
console.log(arr, temp); // [ 1, 2, 3, 4, 6, 7, 8 ] [ 1, 2, 3, 4, 6, 7, 8 ]
// 一个实用的数组排序的例子,根据对象元素的排序,排序对象在数组中的位置
let objArr = [{id: 3, name: "lilei"},{id: 1, name: "hanmeimei"},{id: 2, name: "yimi"}];
let tempArr = objArr.sort((a, b) => {
// 按照id从小到大的顺序,对数组中的对象进行排序
// 这个示例说明回调函数的形参a,b实际就是数组中当前进行比对的两个元素
return a.id - b.id;
});
console.log(objArr); // [{id: 1, name: 'hanmeimei'}, {id: 2, name: 'yimi'}, { id: 3, name: 'lilei' }]
console.log(tempArr); // [{id: 1, name: 'hanmeimei'}, {id: 2, name: 'yimi'}, { id: 3, name: 'lilei'}]
V8 引擎 sort 函数只给出了两种排序 InsertionSort 和 QuickSort,数量小于10的数组使用 InsertionSort,比10大的数组则使用 QuickSort。
参考文章
参数的类型可以是任意类型。
不是数组类型直接按顺序拼接到数组末尾,数组类型的则将数组元素逐一取出拼接到数组末尾
不传则相当于复制数组
返回值:拼接后的数组
原数组是否改变:否
let arr = [1,2];
let temp = arr.concat('a', {id:1}, ['lilei', 'hanmeimei']);
console.log(arr, temp); // [ 1, 2 ] [ 1, 2, 'a', { id: 1 }, 'lilei', 'hanmeimei']
// 用于复制数组
let arr = [1, 2];
let temp = arr.concat();
console.log(arr, temp); // [ 1, 2 ] [ 1, 2 ]
let arr = [0, 1, 2, 3, 4];
let temp = arr.slice(1,3); // 返回从索引1(包括)位置到索引3(不包括)位置之前的元素
console.log(arr, temp); // [0, 1, 2, 3, 4] [1, 2]
// 用于复制数组
let arr = [0, 1, 2, 3, 4];
let temp = arr.slice(0); // 返回从索引0(包括)位置到数组结尾的所有元素
console.log(arr, temp); // [0, 1, 2, 3, 4] [0, 1, 2, 3, 4]
let arr = [1, 2, 3, 4, 5, 6, 2];
// 从数组开头开始查找
let temp = arr.indexOf(2);
console.log(arr, temp); // [ 1, 2, 3, 4, 5, 6, 2 ] 1
// 从指定的位置开始查找
let temp1 = arr.indexOf(2,3); // 从索引3(包括)的位置向后查找元素2
console.log(arr, temp1); // [ 1, 2, 3, 4, 5, 6, 2 ] 6
let arr = [1, 2, 3, 4, 5, 6, 2];
// 从数组末尾开始查找
let temp = arr.lastIndexOf(2);
console.log(arr, temp); // [ 1, 2, 3, 4, 5, 6, 2 ] 6
// 从指定的位置开始查找
let temp1 = arr.lastIndexOf(2,3); // 从索引3(包括)的位置向前查找元素2
console.log(arr, temp1); // [ 1, 2, 3, 4, 5, 6, 2 ] 1
let arr = [1, 2, 3, 4];
let temp = arr.every((item, index, array) => {
return item > 2;
});
console.log(arr, temp); // [ 1, 2, 3, 4 ] false
// 方法的第二个参数可选,作用是设定第一个参数中的this指向,如果使用第二个参数,注意callback不能是箭头函数
// 后面的迭代方法涉及此参数的,用法相同,不在赘述
let arr = [1, 2, 3, 4];
let temp = arr.every(function(item, index, array) {
return item > this.id;
}, {id: 2});
console.log(arr, temp); // [ 1, 2, 3, 4 ] false
let arr = [1, 2, 3, 4];
let temp = arr.some((item, index, array) => {
return item > 2;
});
console.log(arr, temp); // [ 1, 2, 3, 4 ] true
let arr = [1, 2, 3, 4];
let temp = arr.filter((item, index, array) => {
return item > 2;
});
console.log(arr, temp); // [ 1, 2, 3, 4 ] [3, 4]
let arr = [1, 2, 3, 4];
let temp = arr.map((item, index, array) => {
return item * item;
});
console.log(arr, temp); // [ 1, 2, 3, 4 ] [ 1, 4, 9, 16]
let arr = [1, 2, 3, 4];
let temp = arr.forEach((item, index, array) => {
// 不会有返回值,但可在这里执行某些操作
return item * item;
});
console.log(arr, temp); // [ 1, 2, 3, 4 ] undefined
//注意:forEach在所有项都遍历完成之前,无法像for循环一样提前终止循环
prev 前一个值,(initialValue || 数组第一项 || 上一次迭代的结果)
cur 当前迭代项
index 当前迭代项索引
array 迭代的原数组
initialValue 迭代的基础值,不传基础值是数组第一项
返回值:数组迭代后,整体的迭代结果
原数组是否改变:涉及callback,因此不确定,具体详情见下文中的原型方法的小结部分。
// 数组求和
let arr = [1, 2, 3];
let sum = arr.reduce((prev, cur, index, array) => {
return prev + cur;
});
console.log(arr, sum); // [ 1, 2, 3 ] 6
// 传initialValue 基础值的示例
let sum1 = arr.reduce((prev, cur, index, array) => {
return prev + cur;
}, 10);
// 返回的值是:10+1+2+3
console.log(arr, sum1); // [ 1, 2, 3 ] 16
callback迭代函数,有四个参数(prev, cur, index, array)
prev 前一个值,(initialValue || 数组第一项 || 上一次迭代的结果)
cur 当前迭代项
index 当前迭代项索引
array 迭代的原数组
initialValue 迭代的基础值,不传基础值是数组第一项
返回值:数组迭代后,整体的迭代结果
原数组是否改变:涉及callback,因此不确定,具体详情见下文中的原型方法的小结部分
// 拼接字符串,从后向前迭代数组进行拼接
let arr = ['h', 'e', 'l', 'l', 'o'];
let str = arr.reduceRight((prev, cur, index, array) => {
return prev + cur;
});
console.log(arr, str); // [ 'h', 'e', 'l', 'l', 'o' ] 'olleh'
let arr = [1, 2, 3, 4, 5];
let temp = arr.find((item, index, array) => {
return item > 2;
})
console.log(arr, temp); // [1, 2, 3, 4, 5] 3
let arr = [1, 2, 3, 4, 5];
let temp = arr.findIndex((item, index, array) => {
return item > 2;
})
console.log(arr, temp); // [1, 2, 3, 4, 5] 2
let arr = [1, 2, 3, 4, 5];
let temp = arr.fill('a', 2, 4);
console.log(arr, temp); // [1, 2, 'a', 'a', 5] [1, 2, 'a', 'a', 5]
let arr = [1, 2, 3, 4, 5];
let temp = arr.includes(5);
console.log(arr, temp); // [1, 2, 3, 4, 5] true
// 这个方法弥补了indexOf查看元素时的一个不足,即查找NaN的误差
let arr1 = [NaN, 'a'];
let temp1 = arr1.includes(NaN);
let temp2 = arr1.indexOf(NaN);
console.log(temp1, temp2); // true -1
let arr = [1, [1, 2, [4]], {name: "zhangsan"}, 3];
let temp = arr.toString();
console.log(arr); [ 1, [ 1, 2, [ 4 ] ], { name: 'zhangsan' }, 3 ]
console.log(temp); // '1,1,2,4,[object Object],3'
let arr = [1, [1, 2, [4]], {name: "zhangsan"}, 3];
let temp = arr.join();
console.log(arr); [ 1, [ 1, 2, [ 4 ] ], { name: 'zhangsan' }, 3 ]
console.log(temp); // '1,1,2,4,[object Object],3'
// 数组求和
let arr1 = [1, 2, 3];
console.log(eval(arr1.join('+'))); // 6
- 数组的方法无外乎是对数组的增删改查、转换、迭代。增、删、改都会改变原有的数组,查、转换的方法不涉及callback参数的不会改变原数组,涉及到的则视情况而定,迭代方法因为均涉及到callback参数,因此也不确定。
那么为什么涉及到callback就不确定了呢???
首先如果直接在callback中操作原数组,那肯定原数组会改变。例如:
let arr = [1,2,3,4];
let temp = arr.forEach((item,index,array) => {
// 直接通过索引操作原数组
array[index] *= item;
});
console.log(arr,temp); // [1, 4, 9, 16] undefined
复制代码如果不是直接操作原数组,而是操作callback的item参数的时,如果item是基本数据类型则原数组中对应的该项元素不会改变,如果是引用类型(数组,对象、函数等)则改变,因为操作引用类型的值,实质是操作该值所在存贮地址的内容,而item对应的原数组中的元素和item是同一引用地址,因此会导致原数组中对应元素改变。
(二)构造函数的方法
Array.from():
作用:将类数组转化为数组
参数:arrayLike[, mapFn[, thisArg]]
参数说明:
arrayLike:类数组对象,可以是我们常见的nodeList、arguments、字符串、iterable对象等
mapFn: 对转化后的数组进行操作的回调函数
thisArg: 指定mapFun中的this
返回值:转化后的数组,如果有mapFn,则返回结果是经过mapFn处理的数组
原类数组是否改变:不使用mapFn,则类数组不改变。使用mapFn则结果同上述迭代方法中使用callback的情况一致。
let str = 'hello';
let temp = Array.from(str);
console.log(str, temp); // hello [ 'h', 'e', 'l', 'l', 'o' ]
let temp1 = Array.from(str, (item, index) => {
return item.toUpperCase();
});
console.log(str, temp1); // hello [ 'H', 'E', 'L', 'L', 'O' ]
Array.from() 等价于 Array.prototype.slice.call(arguments,0)
数组的扩展运算符可以将数组转化为以逗号分割的参数序列。
几个简单使用的应用场景:
let arr = [1, 2, 3];
// apply写法
Math.min.apply(null, arr)
// 扩展运算符写法
Math.min(...arr)
let arr1 = [2, 3, 4];
let arr2 = ['a', 'b', 'c'];
// 拼接数组arr1和arr2
console.log([...arr1, ...arr2]); // [2, 3, 4, 'a', 'b', 'c']
[…'hello'] // [ 'h', 'e', 'l', 'l', 'o' ]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.