- 博客(33)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 call,apply,bind的区别及用法，以及在不同情况下this的指向问题（详细）
call,apply,bind用法和区别call、apply调用时直接执行函数function fn(){ console.log('aa')}fn.call()//执行函数fn.apply()//执行函数当写入参数时，第一个参数为当前执行函数时this指向，也就是说它可以改变当前的this 指向，如果第一个参数带入的不是对象，会自动转换为对象，想数字类型会转换成Number，字符类型会转换为String等。function fn(a,b,c){ console.log('this
2020-08-16 16:22:32
619
原创 原生JS中ES6面向对象模块化开发之轮播图（详细）
html代码块<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html
2020-08-16 16:14:38
438
原创 原生JS中的Ajax通信及用法
原生JS中的Ajax通信及用法1、Ajax介绍ajax最早产生于2005年，Ajax表示Asynchronous JavaScript and XML的简写，这种技术能够向服务器请求额外的数据而无需卸载 （即刷新），会带来更好的用户体验。Ajax技术核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。XHR的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。虽然Ajax中的x代表的是XML，但Ajax通信和数据格式无关
2020-08-11 21:31:01
298
原创 sass、scss
sass、scsssass的安装sass基于Ruby语言开发，所以在安装sass前需要安装Ruby,安装时需要注意勾选Add Ruby executables to your PATH添加系统环境变量在有Ruby之后在vsCode中直接使用gem install sass、gem install compass来进行安装。SASS转换成CSS有两种 可以使用 sass sass文件路径 需要导出到的css路径或者sass sass–watch 文件路径 需要导出到的css路径，在使用SASS导出时路
2020-08-29 09:33:49
377
原创 gulp的使用和注意事项（详细）
gulp的使用和注意事项gulp的介绍gulp时一个自动化工具，前端开发时可以使用它来处理常见任务，如搭建web服务器，使用预处理器如sass、less,文件保存时重载浏览器，优化资源，比如压缩CSS、JS以及图片等。gulp的安装npm先初始化，新建package.json，使用npm init -y。先安装全局使用 npm i gulp -g来安装全局中的gulp;在使用 npm i gulp --save-dev来安装当前项目中的gulp。gulp的使用在根目录下新建一个gulpfile.
2020-08-29 09:33:03
476
原创 git从服务器上如何获取数据以及如何上传文件到服务器
git从服务器上如何获取数据以及如何上传文件到服务器网络提供了两个服务器 ，一个是gitee一个是GitHub，都是公开的，任何人都可以进行下载。如何获取别人仓库中的东西，在GitHub上就是当使用别人分享的地址git clone git@github.com:用户名/仓库名.git用这个语句就可以从服务器上下载数据。GitHub可以直接在官网上下载，有很多别人分享的地址仅我们下载。我们如何本地使用git1、首先你需要注册打开github.com 注册用户名 和邮箱：2、新建一个库，库名随便起3
2020-08-29 09:31:53
817
原创 ES6中如何使用单例模式和观察者模式，单例模式和观察者模式的详细介绍，使用ES6模块化的案例。
单例模式单例模式可以保证系统中，应用该模式的类一个类只有一个实例。在JS中的单例 模式，就相当于给一个类中假如一个静态方法，然后使它返回这个类的实例化对象，他返回的这个实例化对象就是唯一的，通过这个单例模式我们就可以在其他js文件中不引用其他js获取到其中的方法，也可以用侦听来得到我们需要的数据。举例如下，使用单例模式使用get相当于常量，ES6中是没有常量的。get和set可以参考我之前的setter和getter文章。html中的代码 script的代码 <script type="m
2020-08-16 17:02:53
694
原创 ES5和ES6中的继承详细介绍 原型介绍
原型function Fn(){}Fn.prototype.play = fuciton(){}//prototype 就是这个函数的原型 给原型上添加方法就相当于ES6中的静态方法var a = new Fn();console.log(f)//当实例化构造函数时，实例化会将构造函数的prototype对象下的所有方法和属性添加在实例化对象的原型链中function Box(){}Box.prototype = { a:1, run:function(){},
2020-08-16 16:35:04
153
原创 正则表达式基础及其用法、断言等详细介绍
正则表达式1、正则表达式基础创建正则表达式var reg = new RegExp('正则内容'，修饰符)//构造函数创建var reg = /正则内容/ //字面量创建正则修饰符 i,g,m;i 表示为不区分大小写g 表示为全局匹配m 多行匹配正则对象的方法：test() 判断参数中的字符串有没有匹配正则表达式的内容，返回值为一个布尔值。var reg = /a/i;var bool = reg.test('bkAdc');console.log(bool)exec()
2020-08-16 16:28:32
422
原创 函数中的闭包、柯里化以及反柯里化函数介绍、函数种参数和返回值的注意点
函数的参数和return事项函数的参数1、参数是局部变量 ，优先级高于同名的全局变量。2、是为了解决函数的抽象化、多态化。具备模块化功能。3、js因为是弱引用语言，参数可以多样化变化，但也因此造成了函数中需要对参数做大量的判断。4、参数也可以作为递归中初始设置变量。5、在多函数中，参数可以被作为中介值来回传递，并且处理，减少全局变量。6、js中参数没有初始值（ES5），参数是没有类型区分（大量判断）参数的先后问题 （必须参数在前，不必须参数在后），（ES5）参数没有若干但是有argument
2020-08-16 16:24:16
369
1
原创 JS中setter和getter的使用
setter和gettersetter和getter是介于变量和函数之间的第三者，他既可以存储变量，也可以执行函数。var obj = { a:1, _c:0,//用临时变量存储值 b:function(){ }, set c(value){//有且仅有一个参数 this._c=value; }, ge
2020-08-16 16:23:20
666
原创 带你认识不一样的对象，Object中追加属性以及assign、isPrototypeOf等大多对象方法以及深复制的使用
对象原型链 obj是最底层的var obj = {a:1};console.log(obj)//在打印obj时obj下面会有一个proto属性，这个东西成为原型链。console.log(obj.__proto__)//也可以使用obj.__proto__来直接打印class Box{ constructor(){ } aaa(){ } bbb(){ } }//创建一个类 var b =
2020-08-16 16:21:10
543
原创 jQuery的基本介绍和使用（详细）
1、jQuery的介绍jQuery就是一个JavaScript库，它就是通过原生JS来进行一些列的封装，它是John Resig在2006年创建的 一个开源项目，随着越来越多的人使用，jQuery已经集成了JS、CSS、DOM、Ajax与一体，他可以使用很少的代码完成复杂困难的功能，主旨：以更少的代码，完成更多的功能。jQuery的功能：1.像CSS那样访问和操作DOM、2.修改CSS控制页面外观、3.简化JavaScript代码操作、4.事件处理更加容易、5.各种动画效果使用方便、6.让Ajax技术更
2020-08-16 16:18:49
1028
1
原创 使用window中storage如何实现两个页面简单交互
两个页面必须处于同源页面；每个页面的URL由协议、域名、端口和路径组成，如果他们的协议、域名、端口都相同时就属于同源。第一个页面中写了三个不同按钮，分别注册事件当点击时给当前localStorage添加数据。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
2020-08-16 16:16:51
678
原创 ES6基础语法介绍（详细）
ES6部分语法1、严格模式<script type='module'> 严格模式 <script>'use strict'严格模式在定义上述代码中只要出现就视为严格模式，它会有一下强制特点：变量必须定义后在使用<script type = 'module'> var i = 1; g = 2;//会直接报错 如果不加 type = 'module' 就不会报错 console.log(i)</script>不允许参数名重复fu
2020-08-15 08:56:50
1155
原创 同步和异步(promise,async,await)
(promise,async,await)，宏任务、微任务1、同步和异步同步是指代码在一帧内执行；异步是指需要等待某个内容完成后才执行。console.log("aaa"); for(var i=0;i<1000000000;i++){ }console.log("bbb");//同步同步 停止等待运行结束，继续后续的运行。console.log("aa");setTimeout(function(){console.log("bb");},5000)console.log(
2020-08-15 08:55:39
1657
原创 数组中的forEach和map
数组中的forEach和map1、forEach遍历数组，可以获取使用元素和下标，自动过滤空元素，空元素不遍历。var arr = [1,2,3,4]arr.forEach(function(item,index,arr){})对比for in来说，不会遍历到数组的属性，对比for来说不会遍历到空元素；但是他有缺陷，会改变函数的this指向。forEach重构：function forEach(arr,fn){ for(var i =0;i < arr.length;i++){
2020-08-15 08:55:07
118
原创 数组中的reserve和sort
数组中的reserve和sort1、reserve当前数组按照倒装顺序将原数组颠倒，并且返回原数组。var arr = [1,2,3,4];var arr1 = arr.reverse();reserve的重构：function reverse(arr){ var len = parseInt(arr.length/2); for(var i = 0; i < len; i++){ var temp = arr[i]; arr[i] = arr[a
2020-08-15 08:54:40
1621
1
原创 数组的push、pop、unshift、shift
数组的push、pop、unshift、shift及简单重构1、pushvar arr = [1,2,3,4];var s = arr.push(5,6,7,8);console.log(arr,s)// arr = [1,2,3,4,5,6,7,8] s = 8push方法可以在其中添加若干个元素放到数组的尾部，返回值是新数组的长度。利用push方法的返回值可以进行循环var arr = [];while(arr.push(1) < 10);while(arr.push({
2020-08-15 08:53:27
370
原创 JS事件的详情介绍
事件事件概念事件是通知和侦听完成的，先侦听后通知，执行对应的函数。完成事件侦听需要以下几个因素：事件的类型必须相同，事件侦听的对象和抛发的对象必须相同，将事件抛向侦听对象就可以，先侦听后抛发。部分事件是系统默认事件，这些事件会由系统自动抛发。document.addEventListener('aa',eventHandler);function eventHandler(e){console.log(e)}//侦听事件var evt = new Event('aa')//创建一个相同类型事件
2020-08-15 08:53:00
716
原创 数组中的some、every、filter、reduce
数组中的some、every、filter、reduce1、some遍历数组，判断数组中是否有满足的条件的，如果有直接跳出返回true，否则返回false。var arr = [1,2,3,4,5];var bool = arr.some(function(item,index,arr){ return item > 4})some的重构function some(arr,fn){ for(var i = 0; i< arr.length; i++){ if
2020-08-15 08:48:34
385
原创 数组中indexOf和lastindexOf以及fill
数组中indexOf和lastindexOf以及fill1、indexOf在数组中查找元素，并且返回这个元素的下标，如果没有找到则返回 -1.var arr = [1,2,3,4,5];arr.indexOf(5)indexOf方法有两个参数，第一个参数为需要查找的元素，第二参数为从第几个下标值开始搜索。var arr = [1,2,3,4,3,5]arr.indexOf(3,4)//从下标值为4的数开始查找3这个元素indexOf的简单重构function indexOf(arr,s
2020-08-15 08:48:03
393
原创 数组的concat、join、splice、slice及简单重构
数组的concat、join、splice、slice及简单重构1、concatvar arr = [1,2,3,4];var s = arr.concat(5,6,7,8) // s = [1,2,3,4,5,6,7,8] arr = [1,2,3,4]var t = arr.concat([5,6,7],[8,9]) // t = [1,2,3,4,5,6,7,8,9]concat的方法会讲数组链接若干个数组或者元素，返回一个新的连接完成的数组，与原数组无引用关系。concat的重构
2020-08-15 08:46:24
201
原创 BOM、DOM中基本介绍
BOM、DOMDOM Document Object ModelBOM Browser Object ModelDOM也属于BOM的一种BOM1、windowopen()打开close()关闭innerWidth 、innerHight 浏览器内部宽度高度outerwidth 、outerHight 浏览器外部宽度高度screenLeft 、screenTop 、screenX 、screenY 窗口距屏幕左上角的距离2、locationlocation.reload() 重
2020-08-14 19:51:48
142
原创 cookie、xss及存储
cookie、xss及存储1、cookiecookie就是一些信息以文件的形式存储在客户端计算机上，当用户访问某个网站时可以通过cookie向访问电脑上存储数据。cookie的作用：在浏览器中进行数据的存储，用户名，密码；cookie的存储数据类型为字符串类型，存储的容量有5kb；cookie默认是临时存储的，当浏览器关闭时自动销毁。cookie 的作用域为当前域，有文件夹路径的区分,域中的文件夹存储存储的位置都是以这个域作为存储空间的，别的域不能访问1、刷新页面是可以使用2、跳转到当前域
2020-08-14 19:51:05
372
原创 DOM中更改css样式以及DOM中常见的属性样式
DOM样式行内样式与css样式var div0 = document.querySelector('#div0');div0.style.height = '100px';div0.style.width = '100px'上面的对象写法，需要将所有的css中-字母替换为大写字母例如 font-size fontSize而style字符串方式写法，按照原css行内样式填写。div0.style = 'width:100px';height:100px;background-color:
2020-08-14 19:50:09
1417
原创 数组的push、pop、unshift、shift
数组的push、pop、unshift、shift及简单重构1、pushvar arr = [1,2,3,4];var s = arr.push(5,6,7,8);console.log(arr,s)// arr = [1,2,3,4,5,6,7,8] s = 8push方法可以在其中添加若干个元素放到数组的尾部，返回值是新数组的长度。利用push方法的返回值可以进行循环var arr = [];while(arr.push(1) < 10);while(arr.push({
2020-08-14 19:48:57
245
原创 数组的基本概念介绍及基本的用法
数组1、数组的与对象的区别数组：有序列表存储着若干个无序的元素，它是紧密型结构。将元素放在列表中的第几位从0开始计算，这个位置又被称为下标或者叫索引值。元素被存储在列表中，这个数据就是元素，简称元。从列表中获取这个元素的方法，使用 数组名[下标] 就可以得到这个元素，我们把这种方式叫做下标变量。数组是紧密型结构，它一般用下标存储所对应的值，当删除一个元素时因为紧密型结构的关系，它会将后面的值向前递进，且它是有长度的，它可以知道自身存储了多少个元素，插入和删除都会影响数组的其他元素的位置和结构，
2020-08-14 19:48:17
590
原创 arguements与变量作用域
arguements与变量作用域arguements的使用function getSum(){ var s = 0; for(var i = 0,j = arguements.length; i < j; i++){ s += arguemengts[i]; } console.log(s)}getSum(3,4)//求3+4用于当前函数的参数，不固定数量时。arguements.callee // 当前函数arguements.callee.name
2020-08-14 19:47:06
219
原创 语句与循环结构
语句与循环结构1、if语句 if(条件){ 条件为true进入 }else{ 条件为false进入 }注：条件表达式运算后隐式转换为布尔值，若值为true则进入该语句。在条件语句中大量用！配合完成不是这种非真进入。多分支：if(){}else if(){}else{}上面仅只执行其中的一个条件。if(){}if(){}if(){}这种每个条件都会进行自己判断。2、switch语句switch(表达式){ case1：
2020-08-14 19:46:13
86
原创 运算符的常见问题
运算符的常见问题1、算数运算符常见问题（1）运算浮点时运算会有误差（二进制精度问题影响）。（2）算术运算符中前后有字符串的出现且有+运算符的情况下则一般会完成字符串的拼接。（3）如果运算过程中没有字符串且使用+运算符的情况下，其他类型都会转换为Number类型并进行加法运算。（4）所有类型遇到 - * / % 运算符时，都会隐式转换为数值，然后进行计算。2、一元运算符和赋值运算符赋值运算符：var a = 3;a += "";（1）会利用隐式转换完成字符串的拼接。var a = 5;
2020-08-14 19:45:36
447
原创 数据类型和常用方式
数据类型和常用方式一、常用数据类型字符类型（String）、数值类型（Number）、布尔类型（Boolean）、未定义型（Undefined）、空值（null）、对象型（object）。字符型一般会使用 ‘’ “” ``var a = 'a';var a = "a";var a = `a`;数值型有小说叫浮点数var a = 9;var b = 2.6;var c = -6.8;var d = 0xff // 16进制；var e = 065 // 8进制；var f =
2020-08-14 19:44:49
234
原创 数据类型转换（常用）
数据类型转换（常用）一般分为强制转换和隐式转换两种，隐式转换使用的方法一般为Number()、String()、Boolean()。一、数值类型转换1、数值类型转字符串类型（1）类型强制转换var a = 10;var b = Sting(a)（2）利用隐式转换方式，根据运算特征来转换，隐式转换字符串回自动执行String()var a = 10;a = a + '';（3）利用 to String() 方法，to String()实际上是object对象方法。他的参数必须在2~3
2020-08-14 19:43:56
2737
GP第一阶段总结.xmind
2020-06-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人