半颗盐的博客

原创 后台管理系统之权限管理

后台管理权限方法

原创 实现移动web或者小程序等菜单选中居中

仔细观察上图;只要把 scrollLeft计算出来然后获取选中的元素的父元素 执行scrollTo(scrollLeft, 0)就可以实现滚动到居中位置;具体代码如下:const clickTab = (e) => { const { offsetWidth, offsetLeft } = e.target; // 元素的宽度 const { clientWidth } = document.body; // 可视区宽度 const scrollLeft = offset.

原创 移动web软键盘遮住输入框的解决方案

背景:移动web页面使用了fixed定位,内容在可视区显示,当软键盘唤起的时候输入框被遮住方案:Element.scrollIntoView()MDN介绍Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。语法element.scrollIntoView(); // 等同于element.scrollIntoView(true)element.scrollIntoView(alignToTop); // Boolean型参数element.

原创 判断是否为数组

在说明如何判断一个对象为数组类型前，我们先巩固下js的数据类型，js一共有六大数据类型：number、string、object、Boolean、null、undefined。除了前四个类型外，null、对象、数组返回的都是object类型；对于函数类型返回的则是function，再比如typeof(Date)，typeof(eval)等。接下来进入正题，js判断数组类型的方法。方法一： 使用...

原创 前端基础面试题收集

HTML基础1、什么是<！DOCTYPE >？是否需要在HTML5中使用？<！DOCTYPE>是关于页面写入了什么版本的HTML的指令。<！DOCTYPE>标记没有结束标记，它不区分大小写。2、HTML5有哪些的新特性？二维画图中的元素媒体播放的 和元素支持本地存储新的内容特定元素，如<section>，<a...

原创 隐式转换

隐式转换规则转成string类型： +（字符串连接符） 2…转成number类型：++/–(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !=== (关系运算符)转成boolean类型：!（逻辑非运算符）...

原创 函数形参与表达式"()"

形参和实参是映射关系不管谁改都会变

原创 typeof返回哪些数据类型

1.返回数据类型undefinedstringbooleannumbersymbol(ES6)ObjectFunction

原创 call、apply、bind方法详解

在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不太一样。便于记忆，单词字母多的为参数难写的，既数组的形式，反之为普通的带逗号方式特别注意：每个函数执行都会隐式带了一个call/apply 比如：foo...

原创 JS数组去重的六种方法

一、利用ES6 Set去重（ES6中最常用）function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', ...

原创 Promise及内部实现

Promise是什么？　　Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一。这句话说的很明白了，Promise是一种用于解决异步问题的思路、方案或者对象方式。在js中，经常使用异步的地方是Ajax交互。比如在es5时代，jQuery的ajax的使用success来完成异步的：$.ajax({ url:'/xxx', ...

原创 async 函数的含义和用法

1、async 函数就是 Generator 函数的语法糖，async 函数就是将 Generator 函数的星号（*）替换成 async，将 yield 替换成 await，仅此而已2、async 函数的实现，就是将 Generator 函数和自动执行器，包装在一个函数里3、同 Generator 函数一样，async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数...

原创 Generator 函数的含义与用法

Generator 函数是协程在 ES6 的实现，最大特点就是可以交出函数的执行权（即暂停执行）。function* gen(x){ var y = yield x + 2; return y;}上面代码就是一个 Generator 函数。它不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的...

原创 js立即执行函数 （IIFE）

特点1、立即执行2、用完释放(function(){})()(function(){}())

原创 js对象的相关方法

1、instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性参数：object（要检测的对象.）constructor（某个构造函数）function Person(){};var p =new Person();console.log(p instanceof Person);//true2、hasOwnProperty表示是否有自己的...

原创 js中的原生元素选择器

当我们想要选择dom中的元素时，第一个想到的就是document.getElementById()和document.getElementsByTagName()，还有针对表单的document.getElementsByName();在h5中我们又有了类选择器：getElementsByClassName(),但这个方法不兼容IE8及以下,我么在使用时还是需要写一个兼容的函数，因为现在还是很多...

原创 闭包

闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：作为一个函数变量的一个引用，当函数返回时，其处于激活状态。一个闭包就是当一个函数返回时，一个没有释放资源的栈区。简单的说，Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中...

原创 js作用域及作用域链

原创 js预编译 执行环境中的GO/AO

js运行流程 语法分析–预编译–解释执行1、函数声明会提升到整体最前且内部可执行，变量声明则只声明不执行赋值2、函数预编译则有函数上下文 AO活跃对象，对象中写入形参和变量声明把实参赋值给形参寻找函数声明和赋值函数体...

原创 ES6新特性之生成器函数 generator

一、什么是生成器函数？生成器函数是ES6的新特性之一，它是一个在执行时能中途暂时退出，后面重新调用又能重新进入继续执行的一种函数。并且在函数内定义的变量的所有状态不受中途退出的影响。二、语法声明方式：function* 函数名([参数1[, 参数2[, … 参数n]]]) { JS语句 }调用说明：1） 调用生成器对象时会返回一个生成器的迭代器2） 该迭代器中有一个next()方法...

原创 new一个对象的过程

使用new关键字调用函数（new ClassA(…)）的具体步骤：1. 创建空对象；　　var obj = {};2. 设置新对象的constructor属性为构造函数的名称，设置新对象的__proto__属性指向构造函数的prototype对象；　　obj.proto = ClassA.prototype;3. 使用新对象调用函数，函数中的this被指向新实例对象：　　ClassA....

原创 react-router的几种配置方式

路由的概念路由的作用就是将url和函数进行映射，在单页面应用中路由是必不可少的部分，路由配置就是一组指令，用来告诉router如何匹配url，以及对应的函数映射，即执行对应的代码。react-router每一门JS框架都会有自己定制的router框架，react-router就是react开发应用御用的路由框架，目前它的最新的官方版本为4.1.2。本文给大家介绍的是react-router相...

原创 浅拷贝和深拷贝

浅拷贝浅拷贝可以简单理解为，发生在栈中的拷贝行为，只能拷贝基本值和引用值的地址。实现方式ES6 定义了 Object.assign() 方法来实现浅拷贝。例子：let a = { name: "Tom", obj: { age: 19 }}let b = Object.assign({}, a);console.log(b); //输出：{name: "Tom"...

原创 Node.js 中的 Buffer 对象及其内存分配

Buffer 是一个 Javascript 与 C++ 结合的模块，它将性能相关部分用 C++ 实现，将非性能相关的部分用 Javascript 实现。Buffer 所占用的内存不是通过 V8 分配的，属于堆外内存。由于 Buffer 太过常见，Node 进程在启动时就已经加载了它，并将其放在全局对象（global）上。所以在使用 Buffer 时，无须通过 require() 即可直接使用。...

原创 Array​.prototype​.flat()

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。语法节var newArray = arr.flat(depth)参数节depth 可选指定要提取嵌套数组的结构深度，默认值为 1。返回值节一个包含将数组与子数组中所有元素的新数组。示例节扁平化嵌套数组节var arr1 = [1, 2, [3, 4]];arr1....

原创 排序方法

1.冒泡排序:解析：1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。2.第一轮的时候最后一个元素应该是最大的一个。3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。function bSort(arr) { var len = arr.length; for (var i = 0; i < len-1;...

原创 TCP三次握手

连接建立阶段：第一次握手：客户端的应用进程主动打开，并向客户端发出请求报文段。其首部中：SYN=1,seq=x。第二次握手：服务器应用进程被动打开。若同意客户端的请求，则发回确认报文，其首部中：SYN=1,ACK=1,ack=x+1,seq=y。第三次握手：客户端收到确认报文之后，通知上层应用进程连接已建立，并向服务器发出确认报文，其首部：ACK=1,ack=y+1。当服务器收到客户端的确认...

原创 http与https区别及https原理

这里写自定义目录标题http与httpshttps原理http与httpshttp是明文传输，容易被劫持不安全；https是加密后传输的相对较安全https原理客户端向服务端发送自身已经存在的加密算法列表和随机数A服务端接收到了客户端的加密算法，然后综合比较选出比较合适的加密算法、公钥、数字证书和随机数B客户端拿到服务端的数字证书验证有效性后生成一个随机字符串pre-master，并...