SteveTang957-CSDN博客

原创 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 433

原创 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 144

原创 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 142

原创 ES6基本的语法(十七) lterator

迭代模式：提供一种方法可以顺序获得聚合对象中的各个元素，是一种最简单也是最常见的设计模式，它可以让用户透过特定的接口巡防集合中的每一个元素而不用了解底层的实现。迭代器简介：依照与迭代模式的思想而实现，分为内部迭代器和外部迭代器。内部迭代器：本身就是函数，该函数内部定义好迭代规则，完全接手整个迭代过程。外部只需要一次初始调用。Array.prototype.forEach、jQuery.each 内部迭代器外部迭代器本身是函数，执行返回迭代对象，迭代下一个元素必须显示调用，调用.

2021-05-28 18:05:53 115

原创 ES6基本的语法(十六) lterator

迭代模式：提供一种方法可以顺序获得聚合对象中的各个元素，是一种最简单也是最常见的设计模式，它可以让用户透过特定的接口巡防集合中的每一个元素而不用了解底层的实现。迭代器简介：依照与迭代模式的思想而实现，分为内部迭代器和外部迭代器。内部迭代器：本身就是函数，该函数内部定义好迭代规则，完全接手整个迭代过程。外部只需要一次初始调用。Array.prototype.forEach、jQuery.each 内部迭代器外部迭代器本身是函数，执行返回迭代对象，迭代下一个元素必须显示调用，调用.

2021-05-28 18:01:35 160

原创 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 131

原创 React (三) 修改props，React父传子、子传父、this绑定

Props介绍与应用什么是 props如何使用父传子函数组件类组件默认值子传父修改 props事件监听 this 绑定直接在 jsx 元素上进行绑定（不推荐）箭头函数（推荐）直接在 jsx 上使用箭头函数(不推荐)什么是 propsprops 可以看成一个对外的接口，用来接收外部传入的数据。组件中主要有两种属性 props 和 state 无论 props 或者 state 中哪两个发生了改变都会重新引发渲染如何使用如果你使用过 Vue，也肯定使用过父传子和子传父的功能，在 react 中也有父子通

2021-03-25 10:57:29 6076 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 245

原创 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 139

原创 ES6基本的语法(十三) Promise

PormisePromise 是一个对象，它代表了一个异步操作的最终完成或者失败。因为大多数人仅仅是使用已创建的 Promise 实例对象，所以本教程将首先说明怎样使用 Promise，再说明如何创建 Promise。本质上 Promise 是一个函数返回的对象，我们可以在它上面绑定回调函数，这样我们就不需要在一开始把回调函数作为参数传入这个函数了。一个 Promise 必然处于以下几种状态之一：待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。已兑现（fulfilled）: 意味

2021-03-10 00:14:48 364

原创 React (一) 基础入门用法

React入门什么是 JSX声明式组件化JSX 的具体用法函数组件类组件基本语法标签类型dom 标签自定义标签内联样式标签属性注释拓展运算符的运用组件上的事件只有一个顶层的 DomJSX 原理React.createElement参考链接什么是 JSXJSX 的全名是 javascript and XML，是一种可拓展的标记性语言。主要特点是声明式和组件化。声明式React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

2021-03-03 01:39:31 178

原创 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 129

原创 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 314

原创 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 134

原创 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 264 1

原创 ES6基本的语法(九) @decortor 装饰器

@decortor 装饰器@decortor 装饰器修饰私有属性修饰原型上的属性装饰类@decortor 装饰器装饰器的本质还是一种函数修饰私有属性class Fun { constructor(){ this.keyValue = '' } @name myName = 'ccc';}function name(proto, key, descriptor){ console.log(proto, key, descriptor)

2021-02-10 02:01:19 169

原创 ES6基本的语法(八) Class

ClassES6 Class和 ES5 的对比和基本说明Class 基本语法静态方法继承和 superES7 Class 的新特性静态属性和私有属性@decortor 装饰器ES6 Class和 ES5 的对比和基本说明function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};

2021-02-09 00:24:53 215

原创 ES6基本的语法(七) 实现双向绑定（ES6 写法）

