霍邱县住房和城乡建设局网站,网站建设模板公司,带有互动的网站开发,做网站帮外国人淘宝ES Module 优点 静态分析
浏览器和 Node 都支持
浏览器的新 API 能用模块格式提供
不再需要对象作为命名空间 export 用于规定模块的对外接口
输出的接口与其对应的值是动态绑定关系可以取到模块内部实时的值 import 用于输入其他模块提供的功能
具有提升效果#xff0c;会提升… ES Module 优点 静态分析
浏览器和 Node 都支持
浏览器的新 API 能用模块格式提供
不再需要对象作为命名空间 export 用于规定模块的对外接口
输出的接口与其对应的值是动态绑定关系可以取到模块内部实时的值 import 用于输入其他模块提供的功能
具有提升效果会提升到整个模块的头部首先执行
静态执行不能使用表达式和变量
多次重复执行同一句 import 语句只会执行一次 import() 支持动态加载模块
适用场合按需加载条件加载动态的模块路径 ES6 模块与 CommonJS 模块 CommonJS 模块输出的是一个值的拷贝 ES6 模块输出的是值的引用 CommonJS 模块是运行时加载 ES6 模块是编译时输出接口 CommonJS 加载的是一个对象该对象只有在脚本运行完才会生成ES6 模块不是对象它的对外接口只是一种静态定义在代码静态解析阶段就会生成 CommonJS 模块的 require() 是同步加载模块 ES6 模块的import命令是异步加载有一个独立的模块依赖的解析阶段 加载 CommonJS 的 require() 命令不能加载 ES6 模块只能使用 import() 这个方法加载
ES6 模块的import命令可以加载 CommonJS 模块但是只能整体加载不能只加载单一的输出项 Class 类 本质 一个语法糖实质依然是函数
只是让对象原型的写法更加清晰、更像面向对象编程的语法 静态方法 static 关键字
该方法不会被实例继承直接通过类来调用
静态方法中的 this 指向类本身而不是实例 静态属性 Class 本身的属性 私有方法和私有属性 只能在类的内部访问的方法和属性 new.target 属性 用在构造函数之中返回 new 命令作用于那个构造函数
可以用来确定构造函数是怎么调用的
Class 内部调用 new.target返回当前 Class
子类继承父类时new.target 会返回子类
在函数外部使用 new.target 会报错 继承 通过 extends 关键字实现继承让子类继承父类的属性和方法 限制 子类必须在 constructor() 方法中调用 super()
不调用 super() 方法子类就得不到自己的 this 对象 Object.getPrototypeOf() 用来从子类上获取父类 super 关键字 作为函数调用时代表父类的构造函数 作为函数时只能用在子类的构造函数之中 作为对象时 在普通方法中指向父类的原型对象
在静态方法中指向父类 类的 prototype 属性和 __proto__ 属性 子类的 __proto__ 属性表示构造函数的继承总是指向父类
子类prototype属性的__proto__属性表示方法的继承总是指向父类的prototype属性 实例的 __proto__ 属性 指向父类实例的__proto__属性子类的原型的原型是父类的原型 Promise 是异步编程的一种解决方案 特点 对象的状态不受外界影响三种状态pending进行中fulfilled已成功rejected已失败
状态不可逆一旦状态改变就不会再变从 pending 变为 fulfilled从 pending 变为 rejected
链式调用 缺点 无法取消一旦新建它就会立即执行无法中途取消
如果不设置回调函数Promise 内部抛出的错误不会反应到外部
当处于 pending 状态时无法得知目前进展到哪一个阶段 实例方法 Promise.prototype.then()用于实例添加状态改变时的回调函数可选会返回的是一个新的 Promise 实例第一个参数是resolved状态的回调函数第二个参数是rejected状态的回调函数
Promise.prototype.catch()用于指定发生错误时的回调函数
Promise.prototype.finally() ES2018用于指定不管 Promise 对象最后状态如何都会执行的操作本质上是 then 方法的特例 静态方法 Promise.resolve()将现有对象转为 Promise 对象参数是一个 Promise 实例直接返回该实例参数是一个thenable对象具有 then 方法的对象转为 Promise 对象立即执行 thenable 对象的 then() 方法参数不是具有 then() 方法的对象或根本就不是对象原始值和不具有 then() 方法的对象返回一个 resolved 状态的新 Promise 对象不带有任何参数返回一个 resolved 状态的新 Promise 对象Promise.reject()返回一个 rejected 状态的新 Promise 对象
Promise.all()将多个 Promise 实例包装成一个新的 Promise 实例只有所有的 Promise 状态成功才会成功如果其中一个 Promise 的状态失败就会失败
Promise.race()将多个 Promise 实例包装成一个新的 Promise 实例新的 Promise 实例状态会根据最先更改状态的 Promise 而更改状态
Promise.allSettled()ES2020将多个 Promise 实例包装成一个新的 Promise 实例新的 Promise 实例只有等到所有这些参数实例都返回结果不管是 resolved 还是 rejected 包装实例才会结束一旦结束状态总是 resolved
Promise.any()ES2021将多个 Promise 实例包装成一个新的 Promise 实例只要参数实例有一个变成 resolved 状态包装实例就会变成 resolved 状态如果所有参数实例都变成 rejected 状态包装实例就会变成 rejected 状态 异步编程 Generator 函数 是 ES6 提供的一种异步编程解决方案
一个状态机封装了多个内部状态
特征function 关键字与函数名之间有一个星号函数体内部使用 yield 表达式定义不同的内部状态 async 函数ES2017 特征是 Generator 函数的语法糖function 关键字前添加 async函数体内部使用 await 表达式
对 Generator 函数的改进内置执行器更好的语义更广的适用性返回值是 Promise
使用注意点把 await 命令放在 try...catch 代码块中多个 await 命令后面的异步操作如果不存在继发关系最好同时触发。await 命令只能用在 async 函数之中 对象 简洁表示法 引用变量时可以简写
方法省略 function 关键字简写的对象方法不能用作构造函数 属性名表达式 obj[a bc] 123 属性的遍历 for...in遍历对象自身的和继承的可枚举属性不含 Symbol 属性
Object.keys返回一个数组包括对象自身的不含继承的所有可枚举属性不含 Symbol 属性的键名
Object.getOwnPropertyNames返回一个数组包含对象自身的所有属性不含 Symbol 属性但是包括不可枚举属性的键名
Object.getOwnPropertySymbols返回一个数组包含对象自身的所有 Symbol 属性的键名
Reflect.ownKeys返回一个数组包含对象自身的不含继承的所有键名不管键名是 Symbol 或字符串也不管是否可枚举
首先遍历所有数值键按数值升序排列其次遍历所有字符串键按加入时间升序排列最后遍历所有 Symbol 键按加入时间升序排列 super 关键字 指向当前对象的原型对象只能用在对象的方法之中使用 扩展运算符 取出参数对象的所有可遍历属性等同于 Object.assign 方法 Object.is 比较两个值是否相等和全等运算符基本一致只有 0 不等于 -0 和 NaN 等于自身处理不同 Object.assign 用于对象的合并将源对象的所有可枚举属性复制到目标对象参数处理只有一个参数时直接返回该参数参数不是对象会先转成对象然后返回第一个参数为 undefined 和 null 时会报错注意点浅拷贝同名属性会被替换处理数组时会把数组视为对象只能进行值的复制如果复制的值是一个取值函数会求值后再复制用途为对象添加属性为对象添加方法克隆对象合并多个对象为属性指定默认值 Object.getOwnPropertyDescriptors 返回指定对象所有自身属性非继承属性的描述对象 Object.getPrototypeOf 用来获取一个对象的原型对象 Object.setPrototypeOf 用来设置一个对象的原型对象并返回参数对象 遍历 Object.keys获取参数对象自身的所有可遍历属性的键名
Object.values获取参数对象自身的所有可遍历属性的键值
Object.entries获取参数对象自身的所有可遍历属性的键值对数组
都不含继承的属性都会过滤属性名为 Symbol 值的属性 Object.fromEntries 是 Object.entries 的逆操作将一个键值对数组转为对象 Iterator 是一种接口为各种不同的数据结构提供统一的访问机制 作用 为各种不同的数据结构提供统一的访问机制
使数据结构的成员能够按某种次序排列
供 for...of 循环消费 遍历过程 创建一个指针对象指向当前数据结构的起始位置
第一次调用指针对象的 next 方法指针指向数据结构的第一个成员
第二次调用指针对象的 next 方法指针指向数据结构的第二个成员
不断调用指针对象的next方法直到它指向数据结构的结束位置 next 方法 返回一个对象
value 属性返回当前位置的成员
done 属性是一个布尔值表示遍历是否结束 原生具备 Iterator 接口的数据结构 Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象 对象没有 Iterator 接口 因为对象的哪个属性先遍历哪个属性后遍历是不确定的需要开发者手动指定 for...of 循环 内部调用的是数据结构的 Symbol.iterator 方法 数组 扩展运算符 将一个数组转为用逗号分隔的参数序列 Array.of 将一组值转换为数组弥补数组构造函数 Array 的不足 Array.from 将两类对象转为真正的数组类似数组的对象array-like objectDOM 操作返回的 NodeListarguments和可遍历iterable的对象
第二个参数类似数组的map方法
将字符串转为数组能正确处理各种 Unicode 字符 copyWithin 在当前数组内部将指定位置的成员复制到其他位置会覆盖原有成员然后返回当前数组 查找 find找出第一个符合条件的数组成员未找到返回 undefined
findIndex返回第一个符合条件的数组成员的位置未找到返回 -1
includes表示数组是否包含给定的值返回布尔值 fill 使用给定值填充一个数组 遍历 keys对键名的遍历
values对键值的遍历
entries对键值对的遍历
都返回一个遍历器对象可以用 for...of 循环 flat 将嵌套的数组拍平 默认拍平一层 flatMap 先对原数组的每个成员执行 map 再对返回值组成的数组执行 flat 方法只能拍平一层数组 at 返回参数对应位置的成员支持负索引 倒数的位置
超出范围返回 undefined let 和 const 相同点 不存在变量提升 暂时性死区 变量在声明之前都是不可用的 不允许重复声明 块级作用域 块级作用域之中的函数声明语句类似于 let在块级作用域之外不可引用 let 可以修改 const 不可修改 基本类型保证值不可变等同于常量 引用类型保证内存指针不可变 Symbol 新的原始数据类型表示独一无二的值 注意点 Symbol 函数前不能使用 new 命令 Symbol 函数的参数只是表示对当前 Symbol 值的描述相同参数的 Symbol 函数的返回值是不相等的 Symbol 值不能与其他类型的值进行运算 Symbol 值可以显式转为字符串和布尔值 内置的 Symbol 值 Proxy 代理器 在目标对象之前架设一层拦截外界对该对象的访问都必须先通过这层拦截 实例方法 返回一个可取消的 Proxy 实例 Proxy.revocable() 在 Proxy 代理的情况下目标对象内部的 this 会指向 Proxy 代理 this 问题 在 Proxy 代理的情况下目标对象内部的 this 会指向 Proxy 代理 函数 参数支持默认值 rest 参数 获取函数的多余参数只能在最后一个 length 属性 不包括设置了默认值的参数 不包括 rest 参数 name 属性 返回该函数的函数名 箭头函数 特点 没有自己的 this 对象 不能用 call apply bind 不可以当作构造函数 不能使用 new 不可以使用 arguments 对象 用 rest 参数代替 不可以用作 Generator 函数 不能使用 yield 应用 简化和封装回调函数 不适用场合 定义对象的方法且该方法内部需要 this 需要动态 this 允许函数最后一个参数有尾逗号 字符串 模板字符串 可以当作普通字符串使用 用来定义多行字符串 所有的空格和缩进都会被保留 可以在字符串中嵌入任意的 JavaScript 表达式函数等 支持嵌套 标签模板 函数的特殊调用形式 alerthello alert([hello]) 新增方法 String 对象String.fromCodePoint从 Unicode 码点返回对应字符String.raw用于模板字符串的处理 String 实例 codePointAt 返回一个字符的码点 能够正确处理 4 个字节储存的字符 可测试一个字符由两个字节还是由四个字节组成 normalize Unicode 正规化用来将字符的不同表示方法统一为同样的形式 查找字符 includes 表示是否找到了参数字符串 startsWith 表示参数字符串是否在原字符串的头部 endsWith 表示参数字符串是否在原字符串的尾部 repeat 返回一个将原字符串重复 n 次的新字符 padStart 头部补全 padEnd 尾部补全 replaceAll 一次性替换所有匹配 第二个参数支持特殊字符匹配 $匹配的字符串
$ 匹配结果前面的文本
$匹配结果后面的文本
$n匹配成功的第n组内容n是从1开始的自然数第一个参数必须是正则表达式
$$指代美元符号$ at 返回参数指定位置的字符 支持负索引 倒数的位置 超出范围返回 undefined Reflect 概述 从 Reflect 对象上可以拿到语言内部的方法 修改某些 Object 方法的返回结果让其变得更合理 让 Object 操作都变成函数行为 静态方法 数值 二进制和八进制表示法 二进制用前缀 0b 或 0B 表示 八进制用前缀 0o 或 0O 表示 数值分隔符 使用下划线 _ 作为分隔符没有指定间隔的位数
注意点不能放在数值的最前面或最后面不能同时两个或两个以上的分隔符小数点的前后不能有分隔符科学计数法里面表示指数的 e 或 E 前后不能使用 Number 对象新增方法 Number.isFinite检查一个数值是否有限的即不是 Infinity
Number.isNaN检查一个值是否为 NaN
Number.parseInt解析一个字符串并返回一个整数
Number.parseFloat解析一个字符串并返回一个浮点数
Number.isInteger判断一个数值是否为整数受 IEEE 754 标准限制超出 JS 安全数范围会误判 都是从全局方法上移植过来的 只返回第一个数字 允许开头和结尾空格 第一个字符不能被转换为数字 时返回 NaN Number.EPSILON 常量表示 1 与大于 1 的最小浮点数之间的差 JavaScript 能够表示的最小精度 安全整数 Number.MAX_SAFE_INTEGER表示在 JavaScript 中最大的安全整数2 的 53 次方 - 1
Number.MIN_SAFE_INTEGER表示在 JavaScript 中最小的安全整数字-(2 的 53 次方 - 1)
Number.isSafeInteger判断一个整数是否为安全整数 Math 对象的扩展 BigInt 数据类型 表示整数可以精确表示任何位数的整数
注意点BigInt 函数必须有参数且参数必须可以转为数值否则会报错BigInt 不能与普通数值进行混合运算BigInt 与其他类型可以使用比较和相等运算符 新的数据结构Set 和 Map Set 类似于数组成员的值都是唯一的
Set 函数可以接收一个数组用于初始化实例属性Set.prototype.size返回 Set 实例的成员总数
实例方法Set.prototype.add(value)添加某个值返回 Set 实例本身Set.prototype.delete(value)删除某个值返回一个布尔值表示删除是否成功Set.prototype.has(value)返回一个布尔值表示该值是否为 Set 的成员Set.prototype.clear()清除所有成员没有返回值
遍历方法遍历顺序为插入顺序Set.prototype.keys()返回键名的遍历器Set.prototype.values()返回键值的遍历器Set.prototype.entries()返回键值对的遍历器Set.prototype.forEach()使用回调函数遍历每个成员Set 结构没有键名只有键值keys 方法和 values 方法的行为完全一致 WeakSet WeakSet 结构与 Set 类似都是不重复的值的集合
注意点成员只能是对象不能是其他类型否则会报错WeakSet 中的对象都是弱引用 垃圾回收机制不考虑 WeakSet 对该对象的引用WeakSet 不能遍历
实例方法WeakSet.prototype.add(value)WeakSet.prototype.delete(value)WeakSet.prototype.has(value) WeakRef ES2021 创建对象的弱引用 Map 类似于对象是键值对的集合键的值可以是各种类型的值包括对象
Map 构造函数接收一个二维数组作为参数
实例属性Map.prototype.size返回 Map 结构的成员总数
实例方法Map.prototype.set(key, value)设置键名 key 对应的键值为 value 并返回 Map 实例Map.prototype.get(key)读取key对应的键值找不到时返回 undefinedMap.prototype.has(key)返回一个布尔值表示 key 是否在当前 Map 实例中Map.prototype.delete(key)删除某个 key 返回一个布尔值表示删除是否成功Map.prototype.clear()清除所有成员没有返回值遍历方法 遍历顺序为插入顺序Map.prototype.keys()返回键名的遍历器Map.prototype.values()返回键值的遍历器Map.prototype.entries()返回所有成员的遍历器Map.prototype.forEach()遍历 Map 的所有成员 WeakMap WeakMap结构与Map结构类似都是键值对的集合
注意点只接受对象作为键名null 除外WeakMap 键名所指向的对象不计入垃圾回收机制WeakMap 弱引用的只是键名键值是正常引用WeakMap 没有遍历操作
实例方法WeakMap.prototype.set(key, value)设置键名 key 对应的键值为 value 并返回 WeakMap 实例WeakMap.prototype.get(key)读取key对应的键值找不到时返回 undefinedWeakMap.prototype.has(key)返回一个布尔值表示 key 是否在当前 WeakMap 实例中WeakMap.prototype.delete(key)删除某个 key 返回一个布尔值表示删除是否成功 运算符 指数运算符 ** ES2016右结合 从最右边开始计算
链判断运算符 ?. ES2020
Null 判断运算符 ??ES2020
逻辑赋值运算符 ES2021或赋值运算符 ||x || y 等同于 x || (x y)与赋值运算符 x y 等同于 x (x y)Null 赋值运算符 ??x ?? y 等同于 x ?? (x y)
只有运算符左侧的值为 null 或 undefined 时 才会继续右侧的运算 加群联系作者vxxiaoda0423 仓库地址https://github.com/webVueBlog/WebGuideInterview
