yidianyuanzhidong的博客

原创 ES6解构赋值

感想实习时间真的过得很快啊，接触到了很多自己在学校根本接触不到的东西，这是我受益匪浅，由于前些日子都在努力学习新东西，几乎没有时间整理文档，趁周六周末把文档拾起来，给自己定个小计划，每天都至少看两大知识点，基础的东西不能忘记。 今天就把一些ES6的东西在巩固一下 学习永无止境。ES6解构赋值数组解构const peopleArr:number[] = [1,2,3]const [arr1, arr2, arr3] = peopleArr//此时arr1=1,arr2=2,arr3=3//命

原创 Git项目部署常用命令

代码敲完如何部署1、首先查看自己的项目分支git branch2、查看在你上次提交之后是否有对文件进行再次修改git status3、把以下修改存储到一个新的堆栈中git stash4、创建并切换分支git checkout -b 分支名5、从git栈中获取到最近一次stash进去的内容git stash pop6、恢复原文件git checkout 文件名加路径7、比较两个分支的变化git diff8、添加修改后的文件git add .9、提交标签git commit

原创 前端基础整合（html、css、js）

原创 CSS可以继承的属性

1、字体系列属性font-family：字体系列font-weight：字体的粗细font-size：字体的大小font-style：字体的风格2、文本系列属性text-indent：文本缩进text-align：文本水平对齐line-height：行高word-spacing：单词之间的间距letter-spacing：中文或者字母之间的间距text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）color：文本颜色3

原创 table合并单元格

合并两行删除多余单元格结果

原创 vscode配置Ts自动编译环境

