前端路啊
前端路啊

TypeScript 常用类型

目录

1. 类型注解

2. 常用基础类型

1.JavaScript 已有类型

2. TypeScript 新增类型

3. 原始类型 

4. 数组类型 

1.类型[]写法， 如

2.Array<类型>写法， 如

5. 联合类型

6. 类型别名

7. 函数类型

void 类型 

函数可选参数

8. 对象类型 

使用类型别名 

带有参数的方法的类型

箭头函数形式的方法类型 

对象可选属性

9. 接口 interface

接口和自定义类型的区别

接口继承

10. 元组

11. 类型推论

12. 字面量类型

使用场景和模式

13. 枚举 

数字枚举

字符串枚举

枚举实现原理

14. any 类型

15. 类型断言

16. typeof 

TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统

JS 有类型（比如，number/string 等），但是 JS 不会检查变量的类型是否发生变化，而 TS 会检查

TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

1. 类型注解

示例代码 

let age: number = 18;

 说明：代码中:number就是类型注解

类型注解约束了只能给该变量赋值该类型的值

错误演示

// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致
let age: number = '18';

2. 常用基础类型

可以将 TS 中的常用基础类型分为两类

1.JavaScript 已有类型

  • 原始类型： number/string/boolean/null/undefined/symbol
  • 对象类型：object(数组、对象、函数等)

2. TypeScript 新增类型

  • 联合类型、自定义类型（类型别名）、接口、元祖、字面量类型、枚举、void、any 等

注意：原始类型在 TS 和 JS 中写法一致， 对象类型在 TS 中更加细化，每个具体对象都有自己的类型语法 

3. 原始类型 

number/string/boolean/null/undefined/symbol

特点：可完全按照 JavaScript 中的名称来书写

let age: number = 18;
let username: string = '张三';
let isMerry: boolean = false;
let unique: Symbol = Symbol('shuiruohanyu');

4. 数组类型 

数组两种写法

1.类型[]写法， 如

let userList: string[] = ['John', 'Bob', 'Tony'];
let peopleList: object[] = [{ name: '张三', age: 18 }];

2.Array<类型>写法， 如

let user2List: Array = ['John', 'Bob', 'Tony'];
let people2List: Array = [{ name: '张三', age: 18 }]; 
  
5. 联合类型
 
  
 
   
数组中既有 number 类型，又有 string 类型，这个数组的类型应该如何写?
 
  
 
  
可以用|(竖线)分割多个类型， 如 
 
  
let str: string | number = 1;
str = '张三';
 
  
如果数组中可以是字符串或者数字，则可以这么写 
 
  
let arr: Array = [1, 2, '张三'];
 
  
6. 类型别名
 
  
 
   
当一个复杂类型或者联合类型过多或者被频繁使用时，可以通过类型别名来简化该类型的使用 
 
  
 
  
用法：type 名称 = 具体类型 
 
  
type CustomArray = Array;
let arr1: CustomArray = [1, 2, '张三'];
 
  
以上代码中，type作为创建自定义类型的关键字
 
  
     
   
  • 类型别名可以使任意合法的变量名称
    •  
   
  • 推荐大驼峰的命名写法
    •  
  
 
  
7. 函数类型
 
  
 
   
除了变量，我们常见的类型指定还有针对函数的类型声明 
 
  
 
  
函数类型需要指的是 函数参数和返回值的类型，这里分为两种写法 
 
  
     
   
  • 第一种： 单独指定参数，返回值类型
    •  
  
 
  
// 单独指定函数返回值和函数参数
function add(num1: number, num2: number): number {
  return num1 + num2;
}
// 指定变量形式的
const add2 = (num1: number, num2: number): number => {
  return num1 + num2;
};
 
  
     
   
  • 第二种， 同时指定参数和返回值
    •  
  
 
  
// 同时指定参数和返回值

type CustomFunc = (num1: number, num2: number) => number;

const add3: CustomFunc = (num1, num2) => {
  return num1 + num2;
};
 
  
注意： 当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型，这种形式只适用于函数表达式 
 
  
void 类型 
 
  
当我们的函数定义为没有返回值的类型时，可用关键字void表示
 
  
// 没有返回值的函数

type CustomFunc1 = (num1: string, num2: number) => void;

