zayyo的博客

在开发各种项目时，我们会发现经常需要一些辅助函数来帮助我们实现一些需求，并且这些函数是在很多项目里都可以进行复用的。下面我就列出我们一些常用的辅助函数，来帮助大家在开发项目时，进行复用。

当JavaScript在内部判断一个值的类型时，会使用一个表示类型的标记位。在表示对象的标记位中，null的值为全零，而表示对象的标记位必须至少有一个位为1。typeof 在对值类型 number、string、boolean 、null 、 undefined、 以及引用类型的 function 的反应是精准的；是为了改变toString函数内部的this指向并,将要检测的值作为方法的上下文（即this），我们可以确保返回的字符串是准确的对象类型，同时也防止。方法会返回一个表示该对象的字符串。

首先，你需要定义一个初始状态对象。它表示应用程序的初始状态。

因此，为了在不刷新整个网页的情况下在不同的视图之间进行切换，我们需要一种路由机制，以便在不同的视图之间切换而不用刷新整个网页.而 React-Router就是目前最好的React路由解决方案。React Router 是一个基于 React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。API 来处理URL的变化，并根据URL的路径匹配渲染相应的组件。学习使用React Router之前先了解React Router提供的实现导航和路由功能的三个主要组件。

React Hooks 是 React 16.8 新增的一种特性，它可以让你在函数式组件中使用 state、生命周期、context 等 React 特性。Hooks 可以让你将复杂的逻辑拆分成多个独立可重用的函数，并且使得这些函数更加易于理解和测试。

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情。

其实就是让服务端的代码更加简单。为什么要更简单？因为过去的服务端还需要渲染页面，还有数据存储，现在服务端什么都不用管了，它也不用管用户界面，只需要写好数据存储的逻辑就可以了，所以变得更简单了。可移植的一个软件能够很方便的移植到其他平台。为什么在这里说它方便移植？这是因为在过去我们的前端其实在操作系统里面写那些软件，在那个时候前端还需要去管一些数据的存储，一些计算，或者一些很复杂的逻辑。但是现在前端在浏览器里面进行工作，这样我们前端工程师就不需要去管那些复杂的计算了，只需要调用接口来渲染页面就可以了。

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～

轻量化和效率高语法简单，编写轻松并发运行测试运行效率高包含 TypeScript 和 Flow 的类型定义首先我们要安装AVA插件然后我们要在我们的中修改我们的scripts执行脚本接下来我们就要开始编写我们的测试脚本test了首先我们要从到ava中导入我们的test方法和我们编写的arrify 函数然后我们要利用我们导入的test方法进行测试。第一个参数是我们测试的名称第二个参数要求是一个传入的是一个回调函数，在回调函数里编写我们的测试语法。

container是和的简写属性，用来显式声明某个元素是一个查询容器，并且定义查询容器的类型（由指定）和查询容器的名称（由指定，使用反斜杠（）隔开。表示指向容器的类型，是水平方向的（对应宽度），还是包括垂直方向的（对应宽度和高度）。其中normal是默认值，表示不建立容器元素，size表示水平和垂直方向都建立，是只在水平方向建立，会给元素同时应用layout、style和inline-size容器状态。

我们在编写项目的时候，都会引入很多很好用的工具包，例如VueX、axios、Router、Element UId等。这些包很好用，安装引入也很方便。那如果我们也想发布一个我们自己的工具包，在以后编写项目时，直接引入我们自己的工具包要怎么发布呢？今天我们就来手把手带你发布你的第一个npm包！！！

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～

对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子，如下所示。常用生命周期对比如下表所示。Tips： setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地去定义。

当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期当父组件中状态发生变化（包括子组件的挂载以及卸载）时，会触发自身对应的生命周期以及子组件的更新render以及render之前的生命周期，则 父组件先执行render以及render之后的声明周期，则子组件先执行，并且是与父组件交替执行当子组件进行卸载时，只会执行自身的生命周期，不会再触发别的生命周期。

用户授予第三方应用访问该用户某些资源的权限你在安装手机应用的时候，APP 会询问是否允许授予权限（访问相册、地理位置等权限）你在访问微信小程序时，当登录时，小程序会询问是否允许授予权限（获取昵称、头像、地区、性别等个人信息）实现授权的方式有：cookie、session、token、OAuth实现认证和授权的前提是需要一种媒介（证书） 来标记访问者的身份在战国时期，商鞅变法，发明了照身帖。照身帖由官府发放，是一块打磨光滑细密的竹板，上面刻有持有人的头像和籍贯信息。

