![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ECMAScript
康立志
这个作者很懒,什么都没留下…
展开
-
globalThis获得全局对象
globalThisJavascript 在不同的环境获取全局对象有不通的方式:node 中通过 globalweb 中通过 window, self 等.TIPself:打开任何一个网页,浏览器会首先创建一个窗口,这个窗口就是一个window对象,也是js运行所依附的全局环境对象和全局作用域对象。self 指窗口本身,它返回的对象跟window对象是一模一样的。也正因为如此,window对象的常用方法和函数都可以用self代替window。self.setTimeout(() => {原创 2020-06-27 21:18:50 · 582 阅读 · 0 评论 -
Promise.allSettled()(ES11)
Promise.allSettledPromise.allSettled()Promise.allSettled()学习了ES新特性,我们都知道 Promise.all() 具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常(reject),所有任务都会挂掉,Promise直接进入 reject 状态。场景:现在页面上有三个请求,分别请求不同的数据,如果一个接口服务异常,整个都是失败的,都无法渲染出数据Promise.all([ Promise.reject({原创 2020-06-27 21:16:11 · 525 阅读 · 0 评论 -
BigInt类型(ES11)
BigIntBigInt方式一:数字后面增加n方式二:使用 BigInt 函数BigInt在 ES10 增加了新的原始数据类型:BigInt,表示一个任意精度的整数,可以表示超长数据,可以超出2的53次方。Js 中 Number类型只能安全的表示-(2^53-1)至 2^53-1 范的值console.log(2 ** 53) // es7 幂运算符console.log(Number.MAX_SAFE_INTEGER) // 最大值-1使用 BigInt 有两种方式:方式一:数字后面增加n原创 2020-06-27 21:14:41 · 1296 阅读 · 0 评论 -
Dynamic Import动态引入
Dynamic ImportDynamic Import案例Dynamic Import按需 import 提案几年前就已提出,如今终于能进入ES正式规范。这里个人理解成“按需”更为贴切。现代前端打包资源越来越大,打包成几M的JS资源已成常态,而往往前端应用初始化时根本不需要全量加载逻辑资源,为了首屏渲染速度更快,很多时候都是按需加载,比如懒加载图片等。而这些按需执行逻辑资源都体现在某一个事件回调中去加载。案例页面上有一个按钮,点击按钮才去加载ajax模块。const oBtn = documen原创 2020-06-27 21:13:14 · 6090 阅读 · 0 评论 -
String.prototype.matchAll()和正则表达式匹配字符串对象方法
String.prototype.matchAll和正则表达式匹配字符串对象方法String 扩展String.prototype.matchAll()RegExp.prototype.exec() with /gString.prototype.match() with /gString.prototype.replace()String.prototype.matchAll 方法/g作用String 扩展String.prototype.matchAll()matchAll() 方法返回一个包含所原创 2020-06-27 20:26:45 · 576 阅读 · 0 评论 -
Symbol.prototype.description()(获取Sympol中的描述符)(ES10)
Symbol 扩展Symbol 扩展Symbol.prototype.descriptionSymbol 扩展Symbol.prototype.description我们知道,Symbol 的描述只被存储在内部的 Description ,没有直接对外暴露,我们只有调用 Symbol 的 toString() 时才可以读取这个属性:const name = Symbol('es')console.log(name.toString()) // Symbol(es)console.log(name原创 2020-06-27 19:28:43 · 412 阅读 · 0 评论 -
Function.prototype.toString()返回函数字符串
Function.prototype.toString()Function.prototype.toString()Function.prototype.toString()函数是对象,并且每个对象都有一个 .toString() 方法,因为它最初存在于Object.prototype.toString() 上。所有对象(包括函数)都是通过基于原型的类继承从它继承的。这意味着我们以前已经有 funcion.toString() 方法了。Function.prototype.toString() 方法返原创 2020-06-27 19:25:55 · 425 阅读 · 0 评论 -
Array 数组扁平(ES10)
Array 扩展Array 扩展Array.prototype.flat()Array.prototype.flatMap()Array 扩展Array.prototype.flat()flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。语法const newArray = arr.flat(depth)解释参数 含义 必选depth 指定要提取嵌套数组的结构深度,默认值为 1 N示例const numbers = [1, 2原创 2020-06-27 19:23:40 · 216 阅读 · 0 评论 -
String 扩展(删除空格)
String 扩展(删除空格)String 扩展(删除空格)String.prototype.trimStart()String.prototype.trimEnd()String 扩展(删除空格)String.prototype.trimStart()trimStart() 方法从字符串的开头删除空格,trimLeft()是此方法的别名。语法str.trimStart()或str.trimLeft()注意虽然 trimLeft 是 trimStart 的别名,但是你会发现 Strin原创 2020-06-27 19:17:51 · 154 阅读 · 0 评论 -
Object.fromEntries()(ES10)
Object.fromEntriesObject.fromEntries()案例1:Object 转换操作案例2:Map 转 Object案例2:过滤Object.fromEntries()方法 Object.fromEntries() 把键值对列表转换为一个对象,这个方法是和 Object.entries() 相对的。Object.fromEntries([ ['foo', 1], ['bar', 2]])// {foo: 1, bar: 2}案例1:Object 转换操作原创 2020-06-27 19:14:59 · 291 阅读 · 0 评论 -
模板字符串(ES9)
模板字符串字符串扩展字符串扩展放松对标签模板里字符串转义的限制, 遇到不合法的字符串转义返回undefined,并且从raw上可获取原字符串。ES9开始,模板字符串允许嵌套支持常见转义序列,移除对ECMAScript在带标签的模版字符串中转义序列的语法限制。带标签的模板字符串const foo = (a, b, c, d) => { console.log(a) console.log(b) console.log(c) console.log(d)}//原创 2020-06-27 19:11:22 · 157 阅读 · 0 评论 -
Promise.prototype.finally(ES9)
Promise.prototype.finallyPromise.prototype.finally()场景1:loading关闭场景2:数据库断开链接Promise.prototype.finally()指定不管最后状态如何都会执行的回调函数。Promise.prototype.finally() 方法返回一个Promise,在promise执行结束时,无论结果是fulfilled或者是rejected,在执行then()和catch()后,都会执行finally指定的回调函数。这为指定执行完pro原创 2020-06-27 19:09:07 · 203 阅读 · 0 评论 -
Rest & Spread(ES9对对象的操作)
Rest & Spread(ES9)在 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 对象,这个功能很实用。我们再来看下 Object原创 2020-06-27 15:24:55 · 190 阅读 · 0 评论 -
for await of异步迭代器(ES9)
for await of异步迭代器for await offor await of异步迭代器(for-await-of):循环等待每个Promise对象变为resolved状态才进入下一步。我们知道 for…of 是同步运行的,有时候一些任务集合是异步的,那这种遍历怎么办呢?function Gen(time) { return new Promise(function(resolve, reject) { setTimeout(function() {原创 2020-06-27 15:22:48 · 4386 阅读 · 2 评论 -
String 填充(ES8)
String 填充String 扩展String.prototype.padStart()场景1:日期格式化场景2:数字替换String.prototype.padEnd()场景:时间戳统一长度String 扩展在 ES8 中 String 新增了两个实例函数 String.prototype.padStart 和 String.prototype.padEnd,允许将空字符串或其他字符串添加到原始字符串的开头或结尾。String.prototype.padStart()把指定字符串填充到字符串头部原创 2020-06-27 14:32:36 · 549 阅读 · 0 评论 -
Object扩展(ES8)
Object 扩展Object 扩展Object.values()Object.entries()Object.getOwnPropertyDescriptors()Object 扩展之前的语法如何获取对象的每一个属性值const obj = { name: 'imooc', web: 'www.imooc.com', course: 'es'}console.log(Object.keys(obj))const res = Object.keys(obj).map(ke原创 2020-06-27 13:41:10 · 145 阅读 · 0 评论 -
async / await(ES8异步)
async / awaitasync / await基本语法对于失败的处理应用async / awaitasync 和 await 是一种更加优雅的异步编程解决方案,是Promise 的拓展。在我们处理异步的时候,比起回调函数,Promise的then方法会显得较为简洁和清晰,但是在处理多个彼此之间相互依赖的请求的时候,就会显的有些繁琐。这时候,用async/await更加优雅。我们知道 JavaScript 是单线程的,使用 Promise 之后可以让我们书写异步操作更加简单,而 async 是让原创 2020-06-27 13:13:28 · 185 阅读 · 0 评论 -
幂运算符**(ES7)
幂运算符**幂运算符**幂运算符**如果不使用任何函数,如何实现一个数的求幂运算?function pow(x, y) { let res = 1 for (let i = 0; i < y; i++) { res *= x } return res}pow(2, 10)// 1024除了自己封装函数来实现,也可是使用 Math.pow() 来完成。Math.pow() 函数返回基数(base)的指数(exponent)次幂。con原创 2020-06-27 11:38:48 · 3196 阅读 · 0 评论 -
Array.prototype.includes()(ES7扩展)
Array.prototype.includes()在 ES7 之前想判断数组中是否包含一个元素,基本可以这样写:console.log(array1.find(function(item) { return item === 2}))或者console.log(array1.filter(function(item) { return item === 2}).length > 0)ES7引入的Array.prototype.includes() 方法用来判断一个数原创 2020-06-27 11:35:32 · 162 阅读 · 0 评论 -
Module(ES6)
ModuleModule模块化的发展CommonJS规范 Node中模块化规范AMD规范, 异步模块定义CMD规范ES6规范exportasexport defaultimportModule模块化的发展技术的诞生是为了解决某个问题,模块化也是。 随着前端的发展,web技术日趋成熟,js功能越来越多,代码量也越来越大。之前一个项目通常各个页面公用一个js,但是js逐渐拆分,项目中引入的js越来越多. 在js模块化诞生之前,开发者面临很多问题:全局变量污染:各个文件的变量都是挂载到window对象上,原创 2020-06-27 00:43:18 · 144 阅读 · 0 评论 -
Iterator
Iterator处理集合中的每个项是很常见的操作。JavaScript 提供了许多迭代集合的方法,从简单的for循环到map()和filter()。迭代器和生成器将迭代的概念直接带入核心语言,并提供了一种机制来自定义for…of循环的行为。如果对 MDN 这个描述理解不是很到位的话,可以看下接下来这个小示例:let authors = { allAuthors: { fiction: [ 'Agatha Christie', 'J原创 2020-06-26 22:41:13 · 87 阅读 · 0 评论 -
Generator函数
Generator函数Generator常规循环利用 Generator基本语法yield 表达式方法-next([value])- return()- throw()场景1场景2Generator什么是 JavaScript Generators 呢?通俗的讲 Generators 是可以用来控制迭代器的函数。它们可以暂停,然后在任何时候恢复。如果这句话不好理解,可以看下接下来的示例。常规循环for (let i = 0; i < 5; i += 1) { console.log(i原创 2020-06-26 21:18:55 · 683 阅读 · 0 评论 -
promise(ES6)
promiseES6promise基本语法Promise.prototype.then()Promise.prototype.catch()Promise的静态方法Promise.resolve()Promise.reject()Promise.all()Promise.race()把前篇博客中Callback Hell的代码改写成promise的写法promise基本语法Promise 就是为了解决“回调地狱”问题的,它可以将异步操作的处理变得很优雅。回调地狱,代码难以维护, 常常第一个的函数的输出原创 2020-06-26 19:14:57 · 180 阅读 · 0 评论 -
异步操作和ajax原理以及回调地狱
异步操作和ajax原理以及回调地狱异步操作JS是单线程的Ajax原理Callback Hell异步操作JS是单线程的就是同一个时间只能处理一个任务。就类似生活中的去超市排队结账,正常情况下,一位收银员只能为一位顾客结账,其他顾客需要在后面排队等候。为什么 JS 是单线程的?作为浏览器脚本语言,JavaScript 的主要用途是与用户互动,以及操作 DOM 。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定 JavaScript同时有两个线程,一个线程在某个 DOM 节点上添加内容,另一原创 2020-06-26 14:42:49 · 275 阅读 · 0 评论 -
Reflect对象
Reflect对象Reflect设计目的常用方法Reflect.apply()Reflect.construct()Reflect.defineProperty()Reflect.deleteProperty()Reflect.get()Reflect.getOwnPropertyDescriptor()Reflect.getPrototypeOf()Reflect.has()Reflect.isExtensible()Reflect.ownKeys()Reflect.preventExten原创 2020-06-26 13:34:03 · 448 阅读 · 0 评论 -
Proxy代理(ES6)
Proxy代理Proxy基本语法语法解释常用拦截操作getsethasownKeysdeletePropertyapplyconstructProxy在 ES6 标准中新增的一个非常强大的功能是 Proxy,它可以自定义一些常用行为如查找、赋值、枚举、函数调用等。通过 Proxy 这个名称也可以看出来它包含了“代理”的含义,只要有“代理”的诉求都可以考虑使用 Proxy 来实现。基本语法语法let p = new Proxy(target, handler)解释MDN 给出的解释偏官方,通俗原创 2020-06-26 12:25:24 · 348 阅读 · 0 评论 -
ES6中二进制和八进制的表达方法以及Math和Number的扩展
ES6中二进制和八进制的表达方法以及Math和Number的扩展Number二进制与八进制新增方法Number.isFinite()Number.isNaN()Number.parseInt()Number.parseFloat()Number.isInteger()Number.MAX_SAFE_INTEGERNumber.MIN_SAFE_INTEGERNumber.isSafeInteger()Math扩展Math.trunc()Math.sign()Math.cbrt()Number二进制与八进原创 2020-06-25 23:08:19 · 415 阅读 · 0 评论 -
ES6中字符串的扩展
ES6中字符串的扩展Unicode表示法模板字符串ES6中字符串的扩展方法String.prototype.fromCodePoint()String.prototype.includes()String.prototype.startsWith()String.prototype.endsWith()String.prototype.repeat()Unicode表示法ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。"\u原创 2020-06-25 22:13:13 · 150 阅读 · 0 评论 -
Map和WeakMap
Map和WeakMapMap基本语法实例化添加数据删除数据统计数据查询数据遍历方式Object 和Map的区别键的类型键的顺序键值对的统计键值对的遍历性能WeekMapWeakMap与Map的区别(WeakMap是弱引用)MapES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的**范围不限于字符串,各种类型的值(包括对象)都可以当作键。**也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要原创 2020-06-25 21:23:55 · 205 阅读 · 0 评论 -
Set和WeakSet
Set和WeakSetset数据结构基本语法生成 Set 实例添加数据删除数据使用方法统计数据数组去重合并去重交集差集遍历方式WeakSetset数据结构在 JavaScript 里通常使用 Array 或 Object 来存储数据。但是在频繁操作数据的过程中查找或者统计并需要手动来实现,并不能简单的直接使用。 比如如何保证 Array 是去重的,如何统计 Object 的数据总数等,必须自己去手动实现类似的需求,不是很方便。 在 ES6 中为了解决上述痛点,新增了数据结构 Set 和 Map,它们分别原创 2020-06-25 20:47:55 · 141 阅读 · 0 评论 -
Symbol数据类型
Symbol数据类型Symbol声明方式Symbol.for()Symbol.keyFor()symbol的用处作为属性名属性遍历(隐藏属性名)消除魔术字符串SymbolES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型原创 2020-06-25 18:31:48 · 233 阅读 · 0 评论 -
类与继承与静态属性和方法(ES5与ES6)
类与继承(ES5与ES6)声明类ES5中的class声明ES6中的class声明Setters & Getters静态属性和方法继承Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。这是摘自阮一峰老师的博客,这句话放在 ES5 可以说不为过,然而到了 ES6 这么说就已经不严谨了。因为 ES6 中已经有了专属的 class 语法了。有的同学喜欢函数式的编程方原创 2020-06-25 16:41:28 · 617 阅读 · 1 评论 -
深拷贝和浅拷贝(自定义基本数据类型和数组、对象深拷贝函数)
深拷贝和浅拷贝定义深拷贝:浅拷贝:通过JSON对象的方法实现深拷贝自定义基本数据类型和数组对象深拷贝函数定义深拷贝:目标对象=源对象=>只存储源对象的数据内容,源对象内容改变不会影响目标对象内容。浅拷贝:目标对象=源对象=>只存储源对象的数据地址,源对象内容改变影响目标对象内容。通过JSON对象的方法实现深拷贝let obj1 ={ name:klz, age:22}let str=JSON.stringify(obj1);let obj2=JSON.parse(str)原创 2020-06-25 14:07:42 · 208 阅读 · 0 评论 -
ES6对象操作方法和遍历对象
ES6对象操作方法和遍历对象属性简洁表示法Object.is()Object.assign()使用...合并对象对象的遍历方式for...in遍历对象Object.keys()用于返回对象所有key组成的数组。Object.getOwnPropertyNames()用于返回对象所有key组成的数组。Reflect.ownKeys()用于返回对象所有key组成的数组。属性简洁表示法在 ES6 之前 Object 的属性必须是 key-value 形式,如下: let name = 'xiecheng'原创 2020-06-25 12:22:50 · 561 阅读 · 0 评论 -
箭头函数
箭头函数箭头函数函数声明函数的声明和参数写的很清楚了,那么对于返回值有什么要注意的地方呢?拓展(箭头函数中的this)总结箭头函数函数声明箭头函数可以说是 ES6 很大的福利了,不管你是函数式爱好者还是面向对象开发者,函数是必须要用到的东西。之前声明函数需要使用 function,如下:function hello() { console.log('say hello')}// 或let hello = function() { console.log('say hello'原创 2020-06-25 12:08:33 · 97 阅读 · 0 评论 -
...Rest参数和扩展运算符(ES5和ES6的求和运算方法)
...Rest参数和扩展运算符Rest 参数ES5中的求和运算ES6中的求和运算扩展运算符小技巧(ES6中的数组合并)Rest 参数在写函数的时候,部分情况我们不是很确定参数有多少个,比如求和运算,之前都是这么做的:ES5中的求和运算function sum() { let num = 0 Array.prototype.forEach.call(arguments, function(item) { num += item * 1 }) return原创 2020-06-25 10:45:16 · 572 阅读 · 0 评论 -
ES6函数的默认参数和length、name属性
ES6函数的默认参数和length、name属性默认参数函数的length属性函数的name属性默认参数对于函数而言,经常会用到参数,关于参数的默认值通常都是写在函数体中,如在 ES5 的时候大家都会这么写:function foo(x, y) { y = y || 'world' console.log(x, y)}foo('hello', 'imooc')foo('hello', 0)//无法赋值0当一个函数有很多参数涉及初始化的时候,这样写代码极其丑陋,所以在 ES6原创 2020-06-25 01:18:20 · 370 阅读 · 0 评论 -
数组操作方法(ES6)
数组操作方法Array.from()instanceof判断数据类型细讲Array.of()Array.prototype.fill()技巧:用 fill 初始化为一个长度固定,元素为指定值的数组。Array.prototype.find()Array.prototype.findIndex()Array.prototype.copyWithin()Array.from()instanceof判断数据类型数组是开发中经常用到的数据结构,它非常好用。在 JavaScript 的世界里有些对象被理解为数组原创 2020-06-24 23:13:54 · 176 阅读 · 0 评论 -
数组的遍历方法(ES5和ES6)
数组的遍历for循环forEach() 没有返回值,只是针对每个元素调用funcmap() 返回新的数组,每个元素为调用func的结果filter() 返回符合func条件的元素数组some() 返回boolean,判断是否有元素符合func条件every() 返回boolean,判断每个元素都符合func条件reduce() 接收一个函数作为累加器for...in 是否可以遍历数组。ES6 中数组遍历方式 for...ofES5 中数组遍历方式let arr = [1, 2, 3, 2, 4]for原创 2020-06-24 22:58:56 · 1201 阅读 · 0 评论 -
解构赋值 Desctructuring
解构赋值 Desctructuring数组解构赋值赋值元素可以是任意可遍历的对象左边的变量循环体当然,对于 map 对象依然适用:可以跳过赋值元素rest 参数默认值对象解构赋值基本用法默认值rest 运算符字符串解构赋值解构赋值解决大量参数传递如何在业务开发中对接口数据进行解构赋值呢?在 ES6 中新增了变量赋值的方式:解构赋值。允许按照一定模式,从数组和对象中提取值,对变量进行赋值。如果对这个概念不了解,我们可以快速展示一个小示例一睹风采:let arr = [1, 2, 3]let a = ar原创 2020-06-24 22:41:16 · 155 阅读 · 0 评论