const combinStr: CustomFunc1 = () => {};
 
  
如果一个函数没有返回值，此时，在 TS 的类型中，应该使用 void 类型 
 
  
const add4 = () => {};
// 如果什么都不写 表示add4函数的类型为void

const add5 = (): void => {};
// 这种写法明确指定返回值为void与上方的类型相同

const add6 = (): undefined => {
  return undefined;
};
// 如果指定返回值为undefined  return undefined
 
  
函数可选参数
 
  
当我们定义函数时，有的参数可传可不传，这种情况下，可以使用 TS 的可选参数来指定类型
 
  
比如，在使用数组的slice方法时，我们可以直接使用slice() 也可以传入参数 slice(1) 也可以slice(1,3)
 
  
const slice = (start?: number, end?: number): void => {};
 
  
 ? 表示该参数或者变量可传可不传
 
  
 注意：可选参数只能出现在参数列表的最后， 即必须参数必须在可选参数之前
 
  
8. 对象类型 
 
  
JS 中的对象是由属性和方法组成的，TS 的对象类型是对象中属性和方法的描述
 
  
写法
 
  
// 如果有多个属性 可以换行 去掉间隔符号

let person3: {
  name: string;
  sayHello: Function;
} = {
  name: '王五',
  sayHello() {},
};
 
  
总结： 可是使用{ }来描述对象结构
 
  
属性采用属性名：类型形式
 
  
函数可以采用 方法名(): 返回值类型 或者 函数名: Function（不指定返回值）的形式
 
  
使用类型别名 
 
  
直接使用{ }会降低代码可读性，不具有辨识度，更推荐使用类型别名添加对象类型 
 
  
type PersonObj = {
  name: string;
  sayHello(): string;
};

const p1: PersonObj = {
  name: '高大大',
  sayHello() {
    return this.name;
  },
};
 
  
带有参数的方法的类型
 
  
如果对象中的函数带有参数，可以在函数中指定参数类型
 
  
// 带参数的函数方法

type PersonObj2 = {
  name: string;
  sayHello(start: number): string;
};

const p2: PersonObj2 = {
  name: '高大大',
  sayHello(start) {
    return this.name;
  },
};
 
  
箭头函数形式的方法类型 
 
  
// 箭头函数形式定义类型
type People = {
  sayHello: (start: number) => string;
};
const p3: People = {
  sayHello() {
    return '';
  },
};
 
  
对象可选属性
 
  
对象中的若干属性，有时也是可选的，此时我们依然可以使用?来表示
 
  
type Config = {
  method?: string;
  url: string;
};

const func = (config: Config) => {};
func({ url: '/a' });
 
  
9. 接口 interface
 
  
当一个对象类型被多次使用时，一般使用接口（interface）描述对象的类型，达到复用的目的
 
  
     
   
  • 我们使用interface关键字来声明接口
    •  
   
  • 接口名称推荐以I为开头
    •  
   
  • 声明接口之后，直接使用接口名称作为变量的类型
    •  
  
 
  
 
   
接口后不需要分号 
 
  
 
  
// 接口

interface IPeople {
  name: string;
  age: number;
  sayHello(): void;
}

let p: IPeople = {
  name: '老高',
  age: 18,
  sayHello() {},
};
 
  
接口和自定义类型的区别
 
  
相同点：都可以给对象指定类型
 
  
不同点： 接口只能为对象指定类型， 类型别名可以为任意类型指定别名
 
  
     
   
  • 推荐用 type 来定义
    •  
  
 
  
接口继承
 
  
     
   
  • 如果两个接口之间有相同的属性和方法，可以讲公共的属性和方法抽离出来，通过继承来实现复用
    •  
  
 
  
比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐
 
  
interface Point2D {
  x: number;
  y: number;
}
interface Point3D {
  x: number;
  y: number;
  z: number;
}
 
  
     
   
  • 更好的方式
    •  
  
 
  
