超级冲天猪-CSDN博客

原创 TypeScript基础知识(7) 泛型类型声明

TypeScript 泛型泛型简单来讲就是在声明这个函数时我们不去指定具体的类型，等到我们在调用的时候再去传递具体的类型。function createNumberArray(length:number,value:number):number[]{ const arr = Array<number>(length).fill(value)//比如Array就是一个泛型类，在ts内部定义时他不知道我们要传递什么参数所以它使用泛型参数，number就是我们所指定的 return a

2022-02-14 22:33:29 655

原创 TypeScript基础知识(6) 类类的访问修饰符类的只读属性类与接口抽象类

类类可以用来描述一类具体事物的抽象特征。ES6以前，函数+原型模拟实现类（打一个比喻：女生是类，女朋友是对象，要使用女朋友必须new一个女生称为女朋友后才能使用），ES6开始，JavaScript中有了专门的class，而在TypeScript中，TypeScript不仅可以使用es6下所以类的功能，而且还添加了一些额外的功能和用法。es6简单继承例子1.es6方式class Parent{ constructor(){ this.age=18 } }

2022-02-14 21:59:38 487

原创 TypeScript基础知识(5) TypeScript接口（可选成员，只读成员）

TypeScript接口（可选成员，只读成员）interfaces翻译过来就是接口，可以理解成规范或者是契约，可以用来约定对象的结构，我们去使用一个接口就必须要去遵循接口的全部规定。 TypeScript接口最直观的提现就是可以去约定一个对象当中具体有哪些成员，成员的类型又是什么样子。我们看下下面的例子。interface Post { title:string content:string}function printPost(post:Post){ console.lo

2022-02-14 20:49:42 555

原创 TypeScript基础知识(4)函数类型约束任意类型隐式类型推断和类型断言

函数类型约束函数类型约束就是对函数的输入输出进行类型限制。在JavaScript有两种函数定义的方式，有函数声明和函数表达式两种方式比如下面：两个参数的类型我们设置为number 参数类型设置为string1.函数声明function func1(a:number,b:number):string{ return 'func1'};func1(100,200)注意传入的参数类型和个数要完全一致2.函数表达式const func2 = function (a:number,b:nu

2022-02-14 18:06:39 606

原创 TypeScript基础知识（3）数组类型元组类型枚举类型

数组类型常见写法const arr1:Array<number> = [1,2,3]//表示纯数字组成的类型const arr2:number[] = [1,2,3]//元素类型表示，同样表示纯数字组成的类型这样的优势是什么？我们来看下下面的例子function sum(...args){ //判断是不是每个成员都是数字 return args.reduce((prev,current)=>prev+current,0)}我们需要判断…arg每个成员是不

2022-02-14 17:19:38 841

原创 TypeScript基础知识（2）原始类型作用域 Object类型

TypeScriptTypeScript是JavaScript的超集TypeScript=JavaScript+类型系统+ES6（或者更后版本）会被编译为JavaScript配置步骤1.npm install -g typesrcipt下载2. tsc --inti 生成tsconfig.json 改 “outDir”: “./js”,3. 菜单栏终端 - 运行任务监视tsconfig.json1.TypeScript原始类型//原始数据类型const a:string = 'f

2022-02-14 16:27:02 528

原创 TypeScript基础知识（1）JavaScript语言特性

强类型和弱类型强类型的语言层面限制函数的实参类型必须与形参类型相同，弱类型语言层面不会限制实参的类型,比如下面的js代码。（不过也有说法是强类型语言不允许任何的隐式类型的转换，弱类型的语言则允许任意数据隐式类型转换，强弱类型定义比较模糊）function foo(num){ console.log(num); }foo(100)//okfoo('100')//okfoo(parseInt('100'))//ok很多时候js代码的类型错误是在逻辑判断后手动抛出的，而不是在语言层面

2022-02-14 11:30:29 273

原创 JavaScript深入之promise基础知识

JavaScript深入之promisepromise基本原理Promise 是一个类，在执行这个类的时候会传入一个执行器，这个执行器会立即执行Promise 会有三种状态：Pending 等待resolved(或者是fulfilled) 完成rejected 失败如下：const p = new Promise((resolve,reject)=>{ resolve(1) }) console.log(p);状态为成功const p = new P

2022-02-08 16:02:04 393

原创 JavaScript深入之new关键字

JavaScript深入之new关键字看个例子function Person(name) { this.name = name; } Person.prototype.age = 20; let person = new Person("linxizhe"); console.log(person.name);//linxizhe console.log(person.age);//20从这个例子中，我们可以看到，实例 person 可以：1.访

2022-02-07 00:51:50 489

原创 CSS权重

CSS权重权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。如果两个选择器同时作用到一个元素上，权重高者生效。权重记忆口诀：1.从0开始，一个行内样式+10002.一个id选择器+1003.一个属性选择器、class或者伪类+104.一个元素选择

2022-02-05 21:22:51 4695

原创 CSS BFC原理和定位position

1.BFC概念BFC为块级格式化上下文，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。2.BFC特性及应用只要元素满足下面任一条件即可触发 BFC 特性：body 根元素浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed)display 为

2022-02-05 18:11:34 366

原创 CSS盒模型和选择器

CSS盒模型什么是盒模型什么是盒模型：盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：由于IE盒模型的怪异模式，IE模型和标准模型的内容计算方式不同。标准模型和IE模型的区别1.IE模型IE模型元素宽度width=content+padding+border，高度计算相同2.标准模型标准模型元素宽度width=content，高度计算相同css如何设置获取这两种模型的宽和高

2022-02-05 17:13:53 212

原创 JavaScript深入之数组方法整理

1.join(）就是把数组转换成字符串，然后给他规定个连接字符，默认的是逗号( ，)书写格式：join(" "）var arr = [1,2,3];console.log(arr.join()); 　　　　// 1,2,3console.log(arr.join("-")); 　　// 1-2-32.push()和pop()push(): 把里面的内容添加到数组末尾，并返回修改后的长度。pop()：移除数组最后一项，返回移除的那个值，减少数组的length. var arr

2022-02-03 22:55:51 194

原创 JS中数据类型检测

JS中数据类型检测1.type of定义：用来检测数据类型的运算符。有以下两种用法：1.type(表达式) ：对表达式做运算2.typeof 变量名：对变量做运算。返回值：首先检测返回的结果是一个字符串。所以我们看下面的表达式（最近看到的面试题）::console.log(typeof typeof typeof typeof []); 由于typeof返回的结果永远是一个字符串（字符串中包含了对应的类型），所以连续出现两个及两个以上typeof检测的时候，最后结果都是` “string

2022-02-03 16:22:07 532

原创 JavaScript深入之继承

JavaScript深入之继承1.借助原型链实现继承 function Parent(){ this.name = "zhu" }; Parent.prototype.getName = function(){ console.log(this.name); }; function Child() { }; Child.prototype = new Parent(); var child1 = new Child(); child

2022-02-01 17:15:30 796

原创 JavaScript深入之异步

JavaScript深入之异步我们先来看一段代码Promise.resolve() .then(function () { console.log("promise1"); }) .then(function () { console.log("promise2"); }); console.log("3"); setTimeout(function () {

2022-01-31 15:21:48 529

原创 JavaScript深入之闭包

JavaScript闭包在我们说闭包时我们先来看看两个东西：作用域和生存周期1.作用域看一个例子function fn1(){ let str = "我是一个帅哥";};function fn2(){ //我们尝试使用这个变量 console.log(str);//Uncaught ReferenceError: str is not defined};fn1();fn2();因为str是一个局部变量就像函数的私有财产局部变量只能在定义它的函数内使用。我们再看下面例子f

2022-01-30 17:12:06 429

原创 React新旧生命周期浅对比

React新旧生命周期在具有许多组件的应用程序，当组件被销毁所释放所占用的资源是非常重要的，当Clock组件第一次被渲染到DOM中的时候，就为其设置一个定时器，这在React中被称为“挂载（mount）”。同时，当DOM中Clock组件被删除的时候，应该清除定时器。这在React被称为“卸载（unmount）”。我们可以为class组件声明一些特殊的方法，当组件挂载或卸载就会去执行这些方法。挂载：mount卸载：unmount标题看一段代码 class Count extends React.

2022-01-29 11:31:22 161

原创 JavaScript深入之ES6中的Map和Set

JavaScript深入之ES6中的Map和Set及实现Set和Map主要的应用场景在于数组去重和数据存储，原来Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构。Set集合是由一组无序且唯一(即不能重复)的项组成的，可以想象成集合是一个既没有重复元素，也没有顺序概念的数组，ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构// 去除数组的重复成员let array = [1,2,1,4,5,3]

2022-01-29 00:19:09 1306

原创 Node.js HTTP模块、URL模块 supervisor工具

1.Node.js介绍Node.js 是一个 Javascript 运行环境(runtime)。它让 JavaScript 可以开发后端程序，它几乎能实现其他后端语言能实现的所有功能。Nodejs 是基于 Google V8 引擎，V8 引擎是 Google 发布的一款开源的 JavaScript 引擎，原来主要用于 Chrome 浏览器的 JS 解释部分，但是 Ryan Dahl 这哥们，鬼才般的，把这个 V8 引擎搬到了服务器上，用于做服务器的软件。官网下载：https://nodejs.org

2022-01-28 20:51:56 350

原创 React基础知识

React1.声明式编程和函数式编程声明式编程是一种编程范式，它关注的是你要做什么，而不是如何做。它表达逻辑而不显式地定义步骤。下面是一个例子，数组中的每个元素都乘以 2，我们使用声明式map函数，让编译器来完成其余的工作，而使用命令式，需要编写所有的流程步骤。而命令式编程描述了如何做下面是一个例子，数组中的每个元素都乘以 2，我们使用声明式map函数，让编译器来完成其余的工作，而使用命令式，需要编写所有的流程步骤。const numbers = [1,2,3,4,5];// 声明式const

2022-01-28 11:26:33 1469

原创 JavaScript深入之call和apply,bind

js数组方法整理：https://www.cnblogs.com/zyfeng/p/10541133.html

2022-01-27 23:31:28 106

原创 AJAX基础知识(2)-JSON响应

AJAX基础知识(2)-JSON响应server.js文件//1. 引入expressconst express = require('express');//2. 创建应用对象const app = express();//3. 创建路由规则//JSON 响应app.all('/json-server', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-

2022-01-26 23:39:13 360

原创 JavaScript深入之解读this

在之前的文章中我们说到了执行上下文，我们可以先总结一下执行上下文的执行周期执行上下文的创建阶段，会分别生成变量对象，建立作用域链，确定this指向。其中变量对象与作用域链在之前的文章已经说了。本文的关键，就是确定this指向。首先我们一定要牢记一个结论：this的指向，是在函数被调用的时候确定的，也就是创建上下文的时候确定的因此，一个函数中的this指向，可以非常灵活。比如下面的例子中，同一个函数由于调用方式的不同，this指向了不一样的对象。var a = 10;var obj = { a

2022-01-26 23:07:41 79

原创 JavaScript深入之变量对象及作用域链

在之前的JavaScript深入之执行上下文中我们说到：当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文。而且对于每个执行上下文都有三个重要的属性：1.变量对象2.作用域链3.this1.变量对象变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。因为不同执行上下文下的变量对象稍有不同，所以我们来理解全局上下文下的变量对象和函数上下文下的变量对象。我们先看看全局对象：在WC3school中：全局对象是预定义

2022-01-25 22:29:36 155

原创 AJAX基础知识(1)-express框架配合原生AJAX

1.XML简介XML 为可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。比如说我有一个学生数据： name = “孙悟空” ; age = 18 ; gender = “男” ;用 XML 表示的话：<student> <name>孙悟空</name> <age>18</age> <g

2022-01-25 13:42:54 338

原创 JavaScript深入之执行上下文

什么是执行上下文？简而言之，执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。JavaScript 中有三种执行上下文类型。（1）全局执行上下文 — 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。（2）函数执行上下文 — 每当一个函数被调用时,

2022-01-25 00:41:45 182

原创 2.JavaScript深入之静态作用域

静态作用域作用域是指程序源代码中定义变量的区域。作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。JavaScript 采用的是静态作用域。函数的作用域在函数定义的时候就决定了。而与词法作用域相对的是动态作用域，函数的作用域是在函数调用的时候才决定的。让我们来看个例子了解var value = 1;function foo() { console.log(value);}function bar() { var value = 2; foo();}

2022-01-24 23:59:36 150

原创 JavaScript深入之从原型到原型链

JavaScript深入之从原型到原型链function Person() {}var person = new Person();person.name = 'Kevin';console.log(person.name) // Kevin在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。function Person() {}// 注意prototype是函数才会有的属性Person.prototype.name = 'Kevin';

2022-01-23 22:46:02 178

m0_51207602的博客