ES6+ 简介

ES6 简介图片来源于网络，版权归原作者所有1. 前言本节我们将什么是 ES5 ？什么是 ES6 ？为什么要学习 ES6 ？以及 ES6 与 ES5 之间的关系。本教程会通过在 ES5 中使用的知识点，对应的引出在 ES6 的知识点，深入浅出讲解 ES6 为什么会被引入？以及它背后的思想。2. 什么是 ES5ECMAScript 5 是 2009 年发布的 ECMAScript 的标准，由于第四版...

2022/10/19 12:07:55 阅读:143次

ES6 环境配置

ES6 环境配置1. 前言前面我们对 ES6 进行了介绍，本章来介绍一下配置 ES6 的执行环境，用于学习 ES6。现在市面上的大部分浏览器基本上都已经支持 ES6 的绝大部分语法，但是有些语法需要进行转译，或者在特定的环境中才能运行。其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。2. 运行环境2.1 浏览器环境我们最终写的代码都是在浏览...

2022/10/19 12:07:54 阅读:124次

ES6+ let

ES6+ let1. 前言本节我们一起学习下 ES6 中的 let，在 ES5 中变量的方法只有一个 var ，但是使用 var 来定义的变量存在很多缺陷和弊端，ES6 引入了 let 语句来声明变量，同时引入了很多概念，比如块级作用域、暂存死区等等。限制了任意声明变量，提升了程序的健壮性。2. 基本用法let 的使用方法类似于 var，并可以代替 var 来声明变量。{ let name =...

2022/10/19 12:07:54 阅读:125次

ES6+ const

ES6+ const1. 前言上一节我们学习了使用 let 取代 var 声明变量，但是很多情况下，我们希望我们声明的变量不能被修改。在 ES5 中不能直接声明一个常量，如果想声明一个不可修改的变量需要借助 defineProperty 方法。ES6 为了弥补这方面的缺失，新增了 const 语句用于声明一个常量。本节我们还将学习到 let、 const 、 var 的区别。2. 语句使用2.1...

2022/10/19 12:07:54 阅读:141次

ES6+ 展开语法

ES6+ 展开语法1. 前言ES6 新增了 ... 的语法糖，主要用于展开语法和剩余语法中，本节先来说说展开语法。展开语法顾名思义可以理解为把整体展开成个体，在 ES5 中如果想把一个数组的内容拷贝到另一个数组中，可以使用 for 循环数组的每一项，然后添加到目标数组中去。但是如果使用展开语法就很方便地完成这个操作了。下面我们就来看看展开语法是如何使用的。2. 从拷贝说起2.1 数组拷贝在 ES5...

2022/10/19 12:07:55 阅读:126次

ES6+ 剩余参数

ES6+ 剩余参数1. 前言上节我们学习了展开语法，本节我们学习与之相反的操作 —— 剩余语法（Rest syntax 也可以叫剩余参数）看起来和展开语法完全相同都是使用 ... 的语法糖，不同之处在于剩余参数用于解构数组和对象。从某种意义上说，剩余语法与展开语法是相反的：展开语法将数组展开为其中的各个元素，而剩余语法则是将多个元素收集起来成为一个整体。2. 函数参数在讲解剩余参数前，我们先来看看...

2022/10/19 12:07:55 阅读:132次

ES6+ 解构赋值

ES6+ 解构赋值1. 前言本节我们会学习到 ES6 中的解构赋值语法，它是 JavaScript 中的一种表达式。在本节中你可以了解以下内容：什么是解构赋值数组的解构赋值对象的解构赋值如何解构嵌套对象和数组解构赋值就是分解一个数据的结构，并从这数据解构中提取数据的过程，它可以从数组中取出值赋给变量或是将对象中的属性提取出来赋给另一个对象的属性。解构的目的是为了简化提取数据的过程，增强代码的可读性...

2022/10/19 12:07:55 阅读:124次

ES6+ 模版字符串

ES6+ 模版字符串1. 前言ES6 对字符串进行了扩展，使之更具有表达力，在 ES5 中字符串的功能是很单一，只能定义变量，不能在字符串中进行逻辑运算，只能使用 + 通过拼接的方式实现。另外，字符串的拼接和换行都需要借助 + 和 \n 才能实现，很麻烦更容易出错。这无疑限制了我们对字符串的操作。ES6 对 ES5 中存在的问题进行了修复和扩充，本节我们来学习 ES6 中的模版字符串语法，在本节你...

2022/10/19 12:07:55 阅读:131次

ES6+ 箭头函数

ES6+ 箭头函数1. 前言在编程中使用最多的就是函数，在 ES5 中是用 function 关键字来定义函数的，由于历史原因 function 定义的函数存在一些问题，如 this 的指向、函数参数 arguments 等。ES6 规定了可以使用 “箭头” => 来定义一个函数，语法更加简洁。它没有自己的 this、arguments、super 或 new.target，箭头函数表达式更...

2022/10/19 12:07:55 阅读:132次

ES6+ 数值扩展

ES6+ 数值扩展1. 前言ES6 对数值进行了大的改版，在向下兼容的同时，把所有的数值方法由全局移植到了 Number 对象下，在数组和字符串中也做了类似的操作，这样的主要目的是精简全局方法，更加明确的表达方法的含义。另外，ES6 还增加了二进制和八进制的表示方法，并增加了很多数值处理的方法，本节就来看看 ES6 对数值的扩展。2. Number 对象JavaScript 的 Number 对象...

2022/10/19 12:07:55 阅读:120次

ES6+ isFinite()&isNaN()

ES6+ Number.isFinite()&Number.isNaN()1. 前言在 ES5 中，全局下的 isFinite () 和 isNaN () 两种方法存在类型转换，对最终的判断结果存在歧义。ES6 在 Number 对象上，新提供了 Number.isFinite () 和 Number.isNaN () 两个方法，更加健壮地进行数值的判断，接下来让我看看这两种方法。2....

2022/10/19 12:07:55 阅读:137次

ES6+ Number 对象的方法

ES6+ Number 对象的方法1. 前言本节主要讲解 Number 对象下剩余的方法，Number 对象把之前在全局上的方法移植了过来，并对有缺陷的方法进行了补充和修复，上节我们已经学习了全局下的 isFinite() 和 isNaN() 两种方法存在类型转换，对于判断数值来说存在歧义。下面我们来看看，ES6 中移植的没有变的函数和新增的一些函数。2. Number.parseInt()&am...

2022/10/19 12:07:55 阅读:130次

ES6+ Math 对象的扩展

ES6+ Math 对象的扩展1. 前言在编程中遇到数学问题时一般会借助 Math 这个 JavaScript 的内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象，它主要用于 Number 类型。与其他全局对象不同的是，Math 不是一个构造器。Math 的所有属性与方法都是静态的。比如：圆周率的写法是 Math.PI，调用正余弦函数的写法是 Math.sin(x)，x...

2022/10/19 12:07:55 阅读:137次

ES6+ includes()

ES6+ includes()1. 前言字符串查找一直都是程序中的常用操作，在 ES5 中查找一个字符串是否包含另一个字符串，一般有两种思维。一是使用正则的方式来匹配，二是使用 ES5 的方式，如 indexOf、lastIdexOf、search。使用正则比较简单，但是需要对正则语法有一定的了解。一般使用 indexOf() 来进行字符串的查找 ，它会返回查询后第一次出现的指定值的索引，如果未找...

2022/10/19 12:07:56 阅读:125次

ES6+ 字符串的扩展

ES6+ 字符串的扩展1. 前言由于历史原因，在 JavaScript 创建之初，市面上的编码方式还是很混乱的，JavaScript 在创建之初，使用的是 1990 年公布的 UCS-2 的编码方法，使用 2 个字节表示 1 个字符，那时 UTF-8、UTF-16、UTF-32 还没有完全确定。现在的 JavaScript 主要使用的是 UTF-16 来存储的。但针对于纷繁复杂的网页字符是不能完全...

2022/10/19 12:07:55 阅读:141次

ES6+ startsWith()

ES6+ startsWith()1. 前言在 ES5 中用于查找字符串的方法很少，上一节 我们学习了 includes()方法，它是针对整个字符串进行查找的，本节要介绍 ES6 的字符串新增方法 startsWith()，该方法用来判断当前字符串是否以给定的字符串作为开头。字符串查找是有一定的算法的，虽然用 includes() 方法可以判断，无疑只查找字符串的开头算法的时间复杂度是很低的，但...

2022/10/19 12:07:56 阅读:123次

ES6+ endsWith()

endsWith()1. 前言上一节 我们学到了字符串的方法 startsWith() 用于判断是否以一个指定字符串为起始。 本节介绍 ES6 中新增的与之相反的字符串方法 endsWith()，该方法用来判断当前字符串是否是以另外一个给定的子字符串为结尾。2. 方法详情endsWith() 用于判断当前字符串，是否以一个指定字符串为结尾的，如果在字符串的结尾找到了给定的字符则返回 true，否则...

2022/10/19 12:07:56 阅读:126次

ES6+ repeat()

ES6+ repeat()1. 前言本节介绍 ES6 的字符串新增方法 repeat，以一个目标字符串进行声明，对该字符串进行重复操作，但不会改变原字符串。2. 方法详情使用语法：let resultString = str.repeat(count);该方法构造并返回一个新字符串，表示将原字符串重复 n 次，并不会改变原字符串。参数说明：参数描述 count 介于 0 和正无穷大之间的整数: [...

2022/10/19 12:07:56 阅读:127次

ES6+ padStart()

ES6+ padStart()1. 前言本节介绍 ES6 的字符串新增方法 padStart，该方法是字符串补全长度的方法，如果某个字符串不够指定的字符串长度，可以使用此方法在字符串左侧开始位置进行补全。2. 方法详情padStart() 在原字符串开头填充指定的填充字符串直到目标长度并返回一个新的字符串，不会对原字符串进行修改。使用语法：str.padStart(targetLength [,...

2022/10/19 12:07:56 阅读:126次

ES6+ padEnd()

ES6+ padEnd()1. 前言本节介绍 ES6 的字符串新增方法 padEnd 和 padStart 一样也是补全字符串的长度的，但是它的补全位置是在原字符串的右侧末尾进行补全的。此方法会返回一个新的字符串，不会对原字符串进行修改。2. 方法详情padEnd() 在原字符串末尾填充指定的填充字符串直到目标长度并返回一个新的字符串，不会对原字符串进行修改。使用语法：str.padEnd(tar...

2022/10/19 12:07:56 阅读:132次

ES6+ trim()

ES6+ trim()1. 前言本节介绍 ES6 的字符串新增方法 trim()，该方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR 等）。2. 方法详情trim() 的方法返回值是去掉两端空白字符的字符串，并不影响原字符串本身，不接收任何参数。使用语法：str.tri...

2022/10/19 12:07:56 阅读:121次

ES6+ Array.from()

ES6+ Array.from()1. 前言在前端开发中经常会遇到类数组，但是我们不能直接使用数组的方法，需要先把类数组转化为数组。本节介绍 ES6 数组的新增方法 Array.from()，该方法用于将类数组对象（array-like）和可遍历的对象（iterable）转换为真正的数组进行使用。2. 方法详情2.1 基本语法Array.from() 方法会接收一个类数组对象然后返回一个真正的数组...

2022/10/19 12:07:56 阅读:113次

ES6+ of()

ES6+ Array.of()1. 前言本节介绍 ES6 的数组的新增方法 Array.of() 该方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。Array.of() 主要是弥补数组构造函数 Array() 的不足。因为参数个数的不同，导致 Array() 的重载，Array.of 不存在由于参数不同而导致的重载，并且基本上可以用来替代 Array() 或 new Array...

2022/10/19 12:07:56 阅读:118次

ES6+ find()和findIndex()

ES6+ find () 和 findIndex ()1. 前言上一节 我们学习了 includes() 方法用于查找数组，但在数组中我们希望查找一个符合某个条件的元素，在 ES5 中有 filter 方法可以用于过滤符合条件的元素，但是 filter 返回的是一个数组，其实我们只想得到符合条件的值或者索引。本节将学习 ES6 的 find 和 findIndex 方法，丰富了数组查询的方法。2....

2022/10/19 12:07:56 阅读:110次

ES6+ copyWithin()

ES6+ copyWithin()1. 前言在 ES5 中没有对数组内元素的复制和替换，如果要实现数组内的替换需要针对性的操作。而在 ES6 中提供了 copyWithin 方法轻易地实现数组内元素的复制，不会改变原数组的长度。2. 方法详情2.1 基本语法copyWithin 复制原数组指定的项，从 start 到 end 之间的元素；然后替换原数组指定的位置，从 target 开始替换。原数组...

2022/10/19 12:07:56 阅读:126次

ES6+ fill()

ES6+ fill()1. 前言在定义一个数组时，需要给数组设置默认值进行填充，ES6 提供了 fill 方法，类似 copyWithin 都是替换数组中的值，fill 可以替换一个指定的值，copyWithin 则是复制数组中的值去替换指定位置的值，不能指定值。2. 方法详情2.1 基本语法fill 接收一个指定的值，替换数组中的指定位置的值，可以用于初始化默认值的数组。语法使用：arr.fil...

2022/10/19 12:07:56 阅读:120次

ES6+ isArray()

ES6+ Array.isArray()1. 前言在程序中判断数组是很常见的应用，但在 ES5 中没有能严格判断 JS 对象是否为数组，都会存在一定的问题，比较受广大认可的是借助 toString 来进行判断，很显然这样不是很简洁。ES6 提供了 Array.isArray() 方法更加简洁地判断 JS 对象是否为数组。2. 方法详情判断 JS 对象，如果值是 Array，则为 true; 否则为...

2022/10/19 12:07:57 阅读:122次

ES6+ 对象的扩展

ES6+ 对象的扩展1. 前言JavaScript 中对象是非常重要的数据结构，ES6 对对象进行了极大的扩展，使用上也更加简洁。前面我们学习了 扩展语法 和 剩余参数 是对象扩展的其中的一部分，本节和后面几节会对 Object 的扩展进行系统的介绍。后面我们还会学到新的数据结构 Set 和 Map 也是对对象的扩展，另外，还有 Proxy 和 Reflect 也是对象的重大升级。本节主要学习以下...

2022/10/19 12:07:57 阅读:113次

ES6+ flat()

ES6+ flat()1. 前言在开发中有时会遇到对多维数组进行拍平处理，数组的拍平就是将一个嵌套多层的数组进行降维操作，也就是对数值进行扁平化。然而在 ES5 是没有方法能处理这样的需求的，大部分都会借助函数库的方式来实现。本节我们要学习的是 ES6 提供的 flat() 方法，对多维数组进行扁平化操作，而且可以对数组中的空项进行移除。2. ES5 中的处理方法ES5 中没有类似的方法，如果要达...

2022/10/19 12:07:56 阅读:113次

ES6+ 可选链操作符

ES6+ 可选链操作符1. 前言在 ES5 中对于安全地访问对象的深嵌套属性时，首先检查它的上一个属性是否存在，然后才能获取属性的值，否则就会报错：var obj = {}console.log(obj.a)// undefinedconsole.log(obj.a.b)// Uncaught TypeError: Cannot read property ɻ' of undefined上面的代...

2022/10/19 12:07:57 阅读:107次

ES6+ Object.is()

ES6+ Object.is()1. 前言在 ES5 中判断两个值是否相等基本都是使用 == 或 === 来判断，ES6 提供了 Object.is() 方法来判断两个值是否相同，这个方法弥补了使用等号方式判断所存在的问题。2. 方法详情2.1 基本语法Object.is() 会接收两个需要判断的参数，最后返回一个布尔值，如果相同则返回 true 否则返回 false。语法使用：Object.is...

2022/10/19 12:07:57 阅读:113次

ES6+ Object.assign()

ES6+ Object.assign()1. 前言Object 对象的更新 把一个对象复制到另一个对象，在 ES5 中需要循环对象进行拷贝2. 方法详情2.1 基本语法语法使用：Object.assign(target, ...sources)参数解释：参数描述target需要拷贝到的目标对象sources源对象2.2 拷贝对象let target = {};let source = {a: 1,...

2022/10/19 12:07:57 阅读:112次

ES6+ Object.keys()

ES6+ Object.keys()1. 前言我们知道迭代对象可以使用 for...in 循环来做，但 for...in 循环会枚举其原型链上的属性，这使得我们在遍历时需要判断是不是原型链属性。Object.keys() 可以接受一个对象返回一个可枚举的数组，数组中的元素的排列顺序和使用 for...in 循环遍历返回的顺序是一致的。Object.keys() 在 ES5 中就有此方法，但是在设计...

2022/10/19 12:07:57 阅读:119次

ES6+ Object.values()

ES6+ Object.values()1. 前言上一节 我们学习了 Object.keys() 可以获取对象上可枚举属性的 key 作为一个数组，对应的是不是有一个让我们获取对象上所有属性值的方法呢？答案是肯定的，ES6 中提供了 Object.values() 获取可枚举对象上属性的值作为一个数组。2. 方法详情Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组，...

2022/10/19 12:07:57 阅读:112次

ES6+ Object.entries()

ES6+ Object.entries()1. 前言前两节我们学习了获取可枚举对象上属性和属性值作为一个数组的方法 Object.keys() 和 Object.values()，但是我们想把键值对同时获取到怎么办呢？这时 ES6 提供了 Object.entries() 方法用于获取可枚举对象上的属性和值的数组。2. 方法详情Object.entries() 会返回一个二维数组，数组中的每一项是...

2022/10/19 12:07:57 阅读:114次

ES6+ 数据结构扩展

ES6+ 数据结构扩展1. 前言编程语言都具有内建的数据结构，但各种编程语言的数据结构常有不同之处。本文将要说的数据结构就是 JavaScript 内建的数据结构及其属性。我们知道在 JavaScript 中有两种数据类型，一种是基本数据类型，另一种是引用类型。ES5 在数据存储时一般使用 Array 或 Object 来存储数据。然而，在越来越复杂的业务中数组和对象已经不能满足我们对数据的存储要...

2022/10/19 12:07:57 阅读:119次

ES6+ Set

ES6+ Set1. 前言上一节，我们对 ES6 新的数据结构做了简要的介绍，并没有深入的学习。这节我们将深入地学习 Set 数据结构，了解 Set 的存储方式，可以让我们更深入地理解 Set 数据结构。2. 基本用法Set 提供了用于操作数据的几种方法，使用这些方法可以对 Set 上的数据进行增、删、查等操作，具体有以下 5 种方法：方法名描述 add 向 Set 实例中添加值 delete 删...

2022/10/19 12:07:57 阅读:115次

ES6+ WeakSet

ES6+ WeakSet1. 前言上一节我们学习了 Set 数据结构，本节将学习与它类似的数据结构 WeakSet，不同的是 WeakSet 存放的数据是一个弱引用类型。在 JavaScript 中，对象的引用是强保留的，这意味着只要持有对象的引用，它就不会被垃圾回收。JavaScript 属于高级语言， 存在 GC 机制，不需要直接地去操作内存，避免了很多问题。同时也让一些内存泄漏的问题变得更加...

2022/10/19 12:07:57 阅读:116次

ES6+ Map

ES6+ Map1. 前言前面两节我们学习了 Set 的相关内容，本节我们开始学习 Map 数据结构的内容。Map 对象和原生的 Object 类似都是存储数据的，而且也推荐使用 Map 的方式来存储数据。在 ES5 中使用 Object 来存储对象，然而这种存储存在一些问题，比如说 Object 中的键是无序的，Object 的键只能是字符串类型等等。ES6 提供了 Map 数据结构，保存的是键...

2022/10/19 12:07:57 阅读:115次

ES6+ WeakMap

ES6+ WeakMap1. 前言前面我们已经学了 Set 和对应的 WeakSet，Map 对应也有 WeakMap，在学习 WeakSet 时我们已经接触到弱引的相关知识，本节我们将结合 WeakMap 深入的理解弱引用的相关问题。由前面学到的 Set 和 WeakSet 具有很多相似的地方，比如它们存放的都是独一无二的元素。所以，对 Map 和 WeakMap 也可以进行类比，WeakMap...

2022/10/19 12:07:57 阅读:113次

ES6+ Symbol

Symbol1. 前言在 ES5 中基础数据类型有 5 种：Boolean、Null、Undefined、Number、String，ES6 新增了一个基础数据类型 Symbol 符号、代号的意思，它是独一无二的，也就是说使用它声明的变量是独一无二的。引入这个数据类型有什么作用呢？我们知道在 ES5 中， 对象的属性名都是字符串，容易造成属性名冲突。比如，你使用了一个他人提供的对象，但又想为这个对...

2022/10/19 12:07:57 阅读:114次

ES6+ for...of

for…of1. 前言在编程中最常见的就是对数据的遍历操作，ES5 有针对数组和对象的遍历方法，但这些方法或多或少地都会存在一定的问题。为了统一解决这些问题，ES6 给出了终极的解决方案 ——for...of。for...of 对于可迭代的对象（包括：内置的 String、Array、类似数组的对象（arguments 或 NodeList）、TypedArray、Map、Set，和用户定义的可迭...

2022/10/19 12:07:57 阅读:121次

ES6+ 迭代协议

ES6+ 迭代协议1. 前言上一节我们对 ES6 新增的 for...of 做了深入的讲解，它可以用于字符串、数组、类数组、以及新增的数据结构 Map/Set 等进行遍历。但是这些能够使用 for...of 进行遍历的都有一个共同的特性 —— 可迭代。那什么是可迭代呢？ECMAScript 2015 在一组补充规范中规定了两个协议：可迭代协议和迭代器协议。这两个规定不是新的内置实现或语法，而是协议...

2022/10/19 12:07:57 阅读:127次

ES6+ 实现一个简版的 Promise

ES6+ 实现一个简版的 Promise1. 前言上一节我们学习了 ES6 Promise的基本用法，并且我们知道 Promise 最早出现在社区，所以ES6 中 Promise 也是遵循一个标准的规范的。这个规范就是 Promise A+ 规范 也就是任何人都可以遵循这个规范实现一个自己的 Promise，由于每个人实现的方式有所差异，Promise A+ 规范 给出了一些要求和兼容方式。本节我...

2022/10/19 12:07:57 阅读:124次

ES6+ Promise 基础

ES6+ Promise 基础1. 前言我们知道浏览器在渲染网页时，会创建一个渲染进程进行渲染页面，在渲染进程中其中有 GUI 渲染线程和 JS 引擎线程（如 V8 引擎）两个线程是互斥的。也就是说在同一时间内只能有一个线程执行。如果 JavaScript 执行一段耗时程序时会阻止页面渲染。如果要页面快速在用户面前呈现就要做一些优化处理。对于不能立马得到结果的程序，不需要等待，可以放到事件队列中，...

2022/10/19 12:07:57 阅读:117次

ES6+ Promise 进阶

ES6+ Promise 进阶1. 前言前两节我们学习了 Promise 的用法，并且在上一节我们动手实现了一个符合 Promise A+ 规范的简版 Promise。真正了解了 Promise 底层是怎么来实现的，更好地帮助我们理解 Promise 并对 Promise 的扩张打下了基础。对 Promise 的扩展会可以解决一些通用的问题，比如使用 Promise.all() 去并发请求接口。在...

2022/10/19 12:07:58 阅读:117次

ES6+ Generator 基础

ES6+ Generator 基础1. 前言前面我们花了三节深入地学习了 ES6 的异步解决方案 Promise，本节学习的生成器也是为了解决异步而生的，但是它的出发思路和 Promise 截然不同。上节我们学习了 ES6 中 迭代 的相关内容，并实现了一个迭代器。我们知道实现一个迭代器，我们需要手动添加对象的 Symbol.iterator 属性，并需要实现 next 方法。那么有没有什么可以帮...

2022/10/19 12:07:58 阅读:119次

ES6+ Generator 函数应用

ES6+ Generator 函数应用1. 前言上一节我们注意学习了生成器的概念和基本用法，并通过两个案例来说明。但是生成器更加广泛和设计之初是为了解决异步而产生的。我们会通过一个开发中常见的问题入手来看 生成器函数到底是怎么来解决异步调用的问题，并且会实现一个简版的 co 库。2. 案例在开发过程中会遇到一个很常见的需求，我们想获取一个值，但不能直接拿到，我们只能先请求一个接口如：api_1，获...

2022/10/19 12:07:57 阅读:117次

ES6+ async/await

ES6+ async/await1. 前言前面几节我们已经学习了解决异步的方案 Promise 和 Generator，上一节我们也通过一个案例使用 Promise + Generator 实现了一个比较好的异步解决方案。同时我们实现了一个简版的 co 库，让我们在使用 Generator 函数处理异步任务时更加方便，但这不是最完美的解决方案。本节我们将学习 ES7 推出的 async/await...

2022/10/19 12:07:58 阅读:121次

ES6+ Class 前置知识

ES6+ Class 前置知识1. 前言在早期的 JavaScript 中是没类的概念的，如果想要实现类的功能需要通过构造函数来创建，使用 prototype 来实现类的继承。对于一些高级语言如 C++、Java、python 等，都是有类的概念的，而且在这些语言中类是非常重要的。而 JavaScript 由于历史原因在设计最初就没有想要引入类的概念，随着 JavaScript 越来越多地应用到大...

2022/10/19 12:07:58 阅读:115次

ES6+ Class

ES6+ Class1. 前言上一节我们主要回顾了在 ES5 中使用构造函数的方式实现类了，并说明了如何实现类的继承。从上一节的讲解中，构造函数去实现类的继承还是有诸多繁琐的地方的，我们需要考虑子类和父类的关系，继承中的细节都需要自己手动处理。本节我们将要学习 ES6 中的类的基本使用和类的继承。在学习本节我们需要明确的是，ES6 中的类是基于现有语法的原型实现的，并没有引入新的面相对象的模型。它...

2022/10/19 12:07:58 阅读:115次

ES6+ Proxy

ES6+ Proxy1. 前言本节我们将学习 ES6 的新增知识点 ——Proxy，Proxy 是代理的意思。Proxy 是一个对象，用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。这是 MDN 上的定义，但是不容易理解，想要理解 Proxy 我们首先需要知道什么是代理？在日常开发中比较常见的代理常见有，使用 Charles 代理抓包、nginx 服务器的反向代理，以及 VPN...

2022/10/19 12:07:58 阅读:106次

ES6+ Reflect（一）

ES6+ Reflect（一）1. 前言任何一门语言在走向成熟的过程都是趋向精细化和规范化，在 API 设计之初满足当时的需求场景。随着前端的飞速发展，软件复杂度的提升，很多 API 在使用过程中存在很多使用别扭的情况，不符合软件开发的规范。上一节我们学习了 Proxy，Proxy 的设计目的是为了取代 Object.defineProperty，优化性能，使得数据劫持的过程更加规范。本节我们将学...

2022/10/19 12:07:58 阅读:121次

ES6+ Reflect（二）

ES6+ Reflect（二）1. 前言上一节我们学习了 Reflect 的使用和一些基本的API，本节我们将继续学习 Reflect 的一些扩展的API。2 Reflect 扩展方法2.1 Reflect.defineProperty()Reflect.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，基本等同于 Object.definePro...

2022/10/19 12:07:58 阅读:118次

ES6+ 模块化（一）

ES6+ 模块化1. 前言JavaScript 在设计之初主要用来开发 Web 页面的交互、动画和表单验证等单一的功能，而且程序的体积很小，大多数都是独立执行的。随着前端的发展 JavaScript 承接的功能越来越多，Node 的出现让 JavaScript 可以作为一门后端开发语言，程序的复杂度瞬间提升，所以有必要提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制。Node...

2022/10/19 12:07:58 阅读:121次

ES6+ 模块化（二）

ES6+ 模块化扩展1. 前言要深入前端学习时绕不开的是 Node 的学习，而 Node 中自带了模块化系统，Node 中的模块化是基于 CommonJS 规范实现的。而 ES6 中的模块化与之还有很多的不同的地方。现阶段 Node 还依然使用的是 CommonJS 规范，而前端正在逐渐使用 ES6 module 规范。两个规定统一是一个漫长的过程，两者都存在历史遗留问题和兼容问题需要浏览器和 N...

2022/10/19 12:07:58 阅读:120次

ES6实战1-实现Vue3 reactive 源码

ES6实战1-实现 Vue3 reactive 源码1. 前言本节开始我们将进入 ES6 实战课程，首先会花费两节的时间来学习 Vue3 响应式原理，并实现一个基础版的 Vue3 响应式系统；然后通过 Promise 来封装一个真实业务场景中的 ajax 请求；最后我们会聊聊前端开发过程中的编程风格。本实战主要通过对前面 ES6 的学习应用到实际开发中来，Vue3 的响应式系统涵盖了大部分 ES6...

2022/10/19 12:07:58 阅读:118次

ES6实战2-实现 Vue3 effect 源码

ES6实战2-实现 Vue3 effect 源码1. 前言上一节我们实现了 Vue3 的数据劫持功能，并对一些边界值做了处理。但是，当数据改变了我们希望更新试图，这个时候虽然我们能劫持到数据的变化但是没有做任何处理，我们需要对数据的获取和修改增加更新的逻辑，并提供一个 API 给业务用来响应式的处理数据的变化。Vue3 中提供了 effect，当 effect 回调函数中引用的响应式数据变化时，会...

2022/10/19 12:07:58 阅读:116次

ES6 实战2-封装请求

ES6 + 实战 2 - 封装请求1. 前言在学习 Promise 相关小节时我们已经了解了 Promise 的基本用法和 Promise A + 规范，那么在实际项目中我们应该怎么去使用 Promise 来提高我们的效率，并且可以通过 Promise 去封装一些异步方法，让我们在使用过程中更加得心应手。本节我们将模拟一个真实的生产环境来对前端开发中最常见也是最重要的数据请求进行封装。通过使用封装...

2022/10/19 12:07:58 阅读:115次

ES6+ 实战3-代码整洁之道

前端代码整洁之道1. 前言ES6 新增了很多语法和语法糖，在使用这些语法和语法糖的时候我们可以让我们的代码更加优雅。另外，在程序上有一些约定俗成的东西，这样会帮助我们更好地书写和阅读代码。本节我们将学习前端代码的整洁之道帮助你更好地书写你的代码。2. 变量的使用2.1 命名在定义变量时最好使用驼峰命名（如：aaBbCc）的方式，并且要使用有准确意义的变量名，这样容易阅读。// badvar get...

2022/10/19 12:07:58 阅读:117次

ES6 Map原理分析

ES6 Map原理分析:ES6的Map的键可以是任意的数据结构，并且不重复。那么map的底层原理是啥呢？Map利用链表，hash的思想来实现。首先，Map可以实现删除，而且删除的数据可以是中间的值。而链表的优势就是在中间的任意位置添加，删除元素都非常快，不需要移动...

2022/10/19 8:37:25 阅读:122次

ES6module语法加载importexport

ES6module语法加载importexport:这次给大家带来ES6 module语法加载 import export，ES6 module语法加载 import export的注意事项有哪些，下面就是实战案例，一起来看一下。export:暴露，就是把接口暴露出去import:引入，跟字...

2022/10/19 7:38:00 阅读:115次

ES6的循环与可迭代对象示例详解

ES6的循环与可迭代对象示例详解...

2022/10/6 22:48:33 阅读:117次