一支海棠-CSDN博客

原创 javascript一个函数生成唯一id

获取随机的idfunction getUid() {function S4() {return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);}return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());}(1 + Math.random()) ----> 1 ~ 20x10000

2022-01-10 16:33:43 528

原创 06JS面向对象

JS面向对象JS 中的对象对象描述符可以对这个对象做一些控制var obj = { name:'why', age:18}// 数据属性描述符// 用了属性描述符, 那么会有默认的特性Object.defineProperty(obj, "address", { // 很多配置 // value: "北京市", // 默认值undefined // 该特殊不可删除/也不可以重新定义属性描述符 // configurable: false, //

2021-12-25 22:06:01 636

原创 05_函数相关

JS 函数式编程纯函数的概念不对外部变量做任何处理这个函数执行的时候不会产生任何的副作用根据一定的输入会永远有相应的输出平时的算法的几乎都是纯函数纯函数可以放心的使用不会对其他变量造成污染公用的方法函数最好是纯函数函数柯里化是把接收多个参数的函数，变成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数，而且返回结果的新函数的技术// 柯里化的例子function add(x,y,z) { return x+y+z}func

2021-12-25 16:18:59 320

原创 04_this指向

thisthis 一般指当前调用的对象this 一般来说指向调用他的那个对象谁调用他指向谁this 4种绑定规则1. 默认绑定对象调用内部函数 this 就是这个对象全局调用浏览器中是winodwnode 是一个 {}2. 隐式绑定function foo() { console.log(this) }foo()var obj1 = { foo: foo }var obj2 = { obj1: obj1 }obj1.foo() // fooobj2.obj1.f

2021-12-25 16:15:23 227

原创 02_内存管理闭包

JS 内存管理JS 会在定义变量时为我们分配内存基本数据类型直接在栈空间进行分配复杂数据类型在堆内存中开辟一块空间将这块空间的指针返回值变量做引用垃圾回收 Garbage Collection (GC)引用计数当有对象做引用时就+1 当为0时--> 没有对象引用回收弊端：循环引用标记清除从根开始往上找没有引用的对象做清除闭包[scope]闭包又称词法闭包或函数闭包生成闭包的方式在此代码中由于函数嵌套函数内部函数对foo作用域中的

2021-12-25 15:34:02 287

原创 01javascript

以下来自对 coderwhy 老师 js高级课程的学习以及自己的总结javascript运行原理浏览器工作原理静态资源输入服务器地址 url 回车先查看浏览器缓存-系统缓存若有则直接展示 or nextDNS 解析获取相应的 ip 地址TCP连接建立三次握手发送HTTP请求服务器处理请求并返回HTTP报文浏览器收到HTTP 响应读取页面内容，浏览器渲染，解析html生成Dom树，解析css,样式，js交互客户端和服务器继续进行交互…浏览器内核javascri

2021-12-25 15:14:05 235

原创 javaScript实现一个单链表，找到单链表中的倒数第n个节点

前端js 链表找到单链表中的倒数第n个节点使用javascript实现一个链表参考书目数据结构与算法 JavaScript这里链表就只是参考该书做的简单实现并没有考虑过多的方法参数和边界情况class Node { constructor(element) { this.element = element this.next = null }}// LinkedList 类class LList { // 链表 co

2021-11-29 17:19:29 926

原创 javascript高级编程(第三版) 07_BOM

window 对象BOM 的核心对象是 window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问 parseInt()等方法全局作用域Global{window:Global}全局变量会成为 window 对象的属性，定义全局变量与在 window

2021-09-22 19:28:21 83

原创 javascript高级编程(第三版) 06_函数表达式

函数表达式递归函数内部通过名字调用自身的情况arguments.callee 是一个指向正在执行的函数的指针，因此可以它来实现对函数的递归调用，function factorial(num){if (num <= 1){return 1;} else {return num * arguments.callee(num-1);}}闭包闭包是指有权访问另一个函数作用域中的变量的函数由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用

2021-09-22 19:27:11 72

原创 javascript高级编程(第三版) 04_引用类型

Object 类型创建 Object 实例的方式有两种var person = new Object; // 构造函数var person = { // 对象字面量name:‘yoke’;}访问属性的方法.属性名或者[‘属性名’]方括号可以访问动态变化的属性名和一些特殊的不能 . 调用的一个属性名Array 类型js中的数组每一项可以保存任何类型的数据大小长度动态调整var colors = new Array();var colors = [‘red’,‘blue’]