interface Point2D { x: number; y: number }
interface Point3D extends {
    z: number
}
 
  
我们使用extends关键字实现了 Point3D 继承了 Point2D 的所有属性的定义， 同时拥有继承的属性和自身自定义的属性 
 
  
10. 元组
 
  
当我们想定义一个数组中具体索引位置的类型时，可以使用元祖。
 
  
 
   
原有的数组模式只能宽泛的定义数组中的普遍类型，无法精确到位置 
 
  
 
  
元组是另一种类型的数组，它确切知道包含多少个元素，以及特定索引对应的类型
 
  
let position: [number, number] = [39.5427, 116.2317];
 
  
11. 类型推论
 
  
在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型
 
  
也就是说，由于类型推论的存在，在某些地址类型注解可以省略不写。
 
  
     
   
  • 发生类型推论的常见场景
    •  
  
 
  
     
   
  1. 声明变量并初始化时
    2.  
   
  2. 决定函数返回值时
    3.  
  
 
  
// 变量creater_name自动被推断为 string
let creater_name = 'gaoly';

// 函数返回值的类型被自动推断为 number
function addCount(num1: number, num2: number) {
  return num1 + num2;
}
 
  
推荐：能省略类型注解的地方就省略（偷懒，充分利用 TS 类型推论的能力，提升开发效率）
 
  
技巧：如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型
 
  
12. 字面量类型
 
  
下面的代码类型分别是什么？ 
 
  
// 字面量类型

let str1 = '张三';
const str2 = '张三';
 
  
通过 TS 的类型推导可以得到答案
 
  
1.变量 str1 的变量类型为： string
 
  
2.变量 str2 的变量类型为 '张三'
 
  
解释：str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
 
  
str2 是一个常量(const)，它的值不能变化只能是 '张三'，所以，它的类型为:'张三'
 
  
此时，‘张三’就是一个字面量类型，即某个特殊的字符串也可以作为 TS 中的类型
 
  
任意的 JS 字面量（对象，数组，数字）都可以作为类型使用
 
  
使用场景和模式
 
  
     
   
  • 使用模式：字面量类型配合联合类型一起使用
    •  
   
  • 使用场景：用来表示一组明确的可选值列表
    •  
   
  • 比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个
    •  
  
 
  
type Direction = 'left' | 'right' | 'up' | 'down';

// 使用自定义类型:

function changeDirection(direction: Direction) {
  console.log(direction);
}

// 调用函数时，会有类型提示：
changeDirection('up');
 
  
     
   
  • 解释：参数 direction 的值只能是 up/down/left/right 中的任意一个
    •  
   
  • 优势：相比于 string 类型，使用字面量类型更加精确、严谨
    •  
  
 
  
13. 枚举 
 
  
     
   
  • 枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值
    •  
   
  • 枚举：定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个
    •  
  
 
  
// 枚举

// 创建枚举
enum Direction2 {
  Up,
  Down,
  Left,
  Right,
}

// 使用枚举类型
function changeDirection2(direction: Direction2) {
  console.log(direction);
}

// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection2(Direction2.Up);
 
  
数字枚举
 
  
     
   
  • 问题：我们把枚举成员作为了函数的实参，它的值是什么呢?
    •  
   
  • 解释：通过将鼠标移入 Direction.Up，可以看到枚举成员 Up 的值为 0
    •  
   
  • 注意：枚举成员是有值的，默认为：从 0 开始自增的数值
    •  
   
  • 我们把，枚举成员的值为数字的枚举，称为：数字枚举
    •  
   
  • 当然，也可以给枚举中的成员初始化值
    •  
  
 
  
// Down -> 11、Left -> 12、Right -> 13
enum Direction {
  Up = 10,
  Down,
  Left,
  Right,
}

enum Direction {
  Up = 2,
  Down = 4,
  Left = 8,
  Right = 16,
}
 
  
字符串枚举
 
  
     
   
  • 字符串枚举：枚举成员的值是字符串
    •  
   
  • 注意：字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值
    •  
  
 
  
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}
 
  
枚举实现原理
 
  
     
   
  • 枚举是 TS 为数不多的非 JavaScript 类型级扩展(不仅仅是类型)的特性之一
    •  
   
  • 因为：其他类型仅仅被当做类型，而枚举不仅用作类型，还提供值(枚举成员都是有值的)
    •  
   
  • 也就是说，其他的类型会在编译为 JS 代码时自动移除。但是，枚举类型会被编译为 JS 代码
    •  
  
 
  
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

