
javaScript
文章平均质量分 60
前端小学生的记录
SteveTang957
昔风不起,唯有努力生存
展开
-
ES6基本的语法(十九) Generator基本使用
Generator 简介生成器,本身是函数,执行后返回迭代对象,函数内部要配合 yield 使用 Generator 函数会分段执行,遇到 yield 即暂停。特点function 和函数名之间需要带 *。函数体内部 yield 表达式,产出不同的背部状态(值)。演示// function 和函数名之间需要带 *function * test (){ yield 'a'; console.log('1'); yield 'b'; console.log('2'); yi原创 2021-05-28 18:08:45 · 186 阅读 · 0 评论 -
ES6基本的语法(二十) async+await
async 简介:async函数,是 Generator 语法糖,通过 babel 编译后可以看出它就是 Generator + Promise+Co思想的实现的。配合await使用。async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例, 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。function readFile (path){原创 2021-05-28 18:08:50 · 488 阅读 · 0 评论 -
ES6基本的语法(十八) Symbol
数据结构:第七种数据结构 Symbol特点:唯一,可作为对象的属性,有静态属性Symbol.lterator演示let os = Symbol('abc');console.log(type os); // Symbolconsole.log(os); // Symbol(abc);let os2 = Symbol({ name: 'ccc',});console.log(os2); // Symbol([object Object]);let os3 = Symbol(原创 2021-05-28 18:07:27 · 184 阅读 · 0 评论 -
ES6基本的语法(十七) lterator
迭代模式:提供一种方法可以顺序获得聚合对象中的各个元素,是一种最简单也是最常见的设计模式,它可以让用户透过特定的接口巡防集合中的每一个元素而不用了解底层的实现。迭代器简介:依照与迭代模式的思想而实现,分为内部迭代器和外部迭代器。内部迭代器:本身就是函数,该函数内部定义好迭代规则,完全接手整个迭代过程。外部只需要一次初始调用。Array.prototype.forEach、jQuery.each 内部迭代器外部迭代器本身是函数,执行返回迭代对象,迭代下一个元素必须显示调用,调用.原创 2021-05-28 18:05:53 · 160 阅读 · 0 评论 -
ES6基本的语法(十六) lterator
迭代模式:提供一种方法可以顺序获得聚合对象中的各个元素,是一种最简单也是最常见的设计模式,它可以让用户透过特定的接口巡防集合中的每一个元素而不用了解底层的实现。迭代器简介:依照与迭代模式的思想而实现,分为内部迭代器和外部迭代器。内部迭代器:本身就是函数,该函数内部定义好迭代规则,完全接手整个迭代过程。外部只需要一次初始调用。Array.prototype.forEach、jQuery.each 内部迭代器外部迭代器本身是函数,执行返回迭代对象,迭代下一个元素必须显示调用,调用.原创 2021-05-28 18:01:35 · 205 阅读 · 0 评论 -
ES6基本的语法(十五) 手写 Promise
首先写一个原始的 Promiselet OP = new promise((res,rej) =>{ res(0)})op.then((val) =>{ console.log(val)},(rej) =>{ console.log(reason)})ES5 模拟function MyPromise(executor){ this.status = 'pending'; var _self = this; _self.resolveValue = null原创 2021-05-28 17:59:51 · 171 阅读 · 0 评论 -
React (三) 修改props,React父传子、子传父、this绑定
Props介绍与应用什么是 props如何使用父传子函数组件类组件默认值子传父修改 props事件监听 this 绑定直接在 jsx 元素上进行绑定(不推荐)箭头函数(推荐)直接在 jsx 上使用箭头函数(不推荐)什么是 propsprops 可以看成一个对外的接口,用来接收外部传入的数据。组件中主要有两种属性 props 和 state 无论 props 或者 state 中哪两个发生了改变都会重新引发渲染如何使用如果你使用过 Vue,也肯定使用过父传子和子传父的功能,在 react 中也有父子通原创 2021-03-25 10:57:29 · 6577 阅读 · 1 评论 -
React (二) 虚拟Dom介绍和非Dom的属性介绍
虚拟Dom介绍和非Dom的属性介绍虚拟Dom介绍和非Dom的属性介绍什么是虚拟 Dom(virtual Dom)非 Dom 属性以及如何使用dangerouslySetInnerHTMLrefkey虚拟Dom介绍和非Dom的属性介绍什么是虚拟 Dom(virtual Dom)虚拟 Dom 不是真实的 Dom。class App extends React.Component { render() { return( <div className原创 2021-03-25 10:53:48 · 305 阅读 · 0 评论 -
ES6基本的语法(十四) Promise 补充
链式调用const myPromise = (new Promise(myExecutorFunc)) .then(handleFulfilledA,handleRejectedA) .then(handleFulfilledB,handleRejectedB) .then(handleFulfilledC,handleRejectedC);// 或者const myPromise = (new Promise(myExecutorFunc)) .then(handleFul原创 2021-03-16 09:24:55 · 177 阅读 · 0 评论 -
ES6基本的语法(十三) Promise
PormisePromise 是一个对象,它代表了一个异步操作的最终完成或者失败。因为大多数人仅仅是使用已创建的 Promise 实例对象,所以本教程将首先说明怎样使用 Promise,再说明如何创建 Promise。本质上 Promise 是一个函数返回的对象,我们可以在它上面绑定回调函数,这样我们就不需要在一开始把回调函数作为参数传入这个函数了。一个 Promise 必然处于以下几种状态之一:待定(pending): 初始状态,既没有被兑现,也没有被拒绝。已兑现(fulfilled): 意味原创 2021-03-10 00:14:48 · 656 阅读 · 0 评论 -
React (一) 基础入门用法
React入门什么是 JSX声明式组件化JSX 的具体用法函数组件类组件基本语法标签类型dom 标签自定义标签内联样式标签属性注释拓展运算符的运用组件上的事件只有一个顶层的 DomJSX 原理React.createElement参考链接什么是 JSXJSX 的全名是 javascript and XML,是一种可拓展的标记性语言。主要特点是声明式和组件化。声明式React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。原创 2021-03-03 01:39:31 · 234 阅读 · 0 评论 -
ES6基本的语法(十二) 模拟实现 Map
模拟实现 Map首先上在一篇的文章我介绍了 Map 的主要特点不重复任何类型的值都可以作为属性主要围绕这几点来写还有 Map 里面的方法选择性实现几个 set(), get(), delete(), has(), clear()。function Op(){ this.bucketLength = 8; // 定义的桶的范围 this.init();}Op.prototype.init = function(){ // 初始化一个桶 this.buck原创 2021-03-02 15:29:20 · 165 阅读 · 0 评论 -
ES6基本的语法(十一) Map
MapMap 是 ES6 提供的构造函数,能造出一种新的存储数据的结构。本质上为键值对的集合key 对应 value,key 和 value 唯一,任何值都可以当属性可以让对象当属性,去重基本用法let op = new Map([["name","ccc"],["age","3"]])console.log(op);// Map(2) {"name" => "ccc", "age" =>"3"}let op = new Map([[{},"ccc"]])console.原创 2021-02-24 12:40:14 · 361 阅读 · 0 评论 -
ES6基本的语法(十) 补全Set WeakSet
WeakSetWeakSet 结构与 Set 类似,也是不重复的值的集合。它与 Set 有两个区别。WeakSet 的成员只能是对象,而不能是其他类型的值。WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中。const arr = [1,2,3,4]let newarr = new weakSet(arr) // new wea原创 2021-02-23 00:30:07 · 178 阅读 · 0 评论 -
ES6基本的语法(九) Set
SetSet 是 ES6 提供的构造函数,能够造出一种新的存储数据的结构只有属性值,成员值唯一可以转成数组,其本身具备去重,交集,并集,差集的作用Set 只有属性值// 括号里面可以存放支持迭代接口的值 有 symbol(symbol.inerator) 就属于迭代接口let a = new Set([[1,2,3,4], 33, true,{name: 'ccc'}] );console.log(a)// set(4) { [1,2,3,4], 33, true,{name:原创 2021-02-20 01:07:34 · 309 阅读 · 1 评论 -
我的面试经
目录年前的前端面试总结vue 双向绑定 vue2 vue3vue中 watch 和 computed 区别的区别高并发的场景前端怎么办前端提高性能websocket、网络握手less、sess缓存机制介绍mvvm引用值和原始值堆栈存储this指向原型链输入URL之后都发生了什么es6 的解构数组解构方法数组可以使用默认值对象解构默认值Set 和 map 的介绍和区别介绍一下vue生命周期es6的新特性(说了7-8个,抓了个箭头函数问)浏览器的兼容性css 上的兼容性不同浏览器的标签默认的外补丁(margin原创 2021-01-18 00:11:37 · 170 阅读 · 0 评论 -
记一次requestAnimationFrame之后页面崩溃、内存泄漏问题
canvas 内存泄漏问题前言要解决的问题公司项目有个地方用到 canvas 做出流光动画。但是做出来之后,造成的内存无法释放,页面挂的时间久了一点点就开始页面崩溃。源代码// 首先获取canvas// 在利用 getContext()方法返回一个用于在画布上绘图的环境。let c = document.getElementById("myCanvas");let context ...原创 2019-12-02 00:41:07 · 4786 阅读 · 0 评论 -
ES6基本的语法(一)let
写在最前面2018年7月30日开始不定期的更新ES6的语法文章的主要思路来自:渡一课堂的网上视频课阮老师的ES6标准入门GitHub上的开源内容以及结合自己的项目经验…(如果后期再有补充在弥补)好了,不在废话直接正题ES ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Comput...原创 2018-07-31 00:00:29 · 425 阅读 · 0 评论 -
数组的方法
数组的方法var arr = [1,2,3,4,5,6];//操作数组的方法//arr.length//arr.push 末尾添加 返回长度//arr.pop 尾部移除,返回删除的数//arr.sort 按照字符串的形式排序//arr.sort(function(a,b){return a-b}) 从小到大 b-a大到小//arr.shift 头部删除,返回删除的数//ar...原创 2018-07-20 00:08:16 · 325 阅读 · 0 评论 -
JS简单运动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>方块运动</title></head> <style> *{原创 2018-07-11 01:05:15 · 268 阅读 · 0 评论