- 博客(79)
- 收藏
- 关注
原创 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
574
原创 06JS面向对象
JS面向对象JS 中的对象对象描述符 可以对这个对象做一些控制var obj = { name:'why', age:18}// 数据属性描述符// 用了属性描述符, 那么会有默认的特性Object.defineProperty(obj, "address", { // 很多配置 // value: "北京市", // 默认值undefined // 该特殊不可删除/也不可以重新定义属性描述符 // configurable: false, //
2021-12-25 22:06:01
659
原创 05_函数相关
JS 函数式编程纯函数的概念不对外部变量做任何 处理 这个函数执行的 时候不会产生任何的副作用根据 一定的输入 会永远有 相应的输出平时的 算法的 几乎都是纯函数纯函数 可以放心的使用 不会对其他变量造成污染 公用的方法 函数 最好是纯函数函数柯里化是把接收多个参数的函数,变成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数,而且返回结果的新函数的技术// 柯里化的 例子function add(x,y,z) { return x+y+z}func
2021-12-25 16:18:59
338
原创 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
260
原创 02_内存管理闭包
JS 内存管理JS 会在定义变量时为我们分配内存基本数据类型直接在栈空间进行分配复杂数据类型在堆内存中开辟一块空间 将这块空间的指针返回值变量做引用垃圾回收 Garbage Collection (GC)引用计数 当有对象做引用时 就+1 当为0时--> 没有对象引用 回收 弊端: 循环引用标记清除 从根开始往上找 没有引用的对象 做清除闭包[scope]闭包又称 词法闭包 或函数闭包生成闭包的方式在此代码中 由于 函数嵌套函数 内部函数 对foo作用域中的
2021-12-25 15:34:02
303
原创 01javascript
以下来自对 coderwhy 老师 js高级课程的学习 以及自己的总结javascript运行原理浏览器工作原理静态资源 输入服务器地址 url 回车先查看浏览器缓存-系统缓存 若有则直接展示 or nextDNS 解析 获取相应的 ip 地址TCP连接 建立 三次握手发送HTTP请求服务器处理请求并返回HTTP报文浏览器收到HTTP 响应读取页面内容,浏览器渲染,解析html生成Dom树,解析css,样式,js交互客户端和服务器继续进行交互…浏览器内核javascri
2021-12-25 15:14:05
248
原创 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
959
原创 javascript高级编程(第三版) 07_BOM
window 对象BOM 的核心对象是 window,它表示浏览器的一个实例。在浏览器中,window 对象有双重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数,都以 window 作为其 Global 对象,因此有权访问 parseInt()等方法全局作用域Global{window:Global}全局变量会成为 window 对象的属性,定义全局变量与在 window
2021-09-22 19:28:21
93
原创 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
78
原创 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
85
原创 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
112
原创 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
694
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
144
原创 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
818
原创 javascript继承
原型链继承让子类的原型 指向父类的实例对象 实现对 父类原型上的方法的继承但是这个时候子类的构造函数也变为父类的实例 需要将其构造函数执行自己/*方式1: 原型链继承1. 方法 1. 定义父类型构造函数 2. 给父类型的原型添加方法 3. 定义子类型的构造函数 4. 创建父类型的对象赋值给子类型的原型 5. 将子类型原型的构造属性设置为子类型 6. 给子类型原型添加方法 7. 创建子类型的对象: 可以调用父类型的方法2. 关键 1
2021-08-29 16:02:45
83
原创 数据拼接 存在一对多关系
在 l push 对象的时候 是push的引用值 为了保证每一次 puhs的都是不同的对象 需要通过 JSON 做一个深拷贝这里我解决了 但是一直在蒙 在 push之前 打印 出来的 item数据 每个都是不相同的 其实就是深拷贝的问题最后使用 lodash 排序 输出结果(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {name: “1”, age: 18, message: “成年”}1: {na.
2021-08-27 09:33:00
120
原创 闭包与闭包面试题
什么是闭包 /* 1. 闭包 当一个嵌套的内部函数引用了嵌套的外部函数的变量时 2. 使用chrome调试查看 理解1 闭包是嵌套的内部函数 2 包含被引用变量(函数)的对象 3. 产生 函数嵌套 内部函数引用了外部函数的数据(变量/函数) */ function fn1() { var a =2 var b functi
2021-08-22 10:42:40
383
原创 作用域与作用域链
<!--1. 区别1 * 全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了。而不是在函数调用时 * 全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建 * 函数执行上下文是在调用函数时, 函数体代码执行之前创建2. 区别2 * 作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化 * 执行上下文是动态的, 调用函数时创建, 函数调用结束时就会自动释放3. 联系 * 执行上下文(对象)是从属于所在的作用域 * 全局.
2021-08-21 12:53:22
146
原创 执行上下文与执行上下文栈
变量提升与函数提升变量声明提升通过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
73
原创 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
84
原创 js原型和原型链
百度找的一张图片 图片看懂了 真的很好理解原型/* 函数的prototype属性 每个函数都有一个prototype属性 它默认指向一个Object空对象(原型对象) 原型对象总有一个属性 constructor 指向函数对象 给原型对象添加属性(一般都是方法) 作用 函数的所有实例对象 自动拥有原型中的属性(方法) */ console.log(Date.prototype) function F() {
2021-08-15 11:28:08
77
原创 javascript高级编程(第三版) 02_基本概念
语法区分大小写一切(变量、函数名和操作符)都区分大小写标识符第一个字符必须是一个字母、下划线(_)或一个美元符号($)其他字符可以是字母、下划线、美元符号或数字*惯例 驼峰命名法注释///* */严格模式严格模式是为 JavaScript 定义了一种不同的解析与执行模型要在整个脚本中启用严格模式,可以在顶部添加如下代码:“use strict”支持严格模式的浏览器包括 IE10+、Firefox 4+、Safari 5.1+、Opera 12+和 Chrome。语句ECMAS
2021-08-12 17:41:36
133
原创 javascript高级编程(第三版) 01script的使用
## <script> 元素### 属性 所有属性均为可选属性### 标签位置 1. 放在head里面 会等js文件全部解析完成执行之后才会执行之后的html代码 页面很慢2. 通常会放在 body的最后 在html页面加载之后执行 页面速度加快#### saync异步 脚本 只使用于 外部脚本文件 立即下载文件 下载后解析运行 不会有顺序 异步加载页面其他内容 #### charset指定代码字符集 大多数浏览器会忽略#### defer延迟脚本 defer="def
2021-08-12 16:35:50
177
原创 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
420
原创 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
68
原创 使用 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
708
原创 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
120
原创 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
184
原创 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
69
原创 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
254
原创 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
869
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
517
原创 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
1219
原创 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
227
原创 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
408
原创 Vue v-model 侦听器 watch
v-model<h3>{{message}}</h3> <!-- 1.v-bind value的绑定 2.监听input事件, 更新message的值 --> <input type="text" :value="message" @input="inputChange"> <!-- v-model 像是 上面的语法糖 --> <input type="text" v-mode
2021-05-30 10:31:59
1289
原创 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
50
原创 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
112
原创 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
79
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人