tsc --init生成tsconfig.json后VScode报错在配置文件tsconfig.json中找不到任何输入。指定的 “include“ 路径为“[“**/*“]”，“exclude“ 路径为“[]”其实这个不算错误，只是因为没有找到任何.ts文件这是因为有了tsconfig.json后，VScode会自动在include和exclude包含的范围中查找ts文件，如果找不到ts文件就会报错，当在include和exclude范围中添加了ts文件，VScode就不会报错了。...

原创 JS中every()和some()的用法

every()与some()方法都是JS中数组的迭代方法。every相当于都得符合条件才可返回True,&&every()是对数组中每一项进行回调函数内的判断，如果该函数对每一项返回true,则返回true。some相当于有一个符合条件就可返回True,||some()是对数组中每一项进行回调函数内的判断，如果该函数对任一项返回true，则返回true。var arr = [ 1, 2, 3, 4, 5, 6 ]; console.log( arr.some( functio

原创 手写Jsonp实现

废话少说，直接上代码 var jsonp = function(url,param,callback){ //处理url地址,查找？，如果没有？这个变量就有一个"?"，有？这个变量接收一个& var querystring = url.indexOf("?") == -1?"?":"&"; //处理参数{xx:xx} for(var k in param) { querystring += k

原创 Cookie、Session以及Storage(浏览器的本地存储)

cookie和session的区别：cookie数据存放在客户的浏览器上，session数据放在服务器上。cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。所以个人建议：将登陆信息等重要信息存放为SESSIO

原创 JS的闭包

为什么要有闭包？使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染。缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露 。为什么我会把内存泄漏加删除线呢？？？闭包会造成内存泄露？对，但也不完全对。内存泄露是指你用不到（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。闭包里面的变量明明就是我们需要的变量（lives），凭什么说是内存泄露？这个谣言是如何来的？因为 IE。IE 有 bug，IE 在我们使用完闭包之后，依然回收不了闭包里面引

原创 ES6新增Map和Set方法

Mapvar myMap = new Map();var keyString = "a string"; myMap.set(keyString, "和键'a string'关联的值"); myMap.get(keyString); // "和键'a string'关联的值"myMap.get("a string"); // "和键'a string'关联的值" // 因为 keyString === 'a string'map

原创 BrowserRouter和HashRouter的区别

原理BrowserRouter 使用的是H5的history API方法（不兼容IE9以下）HashRouter 使用的是URL的哈希值UR表现形式不同BrowserRouter ：路径中没有#号，例如：localhost:3000/demo/testHashRouter ：路径中存在#号，例如：localhost:3000/#/test刷新网页对state参数的影响BrowserRouter ：没有任何影响，由于存在history中HashRouter ：刷新state参数参数丢失Has

原创 withRouter方法的使用

首先withRouter是“react-router-dom”的一个方法。其作用就是传入一个一般组件，返回一个路由组件所有属性（history.location,match）的组件import {withRouter} from "react-router-dom"import Header from "./Header"export default withRouter(Header)一般组件Header此时props属性获得了路由组件才有的history、location、match属性

原创 路由跳转方式push和replace传参方式

params参数相应的router需要设置参数形式<Router path="/home/:name/:age" component={Home} />"push:this.props.history.push("/home/zhangsan/18")replace:this.props.history.replace("/home/zhangsan/18")query参数push:this.props.history.push("/home/?name=zhangsan&

原创 React跳转路由传参3种方法和区别

params传参特点：路由表配置：参数地址栏显示传入参数：<Link to="/home/001/zhangsan/18" />声明传参形式：<Router path="/home/:id/:name/:age" component={Home} />"接收参数：在组件Home中接收使用this.props.match.params即可query传参特点：query方法：参数地址栏不显示，刷新地址栏，参数丢失传入参数：<Link to="/home/

原创 React父子间通信

父组件与子组件间的通信子组件获取父组件的信息父组件：<div className="father"> <Child age={this.state.age} name={this.state.name}></Child></div>子组件：出入的值存在this.props中this.props.agethis.props.name父组件获取子组件的信息1、回调函数的方式子组件：可直接调用子组件的propsthis.props

原创 Axios的特点

1、基于promise的异步Ajax请求库2、浏览器端/node端都可以使用3、支持请求/响应拦截器4、持之请求取消5、请求/相应数据转换6、批量发送多个请求

原创 ES6迭代器

迭代器是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就是一个属性，就可以完成便利操作。ES6创造了一种新的遍历命令for…of，iterator主要为for…of服务原生具备iterator接口的数据（可以用for of遍历）Arrayargumentssetmapstringtypedarraynodelist工作原理Iterator 的遍历过程是这样的。（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质

原创 ES6第七种数据类型Symbol

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。let sy = Symbol("KK");console.log(sy); // Symbol(KK)typeof(sy); // "symbol" // 相同参数 S

原创 ES6扩展运算法克隆元素（...）深拷贝还是浅拷贝

一层元素数组或对象什么叫只有一层元素呢，例如let person={ name="校历", age=23 }let num=[1,2,3,4,5]此时对象person和数组num就是一层的数据，没有嵌套其他元素let person={ name="校历", age=23 }let num=[1,2,3,4,5]let person2=[...person]let num2=[...num]可以理解为深拷贝什么叫多层元素呢let person={ name:"校历"

原创 ES6连续解构赋值重命名

es6支持连续解构赋值且重命名let person={stu1:{stu2:{ name:"小三"}}}let {person:{stu1:{stu2}}}=objconsole.log(stu2) //小三//改变属性名let {person:{stu1:{stu2:stu3}}}=objconsole.log(stu3) //小三多重对象嵌套即可使用，简写书写...

原创 Javascript规范

node.js服务端使用的规范为commonjsnode.js页面同样为commonjs，需要使用browserify打包AMD规范（浏览器端）专门用于浏览器端，异步加载方式CMD规范（浏览器端）commonjs和amd的整合版本，定义用define，暴露用exportsES规范（浏览器端）目前应用最广泛的，需要打包处理，转换到es5，现目前更新es11等...

原创 Jsonp实现原理

Jsonp原理： 首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。3.客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客

原创 Javascript中call() apply() bind()和argument

call() apply() bind()call()：传入一个对象，参数以逗号间隔obj.call(obj2,“hello”,2)applyl()：传入一个对象，参数以数组形式传入obj.apply(obj2,[“hello”,2])bind()：传入一个对象，参数以逗号间隔，返回一个返回是一个函数arguments:类数组对象fun（num1,num2）传入的参数直接调用，argument[0],argument[1]argument.callee就是函数对象本身...

原创 CSS学习笔记09

34、弹性盒一种布局手段，代替浮动，不脱离文档流主轴：弹性元素的排列方向为主轴侧轴：与弹性元素排列方式垂直的轴弹性容器：display：flex块级弹性容器display：inline-flex行内弹性容器**弹性容器属性：**flex-direction:设置弹性元素的排列方式flex-direction：column(自上向下)、column-reverse(自下向上)、row(默认水平排列)、row-reverse(反向水平排列)flex-wrap:控制弹性元素的换行问题

原创 CSS学习笔记08

31、过渡transition:height 0.3s transition: property duration timing-function delay;transition-property:height、width等等属性名transition-duration：时间间隔0.3s，单位毫秒transition-timing-function：（贝塞尔曲线）ease:先加速在减速 (默认值)ease-in：加速引动ease-out：减速运动ease-in-out:先加速在减速，与

原创 CSS学习笔记07

28、背景渐变background-image:线性渐变div{ background-image:liner-gradient(to bottom right,red,green);默认从上到下 (0-360)deg度 (0-1)turn圈 多个颜色默认平均分配，例如red 50px ,green,从50px才开始渐变 background-image:repeating-linear-gradient(red 50px,yellow 100px)}（t

原创 CSS学习笔记06

24、行高行高是指文字占有的实际高度:默认行高1.3333pxline-height:20,实际大小为20X1.333px行高会在字体框的上下平均分配height=line-height就是垂直居中注：行间距=行高–字体大小25、字体的简写font-weight:bold(粗体) normal(正常) 100-900(九个等级)font-style:italic(斜体) norma(正常)l简写：font : bold(粗体) italic(斜体) 50px/2 （字体

原创 CSS学习笔记05

21、字体族设置字体样式font-family:"华文彩云"五大字体族font-family:serif,monospace,cuisive首先使用第一个，以此类推引用字体把字体打包到服务器，供用户使用问题： 1、加载速度 2、版权问题@font-face{ font-family:"myfont";提供的字体名称 src:url("./font-x.ttf") format("truetype");字体路径 如果ttf字体格式不支持，需要换其他的}使用p{ font-

原创 CSS学习笔记04

17、浮动的简介浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：float:none、left、right浮动的特点：脱离文档流。 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。向左/向右浮动直到遇到父元素或者别的浮动元

原创 CSS学习笔记03

13、简单布局1、水平方向的布局一个元素在父元素中的水平位置由以下几个决定分别是：margin-left：左外边距border-left：左边框padding-left：左内边距width：宽度padding-right右内边距border-right：右边框margin-right：右外边距不指定元素的宽度时：width默认为100%，撑开内容,当等式不满足是调整右边距，有auto时调整auto水平居中：width固定，margin：0 auto2、垂直方向的布局父元素高度不固定

原创 CSS学习笔记02

9、选择器权重样式冲突，为相同元素提供不同样式，此时为样式冲突权重比较内联样式>id选择器>类和伪类选择器>元素选择器>通配选择器>继承的样式注：！important声明为最高级优先级，复合选择器相相加计算，分组选择器单独计算，同级是覆盖，类选择器无论怎么叠加也不能超过id选择器，无法跨数量内联样式，如: style="…"，权值为1000。ID选择器，如：#content，权值为0100。类，伪类、属性选择器，如.content，权值为0010。类型选择器、伪

原创 CSS学习笔记01

CSS1、css书写样式#mermaid-svg-uh9HUaOh8uvyKy49 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-uh9HUaOh8uvyKy49 .label text{fill:#333}#mermaid-svg-uh9HUaOh8uvyKy49 .node rect,#mermaid-

原创 HTML学习笔记03

11、 图片标签<img src="图片地址" alt="描述">(alt：搜索识别内容)下面介绍一下网页中使用的图片四种形式jpg（jpeg）:支持颜色丰富，不支持透明，不支持动态图gif:支持颜色较少，支持简单透明，支持动态图png:支持颜色丰富，支持复杂透明，不支持动态图webp:新推出（谷歌），具有所有的优点，文件小，但是兼容性不好。注：还有一种base64编码的图片；将图片进行base64编码，在网页加载时一起引入网页12、内联框架<iframe src="h

原创 HTML学习笔记02

HTML学习笔记0026、实体（&）在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。例如 &nbsp;显示成空格注释：实体名称对大小写敏感！7、meta标签<meta>元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与

原创 块元素和行内元素

今天在整理笔记的时候，记起来应该去区分一下块元素：就是独占一行行内元素：不会独占一行，只站自己大小内容

原创 HTML学习笔记01

HTML1、基本框架<!--html根标签，网页内容都会写在根元素里面--><html> <head><!--head的内容不会在网页中显示--> <title>标题栏显示</title> </head> <body> 内容区域，都会显示在网页中,用户可见 <h1>一级标题</h1> <h2>一级标题</h2> <h3>一

原创 VSCode搭建前端开发环境

一、首先安装vscode官网下载jiangchenVScode下载

原创 重新思考前端开发

结构、表现、行为结构：HTML用于描述页面的结构，就像人的骨架。变现：CSS用于控制页面中的元素的样式，类似于身穿的衣服，美化页面。行为：Javascript用于响应用户操作，可以让人动起来，活起来。一、WEB应用历史- 前端的起点——1994年#mermaid-svg-TYIJEAnQMJNFQkVY .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#33

原创 Redux基本使用

1、什么是Redux官方解释：Redux is a predictable state container for JavaScript apps. 意思就是Redux是js应用的 一种可预测的状态容器2、为什么使用Redux下面的图是不使用Redux和使用Redux时 父子组件之间的通信方式...