es6整理

IIFE立即执行函数
TDZ暂时性死区


es2020

1.新增全局对象 globalThis
2.新增String.prototype.matchAll();正则表达式在字符里多个匹配,返回遍历器,可用for..of循环取出
3.新增数据类型BigInt
4.链式判断运算符: ?.
5.Null判断运算符??

es2019

Function.prototype.toString();
try catch命令的参数省略


ECMA是个标准,es6就是2015年6月份发布的

任何人都可以想标准委员会TC39提出意见,
提案变成标准的5个阶段:
stage0:展示阶段
stage1:征求意见阶段
stage2:草案阶段
stage3:候选阶段
stage4:定案阶段(标准)


声明变量:

块级作用域:let const
let:
1.没有变量提升,TDZ暂时性死区,代码块内先使用再定义变量都报错
2.同一个作用域里不能重复定义变量
*函数参数默认是被定义了,函数内部不能定义与参数重名变量,会报错
*for循环里的let i 在循环体内可以重新定义i ,不会报错
const定义常量,一经定义不能修改
const定义的对象是引用,是可以修改的,如果不想被修改,可以用Object.freeze();


解构赋值:

let [a,b,c] = [12,5,6];左右结构一致,对应赋值
import {a,b,c} from ./xxx;


字符串:

`${a}`字符串模板,支持换行
str.includes('aa');判断是否包含aa字符,返回值true/false
str.startsWith('aa');判断以aa开始的字符,返回true/false
str.endsWith('aa');判断以aa结尾的字符串,返回true/false
str.repeat(数字); 重复字符串
str.padStart(整个字符串的长度,填充的东西); 往前填充字符串
str.endStart(整个字符串的长度,填充的东西);往后填充字符串
str.trimStart();
str.trimEnd();
str.matchAll();


函数:

1.默认参数 function (a=5){}
2.rest(...) ,剩余参数,搭配数组使用。也可作扩展使用
3.箭头函数:

 a.  ()=>a+b; a+b是返回值
 b.  this指向定义函数所在对象,不是运行时的对象
 c.  无arguments,可以用...arg实现同等效果
 d.  箭头函数不能当构造函数

4.允许函数最后一个参数尾逗号
5.允许try{}catch{}参数省略


数组循环:

arr.forEach(function(val,index,arr){},document); 代替for循环,没有返回值return
arr.map();需要return,返回一个新数组。不写return效果等于forEach
arr.filter();需要return,过滤数据,返回符合条件的数据
arr.some();需要return,数组里某一符合条件,返回true,否则false
arr.every();需要return,数组里全部符合条件,返回true,否则false
*以上接收两个参数,第一个参数是函数,第二个参数是改this。如果第一个参数用箭头函数,第二个参数改this无效

arr.reduce((total,curVal,curIdx,arr)=>{ return total+curVal });求和,也可以用作求乘积
arr.reduceRight();计算规则 从右往左,reduce是从左往右

for...of循环:
arr.keys()
arr.entries()
arr.values()

let arr = ['a','b'];
for(let index of arr.keys() ){ console.log(index);} //0,1
for(let item of arr.values()){console.log(item);} //a,b
for(let [index,item] of arr.entries()){ console.log(index,item)} // 0 a,1 b
数组方法:

Array.from();将类数组的对象转换为数组(具备length,并且不是真数组的对象)
Array.of(1,2,3,4,5);将 一组值转换为数组
arr.find((val,index,arr)=>{});找到第一个符合条件的数组成员,没找到返回undefined
arr.findIndex((val,index,arr)=>{});找到第一个符合条件的数组成员索引,没找到返回-1
arr.fill(填充内容,开始位置,结束位置);填充默认值
arr.includes();数组是否包含某个元素,返回布尔
arr.flat(num);拉平数组,不传num拉平一层,num代表拉平数组的嵌套层数,传入Infinity表示无论多少层都拉平成一层,如果原有数组有空位,会跳过空位,返回一个新数组,不改变原数组
arr.flatMap((x)=>{ })对原有数组成员执行map函数,然后对返回后的值执行flat方法

copyWithin(开始位置,读取数据位置,)在当前数组内部,将指定位置的成员,复制到其他位置,会覆盖原有成员,修改当前数组

数组空位:

ES5 :forEach(), filter(), reduce(), every()some()都会跳过空位。
map()会跳过空位,但会保留这个值
join()toString()会将空位视为undefined,而undefinednull会被处理成空字符串。
ES6 将空位转为undefinedArray.from、扩展运算符(...)、copyWithin()fill()for...ofentries()keys()values()find()findIndex()会将空位处理成undefined


对象:

1.对象简洁语法
2.Object.is(a,b);比较两个对象是否相等,对NaN作了处理
3.Object.assign(target,source1,source2);用来合并对象,如果目标对象和源对象有重名属性,则后边覆盖前边的
4.Object.keys();Object.entries();Object.values();
5.链判断运算符 ?.

6.Null运算符 ??,只有某个属性时null或者undefined时才会执行
*??&&或者||一起使用时,要使用括号表明优先级,否则会报错


Promise:

解决异步回调问题,避免层层嵌套

let promise = new Promise(function(resolve,reject){});
promise.then(res=>{},err=>{});
promise.then(res=>{}).catch(err=>{}).finally(()=>{}); finall无论成功失败都调用,不接受参数
Promise.resolve();将现有东西直接转成promise对象,resolve状态,成功状态
Promise.reject();reject状态,失败状态
Promise.All([p1,p2,p3]).then(res=>{});把多个promise打包成一个,处理完p1,p2,p3以后再进一步处理then,必须p1,p2,p3全部resolve后执行then
Promise.race([p1,p2,p3]).then(res=>{});只要p1,p2,p3有一个成功就执行then
Promise.allSettled([p1,p2,p3]).then(res=>{});等所有参数实例都返回结果,包装实例才会结束,不管是fulfiled还是rejected
Promise.any([p1,p2,p3]).then(res=>{});实例有一个是fulfilled状态,实例就会变成fulfilled状态,和race方法很像,区别是不会因为某个promise参数实例变成rejected状态而结束
Promise.try();处理捕获处理