实现双向绑定（ES6 写法）Proxy（代理） & （映射）语法和基本使用语法基本使用简单的模拟双向绑定Proxy 的全部方法Proxy（代理） & （映射）Proxy 是在对象之前设置一层“拦截”。外面对该对象的访问，都要先通过这层拦截，可以对外界的访问进行过滤和改写操作。用在这里表示由它来“代理”某些操作，可以译为“代理器”。语法和基本使用语法const p = new Proxy(target, handler) // const p = new Proxy(目标对象,

2021-02-07 15:38:15 222

原创 ES6基本的语法(六) 实现双向绑定（ES5 写法）

实现双向绑定（ES5 写法）什么是双向绑定object.defineProperty描述符介绍存取描述符简单的模拟一下双向绑定数组双向绑定什么是双向绑定首先来说一下单向绑定，单向绑定就是把 Model 绑定到 View，当我们用 JS 代码更新 Model 时，View 就会自动更新。有单向绑定，就有双向绑定。如果用户更新了 View，Model 的数据也自动被更新了，这种情况就是双向绑定。object.definePropertyObject.defineProperty 是 ES5 中双向绑定

2021-02-05 20:27:10 280

原创 ES6基本的语法(五) 箭头函数

箭头函数箭头函数不用写 function返回值可以不写 return，但是有时需要配合{}参数不能重复命名只能作为函数使用不能 new, 没有原型箭头函数中的参数和this箭头函数中的 arguments箭头函数中的 this在全局定义中在局部中定义在函数中可以关注一下箭头函数特点不用写 function只能作为函数使用不能 new, 没有原型参数不能重复命名返回值可以不写 return，但是有时需要配合{}内部 agruments this 由定义时外围最接近一层的非箭头函数的 agrum

2021-02-03 23:17:10 221

原创 ES6基本的语法(四) destructuring 解构赋值

destructuring 解构赋值destructuring 解构赋值数组解构赋值基本用法数组可以使用默认值对象解构赋值基本用法默认值字符串解构赋值基本用法函数解构赋值基本用法默认值可以关注一下destructuring 解构赋值解构也叫解构化赋值:解构过程中，具备赋值和变量声明两个功能。目的在于把等号左右长的相似的两个东西内部的值取出来数组解构赋值基本用法// 可以从数组中提取值，按照对应位置，对变量赋值。let [a, b, c] = [1, 2, 3];// 模式匹配解构let

2021-02-03 23:12:44 141

原创 ES6基本的语法(三) 扩展运算符

扩展运算符扩展运算符具备两个功能，一个 spreed 展开功能 & rest 收集功能。ES6可以处理数组，ES7能处理对象。扩展运算符的使用function sum(...arg){ console.log(arg); // 输出 [5,2,7,1,3,8]}sum(5,2,7,1,3,8);function sum(a,b,...arg){ console.log(a,b) // 输出5,2 console.log(arg); // 输出 [7,1,3,8]

2021-02-02 17:52:00 140

原创 ES6基本的语法(二) const

1.2 constconst 于 let 的共同点不在下面叙述暂时性死区、不能重复声明。const 是用来常量声明的const a;a = 10;// 报错 Uncaught SyntaxError: missing initialization in const declarationconst 不能只声明不赋值。const a = 20;a = 10;// 报错 // TypeError: Assignment to constant variable.const

2021-02-02 17:51:06 239

原创初探 TypeScript（一）TypeScript 数据类型

TypeScript 数据类型介绍 TypeScriptTypeScript 数据类型TypeScript 基本数据类型TypeScript 数组、元组、枚举数组元组枚举函数的相关类型返回值的类型空参数返回值设置返回值类型函数类型TypeScript 对象类型和 typeobject复杂对象类型type 生成类型union type 检查类型 null undefined neverunion type检查类型null & undefinednevernever 的应用场景抛出异常死循环练习介绍

2021-01-30 18:04:55 262

原创我的面试经

目录年前的前端面试总结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 140

原创常用的对象BOM

常用的对象BOM常用的对象BOM一、window 对象1、什么是bom2、BOM 与 DOM （Document Object Model）的关系3、BOM 对象包含以下内容4、重要的BOM4.1.1、innerWidth 和 innerHeight4.1.2、outerWidth 和 outerHeight 属性4.2、pageXOffset 和 pageYOffset 属性4.3、screenLeft、screenTop、screenX、screenY2、window 对象方法1、alert()2、b

2020-12-02 00:40:32 333

空空如也

空空如也