大绿绿青菜-CSDN博客

原创 TypeScript常用类型

TypeScript常用类型TypeScript 是 JS 的超集， TS 提供了 JS 的所有功能，并且额外的增加了：类型系统。所有的 JS 代码都是 TS 代码。 JS 有类型( 比如， number/string 等)，但是 JS 不会检查变量的类型是否发生变化。而 TS 会检查。 TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。

2022-05-26 10:30:00 210

原创 ES6--集合 Set与Map

Set 和 Map是ES6新增的两种数据结构，在一些比较复杂的业务场景中，Map和Set能给我们提供很大的帮助；

2022-05-24 08:00:00 819

原创 ES6 迭代器、生成器

一、迭代器迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口，就可以完成遍历操作。1.什么迭代从一个数据集合中按照一定顺序，不断取出数据的过程我们就叫做迭代2.迭代和遍历有什么区别？遍历必须知道数据集合的长度，而迭代不需要迭代强调的是依次取出，不能够确定到底能取出来多少，也不确定能不能把数据取完 3.迭代器需要满足的条件 ...

2022-05-22 07:00:00 261

一、Symbol数据类型1.创建symbol // 1.用Symbol创建 let symbol = Symbol() console.log(symbol, typeof symbol); //Symbol() 'symbol' let name1 = Symbol('张三') let name2 = Symbol('张三') console.log(name1, name2); //Symbol(张

2022-05-21 13:56:52 157 1

原创 ES6（一）

一、es6声明变量以及声明特性二、变量的解构赋值三、模板字符串四、对象简化写法五、箭头函数以及声明特点六、函数参数赋初始值七、rest参数【...】八、扩展运算符【...】

2022-05-21 12:07:43 127

原创学习HTML5的Canvas