// 会被编译为以下 JS 代码：
var Direction;

(function (Direction) {
  Direction['Up'] = 'UP'
  Direction['Down'] = 'DOWN'
  Direction['Left'] = 'LEFT'
  Direction['Right'] = 'RIGHT'
})(Direction || Direction = {})
 
  
     
   
  • 说明：枚举与前面讲到的字面量类型+联合类型组合的功能类似，都用来表示一组明确的可选值列表
    •  
   
  • 一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效
    •  
  
 
  
14. any 类型
 
  
     
   
  • 原则:不推荐使用 any!这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
    •  
   
  • 因为当值的类型为 any 时，可以对该值进行任意操作，并且不会有代码提示
    •  
  
 
  
let obj: any = { x: 0 };

obj.bar = 100;
obj();
const n: number = obj;
 
  
     
   
  • 解释:以上操作都不会有任何类型错误提示，即使可能存在错误
    •  
   
  • 尽可能的避免使用 any 类型，除非临时使用 any 来“避免”书写很长、很复杂的类型
    •  
   
  • 其他隐式具有 any 类型的情况 
    
       
     
    1. 声明变量不提供类型也不提供默认值
      2.  
     
    2. 函数参数不加类型
      3.  
    
    •  
   
  • 注意：因为不推荐使用 any，所以，这两种情况下都应该提供类型
    •  
  
 
  
在项目开发中，尽量少用 any 类型
 
  
15. 类型断言
 
  
有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。 比如，
 
  
const aLink = document.getElementById('link');
 
  
     
   
  • 注意：该方法返回值的类型是 HTMLElement，该类型只包含所有标签公共的属性或方法，不包含 a 标签特有的 href 等属性
    •  
   
  • 因此，这个类型太宽泛(不具体)，无法操作 href 等 a 标签特有的属性或方法
    •  
   
  • 解决方式：这种情况下就需要使用类型断言指定更加具体的类型
    •  
   
  • 使用类型断言：
    •  
  
 
  
const aLink = document.getElementById('link') as HTMLAnchorElement;
 
  
     
   
  •  
    解释:
     
    
       
     
    1. 使用 as 关键字实现类型断言
      2.  
     
    2. 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）
      3.  
     
    3. 通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了
      4.  
    
    •  
   
  •  
    另一种语法，使用 <> 语法，这种语法形式不常用知道即可:
     
    •  
  
 
  
// 该语法，知道即可：在react的jsx中使用会报错
const aLink = document.getElementById('link');
 
  
技巧：在浏览器控制台，通过 __proto__ 获取 DOM 元素的类型 
 
  
16. typeof 
 
  
     
   
  • 众所周知，JS 中提供了 typeof 操作符，用来在 JS 中获取数据的类型
    •  
  
 
  
console.log(typeof 'Hello world'); // ?
 
  
     
   
  • 实际上，TS 也提供了 typeof 操作符：可以在类型上下文中引用变量或属性的类型（类型查询）
    •  
   
  • 使用场景:根据已有变量的值，获取该值的类型，来简化类型书写
    •  
  
 
  
let p = { x: 1, y: 2 };
function formatPoint(point: { x: number; y: number }) {}
formatPoint(p);

function formatPoint(point: typeof p) {}
 
  
     
   
  • 解释: 
    
       
     
    1. 使用 typeof 操作符来获取变量 p 的类型，结果与第一种（对象字面量形式的类型）相同
      2.  
     
    2. typeof 出现在类型注解的位置（参数名称的冒号后面）所处的环境就在类型上下文(区别于 JS 代码)
      3.  
     
    3. 注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数调用的类型）
      4.  
    
    •  
  
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(TypeScript,typescript,javascript,前端)

        

            

                
    
                    
  • Long类型前后端数据不一致
                        igotyback
前端
                        
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    
                    
    • 
                    
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    
                    
    • 
                    
  • 【加密社】Solidity 中的事件机制及其应用
                        加密社
闲侃区块链智能合约区块链
                        
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    
                    
    • 
                    
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    
                    
    • 
                    
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    
                    
    • 
                    
  • node.js学习
                        小猿L
node.jsnode.js学习vim
                        
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    
                    
    • 
                    
  • springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    
                    
    • 
                    
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）
                        跳房子的前端
