weixin_49981492的博客

原创 JavaScript中的reduce方法

reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高…reduce方法的使用1.语法:arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当

原创 JavaScript线程

线程我们知道JavaScript是单线程,就是js代码只能在一个线程上运行,，JS的主要用途是与用户互动和操作DOM,我们的JavaScript代码是从上到下依次执行的,但是遇到回调函数,setTimeout和Ajax异步的时候,他可以通过主线程条用其他的线程,常见的浏览器线程:GUI渲染线程,HTTP异步线程,定时器线程,事件监听线程,加上js主线程,这就是JavaScript的五大线程,它是通过js主线程调用其他子线程的线程与进程什么是进程？我们可以在电脑的任务管理器中查看到正在运行的进程，可

原创 http响应码

http响应码通过向服务端发送请求返回得到的不一定是我们所需要的的,有时会出现一些数字,我们可通过数字找到自己的错误http状态返回代码 1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码。http状态返回代码 代码 说明100 （继续）请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。101 （切换协议）请求者已要求服务器切换协议，服务器已确认并准备切换。http状态返回代码 2xx （成功）表示成功处理了请求的状态代码。htt

原创 async和await关键字的作用和用法

async和awaitasync和await的出现async和await出现是在es6中,为了去简化promise的写法的。使用promise结合生成器简化promise的写法async关键字：简化创建promise的await关键字:等待，相当于then方法await关键字必须写在被async修饰的函数中asyncasync 作为关键字放在一个函数前面表示函数是个异步函数,异步函数也就意味着该函数的执行不会阻塞后面代码的执行。写一个简单的async函数async function te

原创 防抖和节流

