mianshiyan资料汇总

已于 2023-11-06 00:52:02 修改
阅读量1.8k 收藏
点赞数
文章标签： 面试 javascript 职场和发展
于 2021-04-10 19:47:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42201346/article/details/115571860
版权

Thunk函数的使用
阿里面试官：如何给所有的async函数添加try/catch？
数组的push、unshift、pop、shift方法实现

实现非负大整数相加

Number.MAX_VALUE // 1.7976931348623157e+308
Number.MAX_SAFE_INTEGER // 9007199254740991
Number.MIN_VALUE // 5e-324
Number.MIN_SAFE_INTEGER // -9007199254740991

类数组转数组的方法：
Array.prototype.slice.call(arrayLike);
Array.prototype.splice.call(arrayLike, 0);
Array.prototype.concat.apply([], arrayLike);
Array.from(arrayLike);

proxy深度监听，1. 递归。2.immerjs.你访问的话，我就开始监听，你不访问我就不监听。

Kubernetes 蓝绿发布、ABTest、滚动发布、灰度发布、金丝雀发布简介

js函数自执行方式

  1. (function(){})()
  2. node的vm自执行 runInThisContext
  3. new Function()
  4. eval
    在这里插入图片描述

自己的东西
mianshiyan资料汇总(整理后)
代码工程化问题-代码规范题
css点滴yan
移动端开发点滴yan
正则点滴yan
算法点滴yan
面试yan-原理性函数
浏览器渲染点滴yan
react点滴yan
zf-总结
js点滴yan
es6软一峰
node点滴yan
后端点滴yan

Svelte框架学习初探
koa
可视化
js陷阱缺陷点滴yan&js原生dom点滴yan
博客园-沉默
博客园-js点滴
npm点滴yan
git 点滴yan
requirejs源码学习笔记（一）
面试js数组和object string点滴yan
CSS中link和@import的区别

白老师运维

面试题

面试之css篇
每日一题
2021 字节前端面试题汇总
最后看-2022年最新前端面试题（大前端时代来临卷起来吧小伙子们…持续维护走到哪记到哪）
字节跳动最爱考的前端面试题：JavaScript 基础
typescript面试
网易前端面试（灵犀部门）
2022年最新前端面试题
最近两周出去面试遇到的面试题（前端初级、长更）
三面面试官：运行 npm run xxx 的时候发生了什么？
【🐯初/中级前端面经】中小型公司面试时都会问些什么?

h5面试题总结

前端面试（vue优化、移动端兼容问题、前端安全问题）
web前端面试题及答案
一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧
html5新特性有哪些
最新的前端大厂面经（详解答案）
金九银十，你准备好面试了吗? (附30w字前端面试题总结)

2023Javascript面试题

一些值得看的技术博客

拖拽：看完就懂的前端拖拽那些事
面试系列 | 文件里存储了10亿条销量数据, 如何找出前1000大的数据?
各种手写
你所忽略的JS：数据类型和精度问题
monorepo
初中级前端面试题

jpg、png、gif、webp详细介绍

获取容器的宽度
浅析requestIdleCallback
SSR 与当年的 JSP、PHP 有什么区别？
btoa
defer不会影响浏览器的dcl，而async
vue项目工程中npm run dev 到底做了什么
Node中使用http-proxy-middleware实现代理跨域的方法步骤
ES6装饰器

antd源码 semi源码

大文件传输
几款实用的VUE移动端UI框架
vux，Vonic，cube-ui，Mint-UI，Vant，NutUI

目前完美支持Vue3.0的移动端组件库——Vant&NutUI

vant nutUI Nuxt框架 Nuxt详解+案例
推荐几个移动端前端UI框架

websocket 二进制传输的好处
有时间去了解下react18的Outlet
Next.js vs. Nuxt.js vs. Nest.js

版本 不同的版本之间有啥差异

webpack5
react 16.8
vue 2.*

如何解决切换代码时候的报错问题
保证你的代码可以做好老数据结构的处理，或者做到新接口迭代增加而不是累计增加。

网关层过滤apisix。还有spring-cloud限流。
set时候，都做5秒的定时器的话，高并发定时器其实是处理有问题的。可以考虑定时更新索引，脏检查。
接口的幂等性
？redis 缓存同步，多点缓存同步。

埋点平台那么多数据都写入库里么？

  1. 直接写es。好几层过滤。第一层。第二层。
  2. 大数据的库。postgress, hole。

