ECMAScript es3(ECMAScript 1999) 1999年,ECMAScript第三个版本 es4(ECMAScript 2007) ECMAScript第四个版本,废弃 es5(ECMAScript 在ES2015中,非对象的参数将被强制转换为一个对象。 Promises es7(ECMAScript 2016) 2016年,ECMAScript第七个版本 Array.prototype.includes() es8(ECMAScript 2017) 假设我们要遍历如下对象obj的所有值: const obj = {a: 1, b: 2, c: 3}; 不使用Object.values() :ES6 const obj = {a: 1, b: 2, () :ES8 const obj = {a: 1, b: 2, c: 3}; const values = Object.values(obj); console.log(values);//[1,
这是我参与「掘金日新计划 · 6 月更文挑战」的第31天,点击查看活动详情 每天3分钟,重学ES6-ES12文章汇总 前言 今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间 ,重学ES6+,前面我们介绍了模块化的历史,今天介绍模块化处理方案 ES Module JavaScript没有模块化一直是它的痛点,所以才会产生我们前面学习的社区规范:CommonJS、AMD、CMD 等, 所以在ES推出自己的模块化系统时,大家也是兴奋异常。 const age = 18 function foo() { console.log("foo function") } export { name, age, foo } // 3. /foo.js' // 3.导入方式三: 将导出的所有内容放到一个标识符中 import * as foo from '.
这是我参与「掘金日新计划 · 6 月更文挑战」的第18天,点击查看活动详情 每天3分钟,重学ES6-ES12文章汇总 前言 今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间,重学 ES6+,今天介绍的是ES11 ES12中新增的内容 ES11 BigInt 大整数类型 在早期的JavaScript中,我们不能正确的表示过大的数字: 大于MAX_SAFE_INTEGER的数值 代码演示 // ES11: 空值合并运算 ?? "defualt value" console.log(bar1,bar2) //"default value","default value" const foo1 = '' const bar3 = info && info.name // es12写法 info &&= info.name console.log(info) // 3.??
最近在看 ES2021 呢。 这才 2020 年,你学啥2021呢,学不动,学不动 你的 2020 进度84% ▓▓▓▓▓▓▓▓▓▓▓▓▓░░░ 那你说一说呗,都学了些啥? 目前已经确定的有 5 个新特性,为了能让你更好地记住,我特定挑了 3 个我觉得比较有意思的和你讲讲吧。 好好好,最喜欢用最少的时间学最有用的东西了! 1.逻辑操作符 你有遇到过这样的情况吗? a = a + b; // old a += b; a = a - b; // old a -= b; 对的,这一次加入了 3 个 ||、&& 、?? ,用法还是和以前一样,是不是很简单? 3.数字分隔符 let fee1 = 1000000000; let fee2 = 1_000_000_000; // fee1 === fee2 这个模式不仅在十进制可以用,二进制,十六进制... babel-plugin-proposal-logical-assignment-operators [2]Numeric Separator: https://babeljs.io/docs/en/babel-plugin-proposal-numeric-separator [3]
这是我参与「掘金日新计划 · 6 月更文挑战」的第16天,点击查看活动详情 每天3分钟,重学ES6-ES12文章汇总 前言 今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间,重学 ES6+,今天介绍的是ES7 ES8中新增的内容 ES7 新增 Array Includes 在ES7之前,如果我们想判断一个数组中是否包含某个元素,需要通过 indexOf 获取结果,并且判断是否为 == -1) { console.log("包含abc元素") } // ES7 ES2016 if (names.includes("cba", 2)) { console.log("包含abc 在ES7中,增加了 ** 运算符,可以对数字来计算乘方。 代码演示 const result1 = Math.pow(3, 3) // ES7: ** const result2 = 3 ** 3 console.log(result1, result2) ES8
这是我参与「掘金日新计划 · 6 月更文挑战」的第17天,点击查看活动详情 每天3分钟,重学ES6-ES12文章汇总 前言 今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间,重学 ES6+,今天介绍的是ES10中新增的内容 ES10 flat flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 ES10提供了 Object.formEntries来完成转换: 那么这个方法有什么应用场景呢? { newObj[entry[0]] = entry[1] } console.log(newObj) //{name: 'yz', age: 24, height: 1.88} // 1.ES10 ES10中给我们提供了trimStart和trimEnd;代码演示 代码演示 const message = " Hello World " console.log(message.trim
这是我参与「掘金日新计划 · 6 月更文挑战」的第30天,点击查看活动详情 每天3分钟,重学ES6-ES12文章汇总 前言 今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间 ,重学ES6+,前面我们介绍了模块化的历史,今天介绍模块化处理方案 CommonJS CommonJS规范和Node关系 common Js 是一个规范,指出是在浏览器以外的地方,可以简称为CJS Node 查找X.node文件 2.2.如果没有找到对应的文件,将X作为一个目录 查找目录下的index文件 查找X/index.js文件>查找X/index.json文件>查找X/index.node文件 3. webpack中使用CommonJS是另外一回事; 因为它会将我们的代码转成浏览器可以直接执行的代码; 在早期为了可以在浏览器中使用模块化,通常会采用AMD或CMD: 但是目前一方面现代的浏览器已经支持ES
屏幕空间 三、OpenGL ES 2 3D 空间 1. 变换发生的过程 2. 各个变换流程分解简述 3. 四次变换与编程应用 四、工程例子 五、参考书籍 ---- 一、多坐标系 1. 像素缩放比 三、OpenGL ES 2 3D 空间 1. 变换发生的过程 ? 2 -> 3 ) 上面提到, ES 版本没有 gluLookAt 这个函数,但是我们知道,这里做的都是矩阵运算,所以可以自己写一个功能一样的矩阵函数即可; // 我不想写,所以可以用 GLKit 提供给我们的函数 和 glDepthRange 函数即可; ---- 四、工程例子 Github: 《DrawSquare_3DFix》 ---- 五、参考书籍 《OpenGL ES 2.0 Programming Guide》 《OpenGL Programming Guide 8th》 《3D 数学基础:图形与游戏开发》 《OpenGL 超级宝典 第五版》 《Learning OpenGL ES For
教程 OpenGL ES入门教程1-Tutorial01-GLKit OpenGL ES入门教程2-Tutorial02-shader入门 这次是三维图形变换。 OpenGL ES系列教程在这里。 OpenGL ES系列教程的代码地址 - 你的star和fork是我的源动力,你的意见能让我走得更远。 效果展示 ? 、比例变换、旋转变换、对称变换、错切变换 具体的变换矩阵可以点这里 或者 这里 b、复合变换 关于任意点的比例、旋转变换 1、将任意点P移到原点,作平移变换; 2、进行比例、旋转等变换; 3、 透视投影的推导可以看 这里 OpenGL ES的变换 OpenGL ES通过顶点缓存数组和图元绘制指令,形成基本的图元;图元在顶点着色器会进行顶点变换,也就是几何处理阶段的几何变换和投影变换;到了像素处理阶段 总结 教程2、3是shader的一个分支,内容相对较难,接下的教程主要以GLKit为主。 附上源码地址 代码里面的util在 这里
ES6中的多出的功能 对象必须要new的方式才能出来 定义原型上的方法和静态方法 添加原型上的方法和静态方法 子类继承父类 到此还有一个小问题需要注意 主要完成一下几个功能 对象必须要new的方式才能出来 ){ this.name = name || "一般飞机"; this.blood = 100; } return Plane; })() 定义原型上的方法和静态方法 实现ES6 function(){ return true; } } ]); return AttackPlane; })(Plane) 子类继承父类 此处子类继承父类调用的是ES6
这是我参与「掘金日新计划 · 6 月更文挑战」的第20天,点击查看活动详情 每天3分钟,重学ES6-ES12文章汇总 前言 今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间, 重学ES6+,今天介绍的是ES6中新增的内容Promise 异步任务的处理 在ES6出来之后,有很多关于Promise的讲解、文章,也有很多经典的书籍讲解Promise 虽然等你学会Promise之后
这是我参与「掘金日新计划 · 6 月更文挑战」的第32天,点击查看活动详情 每天3分钟,重学ES6-ES12文章汇总 监听对象的操作 我们先来看一个需求:有一个对象,我们希望监听这个对象中的属性被设置或获取的过程 # Proxy基本使用 * 在ES6中,新增了一个[Proxy类](url),这个类从名字就可以看出来,是用于帮助我们创建一个**代理**的: * 也就是说,如果我们希望`监听一个对象的相关操作 argArray) } }) fooProxy.apply({}, ["abc", "cba"]) new fooProxy("abc", "cba") Reflect的作用 Reflect也是ES6 所以将这些API放到了Object上面; 但是Object作为一个构造函数,这些操作实际上放到它身上并不合适; 另外还包含一些类似于 in、delete操作符,让JS看起来是会有一些奇怪的; 所以在ES6
ES都有哪些基本概念 在学习ES时,需要掌握一些必备概念,有了这些基本概念,后续的学习才会轻松。我们可以从下图中了解,ES都有哪些基本概念。 ES中的文档都会被序列化为JSON格式进行保存,每个文档都有一个Unique ID,这个Unique ID可以由我们自定义生成,也可以通过ES自动生成。 不同的ES节点可以构成一个集群,不同的集群可以通过不同的名字来区分,比如在上一节我们进行docker部署时,就指定了一个集群名字为“edisontalk”,这个集群由两个ES实例构成。 ES节点从本质上来说,就是一个Java进程,每一个节点都有名字,比如上面我们定义了节点名字为“es7_01”。 分片 / 副本 和MongoDB一样,ES也有分片的概念,它主要用于解决数据水平扩展的问题。只不过,在ES中,还区分了主分片 和 副本分片的概念。
/ 2.0); vec2 area2 = vec2(vn.x + mosaicSize / 2.0, vn.y - mosaicSize * TR / 2.0); vec2 area3 else if ((a >= PI6 * 5.0 && a <= PI6 * 6.0) || (a < -PI6 * 5.0 && a > -PI6 * 6.0)) { vn = area3;
系列文章 -- ES6笔记系列 解构赋值,即对某种结构进行解析,然后将解析出来的值赋值给相关的变量,常见的有数组、对象、字符串的解构赋值等 一、数组的解构赋值 function ids() { return [1, 2, 3]; } var [id1, id2, id3] = ids(); console.log(id1, id2, id3); // 1 2 3 如上,解析返回的数组,取出值并赋给相应的变量 ,解构赋值内部的实现方式使用到了ES6的Iterator迭代器,通过层层遍历,保证了相应值的获取 3. ES6引入了Iterator迭代器,集合Set或Generator生成器函数等都部署了这个Iterator接口,所以也可以用来进行解构赋值 2. 比如Set的解构赋值 var [a, b, c] = new Set([1, 2, 3]); a // 1 b // 2 c // 3 3.
这是我参与「掘金日新计划 · 6 月更文挑战」的第29天,点击查看活动详情 每天3分钟,重学ES6-ES12文章汇总 前言 今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间 ,重学ES6+,前面我们介绍了异步代码处理方案,今天介绍模块化的历史 什么是模块化 到底什么是模块化、模块化开发呢? 来实现; *包括Node的实现,JavaScript编写复杂的后端程序,没有模块化是致命的硬伤; 所以,模块化已经是JavaScript一个非常迫切的需求: 但是JavaScript本身,直到ES6 才推出了自己的模块化方案; 在此之前,为了让JavaScript支持模块化,涌现出了很多不同的模块化规范:AMD、CMD、CommonJS等; 之后的内容,我将详细介绍JavaScript的模块化,尤其是CommonJS和ES6
这是我参与「掘金日新计划 · 6 月更文挑战」的第27天,点击查看活动详情 每天3分钟,重学ES6-ES12文章汇总 前言 今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间 ,重学ES6+,前面我们介绍了promise,生成器和迭代器,async await,现在我们总结一下针对异步代码处理方案 业务场景 请求一个接口,拿到返回值,对返回值进行处理,当作第二个接口的请求参数 最终数据需要调用依次调用3个接口才能拿到。 1> url: why -> res: why 2> url: res + "aaa" -> res: whyaaa 3> url: res + "bbb" => res: whyaaabbb function = yield requestData(res2 + "bbb") const res4 = yield requestData(res3 + "ccc") console.log(res4)
这是我参与「掘金日新计划 · 6 月更文挑战」的第23天,点击查看活动详情 每天3分钟,重学ES6-ES12文章汇总 前言 今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间,重学 ES6+,前面我们学习的then、catch、finally方法都属于Promise的实例方法,都是存放在Promise的prototype上的。 那么对于resolved的,以及依然处于pending状态的Promise,我们是获取不到对应的结果的; 在ES11(ES2020)中,添加了新的API Promise.allSettled: 该方法会在所有的 p2 = new Promise((resolve, reject) => { setTimeout(() => { reject(22222) }, 2000); }) const p3 { setTimeout(() => { resolve(33333) }, 3000); }) // allSettled Promise.allSettled([p1, p2, p3]
最近一段时间很忙,没什么时间再去研究OpenGL,有朋友问我OpenGL ES图形变换的相关问题,这里抽出时间整理一下相关资料,便于大家学习3D图形运动的知识。 对我们来说比较重要的总共有5个不同的坐标系统: 1.局部空间(Local Space,或者称为物体空间(Object Space)) 2.世界空间(World Space) 3.观察空间(View 将一定范围内的坐标转化到标准化设备坐标系的过程(而且它很容易被映射到2D观察空间坐标)被称之为投影(Projection),因为使用投影矩阵能将3维坐标投影(Project)到很容易映射的2D标准化设备坐标系中 一旦所有顶点被转换到裁剪空间,最终的操作——透视划分(Perspective Division)将会执行,在这个过程中我们将位置向量的x,y,z分量分别除以向量的齐次w分量;透视划分是将4维裁剪空间坐标转换为3维标准化设备坐标 好了,以上就是OpenGL做3D变换需要了解的理论知识。
ES都有哪些基本概念 在学习ES时,需要掌握一些必备概念,有了这些基本概念,后续的学习才会轻松。我们可以从下图中了解,ES都有哪些基本概念。 ES中的文档都会被序列化为JSON格式进行保存,每个文档都有一个Unique ID,这个Unique ID可以由我们自定义生成,也可以通过ES自动生成。 ES节点从本质上来说,就是一个Java进程,每一个节点都有名字,比如上面我们定义了节点名字为“es7_01”。 ES节点从本质上来说,就是一个Java进程,每一个节点都有名字,比如上面我们定义了节点名字为“es7_01”。 分片 / 副本 和MongoDB一样,ES也有分片的概念,它主要用于解决数据水平扩展的问题。只不过,在ES中,还区分了主分片 和 副本分片的概念。