张营的技术博客

文章目录1. ES6-11思维导图2. 环境安装3. 构建开发环境1. ES6-11思维导图看到这么多特性，是不是很慌，不要着急，总会学会的~2. 环境安装Node 环境安装下载地址：https://nodejs.org/zh-cn/注意：请下载长期支持版本（LTS）安装完成，在终端输入：node -v 出现版本号则表示安装成功，本课程使用版本：v14.16.0：$ node -vv14.16.0NRM (npm registry manager)安装$ npm install

文章目录1. 作用域2. let3. const1. 作用域常见的作用域主要分为几个类型：全局作用域、函数作用域、块状作用域、动态作用域。对象类型global/window全局作用域function函数作用域（局部作用域）{}块状作用域this动态作用域全局作用域变量在函数或者代码块 {} 外定义，即为全局作用域。不过，在函数或者代码块{} 内未定义的变量也是拥有全局作用域的（不推荐）。var course = "es"// 此处可调用 co

文章目录1. 数组解构赋值2. 对象解构赋值3. 字符串解构赋值在 ES6 中新增了变量赋值的方式：解构赋值。允许按照一定模式，从数组和对象中提取值，对变量进行赋值。如果对这个概念不了解，我们可以快速展示一个小示例一睹风采：let arr = [1, 2, 3]let a = arr[0]let b = arr[1]let c = arr[2]ES6 中就可以用解构赋值这样写：let [a, b, c] = [1, 2, 3]1. 数组解构赋值赋值元素可以是任意可遍历的对象赋值的元

文章目录1. ES5 中数组遍历方式2. ES6 中数组遍历方式 for...of3. Array.from()4. Array.of()5. Array.prototype.fill()6. Array.prototype.find()7. Array.prototype.findIndex()8. Array.prototype.copyWithin()1. ES5 中数组遍历方式let arr = [1, 2, 3, 2, 4]// for循环for (let i = 0; i < ar