前端面试javascript开发语言ecmascript
                        
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
    
                    
    • 
                    
  • 博客网站制作教程
                        2401_85194651
javamaven
                        
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    
                    
    • 
                    
  • JavaScript `Map` 和 `WeakMap`详细解释
                        跳房子的前端
JavaScript原生方法javascript前端开发语言
                        
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
    
                    
    • 
                    
  • 最简单将静态网页挂载到服务器上(不用nginx)
                        全能全知者
服务器nginx运维前端html笔记
                        
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
    
                    
    • 
                    
  • 补充元象二面
                        Redstone Monstrosity
前端面试
                        
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
    
                    
    • 
                    
  • 微信小程序开发注意事项
                        jun778895
微信小程序小程序
                        
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
    
                    
    • 
                    
  • 切换淘宝最新npm镜像源是
                        hai40587
npm前端node.js
                        
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
    
                    
    • 
                    
  • 字节二面
                        Redstone Monstrosity
前端面试
                        
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    
                    
    • 
                    
  • 前端代码上传文件
                        余生逆风飞翔
前端javascript开发语言
                        
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    
                    
    • 
                    
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因
                        hw_happy
开发语言前端vue.jsjavascript
                        
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
    
                    
    • 
                    
  • uniapp实现动态标记效果详细步骤【前端开发】
                        2401_85123349
uni-app
                        
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
    
                    
    • 
                    
  • 高性能javascript--算法和流程控制
                        海淀萌狗

                        
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
    
                    
    • 
                    
  • 360前端星计划-动画可以这么玩
                        马小蜗

                        
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
    
                    
    • 
                    
  • Vue + Express实现一个表单提交
                        九旬大爷的梦

                        
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
    
                    
    • 
                    
  • vant-element-ts一起使用存在的问题
                        flynn_
问题总结vue
                        
    由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
    
                    
    • 
                    
  • JavaScript中秋快乐！
                        Q_w7742
javascript开发语言ecmascript
                        
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
    
                    
    • 
                    
  • Nginx从入门到实践(三)
                        听你讲故事啊

                        
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
    
                    
    • 
                    
  • Nginx的使用场景：构建高效、可扩展的Web架构
                        张某布响丸辣
nginx前端架构
                        
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
    
                    
    • 
                    
  • 前端知识点
                        ZhangTao_zata
前端javascriptcss
                        
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
    
                    
    • 
                    
  • 第三十一节:Vue路由:前端路由vs后端路由的了解
                        曹老师

                        
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
    
                    
    • 
                    
  • 华雁智科前端面试题
                        因为奋斗超太帅啦
前端笔试面试问题整理javascript开发语言ecmascript
                        
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
    
                    
    • 
                    
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛
                        weixin_47088026
学习记录和总结中台数据中台程序人生经验分享
                        
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
    
                    
    • 
                    
  • 分布式锁和spring事务管理
                        暴躁的鱼
锁及事务分布式springjava
                        
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
    
                    
    • 
                                
  • 戴尔笔记本win8系统改装win7系统
                                    sophia天雪
win7戴尔改装系统win8
                                    
    戴尔win8 系统改装win7 系统详述  
 
第一步：使用U盘制作虚拟光驱： 
        1）下载安装UltraISO：注册码可以在网上搜索。 
        2）启动UltraISO，点击“文件”—》“打开”按钮，打开已经准备好的ISO镜像文 

    
                                
    • 
                                
  • BeanUtils.copyProperties使用笔记
                                    bylijinnan
java
                                    
    BeanUtils.copyProperties VS PropertyUtils.copyProperties 
 
两者最大的区别是： 
BeanUtils.copyProperties会进行类型转换，而PropertyUtils.copyProperties不会。 
既然进行了类型转换，那BeanUtils.copyProperties的速度比不上PropertyUtils.copyProp
    
                                
    • 
                                
  • MyEclipse中文乱码问题
                                    0624chenhong
MyEclipse
                                    
    一、设置新建常见文件的默认编码格式，也就是文件保存的格式。 