防抖和节流的概念防抖含义:持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。使用场景:1.可以给按钮添加防抖函数以防止ajax请求多次提交2.判断scroll是否滑到底部，滚动事件 + 防抖函数function debounce(fn,wait){ var timer = null; return function(){ if(timer !== null){ c

原创 Symbol的使用

Symbol的使用场景使用Symbol来作为对象属性名(key)通常定义或访问对象的属性时都是使用字符串:let obj = { abc: 123, "hello": "world"}obj["abc"] // 123obj["hello"] // 'world'在利用Symbol以后定义和访问对象的属性：const PROP_NAME = Symbol()const PROP_AGE = Symbol()let obj = { [PROP_NAME]: "君莫笑"}

原创 ES6新增变量声明和结构赋值

新增变量声明es6中新增了变量声明let和constlet局部变量声明1.let变量不会挂载在window中，不会造成全局变量污染问题2.新增了一个块级作用域中，以前的是只有函数作用域，全局作用域3.let 不允许重复声明4.let不会提前声明提前（只是认为看不到的效果，实际上是有声明提前的，只是提前到暂时性死区中）const声明常量const声明除了以上几点,还有下面的注意点const声明的不允许被 修改不允许改变存储地址const声明和赋值必须一次性完成解构赋值基本用法:ES6

原创 AJAX请求方式

AJAX介绍AJAX一门新的语言，是综合HTTP异步通信、js、xml、以及JSON等多种网络技术的一种编程模式。​优缺点：优点：1.页面局部刷新2.可以充分利用客服端的闲置的处理能力，减轻服务器和网络传输的负担缺点：1.破坏浏览器的机制，历史记录机制前后端通信：from表单 同步 触发形式只能是一个按钮ajax 异步 触发形式是任何事件的形式HTTP协议 **概述:** 超文本传输协议 万维网数据通信的基础 ,一个客户端终端(用户)和服务器端（网站）请求和应答的标准（TCP

原创 移动端开发

移动端开发与pc端开发的区别视口问题视口是移动设备上用来显示网页的区域，一般比移动设备可视区域大，宽度可能是980px 或者 1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端视口的大小，这样会让页面不容易观看，可以用meta标签，name = “viewport”，来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。视口的相关设置content 视口的相关设置width 视口的宽度，值为一个正整数

原创 JQuery概述

目录jQuery的使用首先我们先介绍原生js的缺点1. 元素js代码有冗余2. 原生的js的api名字都太长，太难记3. 原生js中有些方法和属性，有些浏览器不支持4. 不能写多个入口函数，如果写了多个，后面的就会覆盖前面的5. 容错率较低，前面的代码出现了问题，后面的代码也不会执行。6. 查找元素的方法单一7. 实现简单动画效果比较麻烦由于原生js的缺点,让jQuery出现,更加方便了我们编写代码jQuery是一个快速，小型且功能丰富的Ja...

原创 字体图标的引入

页面字体图标通常我们画页面有部分需要图片放在上面,这些图片我们可以用阿里的矢量图标库引入阿里得矢量图标库网站 点击上面的//at部分跳转的页面复制到我们的css文件中效果就是下面的效果了...

原创 JavaScript编程风格-专注编程的风格

原创 函数中的arguments

函数显式参数(Parameters)与隐式参数(Arguments)函数的显示参数parameters是日常会经常用到的对象。 显示参数是在函数定义时列出。function fun(parameter1,parameter2,parameter3,){ //要执行的代码}隐式参数（arguments）：函数的隐式参数是函数调用时真正传递给参数的值。隐式参数规则：JavaScript 函数对隐式参数没有进行类型检测。JavaScript 函数对隐式参数的个数没有进行检测。ar

原创 异步加载和时间线

页面渲染过程了解异步加载域时间线之前,我们先了解下页面渲染的过程,每个浏览器的渲染流程不一样,主要是以webkit为主页面的渲染过程DOMTree + CSSTree = RenderTree;根据HTML结构生成DOM Tree、CSS生成CSSTree，DOM和CSSTree 整合形成RenderTree根据RenderTree开始渲染和展示，遇到srcipt标签时，会执行并阻塞渲染 因为js有权利改变DOM结构，避免冲突从上到下执行。主要分为两个打的步骤1.渲染前奏浏览器中输入url，

原创 H5canvas绘制一个小时钟

HTML5 canvascanvas元素 通过js绘制图像 默认使用时，是一个行内块级元素 300 * 150 修改canvas元素显示的宽高度 不能用css样式的方式修改 -- 导致图片失真 通过width和height属性修改最近温习了HTML5的相关知识通过canvas画布,写一个简单点的时钟<canvas width="600" height="600"></canvas>

原创 原型和原型链

什么是原型？原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承。函数中的原型对象在JS中，声明一个函数A，浏览器就会在内存中创建一个对象B，每一个函数都默认会有一个属性prototype指向这个对象。也就是说prototype的属性的值就是这个对象。对象B就是函数A的原型对象，原型对象B会默认有一个属性constructor指向了这个函数A，也就是说constructor属性的值就是函数A。原型链当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没

原创 闭包的作用

什么是闭包？闭包是可以访问其定义的“外部"范围的函数，因此，即使闭包函数终止，它也可以访问外部作用域中的值。例子：function takeOne(){ let i = 0; return function incrementFunction(){ return i++; }}上面的代码表示一个函数返回另一个函数。但是，调用takeOne并获取后incrementFunctioon，即使已经终止incrementFunction,takeOne也会记住局部变量takeOne。使用闭包

原创 作用域&作用域链

## 作用域作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。 var a=123; function show(){ var b=456; } //控制台输出 console.log(a); console.log(b);输出的时候我们就会发现,我们找不到b,因为b在函数里面,不属于全局变量,为什么会这样呢,看下面作用域有两种:1.全局作用域2.局部作用域注意:全局作用域是指在我们任何地方都能访问到对

原创 JS轮播图-运动框架的熟练运用

轮播图*斜体样式*

原创 Dom&Bom重点，运动框架

js运动框架体现物体的变化过程，对元素位置和状态改变的一个描述缓冲运动描述元素变化并且初始位置到最终位置的一个变化的一个视觉效果，越到最终位置越慢的一个过程给我们的div和span写的css样式 ，为了使我们看的舒服一些 #wrapper{ width: 400px; height: 80px; background: orange; position: absolute;

原创 dom

DOM**DOM(文档对象模型)**当我们网页在加载时,浏览器会创建页面的文档模型(Document Object Model)DOM对象也称为节点Node通过我们的DOM对象模型我们可以做到 1.改变页面中的所有HTML元素 2.改变页面中的所有HTML属性 3.改变页面中的所有CSS样式 4.对页面中所以的事件作出反应查找 HTML中的元素 1.document.getElementById() 通过HTML的id来查找元素 2.document.get

原创 选班长

找班长需求:按照一定的规则选举班长，规则如下：将班里的N个人围城一圈，顺序编号，从第一个人开始报数（从1到3报数），凡报到3的人退出圈子，然后从下一个人重新开始 最后留下的那个人就被选为班长，请问按照这个规则，选出的班长是原来编号为第几号的学生， 假设班上有25个我们先要明确这个题目的逻辑该怎么走首先我们需要定义这个班级这个数组, 一共有25个人,编号是1到25,然后找到最好留下来的那个人就是我们的班长这个解决方法有三种,1.把每一步去掉的元素删除掉,会破坏原有的数组2.利用布

原创 没有对象的进来找个对象吧

对象 对象就是一组无序的相关属性和方法的集合对象的定义 对于javascript中,创建对象的方法一共有四种,我们来一次了解1.利用var关键字调用这个就和我们声明一个变量是一个样子的,只是含义不同 var person={ gname : "xxx", age : 18, height : "165", hobby : "吃饭,玩和打游戏", chaojia : func

原创 小菜鸡找个质因数

将一个正整数分解质因数。如何利用代码，来找到我们的质因数呢，让我们一起来看看吧，var num=Number(prompt("请输入一个数")); for(var i=2;i<=num;i++){ var s = num; if(num%i==0){ if(num==i){ document.write(i); }else{

原创 一个简单的小基础

计算机的五大部件计算机五大组成部件:运算器、控制器、存储器、输入设备和输出设备。JS基础javascript是一种运行在客户端上面的一种脚本语言不需要编译，他是由js引擎逐行解释并执行的，属于单线程解释语言JavaScript的三种引入方式1.内部式：在script标签里面写。 <script> // 弹框 alert("天热了少穿点吧！"); </script>2.外部式：在外部创建一个js的文件夹，创建文件加上后缀名js，

原创 再不来看看，你就跟不上了

@日常中的一些小总结定位寻找图片我们常用的就是在一张照片中寻找自己需要的照片背景定位 backgroud-image使用我们的backgroud-image找到我们需要的图片，然后例如：这张图片。我们只要这个二维码的图。我们可以在我们的背景定位属性后面加上个background-position：x轴的坐标 y轴的坐标这样我们就可以定位到我们的需求图片input标签一些应用input标签可以设置我们的宽高，里面还有一些其他的属性。**outline：none；可以将我们的input框去掉在

原创 哇塞，这样的小tips你的对象应该会喜欢吧

用css3样式做个简单的旋转照片墙话不多说，让我们开始制作吧首先，我们要准备好我们的照片，这里就不做展示了。<div class="father"> <div class="son1"></div> <div class="son2"></div> <div class="son3"></div> <div class="son4"></

原创 HTML表格元素的组成和结构

我们的HTML有一个个标签组成，除了我们的标签还有我们的表格表单，列表等等表格元素表格有我们的tr和td也就是行和单元格组成，我们表格的作用就是按照一定的顺序或者格式来摆放我们的数据` <table> <tr> <td></td> <td></td> </tr> <tr> <td></td&gt

原创 给初学者的对HTML的了解

这里写自定义目录标题使用编程工具的一些快捷键HTML学习思维导图使用编程工具的一些快捷键Ctrl+C:复制Ctrl+V:粘贴Ctrl+X:剪切Ctrl+S:保存Ctrl+A:全选Ctrl+Z:撤销上一个操作HTML学习思维导图对于一些不了解HTML的人来说，这个思维导图可以很准确的让人明白HTML的学习路线以及一些东西。...