<canvas> 标签用于，通过脚本（JavaScript）绘制图像。 <canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 必须使用脚本来完成实际的绘图任务，位图（像素图）放大后失真；绘图步骤：1.编写html<canvas id="canvas" width="300" height="300"></canvas>2.用脚本获取canvas；var canvas = document.getElementById('tut

2022-03-12 15:27:03 1072 2

原创 HTML5新增的部分内容

1.新增input里type值：number，email，date，time，color2.标签属性：contentediable="true/false",让标签内容可编辑； draggable：使元素可拖拽，有七个事件被拖拽元素的事件 dragstart：拖拽开始 drag：移动 dragend：结束拖拽目标区域： drapenter：进入目标区域 dragover：在目标在 drapleave：离开目标 drap：在目标中放下

2022-03-12 14:25:20 284

原创 JavaScript---柯里化函数

柯里化：将一个多参函数转换为可以接受单个参数的函数，并且返回一个新函数，接收剩余的参数。也就是说，当一个函数有多个参数的时候先传递一部分参数调用它（这部分参数以后永远不变），然后返回一个新的函数接收剩余的参数，返回结果，这就是函数的柯里化。作用：前端使用柯理化的用途主要就应该是简化代码结构，提高系统的维护性，一个方法，只有一个参数，强制了功能的单一性，很自然就做到了功能内聚，降低耦合。柯理化的优点就是降低代码的重复，提高代码的适应性柯里化封装：function curry (f

2022-03-12 11:10:12 747

原创 js的节流、防抖函数

节流：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行，连续触发时，安等待时间执行事件，降低频率。防抖：短时间内多次触发同一事件，使他只执行最后一次或只执行第一次中间不执行。连续触发时，不执行事件，定制触发事件，通过延迟时间触发停止操作前执行的最后一次事件。节流防抖的函数封装：节流： // 参数：要处理的方法，等待时间 function throttle(handler,wait){ let lastTime=0;

2022-03-12 10:26:08 230

原创 JavaScript时间线

步骤1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = 'loading'，正在加载中。2、遇到link外部css，创建线程加载，并继续解析文档。3、遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。4、遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并

2022-03-12 09:53:36 283

原创 JavaScript异步加载，解决js阻塞

1.defer：在script标签里添加defer，用于外部链接js文件，也可以异步加载内部脚本，会等待dom树生成后再执行js脚本代码 <script src="01.js" defer ></script>2.async：只能异步加载外部的链接文件，不能加载内部脚本，并且js文件加载完成后立即执行<script src="01.js" async></script>3.按需加载：节省资源：在需要用到的时候再去引入，不需要用的

2022-02-12 10:04:29 1784

原创 JavaScript-浏览器线程

1.JS引擎线程JS内核，也称JS引擎，负责处理执行javascript脚本。这是JS中的主线程，所以JS是单线程的编程语言，但是实际上JS属于单线程异步。异步是由子线程进行完成，主线程负责调度子线程。所以JS不严格的说也也属于多线程的编程语言与GUI线程是互斥2.GUI渲染线程负责渲染浏览器界面，包括解析HTML、CSS、构建DOM树、Render树、布局与绘制等当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行与JS主线程互斥3.事件监听

2022-02-12 09:46:53 419

原创 JavaScript使用递归实现数据深度克隆

function clone(obj){ // 根据调用clone函数的数据来进行不同的数据的克隆 // 判断：是不是数组，对数组进行遍历克隆 if(Array.isArray(obj)){ var newArr = []; for(var i=0;i<obj.length;i++){ // 递归，判断数组的元素是什么类型...

2022-02-12 09:42:22 539

原创 JavaScript 检测数组的方法与转换为真数组

检测数据是否是真数组1.isArray() : ES5静态方法判断一个数据是不是为数组var arr = []console.log(Array.isArray(arr)); //true2.isPrototypeOf() :判断对象的原型链上是否存在Array原型var arr = []console.log(Array.prototype.isPrototypeOf(arr));//true3.instanceof：判断Array的原型在不在arr的原型链上var a

2022-02-11 20:30:52 395

原创 JavaScript 原型的基础方法

1.Object.getPrototypeOf(对象) ：获取对象的隐式原型2. Object.prototype.isPrototypeOf(obj) ：判断Object.prototype是否在obj的原型链上 var obj = new Object(); // 问：obj在不在Function的原型链上console.log(obj.isPrototypeOf(Function)); //false// 问：Object.prototype对象在不在obj的原型链上..

2022-02-11 19:55:07 249

原创 JavaScript 中的原型

1.函数定义时，就存在一个属性prototype，它的值是一个普通的Object对象，这就是原型；2.对象都是由构造函数new出来的，构造函数是由Function() new出来的，Function是浏览器创建js引擎时就已经存在；3.constructor，获取对象的构造函数（obj.constructor），这个属性存储在构造函数的原型中，对象会继承原型中的方法和属性4.对象的隐式原型（obj.__proto__）指向创建该对象的构造函数的原型()，指向同一空间...

2022-02-11 19:26:02 2116

原创 JavaScript中call、apply、bind方法源码实现

JavaScript中call、apply、bind方法源码实现

2022-02-09 17:36:54 395

原创 JavaScript构造函数

JavaScript构造函数，new关键字，new.Target

2022-02-06 20:48:22 423

原创 JavaScript闭包题

闭包该函数通常为内部函数，被返回，外部可以引用该函数，通过其访问自由变量。（自由变量指不是函数参数，也不是函数内部变量的变量，即外部变量）闭包的形成：将一个内部函数,通过某种方式保存到外部，使其引用的作用域链不会被释放，导致外部可以使用内部的变量。例如：如果想使用函数a内部的变量，我们就可以在函数a内部再定义一个函数b，并把它返回出去；function a(){ var aaa = 123; var bbb =456; function b(){

2022-01-21 09:51:55 567

原创 JavaScript循环绑定事件问题及解决方法

html代码 <ul> <li>Lorem.<button>删除</button></li> <li>Commodi.<button>删除</button></li> <li>Tenetur!<button>删除</button></li> <li>Corrupti?&l

2022-01-08 15:36:14 1374 1

原创 JavaScript的作用域

目录作用域1. 全局作用域2. 函数作用域浏览器执行JavaScript的过程1.语法分析2.预编译（预解析）3.逐行执行案例分析1：[[scopes]]案例分析2：作用域作用域表示一个代码区域，也表示一个运行环境1. 全局作用域在全局作用域中声明的变量，会被提升到脚本块的顶部，并且会成为全局对象的属性。2. 函数作用域在函数作用域中声明的变量，会被提升到函数的顶部，并且不会成为全局对象的属性.浏览器执行JavaScript的过程1

2022-01-08 11:54:27 1142 1

原创 Javacript实现一个广告飘窗或小球反弹特效

一、广告飘窗1、先在body里添加一个div<body> <div id="div1"></div></body>2、开始编写js部分代码 1.设置div的样式。我这就用js设置。//获取节点var div = document.getElementById("div1");//设置div初始位置var offsetx = 0;var offsety = 0;//定义top,left每次变更的距离va...

2021-12-25 15:04:50 966 1

原创学习JavaScript第一周

简介：JavaScript是一种脚本语言，在网页使用的语言中HTML描述页面的结构，CSS用来设计网页的样式，而JavaScript则是用来与用户交互，把网页从单纯的展示信息变为了支持与用户交互的程序，JavaScript兼容于ECMA标准，因此也称为ECMAScript。<script>元素：将JavaScript插入HTML的主要方式是使用<script>元素。可以通过嵌入式、外链式、行内式这三种方法来引入JavaScript。1.嵌入式直接使用<scri

2021-12-18 15:33:11 1048 1

m0_58510118的博客

原创学习vue2.0-初体验及常用指令