模块化:

es6之前,社区模块化 :
Commonjs: 服务端nodejs require('http');
AMD requirejs,curljs
CMD seajs

模块化:需要放在服务器环境
a). 如何定义模块
export
export default
b). 如何使用模块
import ‘./a.js’
*可以是相对路径,也可以是绝对路径
*无论引入几次,只会导入一次
*可以用as取别名import {a as aaa} from './2.js'
*import编辑阶段执行的,在代码运行之前,所以引入位置在使用位置后不会报错
*导出的模块内容如有更改,引用处也会改动
*动态引入模块import('./1.js').then(res=>{});优点按需加载,可以写在if中,引入路径也可以改为动态


类class和继承:
class Person{
  constructor(){
    console.log('new 的时候调用');
  }
  set aaa(){
  }
  get aaa(){
  }
  showName(){
  }
  showAge(){
  }
  static aaa(){
  }
}

*属性名可以用表达式[a+b](){}
*class没有预解析功能,必须先定义再实例化
*矫正this:

fn.call()
fn.bind();
fn.callee();

*get ,set,设置和获取类的属性时,会触发
*静态方法static 可以被子类继承
*继承extends,子类构造函数constructor里必须执行super();子类方法会覆盖父级重名方法,可以用super.方法名();保留父级方法内容
*私有属性提案,#属性名,只能在类的内部使用,外部访问报错
*new target可以用来判断当前实例是子类还是父类
*Object.getPrototypeOf();可以用来从子类上获取父类,判断一个类是否继承了另一个类
*super既可以当函数使用,也可以当对象使用,当函数使用时只能在构造函数中使用。当对象使用时,普通方法中指向父类的原型对象,静态方法中,指向父类
*prototype 和 __proto__

*原生构造函数的继承:
*Mixin模式的实现:Mixin指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口


Symbol:

*Symbol返回一个唯一的值
*Symbol不能new
*Symbol是一个单独的数据类型,symbol基本类型
*Symbol作为key的话,for..in循环不出来,可以用Reflect.ownKeys()方法获取所有键名;
Symbol.for();
Symbol.keyFor()方法返回一个已登记的 Symbol 类型值的key。

Symbol('aaa').description

Symbol('aaa').description //aaa  ES2019提供实例属性,返回Symbol的描述

generator函数:为了解决异步深度嵌套问题

语法:

function* show(){
yield
}
show().next();

*可以配合for...of循环
*可以配合扩展运算符...解构
*可以配合Array.from()使用


async:
async function fn(){
await  XXX ;表示后边结果需要等待
}

*await 只能放在async函数
*相比genrator语义化更强了
*await后边可以是promise对象,也可以是数字、字符、布尔
*async返回也是个promise对象
*只要await语句后边的promise函数reject,整个async函数中断执行
*建议有await的语句,都用Promise.try包起来


Set([ ]):

Set数据结构,类似数组,但是里边不能有重复值,可以用作数组去重[...new set()]
new Set([1,2]).add(3); add添加内容,返回自身,可以链式操作
new Set([1,2,3]).delete(2);delete删除内容
new Set([1,2,3]).has(2);返回布尔,表示是否有某个值
new Set([1,2,3]).size ;返回长度
new Set([1,2,3]).clear();清空所有,没有返回值
*用for...of循环,,keys和values是一样的
*用forEach循环

Map({}):

Map类似json,但是key值类型不只限于字符串

let map = new Map();
map.set('a',1);  set设置一个值
map.get('a'); 获取一个值
map.delete(key);
map.has(key)
map.clear();
map.size

*用for...of循环
*用forEach循环
WeakSet({});
没有size,没有clear,没什么用


数值:

二进制:0b开头
let a = 0b10;
八进制:0o开头
let a = 0o10;

Number.isNaN();判断一个值是否是NaN
Number.isFinite();判断一个数值是否是有限的
Number.isInteger();判断数字是不是整数
Number.parseInt();
Number.parseFloat();
Number.isSafeInteger();安全整数 -2^53到2^53这个范围之间
Number.EPSILON ;常量,表示js最小精度
Math.MAX_SAFE_INTEGER ;最大安全整数,常量
Math.MIN_SAFE_INTEGER;最小安全整数,常量
Math.abs();
Math.sqrt();平方根
Math.sin();
Math.trunc(); 截断,去除小数部分,返回整数部分
Math.sign();判断一个数是正数、负数、还是0,有5个值 +1、-1、0、-0、NaN
Math.cbrt();计算一个数的立方根
Math.hypot();平方和的平方根

2**3  2的3次方,**是幂运算符

es2018:

1.正则具名组匹配:?<name>
反向引用匹配:\k<name>或者\1 \21代表第一个组?<name>
替换:$1 $2

2.dotAll模式:/s修饰符
解决以前 . 不能匹配换行模式
const re = /foo.bar/s;


Proxy:代理模式

可以理解成拦截,对外界访问对象,进行过滤和改写
new Proxy(target,handler); target被代理的对象,handler对代理对象做什么操作,


Reflect:

*将Object内部方法,放到Reflect上,现阶段方法同事部署在ObjectReflect上,未来新方法只部署在Reflect
Reflect.apply(调用的函数,this指向,参数); 反射,直接执行函数,改变this指向


正则

尾调用优化
function.prototype.toString
私有方法私有属性


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容