文章目录1. 默认参数2. Rest 参数3. 扩展运算符4. length属性5. name属性6. 箭头函数1. 默认参数ES5 的时候大家都会这么写：function foo(x, y) { y = y || 'world' console.log(x, y)}foo('hello', 'imooc')foo('hello', 0)ES6中可以把默认参数写在参数列表：function foo(x, y = 'world') { console.log(x, y

文章目录1. 属性简洁表示法2. 属性名表达式3. Object.is()4. Object.assign()5. in6. 对象的遍历方式1. 属性简洁表示法ES5表示Object必须是 key: value 形式：let name = 'hello'let age = 18let obj = { name: name, age: age, study: function() { console.log(this.name + '正在学习') }

文章目录1. 声明类2. Setters & Getters3. 静态方法4. 继承Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。对于面向对象编程而言，更关注类的声明、属性、方法、静态方法、继承、多态、私有属性。1. 声明类ES5 中声明（构造方法）：let Animal = function(type) { // 属性 this.type

文章目录1. 声明方式2. Symbol.for()3. Symbol.keyFor()4. 作为属性名5. 属性遍历6. 消除魔术字符串ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是

文章目录1. 基本语法2. 遍历方式3. WeakSet在 JavaScript 里通常使用Array或Object来存储数据。 在 ES6 中，新增了数据结构 Set 和 Map，它们分别对应传统数据结构的“集合”和“字典”。首先，我们先来学习下 Set 数据结构。ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。1. 基本语法// 生成Set实例,可初始化为空let s = new Set()// 初始化的参数必须是可遍历的，可以是数组或者自定义遍历的数

文章目录1. 基本语法2. 遍历方式3. WeekMapES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。1. 基本语法let map = new Map([1,'one'],[2,'two'])Map中可以是一个数组或者其

文章目录1. Unicode表示法2. 遍历器接口3. 模板字符串4. 扩展方法1. Unicode表示法ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。"\u0061" // "a"但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。"\uD842\uDFB7"// "????""\u20BB7"// " 7"如果直接在\u后面跟上超过0xFF

文章目录1. y修饰符2. u修饰符1. y修饰符ES6为正则表达式添加了y修饰符，叫做“粘连”（sticky）修饰符。y修饰符的作用与g修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于，g修饰符只要剩余位置中存在匹配就可，而y修饰符确保匹配必须从剩余的第一个位置开始，这也就是“粘连”的涵义。const s = 'aaa_aa_a'const r1 = /a+/gconst r2 = /a+/yr1.exec(s) // ["aaa"]r2.exec(s

文章目录1. 二进制与八进制2. 新增方法3. Math扩展1. 二进制与八进制ES5 中进制转换：const a = 5 console.log(a.toString(2)) // 转换成2进制 101const b = 101console.log(parseInt(b, 2)) // 2进制转换成10进制 5ES6 中提供了二进制和八进制新的写法， 分别用前缀0b（或0B）和0o（或0O）表示。const a = 0B0101console.log(a) // 5const

文章目录1. 基本语法2. 拦截操作场景3. 常用操作在 ES6 标准中新增的一个非常强大的功能是 Proxy，它可以自定义一些常用行为如查找、赋值、枚举、函数调用等。通过 Proxy 这个名称也可以看出来它包含了“代理”的含义，只要有“代理”的诉求都可以考虑使用 Proxy 来实现。1. 基本语法let p = new Proxy(target, handler)参数含义target用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）

文章目录1. 设计目的2. 常用方法Reflect对象与Proxy对象一样，也是ES6 为了操作对象而提供的新 API。1. 设计目的将Object属于语言内部的方法放到Reflect上let obj = {}let newVal = ''Reflect.defineProperty(obj, 'name', { get() { return newVal }, set(val) { newVal = val }})obj.

文章目录1. 异步操作2. Promise 基本语法3. Promise.prototype.then()4. Promise.prototype.catch()5. Promise.resolve()6. Promise.reject()7. Promise.all()8. Promise.race()1. 异步操作JS是单线程单线程，即同一个时间只能处理一个任务。为什么 JS 是单线程的？作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM 。这决定了它只能是单线程

文章目录1. 基本语法2. 应用场景通俗的讲 Generators 是可以用来控制迭代器的函数。// 常规循环for (let i = 0; i < 5; i += 1) { console.log(i)}// 利用 Generatorfunction* generatorForLoop() { for (let i = 0; i < 5; i += 1) { yield console.log(i) }}const genForLoop

文章目录1. 基本语法2. Iterator 接口与 Generator 函数MDN : 处理集合中的每个项是很常见的操作。JavaScript 提供了许多迭代集合的方法，从简单的for循环到map()和filter()。迭代器和生成器将迭代的概念直接带入核心语言，并提供了一种机制来自定义for…of循环的行为。JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的

文章目录1. 模块化的发展2. export3. as4. export default5. import1. 模块化的发展随着前端的发展，web技术日趋成熟，js功能越来越多，代码量也越来越大。之前一个项目通常各个页面公用一个js，但是js逐渐拆分，项目中引入的js越来越多. 在js模块化诞生之前，开发者面临很多问题:全局变量污染：各个文件的变量都是挂载到window对象上，污染全局变量。变量重名：不同文件中的变量如果重名，后面的会覆盖前面的，造成程序运行错误。文件依赖顺序：多个文件之间存在依

在 ES7 之前想判断数组中是否包含一个元素，基本可以这样写：let array1 = [1,2,3,4,5]console.log(array1.find(function(item) { return item === 2}))// 或者console.log(array1.filter(function(item) { return item === 2}).length > 0)ES7引入的Array.prototype.includes()方法用来判断一个数

如果不使用任何函数，如何实现一个数的求幂运算？function pow(x, y) { let res = 1 for (let i = 0; i < y; i++) { res *= x } return res}console.log(pow(2, 10))// 1024除了自己封装函数来实现，也可是使用 Math.pow() 来完成。console.log(Math.pow(2, 10)) // 1024在 ES7 可以这样写

async 和 await 是一种更加优雅的异步编程解决方案，是Promise 的拓展。在我们处理异步的时候，比起回调函数，Promise的then方法会显得较为简洁和清晰，但是在处理多个彼此之间相互依赖的请求的时候，就会显的有些繁琐。这时候，用async/await更加优雅。我们知道 JavaScript 是单线程的，使用 Promise 之后可以让我们书写异步操作更加简单，而 async 是让我们写起 Promise 像同步操作。基本用法前面添加了async的函数在执行后都会自动返回一个Prom

文章目录Object.values()Object.entries()Object.getOwnPropertyDescriptors()ES8之前获取对象的每个属性的value值：const obj = { name: 'xiaoming', course: 'es'}console.log(Object.keys(obj))const res = Object.keys(obj).map(key => obj[key])console.log(res)// ["xia

文章目录1. String.prototype.padStart()2. String.prototype.padEnd()1. String.prototype.padStart()把指定字符串填充到字符串头部，返回新字符串。语法：str.padStart(targetLength [, padString])const str = 'hello'console.log(str.padStart(8, 'x')) // xxxhelloconsole.log(str.padEnd(8, 'y

ES8 允许函数的最后一个参数有尾逗号（Trailing comma）。此前，函数定义和调用时，都不允许最后一个参数后面出现逗号。function aa( param1, param2){}aa( 'foo', 'bar')上面代码中，如果在param2或bar后面加一个逗号，ES8之前就会报错。如果像上面这样，将参数写成多行（即每个参数占据一行），以后修改代码的时候，想为函数aa添加第三个参数，或者调整参数的次序，就势必要在原来最后一个参数后面添加一个逗号。这对于版本管理系

for...of循环用于遍历同步的Iterator接口。新引入的for await...of循环，则是用于遍历异步的Iterator接口。先来看下for...of的效果：function Gen(time) { return new Promise(function(resolve, reject) { setTimeout(function() { resolve(time) }, time) })}function tes

文章目录1. dotAll 模式2. 具名组匹配3. 后行断言1. dotAll 模式正则表达式中，点（.）是一个特殊字符，代表任意的单个字符，但是有两个例外。一个是四个字节的 UTF-16 字符，这个可以用u修饰符解决；另一个是行终止符（line terminator character）。U+000A 换行符（\n）U+000D 回车符（\r）U+2028 行分隔符（line separator）U+2029 段分隔符（paragraph separator）console.log(/

前面讲到 function 的 rest剩余参数和spread扩展运算符，ES9中新增Object的 Rest & Spread 方法：const input = { a: 1, b: 2}const output = { ...input, c: 3}console.log(output) // {a: 1, b: 2, c: 3}这块代码展示了 spread 语法，可以把 input 对象的数据都拓展到 output 对象，这个功能很实用，比如在vue中我们经常

指定不管最后状态如何都会执行的回调函数。Promise.prototype.finally() 方法返回一个Promise，在promise执行结束时，无论结果是fulfilled或者是rejected，在执行then()和catch()后，都会执行finally指定的回调函数。这为指定执行完promise后，无论结果是fulfilled还是rejected都需要执行的代码提供了一种方式，避免同样的语句需要在then()和catch()中各写一次的情况。new Promise((resolve, rej

放松对标签模板里字符串转义的限制, 遇到不合法的字符串转义返回undefined，并且从raw上可获取原字符串。ES9开始，模板字符串允许嵌套支持常见转义序列，移除对ECMAScript在带标签的模版字符串中转义序列的语法限制。带标签的模板字符串：const foo = (a, b, c, d) => { console.log(a) console.log(b) console.log(c) console.log(d)}const name = 'xia

Object.fromEntries() 方法把键值对列表转换为一个对象。const entries = new Map([ ['foo', 'bar'], ['baz', 42]]);const obj = Object.fromEntries(entries);console.log(obj); // {"foo":"bar","baz":42}类似 Array 、 Map 或者其它实现了可迭代协议的可迭代对象都可以使用。// Map 转换为 Objectconst map =

String.prototype.trimStart()trimStart()方法从字符串的开头删除空格，移除原字符串左端的连续空白符并返回一个新字符串，并不会直接修改原字符串本身。trimLeft()是此方法的别名。const greeting = ' Hello world! ';console.log(greeting);// " Hello world! "console.log(greeting.trimStart());// "Hello world! "

Array.prototype.flat()flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。const arr1 = [0, 1, 2, [3, 4]];console.log(arr1.flat());// [0, 1, 2, 3, 4]const arr2 = [0, 1, 2, [[[3, 4]]]];console.log(arr2.flat(2));// [0, 1, 2, [3, 4]]语法：var newArra

在ES10之前我们是这样捕获异常的：try { // tryCode} catch (err) { // catchCode}这里的err是必须的参数，在ES10可以省略这个参数：try { console.log('Foobar') throw new Error()} catch { console.error('Bar')}如果不需要处理错误信息，可以直接省略这个参数，如验证参数是否为json格式，我们只需要返回true或false，并不关心

JSON superset什么是 JSON 超集？，简而言之就是让 ECMAScript 兼容所有JSON支持的文本。 ECMAScript 曾在标准 JSON.parse 部分阐明 JSON 确为其一个子集，但由于 JSON 内容可以正常包含 U+2028行分隔符 与 U+2029段分隔符，而ECMAScript 却不行。JSON.stringify() 增强能力JSON.stringify在 ES10 修复了对于一些超出范围的 Unicode展示错误的问题。因为 JSON 都是被编码成 UTF-

我们知道，Symbol 的描述只被存储在内部的 Description ，没有直接对外暴露，我们只有调用 Symbol 的toString()时才可以读取这个属性：const name = Symbol('es')console.log(name.toString()) // Symbol(es)console.log(name) // Symbol(es)console.log(name === 'Symbol(es)') // falseconsole.log(name.toString()

matchAll()方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。const regexp = /t(e)(st(\d?))/g;const str = 'test1test2';const array = [...str.matchAll(regexp)];console.log(array[0]);// ["test1", "e", "st1", "1"]console.log(array[1]);// ["test2", "e", "st2", "2"]语法：

按需import提案几年前就已提出，如今终于能进入ES正式规范。这里个人理解成“按需”更为贴切。现代前端打包资源越来越大，打包成几M的JS资源已成常态，而往往前端应用初始化时根本不需要全量加载逻辑资源，为了首屏渲染速度更快，很多时候都是按需加载，比如懒加载图片等。而这些按需执行逻辑资源都体现在某一个事件回调中去加载。// 点击按钮才去加载ajax模块const oBtn = document.querySelector('#btn')oBtn.addEventListener('click', ()

在 ES10 增加了新的原始数据类型：BigInt，表示一个任意精度的整数，可以表示超长数据，可以超出2的53次方。Js 中 Number类型只能安全的表示-(2^53-1) 至 2^53-1范的值。可以用在一个整数字面量后面加 n的方式定义一个 BigInt ，如：10n，或者调用函数BigInt()。const theBiggestInt = 9007199254740991n;const alsoHuge = BigInt(9007199254740991);// 900719925474

我们都知道 Promise.all() 具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise直接进入reject 状态。但是，假如几个异步任务都是互不关联的，彼此结果不影响， Promise.all() 就不能使用了，因为如果一个任务失败了，其他的任务也会失败。Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的