yjwlike的博客

原创 Vue3基础看这一篇就够了（万字长篇，附实例代码及效果演示）

vue3已经出了好长一段时间了，最近闲来无事简单学习了一下，新增的东西还是挺多的，写一篇文章来记录一下。谈到vue3，首先想到的就是组合式api，很大程度的解决了vue2选项式api的缺点，那有啥缺点？当文件中的业务代码非常多的时候，阅读修改代码的时候是非常痛苦的，data,method，watch还有计算属性之间来回跳转, 我已经准备拔刀了。下面这些图被疯转，很形象的展现了vue2和vue3的区别，可以看到。

原创 网格(grid)布局

网格是由一系列水平（row 行）及垂直的线构（column 列）成的一种布局模式, 也就是说网格布局主要是操控行和列，面试呢常常会问到如何使一个盒子水平垂直居中是css中的一种布局方式，网格布局就是答案之一。设置元素的 display 值为 grid 或者 inline-grid，仅设置display为grid，而不控制行和列是没有任何效果的。其子元素依旧按照从上至下的默认布局进行排列。

原创 js中的Class类详解

javascript中的类，包括静态属性私有属性继承等等

原创 三元运算符居然还能链式调用,你知道了吗

目录概述惊醒总结概述众所周知, 三元运算符一直是js中判断逻辑常用的手段, 下处的伪代码就是我在项目中常用的形式, condition ? true behavior : false behavior , 这么写确实没什么问题, 但是他只能判断两种情况, 满足 condition 的情况 和 不满足 condition 的情况, 顿时就不香了.... const heigth = 180 heigth > 180 ? console.log('高..

原创 使用 Object.fromEntries 将url的参数转成对象

概述:url参数转对象的方式有很多种, 本文主要介绍一下如何使用Object.fromEntries 转url参数一看究竟Object.fromEntries 这玩意是啥啊? 不会就找mdn, 我已经看了.Object.fromEntries 用于将key/value的列表转成一个对象, 一般是Array和Map, 可迭代对象可以不过要注意 值必须是key/value列表, 说白了就是元素必须是个数组[key, value]这种形式的Object.fromEntries() -.

原创 react 使用 useState hook 实现 class 类组件中的 setState 方法

原创 查找算法 - 二分查找

目录概述图示代码总结概述二分查找是一种高效快速的查找算法, 但前提是数组必须是有序的, 二分查找的主要思想就是让目标元素和数组的中间值进行比较, 因数组是有序的, 既可以通过比较缩小查找范围, 最终找到目标元素图示代码package mainimport ( "fmt")func binartsearch(arr [10]int, target int) int { low := 0 high := len(arr) - 1 mi..

原创 排序算法 - 冒泡排序

概述冒泡排序是一种排序的算法, 通过连续的左右比较交换位置, 最终形成正序或倒序, 其思想就是像冒泡泡一样, 通过不断的上浮, 最终浮出水面图示代码假设场景是正序, 数组中有n个元素 . 主要思路就是按顺序从前到后两个元素依次比较, 那么大的就往后冒一趟比较就已经完成, 最坏的情况下总计需要比较n-1趟, 最好的情况下需要比较一趟即可完成排序 .func main() { arr := [6]int{3,82,44,100,33,99} bubbleSort(..

原创 javascript 中 逻辑与 和 空值合并运算符 和 逻辑或 的区别

目录概述阅前一览||返回值常见判断??返回值常见判断&&返回值优先级总结标题不让加符号..........概述|| 、 ??、&&运算符 一般都用在条件判断中, 他们可以用在判断条件也可以是一个单独的语句, 返回值也依据具体操作数阅前一览 const fn = (data) => console.log(data); "" || fn(1); "2" &&a...

原创 golang 接口 interface

概述接口是一组方法的集合, 接口中只规范方法的书写, 不包括具体的实现, 我们可以把接口理解为一种行为, 比如现在有一个男人的接口, 男人接口中规范了一个看黑丝的方法, 假定我们定义了一个张三的变量和一个看黑丝的方法(recever是男人), 那么张三就实现了男人的接口图示代码演示 写一个简单的接口定义一个接口 接口中是方法, 所以我们要定义方法 方法需要接收者, 所以定义一个接收者package mainimport ( "fmt")// 定义一个 ..

原创 js内置对象 BigInt

概述BigInt是javascript中的内置对象, 一般用来表示大数 (大于2^53 - 1的整数), 当遇到大数操作时应该想到BigInt, 他和number具有相似的行为, 同样可以用来加减乘除比较等等场景数字的最大安全值 :Number.MAX_SAFE_INTEGER 也就是2^53 - 1我们来看看操作数字的最大安全值会发生什么 ? const n1 = Number.MAX_SAFE_INTEGER * 10; console.log(Numbe..

原创 golang method(方法)

目录概述语法func (recever Type) funcName(参数..) {}使用方法方法与函数总结概述在go中, 方法就是有接受者的函数, 只有接受者可以调用该函数, 在定义函数的时候把接受者放在函数名之前并指定类型即可.语法func (recever Type) funcName(参数..) {}使用方法接受者调用方法时分为两种情况: 值类型, 指针类型调用值类型方法时, 方法内接收到调用者的拷贝值, 修改拷贝值并不会影响...

原创 slice 切片

什么是切片切片就是底层数组的一部分, 修改切片底层数组也会相应改变, 共享一个底层数据的不同切片都会更改, 而且切片的长度灵活多变, 切片是golang中复杂数据类型的一种, 具有长度和容量,分别通过len()和cap()来获取创建切片创建切片有三种方式, 一种通过底层数据创建, 一种直接创建切片, 一种是通过make函数1. 通过底层数组 (需要指定上界下界 example => array[1:4])切片的上下界有默认值, 上界为0 , 下界为数组或切片的长度pac

原创 map 映射

目录创建map1. 字面量2. make 函数map的基本使用遍历mapmap零值map确实不能用==全等操作符来比较, 但是可以通过循环来比较总结map是golang中复杂数据的一种, 由key和value组成, 在golang中一个map就是对一个哈希表的引用, map定义时遵守map[T]V规则, 指定key和value的类型, key的类型必须支持==运算符来进行比较, value的类型则没有限制创建map1. 字面量一般情况下使用字面...

原创 struct 结构体

目录概述初始化结构体修改结构体结构体指针总结概述结构体是golang中复杂数据类型的一种, 和ts中为对象定义类型时极其相似, 结构体一般包含一组字段并指定类型, 在创建结构体实例时依据指定字段的类型创建即可, 若创建时没有给定字段, 则默认为其类型的零值初始化结构体初始化结构体大致分为三种情况, 完整定义, 简要定义, 未定义完整定义 就是把字段名加上 简要定义 就是省略字段名 自动按照结构体的字段顺序 依次赋值 未定义 则字段就是其类型的0值..

原创 React 18之新hook

react18新出了5个hook, 分别是 :useId useTransition useDeferredValue useSyncExternalStore useInsertionEffectuseIduseId用于生成一个包含 :号的唯一id, 可在组件中多次使用, id是不重复的, 当项目中存在多个根应用时, 我们还可以给useId生成的id增加前缀...

原创 React 18之状态批处理

react在3月29号正式发布了18版本, 此次更新包括: 状态自动批处理,新的客户端和服务器渲染api, 过渡以及一些新的hook, 本章先说一下状态批处理的变化状态自动批处理18版本之前, 在合成事件之外的原生事件中(例如 setTimeout, onclick, promise) , 更新状态并不会进行批量处理(合并), 在18版本后优化了这个问题import { useState } from 'react'function App() { const [num1, se..

原创 异步函数之 -- async await

概念异步函数就是通过 async 修饰的函数, async await 是ES8规范新增的, 这两个关键字的作用就是让我们的异步代码更加简洁, 接下来就来玩一玩.asyncasync 关键字用来修饰异步函数, 放在异步函数前即可, 通过async修饰的函数他的返回值必定是一个promise对象, 如果返回值不是promise对象内部都会经过Promise,reslove()将结果包装promise对象返回, async function sync1() { ret

原创 javascript中的Set数据结构

1. 概述set 是一个构造函数, 通过new关键字来创建实例, 用来保存唯一的值2. 创建setnew 他就完事了, 但是请注意传入的参数必须是可迭代的对象或者迭代器, 如果传入的迭代对象中包含重复的值, 那么set将会自动去除重复项 const arr = ['a', 'b', 'c', 'a'] const set1 = new Set(arr.values()); const set2 = new Set(arr.keys()); const se

原创 golang中的数组

数组1. 概念golang中的数组是具有固定长度及类型的序列集合2. 初始化数组(1) 字面量var arr [4]int = [4]int{1,2,3,4}(2) 字面量省略长度q := [...]int{1, 2, 3}3. 查看数组可以通过 for 循环的 range形式来查看数组func main() { var arr [4]int = [4]int{1,2,3,4} for i, v :=range arr { fmt.Printf..

原创 二、八、十、十六进制介绍及相互转换

进制进制就是一种进位计数制, 分为2,8,10,16进制, 2进制逢2进1, 8进制逢8进1,以此类推. 计算机采用的是2进制, 8进制使用较少, 十进制就是我们学过的数学, 十六进制通常用来表示颜色. golang中8进制以数字0开头表示, 16进制以0x/X表示进制之间的转换一. 其他进制转10进制转换规则: 从右往左开始, 数字 × n的(位数-1次方)(n代表的是进制数) 依次相加(1) 2转10例子: 1111001 转成 10进制 ?(2...

原创 go - fmt包中的扫描函数Scanf, Scan, Scanln的简单使用

目录前言一. 方法说明二、代码演示？总结前言当我们需要获取到用户输入的内容时,fmt包中的扫描函数是一个不错的选择, 扫描函数大致分为三种Scanf, Scan, Scanln三个函数, 他们都返回保存成功的数量和失败的原因, 只不过参数不同和一些使用细节不同一. 方法说明函数 参数 使用细节 返回值 Scanf 格式化字符串, 内存空间地址(可传多个) 传入的值必须满足格式的要求 保存成功的值数量, 保存失败的原因 ...

原创 go 中的指针

目录前言使用指针总结前言指针顾名思义就是指明方向的, golang中的指针同样也是如此, 指针是复杂数据类型中的一种, 它保存的是一块内存空间的引用地址, 也就是说指针的值是一个地址且必须是一个地址, 同时指针变量指向的类型必须和存储地址对应的变量类型一致, 变量的地址我们可以通过 & 符号打印出来使用指针概述: 指针存储同类型数据的地址, * pointerName 可以访问到值地址对应的数据, 可以进行修改操作package mainimport (

原创 golang 的数据类型转换

目录前言一、什么是类型转换？二、类型转换演示0. strconv接收1. 数字类型2. 字符串类型总结前言类型转换是编程语言当中最为常见不过的数据操作, 像javascript中的类型转换可以通过函数显示的转换, 也可以通过操作符隐式转换, 但是在go中必须显示的转换, 小值可转大类型, 大值可转小类型一、什么是类型转换？类型转换是将数据转换成另一种类型输出出来, 不会变量的类型二、类型转换演示注意: 只有相同底层数据类型的双方才可以使...

原创 golang 中的基本数据类型

整数类型整数类型用来表示整数类型 符号 占用空间 表示范围 备注 int 有 32位系统 4B 64位系统 8B - 2^63 - 2^63-1 uint 无 32位系统 4B 64位系统 8B 0 - 2^64-1 rune 有 4B - 2^31 - 2^31 -1 rune === int32 byte 无 1B .

原创 深入理解Map数据结构(二) 之性能对比

map object 插入性能 高 低 删除性能 高 低 查找速度 内存占用 少 多 插入性能简单测一测, 如果哪些地方不对请大佬指正针对数值,浮点数,字符串,symbol类型为键的双方插入性能测试 const mapTest = (key) => { const map = new Map() const start = +new Date() for ...

原创 go 语言中变量的声明

目录局部变量的声明局部变量的同时声明全局变量的声明局部变量的声明(1) 完整声明 : var name 类型 = 值(2) 利用类型推导进行声明 : var name = 值(3) := 快速声明 : name := 值package mainimport "fmt"func main() { var n1 int = 10 var n2 = 20 n3 := 30 fmt.Println("n1:", n1, "n2:", n2, "n3:"..

原创 css实现3D旋转木马

先看效果图 :实现源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g...

原创 go语言开发环境搭建

下载sdkDownloads - The Go Programming Languagehttps://golang.google.cn/dl/安装

原创 编写第一个go程序

项目结构编写hello.gopackage mainimport "fmt"func main() { fmt.Println("hello,world")}运行go文件使用 go run 文件名编译成应用程序编译go 程序 使用命令 go build得到可执行的二进制文件 hello.exe控制台直接 执行hello.exe 即可输出内容至此第一个go程序就完成了知识点:go run 编译运行go文件, 不会输出...

原创 深入理解Map数据结构(一) 之初识Map

前言: 在ES6之前, 存储键/值结构时采用的是 Object 对象存储的形式, 且键只能是字符串数字, ES6推出的 Symbol 出现之后, 键也可以是Symbol 类型 . 同时ES6也推出了 Map 新型数据结构, 具备存储键/值形式的能力, 但键的类型就远远不受限制了, 可以是任意类型, 但两者的区别不仅如此, 在操作大量键/值数据时, 双方有着不同的优劣 . 由于 Map 的很多功能特性 Object 都能实现, 所以这也是 Map 略少的原因 .创建 Map 数据通过 ne...

原创 javascript - 数组常用方法总结(三)

还是接着上一篇...七. 获取数组索引indexOf : 返回元素在数组中的索引语法: arr.indexOf( target 目标元素, start 开始查找的位置正向查找)返回查找到元素的索引, 若没有查找到返回-1 const arr = [1, 3, 4, 55, 2, 9, 1] const threeIndex = arr.indexOf(3) // 1 const oneIndex = arr.indexOf(1, 3) // 6 .

原创 Typescript - 函数

有行为的地方就有函数, ts当然也少不了函数类型目录1. 定义完整的函数2. 利用类型推论定义函数3. 函数的参数4. 剩余参数1. 定义完整的函数完整的定义增加了代码的可读性type Fn = (a: number, b: number) => number[] // 定义一个 Fn 的函数类型const fn: Fn = (a: number, b: number): number[] => [a, b] // 定义了一个类型为 Fn 的函数con.

原创 Typescript 中的类

在ts中, 你可以对类进行约束, 在构造子类时遵循这些约束即可目录1. 定义一个普通的类2. 类的继承3. 共有私有修饰符4. readonly修饰符 5. 存取器 6. 静态属性 7. 抽象类8.接口继承类1. 定义一个普通的类对类约束使用类型注解就可以了, 对类不约束就和普通js中定义类的写法一样class Person { name: string constructor(name: stri...

原创 ts中的映射类型

在开发的时候常常会遇到类型复用的情况, 但在某些时候类型又没完全复用, 可能我现在需要旧类型中的前两个属性, 又可能类型属性为了代码的健壮性不能修改了, 又或许我需要从原有属性剔除一些属性, 此时就可以用到ts中的映射类型 . Partial 可选类型 ReadOnly 只读类型 Pick 从旧选新类型 Omit 剔除类型 Partial可选类型Partial 关键字可以使原有类型的属性变为可选的// 定义了一个类型 prop// Partial...

原创 ts中的泛型接口

在ts中常常会用接口来定义对象的类型, 用来规定对象中应该存在哪些属性, 这些属性是什么类型, 但是某些情况下, 我不希望对象中属性的类型固定, 而是我传入什么类型, 属性就是什么类型 , 此时就需要使用泛型接口 .我们先定义一个接口interface objType { money: (value: number) => number arr: () => string[]}const obj2: objType = { money: (val) => val,

原创 认识ts中的接口

ts中使用 interface 关键字定义一个接口, 接口用来定义对象类型或者函数类型,类类型等等, 并且可以设置属性只读, 属性可选等操作, 总而言之 interface 的功能很强大 . 接下来玩一玩 .要点概览 : point explain 普通接口 属性可选可改 只读属性 对象中属性只读不能修改 可选属性 属性不是必须的 函数类型 接口还能定义函数类型 索引类型 类类型 继承接口 混合类型 接

原创 javascript - 数组常用方法总结(二)

接着上一篇继续..四. 转换方法1. toLocaleStringtoLocaleString用于将值转为字符串输出, 数组的toLocaleString方法将数组中的每一项调用其toLocaleString方法转成字符串最后以逗号拼接返回 const arr = [1, 'a', 2, { toLocaleString: () => { return 123 } }] console.log(arr.toLocaleSt

原创 javascript - 数组常用方法总结(一)

数组常用方法可以查看MDN文档里面很全https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

原创 为什么简单数据类型字符串具备length属性及方法