在不对MyEclipse进行设置的时候，默认保存文件的编码，一般跟简体中文操作系统（如windows2000，windowsXP）的编码一致，即GBK。 
在简体中文系统下，ANSI 编码代表 GBK编码;在日文操作系统下，ANSI 编码代表 JIS 编码。 
Window-->Preferences-->General -
    
                                
    • 
                                
  • 发送邮件
                                    不懂事的小屁孩
send email
                                    
      
import org.apache.commons.mail.EmailAttachment;  
import org.apache.commons.mail.EmailException;  
import org.apache.commons.mail.HtmlEmail;  
import org.apache.commons.mail.MultiPartEmail;  

    
                                
    • 
                                
  • 动画合集
                                    换个号韩国红果果
htmlcss
                                    
    动画 指一种样式变为另一种样式 keyframes应当始终定义0 100 过程 
1 transition  制作鼠标滑过图片时的放大效果 
 

css
.wrap{
		width: 340px;height: 340px;
		position: absolute;
		top: 30%;
		left: 20%;
		overflow: hidden;
		bor
    
                                
    • 
                                
  • 网络最常见的攻击方式竟然是SQL注入
                                    蓝儿唯美
sql注入
                                    
    NTT研究表明，尽管SQL注入（SQLi）型攻击记录详尽且为人熟知，但目前网络应用程序仍然是SQLi攻击的重灾区。 
信息安全和风险管理公司NTTCom Security发布的《2015全球智能威胁风险报告》表明，目前黑客攻击网络应用程序方式中最流行的，要数SQLi攻击。报告对去年发生的60亿攻击 行为进行分析，指出SQLi攻击是最常见的网络应用程序攻击方式。全球网络应用程序攻击中，SQLi攻击占
    
                                
    • 
                                
  • java笔记2
                                    a-john
java
                                    
    类的封装： 
1，java中，对象就是一个封装体。封装是把对象的属性和服务结合成一个独立的的单位。并尽可能隐藏对象的内部细节（尤其是私有数据） 
2，目的：使对象以外的部分不能随意存取对象的内部数据（如属性），从而使软件错误能够局部化，减少差错和排错的难度。 
3，简单来说，“隐藏属性、方法或实现细节的过程”称为——封装。 
4，封装的特性： 
      4.1设置
    
                                
    • 
                                
  • [Andengine]Error：can't creat bitmap form path “gfx/xxx.xxx”
                                    aijuans
学习Android遇到的错误
                                    
            最开始遇到这个错误是很早以前了，以前也没注意，只当是一个不理解的bug，因为所有的texture，textureregion都没有问题，但是就是提示错误。 
 
昨天和美工要图片，本来是要背景透明的png格式，可是她却给了我一个jpg的。说明了之后她说没法改，因为没有png这个保存选项。 
 
我就看了一下，和她要了psd的文件，还好我有一点
    
                                
    • 
                                
  • 自己写的一个繁体到简体的转换程序
                                    asialee
java转换繁体filter简体
                                    
              今天调研一个任务，基于java的filter实现繁体到简体的转换，于是写了一个demo，给各位博友奉上，欢迎批评指正。 
         实现的思路是重载request的调取参数的几个方法，然后做下转换。 
          
    
                                
    • 
                                
  • android意图和意图监听器技术
                                    百合不是茶
android显示意图隐式意图意图监听器
                                    
    Intent是在activity之间传递数据;Intent的传递分为显示传递和隐式传递 
  
显式意图：调用Intent.setComponent() 或 Intent.setClassName() 或 Intent.setClass()方法明确指定了组件名的Intent为显式意图，显式意图明确指定了Intent应该传递给哪个组件。 
  
隐式意图;不指明调用的名称,根据设
    
                                
    • 
                                
  • spring3中新增的@value注解
                                    bijian1013
javaspring@Value
                                    
            在spring 3.0中，可以通过使用@value，对一些如xxx.properties文件中的文件，进行键值对的注入，例子如下： 
1.首先在applicationContext.xml中加入：    
<beans xmlns="http://www.springframework.
    
                                
    • 
                                
  • Jboss启用CXF日志
                                    sunjing
logjbossCXF
                                    
    1. 在standalone.xml配置文件中添加system-properties： 
    <system-properties>        <property name="org.apache.cxf.logging.enabled" value=&
    
                                
    • 
                                
  • 【Hadoop三】Centos7_x86_64部署Hadoop集群之编译Hadoop源代码
                                    bit1129
centos
                                    
      编译必需的软件 
 
 Firebugs3.0.0 
 Maven3.2.3 
 Ant 
 JDK1.7.0_67 
 protobuf-2.5.0 
 Hadoop 2.5.2源码包 
 
  
  
  
 
 Firebugs3.0.0 
 
  
http://sourceforge.jp/projects/sfnet_findbug
    
                                
    • 
                                
  • struts2验证框架的使用和扩展
                                    白糖_
框架xmlbeanstruts正则表达式
                                    
    struts2能够对前台提交的表单数据进行输入有效性校验，通常有两种方式： 
1、在Action类中通过validatexx方法验证，这种方式很简单，在此不再赘述； 
2、通过编写xx-validation.xml文件执行表单验证，当用户提交表单请求后，struts会优先执行xml文件，如果校验不通过是不会让请求访问指定action的。 
本文介绍一下struts2通过xml文件进行校验的方法并说
    
                                
    • 
                                
  • 记录-感悟
                                    braveCS
感悟
                                    
    再翻翻以前写的感悟，有时会发现自己很幼稚，也会让自己找回初心。 
  
2015-1-11  1. 能在工作之余学习感兴趣的东西已经很幸福了； 
2. 要改变自己，不能这样一直在原来区域，要突破安全区舒适区，才能提高自己，往好的方面发展； 
3. 多反省多思考；要会用工具，而不是变成工具的奴隶； 
4. 一天内集中一个定长时间段看最新资讯和偏流式博
    
                                
    • 
                                
  • 编程之美-数组中最长递增子序列
                                    bylijinnan
编程之美
                                    
    
import java.util.Arrays;
import java.util.Random;

public class LongestAccendingSubSequence {

	/**
	 * 编程之美 数组中最长递增子序列 
	 * 书上的解法容易理解
	 * 另一方法书上没有提到的是，可以将数组排序（由小到大）得到新的数组，
	 * 然后求排序后的数组与原数
    
                                
    • 
                                
  • 读书笔记5
                                    chengxuyuancsdn
重复提交struts2的token验证
                                    
    1、重复提交 
2、struts2的token验证 
3、用response返回xml时的注意 
 
1、重复提交 
(1)应用场景 
(1-1)点击提交按钮两次。 
(1-2)使用浏览器后退按钮重复之前的操作，导致重复提交表单。 
(1-3)刷新页面 
(1-4)使用浏览器历史记录重复提交表单。 
(1-5)浏览器重复的 HTTP 请求。 
(2)解决方法 
(2-1)禁掉提交按钮 
(2-2)
    
                                
    • 
                                
  • [时空与探索]全球联合进行第二次费城实验的可能性
                                    comsci

                                    
     
 
     二次世界大战前后,由爱因斯坦参加的一次在海军舰艇上进行的物理学实验 -费城实验 
  至今给我们大家留下很多迷团..... 
 
     关于费城实验的详细过程,大家可以在网络上搜索一下,我这里就不详细描述了 
 
     在这里,我的意思是,现在
    
                                
    • 
                                
  • easy connect 之 ORA-12154: TNS: 无法解析指定的连接标识符
                                    daizj
oracleORA-12154
                                    
    用easy connect连接出现“tns无法解析指定的连接标示符”的错误，如下： 
C:\Users\Administrator>sqlplus username/[email protected]:1521/orcl 
SQL*Plus: Release 10.2.0.1.0 – Production on 星期一 5月 21 18:16:20 2012 
Copyright (c) 198
    
                                
    • 
                                
  • 简单排序:归并排序
                                    dieslrae
归并排序
                                    
    
    public void mergeSort(int[] array){
        int temp = array.length/2;
        
        if(temp == 0){
            return;
        }
        
        int[] a = new int[temp];
        int
    
                                
    • 
                                
  • C语言中字符串的\0和空格
                                    dcj3sjt126com
c
                                    
       \0 为字符串结束符，比如说： 
                      abcd (空格)cdefg； 
存入数组时，空格作为一个字符占有一个字节的空间，我们
    
                                
    • 
                                
  • 解决Composer国内速度慢的办法
                                    dcj3sjt126com
Composer
                                    
    用法： 
有两种方式启用本镜像服务： 
1 将以下配置信息添加到 Composer 的配置文件 config.json 中（系统全局配置）。见“例1” 
2 将以下配置信息添加到你的项目的 composer.json 文件中（针对单个项目配置）。见“例2” 
为了避免安装包的时候都要执行两次查询，切记要添加禁用 packagist 的设置，如下      1   2   3   4   5    
    
                                
    • 
                                
  • 高效可伸缩的结果缓存
                                    shuizhaosi888
高效可伸缩的结果缓存
                                    
    /**
 * 要执行的算法，返回结果v
 */
public interface Computable<A, V> {
	public V comput(final A arg);

}
 
  
/**
 * 用于缓存数据
 */
public class Memoizer<A, V> implements Computable<A, 
    
                                
    • 
                                
  • 三点定位的算法
                                    haoningabc
c算法
                                    
    三点定位， 
已知a,b,c三个顶点的x,y坐标 
和三个点都z坐标的距离，la，lb,lc 
 
求z点的坐标 
原理就是围绕a,b,c 三个点画圆，三个圆焦点的部分就是所求 
但是，由于三个点的距离可能不准，不一定会有结果， 
所以是三个圆环的焦点，环的宽度开始为0，没有取到则加1 
运行 
gcc -lm test.c 
test.c代码如下 
 

#include "stdi
    
                                
    • 
                                
  • epoll使用详解
                                    jimmee
clinux服务端编程epoll
                                    
    epoll - I/O event notification facility在linux的网络编程中，很长的时间都在使用select来做事件触发。在linux新的内核中，有了一种替换它的机制，就是epoll。相比于select，epoll最大的好处在于它不会随着监听fd数目的增长而降低效率。因为在内核中的select实现中，它是采用轮询来处理的，轮询的fd数目越多，自然耗时越多。并且，在linu
    
                                
    • 
                                
  • Hibernate对Enum的映射的基本使用方法
                                    linzx0212
enumHibernate
                                    
      
枚举 
  
/**
 * 性别枚举
 */
public enum Gender {

    MALE(0), FEMALE(1), OTHER(2);

    private Gender(int i) {
        this.i = i;
    }

    private int i;

    public int getI
    
                                
    • 
                                
  • 第10章 高级事件（下）
                                    onestopweb
事件
                                    
    index.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
    
                                
    • 
                                
  • 孙子兵法
                                    roadrunners
孙子兵法
                                    
    始计第一 
 
孙子曰： 
兵者，国之大事，死生之地，存亡之道，不可不察也。 
故经之以五事，校之以计，而索其情：一曰道，二曰天，三曰地，四曰将，五 
曰法。道者，令民于上同意，可与之死，可与之生，而不危也；天者，阴阳、寒暑 
、时制也；地者，远近、险易、广狭、死生也；将者，智、信、仁、勇、严也；法 
者，曲制、官道、主用也。凡此五者，将莫不闻，知之者胜，不知之者不胜。故校 
之以计，而索其情，曰
    
                                
    • 
                                
  • MySQL双向复制
                                    tomcat_oracle
mysql
                                    
    本文包括: 
 
  主机配置  
  从机配置  
  建立主-从复制  
  建立双向复制  
 
  背景 
按照以下简单的步骤: 
参考一下： 
 
  在机器A配置主机(192.168.1.30)  
  在机器B配置从机(192.168.1.29)  
  我们可以使用下面的步骤来实现这一点  
 
  
步骤1：机器A设置主机 
 
  在主机中打开配置文件 , 
    
                                
    • 
                                
  • zoj 3822 Domination(dp)
                                    阿尔萨斯
Mina
                                    
     题目链接：zoj 3822 Domination 
 题目大意：给定一个N∗M的棋盘，每次任选一个位置放置一枚棋子，直到每行每列上都至少有一枚棋子，问放置棋子个数的期望。 
 解题思路：大白书上概率那一张有一道类似的题目，但是因为时间比较久了，还是稍微想了一下。dp[i][j][k]表示i行j列上均有至少一枚棋子，并且消耗k步的概率（k≤i∗j）,因为放置在i+1~n上等价与放在i+1行上，同理
    
                                
    •