Czm_cc-CSDN博客

原创 Vue computed计算属性

1. computed 计算属性模板语法插值表达式非常便利，但在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于复杂逻辑，应当使用计算属性。<div id="app"> <h1>计算属性的使用</h1>   <p>{{getMs

2021-11-20 14:47:30 393 1

1. 什么是箭头函数?在ES6中新增了使用箭头函数( => )的方式定义函数，任何可以使用函数表达式的地方，都可以使用箭头函数、let test = (a,b) => { return a + b}let test2 = function(a,b){ return a + b}console.log(test(5,10)) // 15console.log(test2(5,10)) // 15参数// 只有一个参数可以不用括号let test1 = x =&

2021-11-07 21:47:18 245 1

原创 mock.js生成模拟数据

1. mock.js通过mock.js可以随机生成数据1.1 安装npm install mockjs在nodeJS中引入使用const Mock = require("mockjs")const result = Mock.mock({ //调用mock方法生成数据 'datas|10': [{ //生成10条数据 "id|+1" : 1, // id 每次加一 name : "前端 @id 班", // 引用id值

2021-11-06 14:50:49 667

原创 Node-文件流

1. 什么是文件流文件流定义了对文件数据的操作方式，用流的方式读取、写入文件通常对大文件的拷贝，写入等，会采用文件流的方式进行操作2. 文件流的创建2.1. fs.createReadStream(path[, options])创建一个文件可读流，用于读取文件内容返回：Readable的子类ReadStream注册data事件后，才会真正开始读取rs.on(事件名, 处理函数)// 引入模块const fs = require("fs")const path =

2021-10-31 21:36:11 825

原创 JavaScript forEach 如何跳出循环？

1. forEach用法遍历时更加简洁，效率和for循环相同，不用处理集合下标的问题，减少了出错的概率const items = ['item1', 'item2', 'item3'];const arr = [];// forfor (let i=0; i<items.length; i++) { arr.push(items[i]);}// forEachitems.forEach((item) => { arr.push(item);});2. for

2021-10-30 11:42:53 793

原创反射(Reflect)与代理(Proxy)-观察者模式

观察者模式根据观察者模式的思想，实现数据更新时，页面也同步更新<div id="container"></div>function observer(target) { const div = document.getElementById("container") // 获取dom const ob = new Proxy(target,{ // target为被代理对象 ob为代理对象 set(target,prop,value){

2021-10-24 20:25:15 319

原创反设(Reflect)和代理(Proxy)

1. 反设(Reflect)Reflect属于js内置对象，它提供了一系列的方法，可以让开发者通过调用这些方法，访问一些js的底层功能const obj = { a : 1, b : 2}// 常规赋值、获取obj.c = 3;obj.b//反射中的赋值、获取Reflect.set(obj,"c",3)Reflect.get(obj,"b")Reflect.apply(target,this,arguments) //函数调用,顺便改变this指向Refle

2021-10-24 19:57:18 146

原创 ES6继承(class类)

1. ES6之前的继承方式// 原来的继承 function Amimal(type,name,age,sex){ this.type = type; this.name = name; this.age = age; this.sex = sex;}Amimal.prototype.print = function(){ console.log(`种类:${this.type}`) console.log(`名字:${this.name}`)

2021-10-17 17:18:56 91

原创 Symbol-知名符号

知名符号就是有特殊含义的符号，通过Symbol配置得到Symbol.hasInstance 影响instanceof运算符的结果// 1. Symbol.hasInstance function A(){}Object.defineProperty(A,Symbol.hasInstance,{ value : function(){ return false }})const a = new A()console.log(a instanceof A).

2021-10-17 16:54:20 180

原创 Symbol数据类型

Symbol符号ES6新增一种基本数据类型为符号Symbol1. Symbol符号的创建// 符号的创建 Symbol(符号描述)// 没有字面量的创建方式，只有Symbol（）创建const syb1 = Symbol([])console.log(typeof syb1) //symbolconsole.log(syb1) //symbol()1.2. 每次调用Symbol函数得到的符号永远不会相等let syb1 = Symbol()let syb2 = Symbol()c

2021-10-17 16:53:35 88

原创面试题：arguments对象

arguments:arguments 是一个对应于传递给函数的参数的类数组对象。下列代码输出结果：function side(arr) { arr[0] = arr[2]; }function a(a, b, c = 3) { c = 10; side(arguments); // 此时的arguments参数a为1，b为1,c为1 return a + b + c;}console.log(a(1, 1, 1)) // 12解析：当非严格模式中的函

2021-10-09 07:30:00 208

原创浏览器线程与浏览器渲染流程

1. 浏览器线程1. js引擎线程(主线程)主要负责执行JavaScript脚本，js是单线程异步，异步是由子线程完成，js引擎负责调度子线程。2. GUI渲染线程负责渲染浏览器界面，包括解析HTML、css、构建DOM树、渲染树、布局与绘制.3. 事件监听线程对事件进行处理4. 计时器线程负责定时, setInterval 和 setTimeout5. 网络线程负责处理http请求当主线程空闲时，才会执行子线程2. 浏览器渲染流程在浏览器中输入url(统一资源定位

2021-10-08 19:03:23 269

原创 svg 绘制

svg 和canvas的区别svg：矢量图，使用html元素绘制，适合大面积贴图canvas：位图/像素图，使用js操作,适合小面积绘图、动画效果、h5中的小游戏利用svg 绘制一个国际象棋棋盘<svg> </svg>svg{ width: 800px; height: 800px; border: 1px solid;} var svg = document.getElementsByTagName("svg")[0]

2021-10-07 09:33:49 395

原创实例方法与静态方法

实例方法与静态方法实例方法：由构造函数创建的对象使用静态方法：由构造函数本身去使用1. Number静态成员isNaN() 判断是否不是一个数isFinite() 判断是否是有限的parseInt() 将一个字符串类型的数据转换为整数parseFloat() 将一个字符串类型的数据转换为浮点数实例成员toFixed() 指定当前对象保留几位小数并且有四舍五入的功能返回的是字符串2. String静态成员fromCharCode：通过uni

2021-10-06 23:39:27 179

原创函数防抖与节流

函数防抖与节流为了避免不断地调用绑定在事件上的函数，极大地浪费资源，对事件进行调用次数的限制。1. 函数防抖在事件被触发n秒后再执行事件，如果在这n秒内又被触发，则重新计时。<input type="text">// 获取input元素var ipt = document.getElementsByTagName("input")[0]function debounce(){ var timer = null; var hander = argumen

2021-10-05 21:14:03 87

原创 rem布局方式

1. rem单位与 em单位区别rem (root em)是一个相对单位，类似于em.em是父元素字体大小。rem的基准是相对于html元素的字体大小。<div class="one">123</div><div class="two">123</div>/* 根html 为 12px */html{ font-size: 12px;}body{ font-size: 16px;}.one{ font-size

2021-10-04 21:42:06 106

原创使用Ajax请求数据

1. 请求文本类型的数据（jQuery方法） $("button").on("click",function(){ jQuery.ajax({ type : "get",//默认为get请求 url : "http://localhost:9999/01.txt", //请求的地址 dataType : "text", // 请求文本类型数据 success : function(data){ con

2021-10-03 21:41:13 1196

原创 js数组常用方法

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

2021-08-08 16:24:40 150 1

原创 JavaScript包装类

包装类包装类 : 把原始类型进行一个包装，包装成一个引用类型，就拥有了引用类型的特性 var str = "hello world"; //原始类型 var str1 = new String("hello world"); //构造函数出来的内容一定是一个引用类型 var num = new Number(123) console.log(str) console.log(str1) console.log

2020-11-12 20:55:25 169 1

原创 Javascript中有哪些数据类型？

1.基本数据类型：number ：数字类型string ：字符串类型boolean：布尔类型undefined ：未定义空（null）var a = 123; //numbervar b = "Hello,word"; //stringvar c = true; //booleanvar d // undefinedvar e = null; //null2.引用数据类型：Object ：对象类型Array : 数组类型Function：函数类

2020-11-09 23:27:15 373 2

Czm_cc的博客