azl397985856 / fe-interview Goto Github PK

假设我现在有5000个圆，完全绘制出来，点击某一个圆，该圆高亮，另外4999个圆设为半透明，分别说说用svg和canvas怎么实现

参考： https://demian.ferrei.ro/

100 * 100 的 Canvas 占内存多大？

不借助变量交换两个数。

比如 a = 2, b = 3;

如果交换变量的值，使得a = 3， b = 2， 要求不能使用额外的变量

images 引入了 crossorigin 属性, 通过设置适当的头信息 CORS , 可以从其他站点加载 img 图片, 并用在 canvas 中,就像从当前站点(current origin)直接下载的一样.

尽管没有CORS授权也可以在 canvas 中使用图像, 但这样做就会污染(taints)画布。 只要 canvas 被污染, 就不能再从画布中提取数据, 也就是说不能再调用 toBlob(), toDataURL() 和 getImageData() 等方法, 否则会抛出安全错误(security error).

请问这是为什么？

对数组旋转，即将包含n个元素的数组向右旋转k步。

eg:

a = [1,2,3,4] k = 2

则结果为[3,4,1,2]

chrome内置的用来观察函数调用的工具方法。在函数调用的时候，可以同步输出函数名以及参数。当不再需要观察该函数时，调用unmonitor取消即可。

具体用法可以在chrome 的 devtool 自己试试

扩展：

实现chrome下提供的monitorEvents/unmonitorEvents

1. 不完全解构，也会成功，不会报错。
2. 只要支持Iterator接口，都可以被解构赋值。
3. null可以替代默认值，而成功的解构赋值。
4. 结构中不定参数可以出现在除第一个以外的其它的其他位置。
5. 解构是先找到同名的属性，然后再赋给对应的变量。
6. 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

combineReducers可以允许你写多个reducer，然后通过它将多个reducer整合到一起，每一个reducer只会对其注册的key进行修改，不会影响其他reducer的state。

例子：

rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
// This would produce the following state object
{
  potato: {
    // ... potatoes, and other state managed by the potatoReducer ...
  },
  tomato: {
    // ... tomatoes, and other state managed by the tomatoReducer, maybe some nice sauce? ...
  }
}

更多关于combineReducers(reducers) API， 请参考 https://redux.js.org/api/combinereducers

I wanted to know is there any chance that we have an English version of this repo? I can't read Chinese but the topics and the codes in this repo look promising.

A fetcher is

function fetcher(arg, cb){
	let res = fetch(arg);
	cb(res);
}

Write a higher-order function combinedFetcher, using callback to get all the fetched data.

E.g.

const fetchFruitsAndDrinks = combineddFetcher("fruits", "drinks");
fetchFruitsAndDrinks(console.log);

JavaScript的数值Number用64位的浮点数表示，首位是符号位，然后是52位的整数位和11位的小数位。如果符号位为1，其他各位均为0，那么这个数值会被表示成“-0”。

所以JavaScript的“0”值有两个，+0和-0。

那么如何区分呢？

现实中浏览器的调用堆栈信息是不要一样的，因此对于我们调试问题很不方便。

比如我们平常习惯了chrome的堆栈，突然换到了safari或者IE就会很不适应。

有没有办法自己实现一套调用堆栈，统一所有浏览器呢？ 这样我们以后调试的时候就很方便了。

扩展：

是否可以将这个集成到我们的监控系统中，如果线上有问题，一键调出来堆栈信息，上下文，用户轨迹，环境信息，从而帮助我们快速定位和解决问题

1. ECMAScript 2015中规定了执行引擎需要实现EventLoop机制。
2. V8作为最先进的Javascript执行引擎，可以在执行阶段对所有代码进行优化。
3. Node.js通过V8实现异步I/O。
4. Node.js的Buffer类型对象在创建时内存不会分配到V8堆上。
5. Chakra是Firefox内嵌的Javascript执行引擎。
6. 代码正确的情况下，垃圾回收不会导致有内存无法回收。

Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API主要聚焦于2D图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。

