
ES6
文章平均质量分 55
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 评论 -
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 评论 -
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 评论 -
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 · 211 阅读 · 0 评论 -
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 · 257 阅读 · 0 评论 -
ES6基本的语法(七) 实现双向绑定(ES6 写法)
实现双向绑定(ES6 写法)Proxy(代理) & (映射)语法和基本使用语法基本使用简单的模拟双向绑定Proxy 的全部方法Proxy(代理) & (映射)Proxy 是在对象之前设置一层“拦截”。外面对该对象的访问,都要先通过这层拦截,可以对外界的访问进行过滤和改写操作。用在这里表示由它来“代理”某些操作,可以译为“代理器”。语法和基本使用语法const p = new Proxy(target, handler) // const p = new Proxy(目标对象,原创 2021-02-07 15:38:15 · 262 阅读 · 0 评论 -
ES6基本的语法(六) 实现双向绑定(ES5 写法)
实现双向绑定(ES5 写法)什么是双向绑定object.defineProperty描述符介绍存取描述符简单的模拟一下双向绑定数组双向绑定什么是双向绑定首先来说一下单向绑定,单向绑定就是把 Model 绑定到 View,当我们用 JS 代码更新 Model 时,View 就会自动更新。有单向绑定,就有双向绑定。如果用户更新了 View,Model 的数据也自动被更新了,这种情况就是双向绑定。object.definePropertyObject.defineProperty 是 ES5 中双向绑定原创 2021-02-05 20:27:10 · 369 阅读 · 0 评论 -
ES6基本的语法(五) 箭头函数
箭头函数箭头函数不用写 function返回值可以不写 return,但是有时需要配合{}参数不能重复命名只能作为函数使用不能 new, 没有原型箭头函数中的参数和this箭头函数中的 arguments箭头函数中的 this在全局定义中在局部中定义在函数中可以关注一下箭头函数特点不用写 function只能作为函数使用不能 new, 没有原型参数不能重复命名返回值可以不写 return,但是有时需要配合{}内部 agruments this 由定义时外围最接近一层的非箭头函数的 agrum原创 2021-02-03 23:17:10 · 266 阅读 · 0 评论 -
ES6基本的语法(四) destructuring 解构赋值
destructuring 解构赋值destructuring 解构赋值数组解构赋值基本用法数组可以使用默认值对象解构赋值基本用法默认值字符串解构赋值基本用法函数解构赋值基本用法默认值可以关注一下destructuring 解构赋值解构也叫解构化赋值:解构过程中,具备赋值和变量声明两个功能。目的在于把等号左右长的相似的两个东西内部的值取出来数组解构赋值基本用法// 可以从数组中提取值,按照对应位置,对变量赋值。let [a, b, c] = [1, 2, 3];// 模式匹配 解构let原创 2021-02-03 23:12:44 · 180 阅读 · 0 评论 -
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 · 176 阅读 · 0 评论 -
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 · 294 阅读 · 0 评论 -
我的面试经
目录年前的前端面试总结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 评论 -
ES6基本的语法(一)let
写在最前面2018年7月30日开始不定期的更新ES6的语法文章的主要思路来自:渡一课堂的网上视频课阮老师的ES6标准入门GitHub上的开源内容以及结合自己的项目经验…(如果后期再有补充在弥补)好了,不在废话直接正题ES ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Comput...原创 2018-07-31 00:00:29 · 425 阅读 · 0 评论 -
Promise配合axios
Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件--更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了语法,原生提供了Promise checkLogin: () => {// 返回一个promise对象 return new Promise((resolve, reject) => { axios({ ...原创 2018-07-26 10:57:39 · 6403 阅读 · 0 评论