![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ECMAScript
不要跟我说对不起
这个作者很懒,什么都没留下…
展开
-
ECMAScript-新特性-动态导入、可选链、空值合并运算符
文章目录一、ECMAScript-ES11-新特性1. Dynamic import()2. Optional chaining3. Nullish coalescing Operator一、ECMAScript-ES11-新特性1. Dynamic import()动态导入const btn = document.querySelector('#btn')btn.addEventListener('click', () => { import('./ajax').then(mo原创 2020-12-15 15:11:43 · 167 阅读 · 0 评论 -
ECMAScript-异步迭代
一、ECMAScript-ES9-异步迭代1. for-await-of用于异步迭代2. Symbol.asyncIterator异步可迭代协议3. 举例// 同步操作:Symbol.iteratorconst arr = ['es6', 'es7', 'es8', 'es9']arr[Symbol.iterator] = function () { let nextIndex = 0 return { next() { ret原创 2020-12-15 15:07:54 · 102 阅读 · 0 评论 -
ECMAScript-新的原始数据类型-BigInt
文章目录一. 新的原始数据类型1. BigInt【ES11】一. 新的原始数据类型1. BigInt【ES11】// 最大的数const max = 2 ** 53 console.log(max) // 9007199254740992console.log(Number.MAX_SAFE_INTEGER) // 9007199254740991console.log(max == max + 1) // true// 如果超出9007199254740992怎么办// 可以使原创 2020-12-15 14:57:22 · 305 阅读 · 0 评论 -
ECMAScript-异步编程-async-await
文章目录一、async-await【ES8】1. 用法示例一、async-await【ES8】异步操作又一种解决方案async-await一般是成对出现的async写在function前面1. 用法示例function timeout() { return new Promise(resolve => { setTimeout( ()=> { console.log(1) resolve()原创 2020-12-05 13:55:25 · 112 阅读 · 0 评论 -
ECMAScript-Module
文章目录一、ECMAScript-Module1. 模块化规范2. ES6的模块3. 相关举例一、ECMAScript-Module模块化的优点:不会污染window一处定义,多处使用,不必重复定义很方便的解决模块化存在依赖关系,在es6中,只需要按需导入即可。项目结构更加合理1. 模块化规范CommonJS:Node.jsAMD:require.js 【依赖前置】CMD:sea.js 【依赖后置,阿里,不再维护】ES6【2015年es6的模块化规范】2. ES6的模块e原创 2020-11-26 12:03:42 · 411 阅读 · 0 评论 -
ECMAScript-迭代器
文章目录一、ECMAScript-迭代器-Iterator1. Iterator接口2. 原生具备Iterator接口的数据结构3. 对不具备Iterator接口的数据结构,想实现可遍历一、ECMAScript-迭代器-Iterator1. Iterator接口Iterator是一种接口机制,为各种不同的数据结构提供统一访问的机制主要供for…of 消费让不支持遍历的数据结构 “可遍历”// 举例function makeIterator(arr) { let nextIndex原创 2020-11-24 20:37:49 · 114 阅读 · 0 评论 -
ECMAScript-异步编程-Generator
文章目录一、ECMAScript-异步编程-Generator1. Generator的定义2. Generator的输出yield和执行next3. 发送异步请求一、ECMAScript-异步编程-Generator1. Generator的定义// *符号 function * generator(){ //...}2. Generator的输出yield和执行nextfunction * foo() { for(let i = 0; i < 3; i++) {原创 2020-11-24 20:36:47 · 115 阅读 · 0 评论 -
ECMAScript-异步编程-Promise
文章目录一、 ECMAScript-异步编程-Promise1. MDN定义2. Promise的几种状态3. 相关静态方法4. 相关案例5. 使用promise来改造ajax一、 ECMAScript-异步编程-Promise1. MDN定义Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。 一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像原创 2020-11-23 17:31:51 · 145 阅读 · 0 评论 -
ECMAScript-异步编程-前置
文章目录一、ECMAScript-异步编程-前置1. JS是单线程的2. 同步任务 与 异步任务3. Ajax原理4. Callback Hell 【回调深渊,回调地狱】一、ECMAScript-异步编程-前置1. JS是单线程的 一个时间点,只能处理一个任务。2. 同步任务 与 异步任务同步任务:JS在执行代码的时候,是从上往下,依次执行的。异步任务:当执行的代码,需要延迟一段时间,再来处理相应结果的任务。比如:延迟,网络请求细节:setTimeout() 默认时间是4ms,其原创 2020-11-15 20:43:30 · 85 阅读 · 0 评论 -
ECMAScript-Reflect
文章目录一、Reflect1. 将Object属于语言内部的方法放到Reflect2. 修改某些Object方法的返回结果,让其变得更合理3. 让Object操作变成函数行为4. Reflect对象的方法与Proxy对象的方法一一对应一、ReflectReflect相关的静态方法:Reflect.apply(target, thisArg, args)Reflect.construct(target, args)Reflect.get(target, name, receiver)Reflec原创 2020-11-15 19:02:02 · 88 阅读 · 0 评论 -
ECMAScript-es6-Proxy
文章目录一、ECMAScript-es6-Proxy1. Proxy-代理2. 常用的拦截方法一、ECMAScript-es6-Proxy1. Proxy-代理什么代理在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写.构造代理// ES5的提供的代理方式var obj = {}var newVal = ''Object.defineProperty(obj, 'name', { get(){原创 2020-11-15 12:41:11 · 136 阅读 · 0 评论 -
ECMAScript-es6数值的扩展
文章目录一、ECMAScript-es6数值的扩展1. 二进制0B 八进制0O2. Number.isFinite(),Number.isNaN()3. Number.parseInt(),Number.parseFloat()4. Number.isInteger()5. 0.1 + 0.2 === 0.3 ???6. Math新增方法一、ECMAScript-es6数值的扩展1. 二进制0B 八进制0O// es5中将十进制数 --> 二进制数const a = 5 // 101cons原创 2020-10-26 23:36:33 · 116 阅读 · 0 评论 -
ECMAScript-正则表达式的扩展
文章目录一、ECMAScript-正则表达式的扩展1. y修饰符 粘连修饰符2. u修饰符 unicode 例如:\uD842\uDFB7一、ECMAScript-正则表达式的扩展前提:在ES5中有三个正则修饰符i 忽略大小写m 多行匹配g 全局匹配1. y修饰符 粘连修饰符const str = 'aaa_aa_a'const reg1 = /a+/g // 每次匹配剩余的const reg2 = /a+/y // 剩余的第一个开始匹配,如果匹配不到,从头开始匹配con原创 2020-10-26 22:23:55 · 120 阅读 · 0 评论 -
ECMAScript-es6字符串的扩展
一、ECMAScript-es6字符串的扩展1. 字符串Unicode表示法// es6 \uxxxx \u:表示Unicode字符,xxxx表示码点范围:0000~ffff// 比如:\u20BB7 -> \u20BB+7 是超出范围的 // es6中表示法:\u{20BB7}// 表示一个字符'z'// 1. 就是一个'z'// 2. '\z'// 3. 八进制:\HHH// 4. 十六进制:\xHH// 5. es:\u007A// 6. es:\u{7A}2. 字符原创 2020-10-25 22:24:37 · 121 阅读 · 0 评论 -
ECMAScript-新的数据结构Map
文章目录一、ECMAScript-新的数据结构Set1. 一种新的数据结构2. 常用方法3. 遍历4. 应用场景5. WeakMap一、ECMAScript-新的数据结构Set1. 一种新的数据结构结构类似于对象,键值对的集合。Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。let m = new Map()let obj = { name: 'zhangsan'}m.set('zhangsan', obj) 2. 常用方法// 添加let m = new M原创 2020-10-25 18:25:16 · 189 阅读 · 0 评论 -
ECMAScript-新的数据结构Set
文章目录一、ECMAScript-新的数据结构Set1. 一种新的数据结构2. 常用方法3. 遍历4. 应用场景5. WeakSet一、ECMAScript-新的数据结构Set1. 一种新的数据结构结构类似于数组,但是成员的值都是唯一的,没有重复的值。let s = new Set([1, 2, 3, 2])console.log(s) // Set(3) {1, 2, 3}2. 常用方法// addlet s = new Set([1, 2, 3])s.add('test')c原创 2020-10-25 17:49:30 · 110 阅读 · 0 评论 -
ECMAScript-Symbol
文章目录一、ECMAScript-Symbol1. 一种新的原始数据类型2. 声明方式3. 遍历Symbol属性4. 应用场景一、ECMAScript-Symbol1. 一种新的原始数据类型Javascript语言有6中数据类型:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object),ES6引入了一种新的原始数据类型Symbol,表示独一无二的值,也就是第七种数据类型。2. 声明方式let s1 = Symbol()let s2原创 2020-10-25 13:47:05 · 162 阅读 · 0 评论 -
ECMAScript-es6中的类和继承
文章目录一、es6中的类和继承1. 类的定义和继承,关键字class、extends、constructor、super2. 定义属性,这边注意设置死循环。【set/get】3. 静态方法【static】4. 静态属性的问题一、es6中的类和继承1. 类的定义和继承,关键字class、extends、constructor、superclass People { constructor(name, age) { this.name = name this.age原创 2020-10-24 16:19:19 · 147 阅读 · 0 评论 -
ECMAScript-es5中的类和继承
文章目录一、es5中的类和继承1. 类对象下的方法定义在原型下2. 静态属性/方法3. 静态方法中的this指向4. 类的继承【组合式继承】一、es5中的类和继承1. 类对象下的方法定义在原型下function People(name, age) { this.name = name this.age = age}People.prototype.showName = function(){ console.log('我的名字是' + this.name)}2. 静态属性/方法/原创 2020-10-23 22:44:18 · 128 阅读 · 0 评论 -
ECMAScript-浅拷贝和深拷贝
文章目录一、ECMAScript-浅拷贝和深拷贝1.概念2. Object.assign()存在的问题3. 其他拷贝也存在的问题4. 怎么去实现一个深拷贝一、ECMAScript-浅拷贝和深拷贝1.概念深拷贝:拷贝的对象是新的对象,跟原来的对象不存在共享属性。浅拷贝:拷贝的对象只是引用原对象的属性。图解:我们现在有一个对象在内存中,深拷贝:是两个完全独立的个体浅拷贝:对象和函数部分只是引用2. Object.assign()存在的问题// Object.assign()常常被用原创 2020-10-23 15:25:12 · 215 阅读 · 0 评论 -
ECMAScript-对象的扩展
文章目录一、对象的扩展1. 属性简洁表示法2. 属性名表达式3. Object.is()4. 扩展运算符 与 Object.assign()5. in6. 对象的遍历方式一、对象的扩展1. 属性简洁表示法let name = 'zhangsan'let age = 19let people = { name: name, // 当属性值和属性相同的时候,在es6中可以简写成一个 name age: age}// 等同于let people = { name,原创 2020-10-22 19:24:34 · 129 阅读 · 0 评论 -
ECMAScript-作用域
文章目录一、ECMAScript-作用域1. 什么是作用域2. 常见的作用域分类一、ECMAScript-作用域1. 什么是作用域引用维基百科定义:在电脑程序设计中,作用域(scope,或译作有效范围)是名字(name)与实体(entity)的绑定(binding)保持有效的那部分计算机程序。也就是说:就是管理变量的存储和如何读取制定的规则。通俗的讲就是:定义变量的适用范围。2. 常见的作用域分类对象类型self/global/window/globalThis全局作原创 2020-10-22 16:05:26 · 128 阅读 · 0 评论 -
ECMAScript-箭头函数
文章目录一、ECMAScript-箭头函数1. this指向定义时所在的对象,而不是调用时所在的对象2. 不可以当作构造函数3. 不可以使用arguments对象一、ECMAScript-箭头函数es5中的函数定义// es5中定义函数// 方式一function sum(x, y) { return x + y}// 方式二var sum = function sum(x, y) { return x + y}console.log(sum(4, 5))// 这两原创 2020-10-21 22:52:05 · 211 阅读 · 0 评论 -
ECMAScript-扩展运算符与rest参数
文章目录一、扩展运算符与rest参数...运用1. 扩展运算符:把数组或者类数组展开成用逗号隔开的值2. rest参数:把逗号隔开的值组合成一个数组一、扩展运算符与rest参数…运用1. 扩展运算符:把数组或者类数组展开成用逗号隔开的值// 扩展运算法function foo(a, b, c){ console.log(a, b, c) // 1 2 3}let arr = [1, 2, 3]foo(...arr)// 数组合并let arr1 = [1, 2, 3]let原创 2020-10-21 21:16:50 · 142 阅读 · 0 评论 -
ECMAScript-顶层对象
文章目录一、ECMAScript-顶层对象一、ECMAScript-顶层对象顶层对象,在浏览器环境下指的是window对象,在Node中就是指global对象。ES5中全局变量和顶层对象挂钩在一起【普遍认为败笔之一】,从ES6开始,全局变量和顶层对象进行脱离,但也对ES5进行了兼容。也就造就了var和let/const之间的区别。JavaScript 语言存在一个顶层对象,它提供全局环境(即全局作用域),所有代码都是在这个环境中运行。但是,顶层对象在各种实现里面是不统一的。浏览器里面,顶层对象是原创 2020-10-20 16:34:27 · 123 阅读 · 0 评论 -
ECMAScript-函数的参数
文章目录一、ECMAScript-函数的参数1. 函数默认值2. 与解构赋值的结合3. length属性4. 参数的作用域5. 函数的name属性一、ECMAScript-函数的参数1. 函数默认值function foo(x, y) { y = y || 'es' // 判断y是否传值 console.log(x,y)}foo('hello', 'world')foo('hello', 0) // 这样就存在问题 其实本意是hello 0// es6中场景适配 // 使原创 2020-10-20 08:31:55 · 122 阅读 · 0 评论 -
ECMAScript6-数组的扩展
文章目录一、数组的扩展1. 类数组/伪数组2. Array.from()3. Array.of()4. copyWithin()5. fill()6. includes()一、数组的扩展1. 类数组/伪数组指的就是不是真正意义上的数组,比如:let div1 = document.getElementsByTagName('div')console.log(div1) // HTMLCollection []let div2 = document.getElementsByClassNam原创 2020-10-14 09:23:54 · 159 阅读 · 0 评论 -
ECMAScript-数组的遍历方式
文章目录一、数组的遍历方式【ES5】1. for循环2. forEach():没有返回值,只是针对每个元素调用func3. map():返回新的Array,每个元素为调用func的结果4. filter():返回符合func条件的元素数组5. some():返回boolean,判断是否有元素是否符合func条件6. every():返回boolean,判断每个元素是否符合func条件7. reduce():接收一个函数作为累加器8. for in二、数组的遍历方式【ES6】1. find():返回第一个通过原创 2020-10-11 17:29:55 · 350 阅读 · 0 评论 -
ECMAScript6-常用解构赋值
文章目录一、解构赋值1. 数组解构2. 对象解构3. 字符串解构5. 应用一、解构赋值按照一定模式,从数组和对象中提取值,对变量进行赋值1. 数组解构let arr = [1, 2, 3]// 现在要求取出数组的每一项// 传统的方式let a = arr[0]let b = arr[1]let c = arr[2]console.log(a, b, c) // 1, 2, 3// 在ES6中提供了解构的语法 可以得到数组中的某一项let [a, b, c] = [1, 2,原创 2020-10-11 17:28:15 · 142 阅读 · 0 评论 -
ECMAScript6-新的常量声明方式const几大优点
文章目录一、常量声明方式const相关特性一、常量声明方式const相关特性前置:ES5中定义一个常量通过Object.defineProperty的方式,比如:Object.defineProperty(window, "PI", { value: 3.14, writable: false, // 是否可写,即使后期赋值也不能被改变});console.log(PI);// 再次赋值PI = 6console.log(PI); // 依旧是3.14 cons原创 2020-10-11 08:46:17 · 256 阅读 · 0 评论 -
ECMAScript6-新的变量声明方式let几大优点
文章目录一、let相关特性1. let 声明的全局变量不是全局对象window的属性2. 用let定义变量不允许重复声明3. let声明的变量不存在变量提升4. let声明的变量具有暂时性死区5. let 声明的变量拥有块级作用域一、let相关特性1. let 声明的全局变量不是全局对象window的属性再说这个之前先了解下ES5之前的声明方式在ES5中写var和不写var区别使用 var 表示是在当前的作用域内声明一个变量如果是在函数内声明就是函数中的作用域变量如果是在函数原创 2020-10-11 08:39:15 · 298 阅读 · 0 评论