假设浏览器现在全体都不支持Canvas，现在让你去开发出一个Canava实现，你的思路是什么？

假如你正在做一个爬虫服务，IP很有可能被封掉，那么如何应对这种情况呢？

事实上现在很多大公司都有很成熟的这种方案了，只是这里我拿出来说一下，让大家有个概念

给定一个数组排序，使得奇数位的值不大于相邻偶数位的值。

比如：

OESort([1,2,3,4,5,6]); // [ 4, 1, 5, 2, 6, 3 ]
OESort([1,2,3,4,5,6,7,8,9, 0]) // [ 5, 0, 6, 1, 7, 2, 8, 3, 9, 4 ]

注意： 答案是不唯一的

Socket是什么， 具体组成是什么？

WebSocket是什么，原理是怎么样的？和Http以及Socket的关系是什么？

功能： 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

语法： arr.find(callback[, thisArg])

callback是在数组每一项上执行的函数，接收 3 个参数：

• element 当前遍历到的元素。
• index可选 当前遍历到的索引。
• array可选 数组本身。

thisArg可选 执行回调时用作this 的对象。

eg:

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});

console.log(found);
// expected output: 12

更多关于find的介绍请参考： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find

用CSS画一个圆，为什么border-radius: 50% 就是一个圆？border-radius: 100% 为啥和 border-radius: 50% 的效果竟然一致！这是为啥？

将IP地址转化为32字节存储，并支持反向解析为原IP地址。

比如：

"192.168.0.1" - > 13232323 (一个数字，这个数字的范围不能超过32个字节的表示范围)

13232323 -> "192.168.0.1"

实现函数：

function IP2Int(str) {
}

和

function Int2IP(int) {
}

• 使用安全服务检查，如：synk等
• 开启npm两步验证 （不确定）
• 使用lockfile
• 在需要的时候，把密钥放在包里，方便使用
• 直接使用满足功能的包
• 安装包时使用--ignore-scripts

实现一个简单的移动端debug工具，该工具需要具备的功能有：

• 监听console的输出，能够获取所有程序输出的内容
• 监听网络请求，能够获取应用的所有网络请求的参数和返回值

市面上有一个插件和工具可以检测网站的技术栈，比如前端用的什么框架，什么工具库，后端用的什么服务等。那么他们的原理是什么？

假如一个二进制文件大小是2M，经过base64编码之后，大小大概会增加多少？

实现函数isNumeric,使得其能够正确判断以下各种情况:

function isNumeric(str) {
  // your code goes here
}

console.assert(isNumeric('1000'));
console.assert(isNumeric('-100.'));
console.assert(isNumeric('.1'));
console.assert(isNumeric('-3.2'));
console.assert(isNumeric('001'));
console.assert(isNumeric('+4.5'));
console.assert(isNumeric('1e3'));
console.assert(isNumeric('1e-3'));
console.assert(isNumeric('-100e-3'));

console.assert(!isNumeric('++3'));
console.assert(!isNumeric('-100..'));
console.assert(!isNumeric('3abc'));
console.assert(!isNumeric('abc'));
console.assert(!isNumeric('-3e3.2'));
console.assert(!isNumeric('Infinity'));
console.assert(!isNumeric('-Infinity'));
console.assert(!isNumeric(''));

1. 外边距的css代码是padding
2. 两个上下相邻的同级元素Div1，Div2。Div1的下边距是10px，Div2的上边距是10px。Div1和Div2的间距是20px
3. 两个上下相邻的同级元素Div1，Div2。Div1的下边距是20px，Div2的上边距是10px。Div1和Div2的间距是20px
4. 外边距的值为（10px 20px 30px）。所以其上边距为10px，下边距为20px，左边距为30px，右边距为30px
5. 一个空元素的高度，边框，内边距都是0，上下外边距为20px，那么这个空元素的框模型的高度为40px
6. 一个空元素的高度，边框，内边距都是0，上下外边距为20px，那么这个空元素的框模型的高度为20px