单元测试的编写是比较简单的，它是提高我们软件开发的工具。它的使用有助于帮我更早的发现错误。并防止我们后期重构代码时再次产生同样的错误。它可以让我们的项目后期更易于管理和维护，即使我们的项目代码体积结构变得更大更复杂——尤其是在更大的开发团队中。而且自动化单元测试还能够让开发人员在够重构和优化代码时，不必担心新代码的是否会影响旧的功能。单元测试是开发过程的关键部分，对于帮助您构建更好、更安全的 JavaScript 应用程序至关重要。

在JavaScript我们常常会对数组进行很多需求上的操作，比如求取数组中的偶数，或者是查找数组中的某一个值。如果我们使用for循环的方法进行遍历数组，进行需求操作。往往效率很低，并且吃力不讨好。这时我们就可以使用JavaScript里数组的内置函数来对数组进行操作。这样效率不仅会大大提高还可以减轻我们编写代码的压力，使得我们编写的代码看起来更加简洁。接下来我们就详细介绍一下我们数组中的函数的详细使用方法需求：获取数组中为偶数的值第一步、使用数组的内置函数‘filter’,-----nums.filter

相信大家对Vue的不陌生。在使用Vue的时候也会遇到报错，也会使用浏览器的F12 来查看报错信息。但是你知道Vue是如何进行异常抛出的吗？vue 是如何处理异常的呢？接下来和大家介绍介绍，Vue是如何处理者几种常见的报错的。先很大家说说常见的报错，再和大家介绍如何处理。

定义：浏览器-服务器（Browser/Server）结构，简称B/S结构。是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器，如Chrome、Safari、Microsoft Edge、Netscape Navigator或Internet Explorer，服务器安装SQL Server、Oracle、MYSQL等数据库。

默认情况下, 原生的constructor属性是不可枚举的，如果希望解决这个问题, 就可以使用我们前面介绍的Object.defineProperty()函数了。我们在上一个构造函数的方式创建对象时，有一个弊端：会创建出重复的函数，比如running、eating这些函数。JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。不是的，因为它是一个函数，才有了这个特殊的属性。既然字面量创建的对象会有原型，那么创建的函数也会有原型吗？

构造函数也称之为构造器（constructor），通常是我们在创建对象时会调用的函数，在其他面向的编程语言里面，构造函数是存在于类中的一个方法，称之为构造方法，但是JavaScript中的构造函数有点不太一样。

在ECMAScript5标准中，JavaScript提出了严格模式的概念（Strict Mode）：第一种方式：（单文件严格模式）在js文件中开启严格模式，仅仅对这个JavaScript文件生效第二中方式：（特定函数严格模式）在函数的作用域内部单独开启严格模式，仅仅对这个函数的内部生效严格模式对正常的JavaScript语义会有那一些限制呢？严格模式通过 抛出错误 来消除一些原有的 静默（silent）错误；严格模式让JS引擎在执行代码时可以进行更多的优化（不需要对一些特殊的语法进行处理）；严格

用一句话总结就是:with会扩展出一个语句的作用域链可是这样的解释对于大多数同学来说还是太过于生硬，很不好理解，那我们下面我们用代码例子证明一下但是我们强烈不建议使用with语句，因为它可能是混淆错误和兼容性问题的根源。但是我们还是要了解一下with的作用因为源码中有with语句，了解with语句，可以方便我们对代码的理解eval函数的作用：eval() 函数会将传入的字符串当做 JavaScript 代码进行执行，如果传入的字符串是表达式则返回表达式求值结果，否则返回 undefined 。同样我们还

柯里化也是属于函数式编程里面一个非常重要的概念。在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化；是把接收多个参数的函数，变成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数，而且返回结果的新函数的技术；柯里化声称 “如果你固定某些参数，你将得到接受余下参数的一个函数”；维基百科的解释非常的抽象，我们这里做一个总结：只传递给函数一部分参数来调用它，让它返回一个函数去处理剩余的参数；这个过程就称之为柯里化；那么柯里化到底是怎么样的表现呢？我们用代码来实例一下

函数式编程中有一个非常重要的概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念；在react开发中纯函数是被多次提及的； 比如react中组件就被要求像是一个纯函数（为什么是像，因为还有class组件），redux中有一个reducer的概念，也是要求必须是一个纯函数；所以掌握纯函数对于理解很多框架的设计是非常有帮助的；在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数：当然上面的定义会过于的晦涩，所以我简单总结一下：我们来看一个对数组操作的两个函数：slice：s

众所周知，js是一门相当灵活的语言。当我们在js中在调用一个函数的时候，我们经常会给这个函数传递一些参数，js把传入到这个函数的全部参数存储在一个叫做arguments的东西里面，arguments对象，可以拿到全部实参，箭头函数中没有arguments我们再些项目中常遇见一些需求，要把arguments转成array，那我们有多少中转法呢?1.自己遍历2.Array.prototype.slice将arguments转成array拿到数组的原型Array.prototype，原型上有slice方法

