pspxuan的博客

generator 函数是 ES6 提供的一种异步编程解决方案。yield 表达式是暂停标记；函数执行到此处会暂停。一个基本的 generator 函数如下。

当浏览器引擎拿到javascript源码时，会将js代码 转为 ast 树，这个过程就是预编译的过程，当 ast 构建完毕时，则代表预编译完毕，可以开始按照 ast 执行代码。

1. 基本功能实现思路：（当前不考虑链式调用）promise 实例化时 会传入一个函数，函数有俩个参数直接执行这个函数根据这两个参数(函数)，去改变函数的状态，并且储存传递的值调用方法时(.then)，根据当前 promise 的状态去做不同的操作调用 .then 时，如果是 resolve 或者 reject 状态, 则直接异步执行当前传入的函数(.then中的函数)；如果是 pending 状态，则当前 promise 没有执行 resolve 或者 reject 函数(可能是异步执行

1.作用ES6 提供了 find 以及 findIndex 方法，可以让我们在数据中根据条件找出需要的项。二者原理相同，都接受一个回调函数。只是一个返回 符合条件的数据，一个返回符合条件的数据下标// find var a = [ { id: 1, name:'张三' }, { id: 2, name:'王五' }] var data = a.find(funct...

看了一个博主的前端基础进阶系列文章，对自己帮助很大。转载链接如下https://segmentfault.com/a/1190000012646488

Vue 项目完成后，因导入了大量的或体积较大的依赖包以及插件，导致项目变得非常臃肿。下面通过几个方面来优化页面的用户体验以及提升页面的响应速度。1. nprogress 页面进度条效果1.1.使用效果在项目中安装使用 nprogress 依赖项，使用户获得更好的用户体验。使用后会在页面载入时出现页面顶部的进度条。效果如下：1.2.安装使用方法( vue ui 面板 )先在项目中下...

先看看一个 axios 基本语法实例axios.get('/adata').then((res) => { console.log(res.data) //data为获取的数据})由上述代码，我们结合 axios.请求方式('请求路径').then((res) => { console.log(res.data) }) 此语法，可以很好地了解到 axios 改如何发送请求并拿...

ES6 导出导入导入： import 模块名 from '模块标识符' 和 import '路径'导出： export defalut 和 export 向外暴露成员NODE 导出导入导入： var 名称 = require(‘模块标识符’)导出： module.exports 和 exports注意：语法要成套使用，不要导出用 node ，导入用 ES6 语法...

ES6 新增了 padStart 方法。padStart （maxLength， fillString）概念：可使用其自动补全字符串的长度参数：maxLength （最大长度）| fillString （补充的字符串）返回值：补全完毕的字符串注意：fillString 可以为数字//情况一let str = '我是字符串'let newStr = str.padStart(8,...

严格模式由 ES5 引入，不属于 ES6变量必须先声明后再使用函数参数不能有同名属性，否则报错不能使用with语句不能对只读属性赋值，否则报错不能使用前缀 0 表示八进制数，否则报错不能删除不可删除的属性，否则报错不能删除变量delete prop，会报错，只能删除属性delete global[prop]eval不会在它的外层作用域引入变量e...

1.块级作用域用 let 取代 var（两者语义相同，无副作用，let在很多情况下更加合适被使用）在全局环境下，const优先使用（常量），const声明有两个好处一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。所有的函数都应该设置为常量。长远来看，JavaScript 可能会有多线程的实现（比如 Intel 公司的 River T...

1.概述ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。Module的好处：不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象...

1.概述1.1.extends关键字Class 可以通过extends关键字实现继承。这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。class Point { // 父类}class ColorPoint extends Point { // 继承父类}上面代码定义了一个ColorPoint类（子类），它通过extends关键字，继承了Point类（父类...

1.简介1.1.概述JavaScript 语言中，生成实例对象的传统方法是通过构造函数。ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到只是新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。...

1.含义ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 本质上它就是 Generator 函数的语法糖。语法糖往往给程序员提供了更实用的编码方式，有益于更好的编码风格，更易读。不过其并没有给语言添加什么新东西。使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。...

1.Promise 对象 是什么？Promise 是异步编程的一种解决方案，相比传统的解决方案——回调函数和事件——更合理和更强大。 ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。Promise，简单说就是一个容器。里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise ...

1.Generator 函数1.1.概述Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返...

1.Iterator（遍历器）1.1.概述JavaScript原有的 用来表示集合的数据结构，数组（Array）对象（Object）ES6又增加了两种Set（类似数组）Map（类似对象）这样就有了 4 种表示集合的数据结构，开发者可以根据自己需求，组合它们，定义自己需要的数据结构。然而这样就需要一种统一的接口机制，来处理所有不同的数据结构。Iterator的作用有三...

此文参考学习于 阮一峰老师《ES6入门》，更多特性以及方法可以点击查看1.概述Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。2.设计目的将 Object 对象语言内部的方法，放到 Reflect 对象上。现阶段，某些方法同时在 Object 和 Reflect 对象上部署。也就是说，很多方法你可以通过 Object 调用，也可以通过Rf...

ProxyProxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（metaprogramming），即对编程语言进行编程。在ES6文章中看到这句概述，我一下很难理解。看了很多了博客综合认识之后，自己对于 Proxy有了一个初步的认识。简单来说，Proxy使用后，可以由自己来定义对象调用的方法。例如：在进行对象属性的调用时，你可以在调用属性时，自己来定义...

get（）get方法用于拦截某个属性的读取操作，可以接受三个参数target：目标对象propKey：属性名receiver（可选）：proxy 实例本身（严格地说，是操作行为所针对的对象）var person = { name: "张三"};var proxy = new Proxy(person, { get: function(target, property...

此文参考学习于 阮一峰老师《ES6入门》，更多特性以及方法可以点击查看1.set1.1.基本用法ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));fo...

1.JS数据类型先来看看 JS传统的数据类型数据类型概述传统 JS 中数据类型分为 基本类型 和 引用类型（1）基本类型Number类型Boolean类型String类型nullundefined基本类型变量间的相互复制var a = 10; //开辟一块内存空间保存变量a的值“10”（基本类型）；var b = a; //给变量 b 开辟一块新的内存空间，将 a 的值...

此文参考学习于 阮一峰老师《ES6入门》，更多特性以及方法可以点击查看1.数值 指数运算符ES2016 新增了一个指数运算符（**）。2 ** 2 // 42 ** 3 // 8多个指数运算符连用时，是从最右边开始计算的。简单来说就是从左至右来计算// 相当于 2 ** (3 ** 2)2 ** 3 ** 2// 512指数运算符可以与等号结合，形成一个新的赋值运算符（**=...

1.属性的简洁表示法1.1.表示方法ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。更加简洁const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};上面代码中，变量foo直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值。下面是另一个例...

1.扩展运算符1.1.基本使用扩展运算符（spread）是三个点（…）。它可以将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, &lt...

1.数组的解构赋值1.1.基本用法ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构ES6允许以下的方式为变量赋值let [a, b, c] = [1, 2, 3];上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。let...

1.形参允许设置默认值ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello参数变量是默认声明...

1.字符的Unicode表示法1.1.允许用/uxxxx表示字符ES6加强了对 Unicode 的支持，允许用/uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。"\u0061" // "a"注意：这种表示法只限于码点在/u0000~/uFFFF之间的字符。超出范围的，用两个字符表示。1.2.大括号表示法"\uD842\uDFB7" // "????""...

1.基本用法1.1定义箭头函数ES6允许了用“箭头”（=>）来定义函数var f = v => v;// 等同于var f = function (v) { return v;};当函数没有参数或者有多个参数（多于一个）时，需要用括号包裹（代表）参数部分var f = () => 5;// 等同于var f = function () { return...

今天开始接触ES6，在ES6文档中学习了var let const的用法与区别，下面来记录一下。1.let命令1.1用途概述let命令用来申声明变量。所声明的变量，只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1花括号内为代码块，其中包裹了用let与...