kill pid 是我们比较熟悉的命令，用于kill一个进程，但是它并不会同时kill它所有的子进程，
那么kill的规则究竟是什么？我们如何kill掉所有子进程

eg:

1. '**' // true

2. '**ren' // false

3. 'ren' // false

nodejs在开发过大型工程过程中，会碰到很多windows和mac等系统的兼容性问题，甚至是连nodejs官网上的API都是有问题并且是不可信的。

请尽可能列举你在开发中遇到的兼容问题，并给出解决方案

在 JavaScript 中， (a ==1 && a== 2 && a==3) 是否有可能为 true ？

头条面试题

我们如何判断一个方法是同步的还是异步的，是否只要有回调函数就是异步?

比如react setState是同步还是异步，setTimeout是同步还是异步，console.log呢？
你自己怎么写一个异步的方法？

ps: 上面的很多都是伪问题， 你能看出来我问的有问题么？

相信大家都用过Element.querySelector(selector)或者document.querySelector(selector) 来查找DOM元素，那么如何实现一个这样的一个函数，这个函数接受两个参数，分别为selector和element（默认为body），找到element所有子元素中满足selector的第一个元素。

// 实现querySelector
function querySelector(selector, element) {}

由于安全的限制，浏览器是不开放写文件的API的，即使提供也会有很多限制。

假如现在有这样一个需求，让你去实现一个类似vue-cli 3.0 的可视化脚手架工具。

现在有一个问题，浏览器是无法直接操作本地文件，在本地生成文件目录的，那么我如何实现这个功能呢？

我们在合作开发的过程中，经常碰到别人在代码中加入console.log的调试代码，
这个时候你在开发你的部分的时候就有可能由于引入他的组件，导致控制台出现很多你
并不关心的信息，干扰你的调试。

一种方式是禁止提交console的代码，那如果不可以禁止，我们怎么才能不看到别人的console输出，
而只看到自己的console呢？

1. 通过new URL('www.taobao.com') ，可以解析url内容。
2. console.log()是异步调用
3. Async functions本质上是Generators的语法糖
4. 在发布NPM模块时，版本号可以任意
5. process.nextTrick()和setImmediate()执行时机一致
6. Node.js是一门后端语言

众所周知，调用栈之所叫调用栈是因为其使用了栈这种数据结构来进行组织。

那么如何调用栈改成“调用队列”可以么？为什么

Array.prototype.reduce是一个同步的方法，允许我们同步地进行操作。

如果我要实现异步reduce呢？

请实现以下函数：

// 结果一个Promise数组，然后返回一个Promise
function reduceAsync(promises, initial) {
	// TODO
}

已知数据格式：

const userToSkill = {
robert: ["programming", "design", "reactjs"],
kimia: ["java", "backend", "services"],
patrick: ["reactjs"],
chris: ["reactjs", "programming"]
};

转化成

const skillToUser = {
programming: ["robert", "chris"],
reactjs: ["patrick", "robert", "chris"],
java: ["kimia"],
backend: ["kimia"],
services: ["kimia"],
design: ["robert"]
};

扩展：

完成函数：

function setOfUsersWithSimillarSkills(userToSkill) {

}

期望输出： ["robert", "chris"]

我们平时用单元测试的时候非常关心测试的覆盖率，如果很低，那其实还不如不做。

单元测试覆盖率的种类有很多，包括行覆盖率，分支覆盖率，方法覆盖率等，那么这些覆盖率是如何计算的呢？原理是什么？

node --inspect app.js 可以用来调试应用，但是需要在一开始启动的时候指定--inspect参数，如果一个 Node.js 进程已经启动该怎么办？

说说TS和ES的区别，以及TS带来的好处？