2021-09-22 19:25:58 75

原创 git 代码开发使用

git 代码开发使用让git和 github 关联1. 创建本地的git身份 (ssh key) ssh-keygen -t rsa -C "邮箱" 回车会提示你生成的 ssh key id_rsa.pub 公共秘钥最好用记事本打开2. 在github 仓库找到 settings ssh 设置 ssh 粘贴过去 title 自己起设置git用户信息git config --global user.email = "email"git config -- global user.

2021-09-11 21:24:04 104

原创 VS code 添加右击文件可以直接通过vscode打开方法 webstorm 同样适用

vsode 安装忘记选择 open floder by vscoed 通过添加注册事件的方法添加该操作1. cmd 打开终端输入 regedit 打开注册列表2. 定位到计算机\HKEY_CURRENT_USER\SOFTWARE\Classes\Directory\shell3. 新建项 vscode 在里面添加一个字符值上的为提示语句下面为vscode启动路径如图4. 在vscode下面在新建 Command 并修改值为 “vscode启动路径” “%1” 如图这样就可以在

2021-09-07 22:55:14 662 1

原创 webpack loader 使用

webpack.config.jsconst path = require("path");module.exports ={ module:{ rules:[ { test: /\.js/, loader: 'loder1' // use 执行顺序从右向左从下到上 // 从上到下解析会先执行 pitch的内容

2021-09-05 20:24:38 108

原创 React-cli vue-cli 暴露出 webpack config文件

React-clieject执行命令 yarn eject 或 npm run eject把配置文件暴露出来单向不可逆会提醒你是否确定会生成两个文件夹config scripts注意 git上面的所有都要提交才能 eject 不然会报错vue-cli将vue的配置文件暴露出来到一个文件中去开发环境vue inspect --mode=development > webpack.dev.js生产环境vue inspect --mode=production >

2021-09-05 20:11:00 792

原创 javascript继承

原型链继承让子类的原型指向父类的实例对象实现对父类原型上的方法的继承但是这个时候子类的构造函数也变为父类的实例需要将其构造函数执行自己/*方式1: 原型链继承1. 方法 1. 定义父类型构造函数 2. 给父类型的原型添加方法 3. 定义子类型的构造函数 4. 创建父类型的对象赋值给子类型的原型 5. 将子类型原型的构造属性设置为子类型 6. 给子类型原型添加方法 7. 创建子类型的对象: 可以调用父类型的方法2. 关键 1

2021-08-29 16:02:45 78

原创数据拼接存在一对多关系

在 l push 对象的时候是push的引用值为了保证每一次 puhs的都是不同的对象需要通过 JSON 做一个深拷贝这里我解决了但是一直在蒙在 push之前打印出来的 item数据每个都是不相同的其实就是深拷贝的问题最后使用 lodash 排序输出结果(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {name: “1”, age: 18, message: “成年”}1: {na.

2021-08-27 09:33:00 110

原创闭包与闭包面试题

什么是闭包 /* 1. 闭包当一个嵌套的内部函数引用了嵌套的外部函数的变量时 2. 使用chrome调试查看理解1 闭包是嵌套的内部函数 2 包含被引用变量(函数)的对象 3. 产生函数嵌套内部函数引用了外部函数的数据(变量/函数) */ function fn1() { var a =2 var b functi

2021-08-22 10:42:40 358

原创作用域与作用域链

<!--1. 区别1 * 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时 * 全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建 * 函数执行上下文是在调用函数时, 函数体代码执行之前创建2. 区别2 * 作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化 * 执行上下文是动态的, 调用函数时创建, 函数调用结束时就会自动释放3. 联系 * 执行上下文(对象)是从属于所在的作用域 * 全局.

2021-08-21 12:53:22 112

原创执行上下文与执行上下文栈

变量提升与函数提升变量声明提升通过var定义的变量在定义之前就可以访问到值 undefined函数声明提升通过function声明的函数在之前就可直接调用值: 函数定义（对象） var a = 3 function fn(){ console.log(a); // a 变量提升 undefined var a =4 // } fn() console.log(b); var b =3 fn2()

2021-08-17 21:32:28 63

原创 javascript高级编程(第三版) 03_变量作用域和内存问题

基本类型和引用类型的值基本类型值简单的数据段引用类型值可能由多个值构成的对象基本数据类型 Undefined、Null、Boolean、Number 和 String引用类型的值是保存在内存中的对象动态的属性var name = ‘yoke’ 在栈里面开辟一块空间属性名为 name 属性值可以动态改变var person = new Object()person.name = ‘yoke’ 在栈里面开辟一块空间属性名为 person 属性值为指向在堆里面开辟一块的

2021-08-17 14:39:29 72

原创 js原型和原型链

百度找的一张图片图片看懂了真的很好理解原型/* 函数的prototype属性每个函数都有一个prototype属性它默认指向一个Object空对象（原型对象）原型对象总有一个属性 constructor 指向函数对象给原型对象添加属性(一般都是方法) 作用函数的所有实例对象自动拥有原型中的属性(方法) */ console.log(Date.prototype) function F() {

2021-08-15 11:28:08 68

原创 javascript高级编程(第三版) 02_基本概念

语法区分大小写一切（变量、函数名和操作符）都区分大小写标识符第一个字符必须是一个字母、下划线（_）或一个美元符号（$）其他字符可以是字母、下划线、美元符号或数字*惯例驼峰命名法注释///* */严格模式严格模式是为 JavaScript 定义了一种不同的解析与执行模型要在整个脚本中启用严格模式，可以在顶部添加如下代码：“use strict”支持严格模式的浏览器包括 IE10+、Firefox 4+、Safari 5.1+、Opera 12+和 Chrome。语句ECMAS

2021-08-12 17:41:36 123

原创 javascript高级编程(第三版) 01script的使用

## <script> 元素### 属性所有属性均为可选属性### 标签位置 1. 放在head里面会等js文件全部解析完成执行之后才会执行之后的html代码页面很慢2. 通常会放在 body的最后在html页面加载之后执行页面速度加快#### saync异步脚本只使用于外部脚本文件立即下载文件下载后解析运行不会有顺序异步加载页面其他内容 #### charset指定代码字符集大多数浏览器会忽略#### defer延迟脚本 defer="def

2021-08-12 16:35:50 165

原创 js操作dom节点实现分页（js原生）

js代码/** * * @param {*} currentPage 当前点击的页码 * @param {*} pagenum 总页码 * @param {*} selectorLength 中间显示多少个 * @param {*} domId 需要渲染的dom的Id */function createPageSelector(currentPage,pagenum,selectorLength,domId){ /*

2021-08-08 23:29:18 370

原创 javascript 基础

数据类型分类基本（值）类型String: 任意字符串Number: 任意数字boolean: true/falseundefined: undefinednull:null2.对象(引用) 类型Object 任意对象Function 一种特别的对象(可以执行)Array: 一种特别的对象(数值下标,内部数据有序)判断typeof 返回数据类型的字符串表达可以判断 undefined,number,string,boolean,function不能判断:null Objec

2021-08-08 21:57:38 57

原创使用 webpack 搭建 typescript环境使用loader运行ts文件

npm init初始化引入本地webpacknpm i webpack webpack-cli -Dbuild使用webpack打包Ts loadernpm install ts-loader typescript -Dtsconfig.json初始化tsconfigtsc --init搭建本地服务引入插件 html-webpack-pluginnpm i --save-dev html-webpack-pluginnpm install webpack-dev-server -

2021-08-04 17:48:05 666

原创 typescript Narrowing

/* 缩小就是对联合类型的详细判断使用类型缩小使代码变得更加简洁准确安全 */ function padLeft(padding: number | string, input: string) { if (typeof padding === "number") return new Array(padding + 1).join(" ") + input; return padding + input;

2021-08-04 17:14:05 104

原创数据库允许其他电脑访问

数据库允许其他电脑访问权限访问改为指定 ip%,127.0.0.1

2021-08-03 11:12:43 186

原创 Angular 英雄之旅

Angular 英雄之旅https://angular.cn/tutorial/toh-pt0在组件中ts中直接定义 title 效果等于 data 展示 {{title}}双向绑定 FormsModule[(ngModel)]="title"需要在 app.module.ts 自行添加 import { FormsModule } from '@angular/forms'模拟mockexport const HEROES: Hero[]=[]渲染数组*ngFor= 'let

2021-07-28 14:28:51 166

原创 js面试题转化首字母查存字符串出现最多次数的字母

给定字符串下滑后的字符转化为大写 //将一排字符串的首字母转换为大写 var str ='tom_jack_tony_big' var arr =str.split('_') var arr2 = arr.map((item)=>{ return item.replace(item[0],item[0].toUpperCase()) }) console.log(arr); console.log(arr2); //拼

2021-07-24 12:19:33 60

原创 js面试题括号匹配

js括号匹配括号匹配算比较常见的算法题主要思想就是先进后出实现思路遇到左就放入数组遇到右就让最后进的左出如果符合匹配规则就数组长度最终为0function testFn(str){ var fu1=0; var fu2=0; var fu3=0; var arr=[]; for(i=0;i<str.length;i++){ if(str.slice(i,i+1)=='(') arr.push("("); if(str.slice(i,i+1)=='{') ar

2021-07-24 11:31:52 238

原创 js面试题给定数组与目标值求数组中任意数的和等于目标值的下标

js面试题给定数组与目标值求数组中任意数的和等于目标值的下标题目描述给定随机数组与目标值进行匹配任意数字和等于目标值输入这些数字的下标分析任意数字组合 Cn1 +Cn2+…=2^n -1与位运算比如 1101 就是取第1第2第4个数这样可以得到所有的组合类型代码的实现是数组和值都实现了的function CalSum(array,result)/* 1 1 2 3 2+1 3 7 3+3+1 4

2021-07-24 11:26:15 845 2

原创 axios Interceptors（拦截器） Cancellation（取消发送）

Interceptors axios.interceptors.request.use(function (config) { console.log('请求拦截器成功'); //修改 config 中的参数 config.timeout = 2000; return config; }, function (error) { console.log('请求拦截器失败

2021-06-11 19:47:01 483

原创 axios Request Config

Config Defaults全局config // 全局 axios.defaults.baseURL='http://localhost:3000' //使用默认值 btns[0].onclick =function(){ axios({ // 默认值 get 不区分大小写 method:'get', url:"/posts" }).then((res)=>{

2021-06-11 19:40:00 1090

原创 axios基本使用配合json-server

全部引入 json-server配置地址githubhttps://github.com/typicode/json-servernpm install -g json-server启动 json serverjson-server --watch db.json代码 //获取按钮组 var btns = document.querySelectorAll('button'); //获取所有数据 btns[0].onclick =function(){

2021-06-11 17:03:52 211

原创 node.js 服务器启动 vue脚手架启动

node.js 服务器启动命令npm start || yarn start启动成功的标志端口号就在 bin/www文件查看或更改端口号127.0.0.1:3000 默认本机的地址构建好的项目可以直接用 yarn start 启动前提是你全局安装了 yarn关于 node 建议看你用什么构建就用什么启动但是我试了一下你用 yarn 构建的项目 npm run serve 启动也是ok的同样 npm 构建的用 yarn serve 也能启动但是速度要稍微慢一点

2021-05-30 11:09:14 390

原创 Vue v-model 侦听器 watch

v-model<h3>{{message}}</h3>  <input type="text" :value="message" @input="inputChange">  <input type="text" v-mode

2021-05-30 10:31:59 1224

原创 methods computed

1 差值语法<template id="tem"> <h2>{{firstName+" "+lastName }}</h2> <h2>{{score >= 60 ? '及格':'不及格'}}</h2> <h2>{{message.split(" ").reverse().join(" ")}}</h2> </template>data(){

2021-05-29 21:45:20 39

原创 Vue列表渲染 :key值加不加的 diff算法

v-for 渲染v-for=“(item,index) of [数组]”{{item}}v-for=“(item,index) in [数组]”{{item}}<h2>遍历数字</h2> <ul> <li v-for="(value,index) in 10">{{index}}-----{{value}}</li> </ul> <h2>遍历

2021-05-29 21:39:30 100

原创 Vue 条件渲染

条件渲染<template id="tem"> <h2 v-if="isshow">hahahah </h2> <button @click="change"></button> </template><input type="text" v-model="score"> <h2 v-if="score > 90">优秀</h2>

2021-05-29 21:31:38 68

空空如也

空空如也