看哪些书籍，看哪些博客，公众号
前端之巅，齐舞团，infoQ,美团技术，阿里技术，
es6阮一峰
JavaScript DOM编程艺术
设计模式
javascript高级程序设计
javascript函数式编程
掘金
csdn

generator 有了解过吗？
Generator 生成器 也是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同 function *（）{}

Generator 函数是一个状态机，封装了多个内部状态，除了状态机，还是一个遍历器对象生成函数。

Generator 是分段执行的, yield （又得）可暂停，next方法可启动。每次返回的是yield后的表达式结果，这使得Generator函数非常适合将异步任务同步化

Generator 并不是为异步而设计出来的，它还有其他功能（对象迭代、控制输出、部署Interator`接口…）

Generator函数返回Iterator对象，因此我们还可以通过for…of进行遍历,原生对象没有遍历接口，通过Generator函数为它加上这个接口，就能使用for…of进行遍历了

什么是函数式编程? 命令式编程？声明式编程？
声明式编程：专注于”做什么”而不是”如何去做”。在更高层面写代码，更关心的是目标，而不是底层算法实现的过程。 如：css, 正则表达式，sql 语句，html, xml…

命令式编程(过程式编程) : 专注于”如何去做”，这样不管”做什么”，都会按照你的命令去做。解决某一问题的具体算法实现。

如： for（）

函数式编程：把运算过程尽量写成一系列嵌套的函数调用。

如 ： forEach（）

各种小知识点集合

JavaScript中in操作符(for…in)、Object.keys()和Object.getOwnPropertyNames()的区别

其实这几个方法之间的差异主要在属性是否可可枚举，是来自原型，还是实例。
方法 适用范围 描述
for…in 数组，对象 获取可枚举的实例和原型属性名
Object.keys() 数组，对象 返回可枚举的实例属性名组成的数组
Object.getPropertyNames() 数组，对象 返回除原型属性以外的所有属性（包括不可枚举的属性）名组成的数组
for…of 可迭代对象(Array, Map, Set, arguments等) 返回属性值。

Object.getOwnPropertyNames(obj)
Object.getOwnPropertySymbols(obj)
hasOwnProperty

// 安全使用hasOwnProperty方法

var colors = ['red', 'green', 'blue'];
var hasOwn = Object.prototype.hasOwnProperty;
for (var i in colors) {
  if (hasOwn.call(colors, i)) { // 或者colors.hasOwnProperty(i)
    console.log(i); // 输出：0 1 2
  }
}
javaScript ES6 class多重继承实践与总结 例子一
ES6中，class原生是不支持多重继承的，根据阮一峰ES6参考资料中的方法，通过以下方式即可实现class继承多个类：
nodejs
koa-router源码分析
如果项目a用了第三方库b,a最后打包成为了npm包，C在引用项目包的时候如果

caller和callee的区别 https://blog.csdn.net/laijieyao/article/details/43404953

Ejs使用手册
js解释器
JS解释器：就是执行你的javascript代码的东东，就像你的java代码由JVM执行，javascript是由javascript解释器执行，浏览器中一般都会包含这个。
 每个浏览器的并不一样，一般都包含在各浏览器的内核中
 浏览器内核一般包含两个引擎：页面排版引擎 和 JS引擎
 IE的 使用的自己的Trident 内核
 FireFox 是Gecko内核
Opera 是Presto内核
Safari 使用的Webkit 内核
Chrome 是Google自己的 javascript V8引擎 而其页面排版采用的Webkit 内核
javaScript 代码解释执行过程
js的in不仅可以遍历对象，更可以遍历所有的东西

在这里插入图片描述

JS实现JSON.stringify

上边这个我测试了，确实好用。

for in 和 for of

简析2

函数式编程和面向对象编程

Symbol的使用场景

Js的Generator函数（一）
Blob

JavaScript中的Blob你知道多少

学习HTML5 Canvas这一篇文章就够了

小程序
京东的小程序框架Taro
微信小程序面试题大全（持续更新）

常看哪些技术类的书籍和博客

JavaScript高级程序设计 JavaScript+DOM编程艺术 设计模式 JavaScript权威指南 mdn 掘金 公众号 奇舞周刊 csdn 社区 大会

对前端工程师这个职位是怎么样理解的？它的前景会怎么样？

1.实现界面交互
2.提升用户体验
3.有了Node.js，前端可以实现服务端的一些事情
4.前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好.
5.与团队成员，UI设计，产品经理的沟通；
6.做好的页面结构，页面重构和用户体验；

你觉得前端工程的价值体现在哪？

1、为简化用户使用提供技术支持（交互部分）
2、为多个浏览器兼容性提供支持
3、为提高用户浏览速度（浏览器性能）提供支持
4、为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
5、为展示数据提供支持（数据接口）

移动端（Android IOS）怎么做好用户体验?

清晰的视觉纵线、
信息的分组、极致的减法、
利用选择代替输入、
标签及文字的排布方式、
依靠明文确认密码、
合理的键盘利用

编写可维护性质的代码
1.公用二次以上的代码必须抽象出来。
2.不能用if else if else 解决多个类型判断的问题，必须注意抽象出来，写成一个数组。
3.写代码的时候，要有一写，编程的思想或者设计模式在里边，工厂模式了，代理模式了，js的颗粒化了，适配模式了，订阅者发布者模式了.
4 js url变化监听 https://blog.csdn.net/yanyan19880509/article/details/48229511
如果页面没有#或者location.hash
5 方法如果return {}这个对象和new的效果一样都是新的，但是如果return function() {} 你多次调用这个方法，返回的匿名函数的指针也是不同的。
6 js的继承应该看的https://www.cnblogs.com/lishuxue/p/6097575.html
7 js mdn 中文版本 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes
[面向对象的6大原则](https://www.cnblogs.com/cmt/p/14580194.html?from=https://www.cnblogs.com/silencer/p/10812417.html
面向对象的三大特征 博客1

json-bigint处理大整数问题（详解）

云计算服务类型都是什么？IaaS、PaaS、SaaS、BaaS、FaaS

实现一个基本功能的diff算法(包含注释讲解）

锚点
1 使用标签实现锚点

优点：实现方式简单；
缺点：点击锚点之后，浏览器的URL会发生变化，这样，遇到页面刷新很可能会出现问题。
在herf属性中写入div标签的id，例：

...
<a href="#div1">go to div1</a>
<a href="#div2">go to div2</a>
...
<div id="div1">div1</div>
<div id="div2">div2</div>
...
2使用js事件中window.location.hash="div标签的id值"实现锚点

优点：实现方式简单；
缺点：点击锚点之后，浏览器的URL会发生变化，这样，遇到页面刷新很可能会出现问题。

3使用jQuery中的animate属性实现锚点

优点：引入jQuery框架后，实现方式简单，有优雅的动画滚动效果，没有URL改变的情况。
缺点：得引入jQuery框架，有一定框架限制；如果页面复杂的话，偏移值如发生变化需要借助算法辅助。

...
<script src="放jquery的路径/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#div1Link").click(function() {
			$("html, body").animate({scrollTop: $("#div1").offset().top },{duration: 500,easing: "swing"});
			return;
		});
		$("#div2Link").click(function() {
			$("html, body").animate({scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
			return;
		});
</script>
4使用js的scrollIntoView()方法实现锚点（推荐使用）这个用来实现页面。（注意scrollIntoView平滑滚动可以设置参数，CSS scroll-behavior，）

优点：实现方式简单；
缺点：暂无。

document.getElementById("div标签的id值").scrollIntoView();
----

平滑滚动 类似 (CSS scroll-behavior) 平滑滚动(可以查看)
scrollIntoView({
behavior: “smooth”
})

5 parent.scrollTo(0, children.offset)

scrollTo是两个参数

scrollTop 和 scrollTo对应的，而offsetTop距离父元素的距离

scrollIntoView 和 scrollTo可以配合使用。
遇到一次scrollIntoView用了之后，scrollTo使用没有效果了，然后用父元素的第一个元素去再次执行scrollIntoView

管理

你平常是怎么做 code review 的？一般是怎样的流程？会关注哪些内容？
如何帮助新人做好落地？如何帮助团队成员成长？
  1. 良好的mentor机制，帮助新人明白，1周内的目标，两周内的目标，一个月的目标，三月的目标，六个月的目标。
  2. 良好的知识库。
  3. 良好的行业信息收集。
  4. 良好的沟通。
  5. 良好的分享机制。
  6. 良好的业务沉淀机制。
  7. 良好的任务管理机制。
你未来 3-5 年有什么职业规划？
广告new Img方式曝光有丢失

那么这种方式打点的丢失率可能会高达 10%

var img = new Image();
var rnd_id = "_img_" + Math.random();

window[rnd_id] = img; // 全局变量引用

img.onload = img.onerror = function () {
	window[rnd_id] = null; // 删除全局变量引用
}

img.src = "http://log.mysite.com/1.gif?a=1&b=2&c=xxx";
JavaScript中的信标beacon是什么？
解决埋点太多的时候，处理不了发送的问题
页面要知道一个组件别哪些页面使用了哪个组件
  1. 手动表格维护。
  2. 主动组件内埋点。
  3. 通过webpack打包的时候，引入,在ast语法分析后，打印
几个好用的代码编辑器

CodeSandbox
Codepen
JSFiddle
JS Bin
Stackblitz
码上掘金
Playcode

js window.open跳转被拦截

在这里插入图片描述
正常的代码逻辑(定时器不通过脚本去执行)

<button onclick="test()">click4</button>
    <script>
        function test() {
            // 这个没问题
            // window.open(url);
            // 这个没问题
            // setTimeout(() => {
            //     openNewWindow('https://www.baidu.com/');
            // }, 4000);
        }
    </script>

异常代码

 <script>
        var url = 'https://www.baidu.com/'
        function openNewWindow(url) {
            // 这个的有问题
            window.open(url);
            // 这下边的有问题
            // var features = "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=400,height=400,top=100,left=100";
            // var newWindow = window.open(url, "_blank", features);
            // 这下边的有问题
            // var newwindow=window.open(); 
            // newwindow.location=url;
        }
        setTimeout(() => {
            openNewWindow('https://www.baidu.com/');
        }, 4000);
        
    </script>

模拟a标签可以解决

function openurl(url) {
  var a = document.createElement('a');
  a.setAttribute('href', url);
  a.setAttribute('style', 'display:none');  
  a.setAttribute('target', '_blank');  
  document.body.appendChild(a);
  a.click();
  a.parentNode.removeChild(a);  
}
飘然离去
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
浏览器的两个页面之间通信的问题
yiyueqinghui的博客
10-19 5542
两个浏览器窗口间通信总结： 1、localStorage 一个窗口更新localStorage， 另一个窗口监听window对象的”storage”事件，来实现通信。 // 本窗口的设值代码 localStorage.setItem('aaa', (Math.random()*10).toString()) // 其他窗口监听storage事件 window.addEventListener("storage", function (e) { console.log(e) console.log
两个浏览器窗口之间通信(最佳实践)
jsPao的博客
03-10 871
通信分为同源和非同源两类，WebSocket、postMessage、SharedWorker、BroadcastChannel。
js 跨浏览器tab页通信
wangjun5159的专栏
02-23 2690
跨tab页通信 今天遇到一个问题，订单列表页面，新开了一个新增订单的tab页，新增完后，订单列表要即时显示，这就是跨tab（tab、window、frame、iframe）通信,注意tab页、window窗口、frame、iframe都属于跨tab范畴，同源下，可使用BroadCastChannel解决此问题。（https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API） // If it is the first to co
浏览器窗口间通信
WindrunnerMax
05-17 1541
浏览器窗口间通信 浏览器多个标签页窗口间通信，主要是指的同源的多个页面间的通信，主要方法有本地存储通信、Web Worker通信、Web Socket通信。 本地存储通信 通过浏览器对于同源页面本地存储是共享的策略实现通信，主要可以使用localStorage、cookie、indexDB，注意对于sessionStroage是在同一会话有效的，在MDN中提到，通过点击链接或者使用window.open打开的新标签页之间是属于同一个session的，新的标签页会继承上一级会话的sessionStroage，
java按钮触发另一个页面_前端跨页面通信，你知道哪些方法？
weixin_39948309的博客
11-24 874
戳蓝字「前端技术优选」关注我们哦！引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会...
两个浏览器页面数据通信，页面是非父子、非兄弟关系
eternal_tc的博客
11-10 409
关闭一个新开的浏览器页面B，进行刷新另一个页面A的数据。即关闭页面A通知页面B进行数据刷新
ROS 简单的跨浏览器通信
跨学科知识视角展现
01-12 528
概述 ROS 和 RobotWebTools 在构建我们最新的分布式交互体验方面非常有用。 我们将继续基于其庞大的现有设备驱动程序目录，快速开发面向浏览器的 ROS 体验。 无论客户希望他们的交互使用触摸屏、操纵杆、灯光、声音，还是任何可以插入墙上的东西，我们现在都自信地说，可以做到。 ROS 结构 典型的 ROS 系统由一组（“图”）节点组成，这些节点与（通常是 TCP）消息传递进行通信。 消息传递的主题可以是发布/订阅命名空间或请求/响应服务。 ROS 绑定适用于多种语言，但 C++ 和 Python
Uncaught (in promise) TypeError: Failed to execute ‘setRequestHeader‘ on ‘XMLHttpRequest‘: String co
liujingfei1的博客
04-14 6561
问题：axios设置headers时，报错Uncaught (in promise) TypeError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': String contains non ISO-8859-1 code point. 原因是header中，不能使用中文 解决：对参数值进行编码 // 编码 encodeURIComponent(str) // 解码 decodeURIComponent...
Failed to execute ‘setRequestHeader‘ on ‘XMLHttpRequest‘: String contains non ISO-8859-1 code point.
最新发布
码农键盘上的梦
02-01 1231
未捕获（承诺中）TypeError:未能对“XMLHttpRequest”执行“setRequestHeader”：字符串包含非ISO-8859-1代码点。要解决问题就要对中文字符进行编码，到后台里再进行解码接收处理。在前端页面发送request请求到后台时，请求头即。
Web跨浏览器进程通信(Web跨域)
12-09
在之前一篇文章里尝试了跨浏览器的数据共享，最后提到使用LocalConnection还可以实现跨浏览器消息交互的可行性。 　　花了两个晚上简略的研究了下，LocalConnection的单向通信非常的简单，不过要实现多个终端交互，必须自己实现一套消息机制，见智见仁了。 　　为了简单演示，本例使用了基于广播的观察者模式：每个终端可以订阅自己感兴趣的主题，也可以向广播发送消息，通知其他感兴趣的终端。 　　Demo: http://www.etherdream.com/FunnyScript/WebIPC/ （多开几个浏览器页面小窗口，即可测试） 　　比较遗憾的是最新版的Chrome浏览器仍然无法和
Web跨浏览器进程通信
weixin_34355881的博客
04-08 132
　　Web跨域已是老生常谈的话题，这次来尝试下跨域浏览器进程之间的通信 —— 这在过去基本依靠网络中转实现。 　　在之前一篇文章里尝试了跨浏览器的数据共享，最后提到使用LocalConnection还可以实现跨浏览器消息交互的可行性。 　　花了两个晚上简略的研究了下，LocalConnection的单向通信非常的简单，不过要实现多个终端交互，必须自己实现一套消息机制，见智见仁了。 　　为了简...
ajax中Uncaught (in promise) TypeError: Failed to execute ‘setRequestHeader‘ on ‘XMLHttpRequest‘: Stri
code^_^熊的博客
01-09 3652
错误: 原因之一: 在AJAX前端代码中在 请求头(headers)里面设置了自定义的参数，服务器中接收功能的代码部分中的请求方式没有设置为all，而是设置成了get 或者 post
项目页面报错：Failed to execute ‘setRequestHeader‘ on ‘XMLHttpRequest‘: String contains non ISO-8859-1 c
qq_46940224的博客
10-21 2478
项目页面报错：Failed to execute ‘setRequestHeader‘ on ‘XMLHttpRequest‘: String contains non ISO-8859-1 c
跨窗口通信的几种方法
甘焕的博客
07-15 4865
推荐几种在浏览器端跨窗口通信的几种方法，并比较其优劣。
浏览器-跨页面通信
natsu-cc的博客
05-12 940
前言：
浏览器跨页面通信
fmk1023的博客
08-29 1469
Broadcast Channel 是一个非常好用的多页面消息同步 API，然而兼容性却不是很乐观。的（广播）频道，因此其中某一个页面发送的消息可以被其他页面。来实现页面间的通信，但这种方式更像是。在其他页面，可以通过传入相同的。（让所有页面知道）的消息，用。就是用来弥补这个缺陷的。来使用同一个广播频道。赋值这种方式，也可以使用。在前端，我们经常会用。......
如何实现同一浏览器多个标签页之间的通信（一）——localStorage
lwf的博客
04-18 8931
一、localStorage （1）localStorage是什么？ localStorage对象在修订过的HTML5规范中作为持久保存在客户端数据的方案取代了globalStorage，是Storage的实例。 注意：要访问一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。相当于globalStorage[localhost.host]...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值