Vanessa

每天 30 秒系列前端精选问题集，每天仅需 30 秒前端面试精选常见面试题，帮助您准备下一次面试 HTMLCSSJavaScriptReactNodeSecurityCSS 精选常见交互，帮助您拥有简洁酷炫的站点布局视觉动画交互其他 React 精选有用的 React 片段，帮助你获取最佳实践 ArrayInputObjectVisualJavaScriptCode 精选常见代码集，帮助您提高打码效率 🔌 适配器 📚 数组 🌐 浏览器

精选常见代码集，帮助您提高打码效率 📚 数组 allallEqualanyarrayToCSVbifurcatebifurcateBychunkcompactcountBycountOccurrencesdeepFlattendifferencedifferenceBydifferenceWithdropdropRightdropRightWhiledropWhileeveryNthfilterFalsy

2019-03-30 描述从左到右依次执行传入的函数组合。提示对接受的函数参数使用扩展运算符后便可用 Array.prototype.reduce()来执行从左到右的函数组合。第一个（最左边）函数可以接受一个或多个参数，剩下的函数只能为一元函数。代码 constpipeFunctions=(...fns)=>fns.reduce((f,g)=>(...args)=>g(f(...args)));示例对参数

2019-03-29 描述为输入的异步函数进行从左到右的依次执行。提示对接受的函数参数使用扩展运算符后便可用 Array.prototype.reduce()来执行从左到右的函数组合。为接受的异步函数使用 Promise.then()。接受的函数参数可以返回以下组合：简单值，Promise，或者定义为 async 函数且通过 await 返回的异步值。所有函数必须是一元的。代码 constpipeAsyncFunc

2019-03-28 描述创建一个函数，使其可以调用提供的函数和参数进行转换。提示使用 Array.prototype.map()让传入的转换函数能够一一对应接受传入的参数。通过扩展运算符将组装好的转换函数传给 fn。代码 constoverArgs=(fn,transforms)=>(...args)=>fn(...args.map((val,i)=>transforms[i](val)));示例依次计算

2019-03-27 描述创建一个函数，该函数可以使用传入的每一个方法来接收的给定的可扩展参数作为参数执行后并返回结果。提示使用 Array.prototype.map()和 Function.prototype.apply()将传入的函数进行迭代并应使用给定的参数。代码 constover=(...fns)=>(...args)=>fns.map(fn=>fn.apply(null,args));示例获取

