- 博客(51)
- 收藏
- 关注
RSS订阅原创 ES6新特性之Symbol的数据类型
symbol的特点基本使用创建symbol:不能与其他数据进行运算七种数据类型 Symbol创建对象属性:调用方法:Symbol内置值：除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行；特别的： 内置值的使用，都是作为某个对象类型的属性去使用；...
2022-06-29 22:40:45
266
1
原创 ES6新特性之扩展运算符
…扩展运算符能够将数组转换为逗号分隔的参数序列扩展运算符（spread）也是三个点（…）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包基本使用
2022-06-27 17:38:15
342
4
原创 ES6新特性之函数参数赋初始值及rest参数
ES6允许函数的参数赋初始值形参初始值 具有默认值的参数 一般位置要靠后(约定俗成)与结构赋值结合注意这里的是个对象rest参数ES6 引入 rest 参数，用于获取函数的实参，用来代替 argumentsES5获取实参的方式ES6的参数，参数必须放在最后面...
2022-06-27 10:30:14
322
原创 ES6新特性之箭头函数使用案例
箭头函数适合与 this 无关的回调、定时器、数组的方法回调 箭头函数不适合与 this 有关的回调、 事件回调、 对象的方法
2022-06-24 15:58:12
171
原创 ES6新特性之箭头函数
概述：ES6允许使用箭头（）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；箭头函数的注意点箭头函数的特性代码演
2022-06-23 17:51:38
278
原创 ES6新特性之字符串模板和简化对象和函数的方法
模板字符串（template string）是增强版的字符串，用反引号（``）标识特点：1. 字符串模板可以储出现换行符2. 可以使用形式引用变量字符串模板可以出现换行符可以使用 形式引用变量简化对象和函数的方法ES6允许在对象的大括号内直接写入变量和函数作为对象的属性和方法...
2022-06-17 22:33:30
138
原创 ES6新特性之let变量声明特性及其案例
let 关键字用来声明变量，使用 let 声明的变量有几个特点： 1. 不允许重复声明 2. 具有块级作用域（局部变量） 3. 不存在变量提升 4. 不影响作用域链
2022-06-14 21:06:02
477
原创 js-cookie使用方法
js-cookie是用来处理cookie的插件安装插件npm install --save js-cookie1. 使用引用安装好js-cookie插件后，在我们需要处理cookie的地方，简单的通过import引入就可以使用了import Cookies from 'js-cookie'2. 1 js-cookie的设置// 创建一个名称为name，对应值为value的cookie，由于没有设置失效时间，默认失效时间为该网站关闭时Cookies.set(name, value)//
2022-04-22 10:33:45
286
原创 TypeScript从入门到精通（二十五）用Parcel打包TypeScript代码
第二十篇文章中实现了import方式的引入，但是配置起来相当的复杂使用我们Parcel这个打包工具一切变得简单起来了新建一个项目这个步骤在第22篇博客中有详细的提到新建立一个项目TSTest,在桌面新建立一个文件夹，然后在VSCode中打开。打开终端，输入npm init -y,创建package.json文件在终端中输入tsc --init,创建tsconfig.json文件修改tsconfig.json配置rootDir和outDir.新建src文件夹，在里边建立index.html,
2021-12-06 17:51:48
488
原创 TypeScript从入门到精通（二十四）使用import语法
上节我们学到命名空间，其实我们的代码也可以使用import进引入的修改component.ts文件现在去掉components.ts里的namespace命名空间代码，写成 ES6 的 export 导出模式。代码如下： export class Header { constructor(){ const cdiv = document.createElement("div") cdiv.innerT
2021-12-06 17:10:15
1570
原创 TypeScript从入门到精通（二十三）namespace命名空间（下）
命名空间实现组件化：上一篇文章实现了模块化和避免全局变量的污染，但是我们工作中分的要更细致一些，会单独写一个components的文件，然后进行组件化。在src目录下新建一个文件components.ts，编写代码如下：namespace Components { export class Header { constructor() { const elem = document.createElement("div"); elem.innerText = "Th
2021-12-06 14:38:42
278
原创 TypeScript从入门到精通（二十二）namespace命名空间（上）
之前我们的TS效果是在控制台终端输出的，现在我们新建一个简单的项目，让我们的ts在项目中运行搭建最基础的TS开发环境：建立好文件夹后，打开 VSCode，把文件夹拉到编辑器当中，然后打开终端，运行npm init -y,创建package.json文件。生成文件后，我们接着在终端中运行tsc -init,生成tsconfig.json文件。新建src和build文件夹，再建一个index.html文件。在src目录下，新建一个page.ts文件，这就是我们要编写的ts文件了。配置tsconfi
2021-12-06 14:26:42
328
原创 TypeScript从入门到精通（二十一）类中的泛型
类中的泛型使用:我们在写一个基本class类 在构造函数中需要传递一组女角色的名称,然后通过getGirlsNmae发方法展示女角色的名称class GirlRole{ constructor(private girls:string[]){} getGirlsNmae(index:number):string{ return this.girls[index] }}let girl = new GirlRole(["虚空之女","希维尔","暗影猎手","霞
2021-12-03 17:58:55
214
原创 TypeScript从入门到精通（二十）函数泛型
函数泛型我们先写一个简单的联合类型demo为了保证方法可用 我们就利用字符串模板来拼接这两个参数function join(first:string|number,second:string|number){ return `${first}${second}`}join("哈哈","小猿")上后面的代码是没有任何问题的。现有一个新的需求：first这个参数为string类型时, second也要为string类型，反之同理。利用我们前面所学的知识很难实现,所以这个时候就需要泛型来
2021-12-03 14:36:07
818
原创 TypeScript从入门到精通（十九）枚举类型
写一个小demo随机数喝酒游戏，我们随机摇到几就喝几杯酒写一个随机数 随机生成0-6const RandomNumber = Math.round(Math.random()*6)再写一个方法function Drink(num:number):string{ if(num==0){ return "免喝" }else if(num==1){ return "喝一杯" }else if(num==2){ return "喝
2021-11-02 15:09:39
151
原创 TypeScript从入门到精通（十八）联合类型和类型保护
联合类型可以理解为一个变量有两种或两种以上的类型我们写两个接口PersonH5和PersonJava 再写一个判断是谁的方法WhoAreYou里边传入一个animal(任意值)，这时候可以能是PersonH5也可能是PersonJavainterface PersonH5{ isH5:boolean; say:()=>{}}interface PersonJava{ isH5:boolean; say:()=>{}}以下这样的形式就是联合类型联合类型，关键符号是|(竖
2021-11-01 17:20:52
146
原创 TypeScript从入门到精通（十七）配置文件-初识 compilerOptions 配置内容详解
complierOptions里的配置项详情可以去如下网站查看https://www.tslang.cn/docs/handbook/compiler-options.html (编译选项详解)complierOptions里的配置项内容很多，挑几个重要的看一下rootDir和outDir：现在我们的js文件直接编译到了根目录下，和ts文件混在了一起。我们当然是不喜欢这种方法的，工作中我们希望打包的js都生成在特定的一个文件夹里,比如build。这样编译的文件会放在指定的文件夹中编译 ES
2021-10-26 12:06:09
763
原创 TypeScript从入门到精通（十六）配置文件-初识 compilerOptions 配置项
认识和学习tsconfig.json中compilerOptions配置项removeComments属性：removeComments是complerOptions里的一个子属性，它的用处是告诉TypeScript对编译出来的js文件是否显示注释（注解）。比如我们现在把removeComments的值设置为true，就是在js中不显示注释。//我是小哈let perosn:string ="小哈"写完注释后，直接再终端里，输入tsc,输入完成后，很快就会生成一个Demo.js文件，打开后会看到
2021-10-25 17:04:10
500
原创 TypeScript从入门到精通（十五）配置文件-初识 tsconfig.json
生成tsconfig.json文件新建一个名为TsDemo的文件夹在VScode编译器中打开打开终端输入tsc --init这样生成tsconfig.json文件了生效tsconfig.json文件在文件的根目录下建立一个Demo.ts文件，然后可以编写一段简单的代码let person:string = "小哈"这时候我们不在使用ts-node直接执行了，需要用tsc Demo.ts进行编译，编译后会得到Demo.js文件。 生成的代码如下:var perosn = "小哈";
2021-10-21 17:59:30
449
原创 TypeScript从入门到精通（十四）类的只读属性和抽象类
类的只读属性 readonly：先新建一个类实例化并赋值class Person { constructor(public name:string){}}let person = new Person("小哈")person.name= "小哈二号"console.log(person.name)//打印结果:小哈二号我们可以得出类的属性name的值(小哈)被赋为小哈二号如果在实例化对象时赋予的名字，以后不能再更改了，也就是我们常说的只读属性class Person{
2021-10-19 10:20:00
228
原创 TypeScript从入门到精通（十三）类的Geteer , Setter 和 Static 使用
我们都知道小哥哥的体重都是不愿意随便告诉别人,所以我们使用private,这样只有他本人知道自己的真实体重创建一个(Boy)类class Boy { constructor(private _weight:number){}}但是想让其他人知道的话,那就得使用getter这个属性,它像方法但是它并不是方法，归根到底还是属性,它得关键字是getgetter:在这里插入代码片...
2021-10-15 11:07:53
196
原创 TypeScript从入门到精通（十二）类的构造函数
类的构造函数（关键字constructor）类的里边定义一个name，但是name我们并不给他值,然后我们希望在new出对象的时候，直接通过传递参数的形式，给name赋值，并打印出来。这时候我们就需要用到构造函数了。class Person { public name:string ; //关键字constructor 语法糖 constructor(name:string){// this.name=name }}let person = new
2021-10-13 22:10:58
1310
原创 TypeScript从入门到精通（十一）类的访问类型
class类中的访问类型(public 、private、和protected)public从英文字面的解释就是公共的或者说是公众的，在程序里的意思就是允许在类的内部和外部被调用如果在class中不给访问属性作任何定义,那么默认的就是public访问属性class person { name:string sayHi(){ return this.name +"你好！" // this.name 就是内部调用 }}let Person
2021-10-12 10:22:33
164
原创 TypeScript从入门到精通（十）类的概念和使用
类的基本使用最基本的用法：// 例:class person { content = "我是人类" say(){ return this.content }}let Persons = new person()console.log(Persons.say())//打印结果:我是人类这是最基本的形式，在平时的工作中经常会使用到类的继承：在TypeScript的继承和ES6的继承是一样的,都是通过关键字extendsclass person
2021-09-14 21:21:12
108
原创 TypeScript从入门到精通（九）interface 接口2
复制demo8经过优化之后的代码，一份简历都有自己自由发挥的空间,这个时候就需要任意值插入任意值：[propname:string]:any 属性的名字是字符串类型，属性的值可以是任何类型。interface Resume{ name:string; age:number, workingAge:number, // 接口非选值 是否恋爱 spouse ?:string, //这个的意思是，属性的名字是字符串类型，属性的值可以是任何类型。 [pr
2021-09-14 18:03:35
115
原创 TypeScript从入门到精通（八）interface 接口1
现有需求:某技术公式招聘女程序员 要求年龄不小于23岁 工作年限不低于三年 才有面试资格那我们写了个方法const Girl = (name:string,age:number,workingAge:number)=>{ age>=23 && workingAge>=3 && console.log(name+"OK你已获取面试资格"); (age< 23 || workingAge<3) &&
2021-09-09 23:19:05
107
转载 JS中将时间转为指定格式
var format = function(time, format){ var t = new Date(time); var tf = function(i){return (i < 10 ? '0' : '') + i}; return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){ switch(a){ case 'yyyy': return
2021-06-30 16:59:31
589
原创 TypeScript从入门到精通（七）元组的使用
前言：元组这个概念是JavaScript中没有的。元组在开发中并不常用。其实你可以把元组看成数组的一个加强，它可以更好的控制或者说规范里边的类型。先看一个简单的数组：const person:(string||number)[]=["哈哈",21]问题：当你把"小哈"和21调换位置的时候 你会发现 person 中定义的类型并没有报错，但是我们的工作中总会出现定义的类型和内容一一对应，此时元组就可以派上用场了元组的使用：元组:每个元素类型的位置给固定住了，这就叫做元组let person:[
2021-05-08 11:48:14
476
原创 TypeScript从入门到精通（六）数组类型的定义
常见且单一的数组:const numberArr:string[]=["123","456","789"]数组有多种类型格式的:const AtWill(string||number)[]=["小爱好",18]数组中对象的定义：const obj:{name:string,age:number}[]=[{name:"小哈",age:18}]type alias:TypeScript 为我们准备了一个概念，叫做类型别名(type alias)简单来说就是先定义好类型，可以重复调用typ
2021-05-08 11:29:44
242
1
原创 TypeScript从入门到精通（五）函数参数和返回类型定义
前言：学习本节之后，就会对函数的参数和返回值类型定义有通透的了解易错：我们写的代码其实是有一个小坑的，就是我们并没有定义getTotal的返回值类型，虽然TypeScript可以自己推断出返回值是number类型。 但是如果这时候我们的代码写错了，比如写程了下面这个样子。function getTotal(one:number,two:number){ return one+two +""}const total =getTotal(1,2)那么tatal就不是number类型了 ,但是不会报
2021-05-08 10:58:35
568
原创 TypeScript从入门到精通（四）类型注释和类型推断
前言：直接看代码，简单易懂！！！类型注解：简单的来说，就是定义时告知类型let count : numbercount = 1// 上面这段代码告诉我们count是一个数字类型 这就叫类型注解类型推断：自动推测类型let countInference = 123// 我们这个时候并没有告诉countInference的类型,但是你把鼠标放到变量上//就会发现TypeScript 自动把变量注释为了number（数字）类型使用原则：如果TS 能够自动分析变量类型，那我们就什么都不需
2021-05-08 10:31:32
159
原创 TypeScript从入门到精通（三）基础静态类型和对象静态类型
前言：在 TypeScript 静态类型分为两种，一种是基础静态类型，一种是对象类型，这两种都经常使用，非常重要1. 基础静态类型基础静态类型非常简单，只要在声明变量的后边加一个:号，然后加上对应的类型哦。比如下面的代码，就是声明了一个数字类型的变量，叫做count。const count : number = 918;const myName ：string = 'hahaya'...
2021-04-29 12:25:37
177
原创 TypeScript从入门到精通（二）静态类型
前言 ：TypeScript的静态类简单来讲就是你一旦定义了，就不可以再改变了(比如你是男人就是男人,一辈子都要作男人,不能变来变去)1.开始学习新建一个demo2.ts文件并写下一下代码let count:number= 1此时count就是数字类型的变量，:number 就是定义了一个静态类型，count永远都是数字类型了，不可改变，我们给count赋值一个字符串，此时就会报错了(下图展示错误代码)类似这样常用的基础类型还有，我这里就举几个最常用的哦,null,undefinde,symb
2021-04-29 11:36:49
176
原创 TypeScript从入门到精通（一）准备工作
前言：Vue3.0更好的支持TypeScript ，所以学习Ts是非常有必要的，本人也开始零基础学习，并将学习成果分享在博客上，供大家参考学习！开发工具：VisualStudioCode（VScode）安装方便插件种类多
2021-04-29 11:06:29
212
1
原创 Vue2.x中使用Bus遇到的问题及解决方法
Vue2.x中使用EventBus遇到的"坑"及解决方法场景描述：在vue项目中需要在A页面传值到B页面(A和B非关系组件)问题描述：在A页面点击跳转路由需要把A页面data中的值传到B页面，但是bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据解决方法：bus的$on的监听应该位于 $emit之前，如果在emit之前没有创建监听事件，那么肯定是得不到需要的数据就需要在A页面的beforeDestroy或者Destroy生命周期发送数据在B页面中需要 beforeCreate或cr
2021-04-28 16:58:03
1959
1
原创 websocket(一)
websocket（一）WebSocket (即时通讯)是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据1.基本方法使用(H5)<body> <input type="text" name="" id=""> <button>发送</button> <div></div></body>//
2020-10-27 00:29:15
125
原创 git
1.版本管理工具：每一次提交记录为一个版本。每一次提交记录为一个版本（方便管理）版本管理的发展：CVS–>SVN–>GITCVS弊端：每一次提交都会提交所有的文件，造成服务器压力–完全被淘汰。SVN：每一次提交会和服务器进行对比，提交修改的文件。SVN至今仍然在使用（集中式）GIT：分布式的，每一个用户都有服务器(本地)Git 是一个分布式的版本控制系统，在 Git ...
2020-03-22 15:00:36
73
原创 gulp
一.gulp概述：用自动化构建工具增强你的工作流程！ (三阶段有一个比gulp更好的 --webpcak)gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。基于node强大的流(stream)能力，gulp在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。二.gulp的功能(根据功能安装对应的包或者模块)文件复制html压缩 css编译...
2020-03-22 14:49:54
129
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人