ES 与 TS

Posted 2023-04-01

参考技术A ES6 是一种 JS 的规范化， JS 是 ES 的拓展。

TS 是一种 JS 的类型补充。

Web 中的 JS = ES + Web API ( DOM + BOM )

Node 中的 JS = ES + Node API ( fs + Net + etc )

TS = JS + 类型系统

如下图 3.1

ES6 中推出了两个新的关键字 let 、const 。

因为 var 存在变量提升，所以在定义之前调用变量不会报错，而是会得到一个 undefined 。这在很多编码过程中看来，是不合理的，因为变量先定义后使用，才是符合正常的思维逻辑的。故而推出了两个关键字 let 、const 。

两者都没有变量提升，因为闭包机制， 所以只在声明位置所属的块作用域内生效。

Proxy  可以理解为监听器 ， 拦截器， 可以修改对象原本的方法。可以通过构造函数的方法使用，也可以在对象内部定义为  Proxy  属性的方式来调用。

Proxy 两种使用方法

Proxy  传入两个参数，都是对象格式。  target  是被拦截的对象， handler  中盛放了拦截 target  的方法。如果被拦截的对象是一个空对象，那么在使用构造函数调用时候，可以用构造对象调用拦截方法会产生相同效果。

target为空对象情况

Reflect

Reflect  是一种新的  API  ，将Object对象的属于语言内部的方法放到 Reflect  对象上，即从  Reflect  对象上拿  Object  对象内部方法。

将用老  Object  方法报错的情况，改为返回  false 。

让 Object  操作变成函数行为。

Reflect  和  Proxy  有着一样的方法，两者可以相辅相成 。

图片引自阮一峰 ES6

这样的操作使得拦截操作更为合理，把拦截的操作交给  Reflect  ，而  Proxy  的功能主要为输出日志。

Set   不重复集合。

Symbol 具有唯一性，可以作为对象的 key ，避免重复。

生成器 Generator ： 内部可以通过 yeld 来分步执行。返回一个对象 value， done。

ts与es6学习记录

ts遵循es6语法，也是js以后发展的方向，学好ts对于以后都有帮助。

1.字符模板

以前对这个方法认知的还是太少了，直接上代码吧。

var n1 = ‘1‘;
var n2 = ‘2‘;
var n3 = ‘3‘;
var fn = function(){
    return 4
}

//这个时候函数也是可以返回的

console.log(`返回${n1},${n2},${n3},和函数${fn()}`)
返回：返回1,2,3,和函数4

 

函数中使用

 

function demo(str,str2,str3){
    console.log(str)
    console.log(str2)
    console.log(str3)
}
var str = 1;
var str2 = 2;
var str3 = 3;
//调用
demo`测试${str}${str2}${str3}`；

//第一个参数就是传入的字符串，然后按照顺序打印，str3这个时候就没有了

 

 

 

数组和对象在字符模板的中使用方法

var obj = {
  name:"lojze",
  age:"18"    
}

console.log(`打印一个对象${obj}`);

//返回  打印一个对象[object Object]

正确的使用方式

console.log(`${JSON.stringify(obj)}`)

//返回

{"name":"lojze","age":"18"}

数组！

var arr= [1,2,3,4];

console.log(`${arr}`)

 

2. * yield 

该方法作用就是控制程序的开始停止，使用`netx()`控制，一帧一阵的运行下去。

这样说，可能对一些人来说不知道他到底能干啥？

假设这个时候有个场景，吃饭之前都要抢个红包，对吧，只有固定点击的人才可以抢到红包，这个时候，我们就可以使用yield。

//第5个人才能抢到
var active = 5;

//已经当前有10个人在抢这个红包
var max = 10;
var maths = start(max);

//创建一个随机人数方法
function* start(max) {
//假设有 1 -10 个人在抢这个红包
    while (true) {
//同一时间不知道有多人点击，设置一个随机数
    yield max = max - parseInt(Math.random() * 10);
    }
}

while (max > active) {
    max = maths.next().value;
    //为了方便看到有多人点击
    console.count(max)
}
if (max == 5) {
    console.log(`这个时候可以抢拉${max}`)
} else {
    console.log(`红包已经被抢完了,你是第${10 -max}个点击的`)
}

这个列子可以帮助我们理解 * yield 方法，炒股啊，运用的场景还是挺多的。