2019-03-26 描述使用函数作为参数，然后将该函数的第一个参数作为最后一个参数。提示使用扩展运算符接受第二个及以后的参数返回一个接受可变参数的闭包函数，并交换输入参数的位置代码 constflip=fn=>(first,...rest)=>fn(...rest,first);示例对象合并：leta={name:'JohnSmith'};letb={};constmergeFrom=flip(Obj

2019-03-25 描述将使用数组为参数的函数修改为使用可变参数的函数。提示接受该函数 fn 为参数并返回一个闭包函数闭包函数使用扩展运算符将所有输入作为数组传入 fn 函数中。代码 constcollectInto=fn=>(...args)=>fn(args);示例对多个异步请求的返回进行输出处理：constp1=Promise.resolve(1);constp2=newPromise(resolve=

2019-03-24 描述根据输入的关键字和一组参数使返回的函数可以根据传入的参数去执行关键字方法。提示使用闭包调用传入的关键字和一组参数。使用柯里化函数。代码 constcall=(key,...args)=>context=>context[key](...args);示例对数组进行计算并返回其结果：call('map',x=>2*x)([1,2,3])//[2,4,6]Promise.resolv

2019-03-23 描述创建一个最多接受 n 个参数的函数，他可以忽略任何多余的参数。提示参数 fn 为提供的函数，n 为函数最多接受的参数的个数，可使用 Array.prototype.slice(0,n)和扩展运算符...。代码 constary=(fn,n)=>(...args)=>fn(...args.slice(0,n));示例依次获取长度不同的数组中的前 2 位中较大的值：constfirstTwoMax

2019-03-22 回答 XSS 是指客户端代码注入，攻击者将带有恶意脚本的代码注入到合法的网站或 web 应用程序中。这通常发生在应用程序对用户的输入不进行验证时，这样恶意代码就会轻松的注入到动态的 HTML 内容中。例如，一个评论系统如果没有对用户的输入进行验证或转义，那么该评论系统将面临风险。如果评论内容中包含未转义的 HTML，那么评论时就可以将 <script> 标签注入到网站中，当其他用户访问这个评论页面

2019-03-21 回答事件循环处理所有的异步回调。回调在一个循环中进行排队，当代码运行时，队列中的每一个回调在接收到响应时将逐个进行运行。当 Node.js 启动时会初始化事件循环，每一个事件循环都有如下顺序的六个循环阶段：加分回答事件循环允许 Node.js 执行非阻塞的 I/O 操作，尽管 JavaScript 是单线程的。返回总目录 30 秒面试系列一

2019-03-20 提问如何避免以下这种地狱回调的情况？getData(function(a){getMoreData(a,function(b){getMoreData(b,function(c){getMoreData(c,function(d){getMoreData(d,function(e){//...})})})})})回答重构返回 promises 的函数，使用最佳的 async/await

2019-03-19 回答 REST（REpresentationalStateTransfer）是一种用于网络架构的软件设计模式。RESTfulWeb 应用程序使用和资源相关的信息方式对数据进行公开。通常，这个概念用于管理 Web 应用程序中的状态。对于大多数应用程序来说，他们对数据都有读取，创建，更新和销毁这四个共同的操作。数据模块化后形成单独的表，如 posts,users,comments，RESTfu

2019-03-18 回答 NodeJS 通常使用回调模式，如果在执行期间发生错误，会把错误作为回调的第一个参数传递到回调函数中：fs.readFile(filePath,function(err,data){if(err){//错误处理，return 可以让执行停止，这非常重要 returnconsole.log(err)}//使用数据对象 console.log(data)})优点包括如下：如果不需要引用数

2019-03-17 回答 Refs 提供了一种方式，用于访问在 render 方法中创建的 React 元素或 DOM 节点。Refs 应该谨慎使用，但是如下一些场景使用 Refs 却更为适合：处理焦点、文本选择或者媒体的控制触发必要的动画集成第三方 DOM 库 Refs 是使用 React.createRef()方法创建的，他通过 ref 属性附加到 React 元素上。要在整个组件中使用 Refs，需要将 ref 在构造函数中分配给其实例属

2019-03-16 回答当应用程序在开发模式下运行时，React 将自动检查我们在组件上设置的所有属性，以确保他们的数据类型是正确的。对于不正确的数据类型，他将在开发模式下生成警告消息并在控制台输出。由于检查的性能影响，他们在生产模式下将不进行检查。必须传入的属性需包含 isRequired。例如，以下为我们为组件定义的 propTypes：importPropTypesfrom"prop-types"c

2019-03-15 回答 Portals 提供了一种很好的将子节点渲染到父组件外部 DOM 层级中的 DOM 节点中的方式。ReactDOM.createPortal(child,container)第一个参数（child）是任意可渲染的 React 子元素，例如一个元素，字符串或片断。第二个参数（container）是一个 DOM 元素。加分回答通常从组件的 render 方法中返回的一个元素，该元素仅能装配到 DOM 节点

2019-03-14 回答在 JavaScript 类中，默认情况下方法并没有被绑定。这意味着他们的 this 上下文可以被改变（例如：事件处理方法中 this 为正在侦听事件的元素）但不排除为组件实例。要解决此问题，可以使用 Function.prototype.bind()强制将组件实例作为 this 上下文。constructor(props){super(props);this.handleClick=this

v1.0.0 简介该版本使用 markdown-it 添加了前端对 markdwon 解析预览的支持。v1.0.0 变更记录 15 添加测试用例 development9 支持前端预览 mdenhancement 历史版本变更请浏览这里。