在JavaScript中我们对函数的执行通常是直接用函数的名称加个括号就可以进行调用了，但是这样调用有一个缺点，就是函数中的this指向是默认绑定的，有时候this的指向不太符合我们的预期。至于JavaScript中this的指向可以看我这篇文章《在JavaScript中，this的指向详细讲解》那我们想要把函数的this指向变成我们预期想的那样有什么方法吗？这时候JavaScript中的函数apply、call、bind调用就起到作用了apply接受两个参数，第一个参数是this的指向，第二个参数是函数接

作用域:变量在什么范围内是可用let具有块级作用域(在代码块中定义的变量只能在代码块中访问与执行)（局部）var不具有块级作用域(在代码块中定义的变量在代码块外中仍然可以访问与执行)（全局）var的缺点：容易引起数据污染，数据混乱特别是在for循环和if判断中......

JS的垃圾回收因为内存的大小是有限的，所以当内存不再需要的时候，我们需要对其进行释放，以便腾出更多的内存空间。在手动管理内存的语言中，我们需要通过一些方式自己来释放不再需要的内存，比如free函数： 但是这种管理的方式其实非常的低效，影响我们编写逻辑的代码的效率； 并且这种方式对开发者的要求也很高，并且一不小心就会产生内存泄露； 所以大部分现代的编程语言都是有自己的垃圾回收机制：垃圾回收的英文是Garbage Collection，简称GC； 对于那些不再使用的对象，我们都称之为是垃圾，它需要被回收，

平时我们在JavaScript中编写函数都是 function 函数名（）{ 函数体 } 的编写方式来编写函数的，但是在ES6更新后函数有了一种更将简洁的编写方式，那就是箭头函数，但是箭头函数到底是怎么编写呢？箭头函数的编写规则有是什么呢？接下来就让我们详细讲解一下箭头函数的编写规则编写函数箭头函数有三大要素// 1> (): 参数// 2> =>: 箭头// 3> {}: 函数的执行体那我们就用这三大要素先编写第一个简单的箭头函数foo来和我们的普通函数进行对比一下箭头函数普通函数箭头

这里先来看一下闭包的定义，分成两个：在计算机科学中和在JavaScript中。在计算机科学中对闭包的定义（维基百科）：闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures）。是在支持 头等函数 的编程语言中，实现词法绑定的一种技术；闭包在实现上是一个结构体，它存储了一个函数和一个关联的环境（相当于一个符号查找表）； 闭包跟函数最大的区别在于，当捕捉闭包的时候，它的 自由变量 会在捕捉时被确定，这样即使脱离了捕捉时的上下文，它也能照常运行；

首先我们我们先讲一下vue2 中Options API的弊端，再讲vue3中Composition API 的优势在Vue2中，我们编写组件的方式是Options API：Options API的一大特点就是在对应的属性中编写对应的功能模块；比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命周期钩子；但是这种代码有一个很大的弊端：当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；当我们组件变得更大、更复杂时，逻辑

在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。这个key属性有什么作用呢？我们先来看一下官方的解释：key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；详细来说，我们知道，vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以

认识Vue什么是渐进式框架呢？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。如何使用Vue呢？Vue的本质，就是一个JavaScript的库；我们不需要把它想象的非常复杂； 我们就把它理解成一个已经帮助我们封装好的库；在项目中可以引入并且使用它即可。

v-model的基本使用表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；比如用户在检索、创建、更新信息时，需要提交一些数据；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成：v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；它会根据控件类型自动选取正确的方法来更新元素；尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据

条件渲染在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了。Vue提供了下面的指令来进行条件判断：v-ifv-elsev-else-ifv-showv-if、v-else、v-else-if用于根据条件来渲染某一块的内容：这些内容只有在条件为true时，才会被渲染出来；这三个指令与JavaScript的条件语句if、else、else if类似v-if的渲染原理：v-if是惰性的；当条件为false时，其判断的内容完全不会被渲染或者会被

一. 认识Vue.js1.1. 认识VueVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。全程是Vue.js或者Vuejs；什么是渐进式框架呢？表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；1.2. Vue的安装Vue是一个JavaScript的库，刚开始我们不需要把它想象的非常复杂，我们就把它理解成一个已经帮助我们封装好的库，在项目中可以引入并且使用它即可。那么安装和使用Vue这个JavaScript库有哪些方式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt

一. 理解this（为什么需要this？）1.1. 为什么使用this在常见的编程语言中，几乎都有this这个关键字（Objective-C中使用的是self），但是JavaScript中的this和常见的面向对象语言中的this不太一样：常见面向对象的编程语言中，比如Java、C++、Swift、Dart等等一系列语言中，this通常只会出现在类的方法中。也就是你需要有一个类，类中的方法（特别是实例方法）中，this代表的是当前调用对象。但是JavaScript中的this更加灵活，无论是它出现的位置