ECMAScript
文章平均质量分 96
ECMAScript
不想成熟的大叔
依旧是热爱技术、醉心教育、喜欢分享,就是不想成熟的大叔~
展开
-
const关键字:终于拥有真正的常量声明语句
你好,今天大叔想和你唠扯唠扯 ES6 新增的关键字 —— const。在说 const 关键字之前,大叔先和你唠唠大叔自己对 const 的感受 —— JavaScript 尼玛终于可以声明真正的常量啦!大叔为啥会发出这样滴感叹?实在是“天下苦秦久矣”呀~原创 2021-01-22 16:45:28 · 366 阅读 · 0 评论 -
let关键字:加强版的var关键字
你好,今天大叔想和你唠扯唠扯 ES6 新增的关键字 —— let。再说 let 的具体用法之前,大叔想先和你说说大叔自己对 let 的感受 —— let 其实就是加强版的 var。为啥这么说呢?别急,且听大叔慢慢道来。原创 2021-01-21 16:47:54 · 302 阅读 · 0 评论 -
举例解析 JavaScript 中的防抖和节流
说明:CSDN 的编辑器无法直接嵌入 CodePen 演示代码,可以看我的 个人博客的这篇文章防抖(Debounce)和节流(throttle)都是用来控制某个函数在一定时间内执行多少次的技巧,两者相似而又不同。当我们给 DOM 绑定事件的时候,加了防抖和节流的函数变得特别有用。为什么呢?因为我们在事件和函数执行之间加了一个控制层。记住,我们是无法控制 DOM 事件触发频率的。看下滚动事件的例子: See the Pen Scroll events counter by Corbach.转载 2020-11-12 08:45:19 · 135 阅读 · 0 评论 -
ECMAScript2017新特性
ES2017 是 ECMAScript 的第 8 个版本,正式名称应该叫做 ECMAScript2017,发布于 2017 年 6 月,相比于 ES2015 来讲 ES2017 也只是一个小版本更新,但是同时也带来了很多有用的新功能。Object 的 values 方法首先是为 Object 对象新增了 values() 方法,这个方法和 ECMAScript5 当中的 keys() 方法非常类似,keys() 方法返回的是对象中所有键所组成的数组,values() 方法返回的是对象中所有值所组成的数组原创 2020-07-27 15:26:12 · 339 阅读 · 1 评论 -
ECMAScript2016新特性
ES2016 正式名称叫做 ECMAScript2016,发布于 2016 年 6 月,与 ES2015 相比 ES2016 只是一个小版本更新,只包含两个小功能。数组的 includes 方法首先,就是数组实例的 includes() 方法,这个方法可以用来检查数组当中是否包含指定成员变得更加简单。在这之前想要检查某个数组当中是否存在某个指定的成员,就必须使用数组的 indexOf() 方法来实现。如下代码所示:const arr = ['foo', 1, NaN, false]console.原创 2020-07-26 19:48:51 · 477 阅读 · 0 评论 -
ES2015 生成器与生成器的应用场景
生成器在 ECMAScript2015 中新增了一种叫做生成器的函数,英文为 Generator。引入这样一个新特性的目的就是能够在复杂的异步代码中减少回调函数嵌套所产生的的问题,从而提供更好的异步编程的解决方案。这里先来了解一下生成器的语法结构,如下代码所示:function* foo() { console.log('this is generator function.') return '前端课湛'}定义一个生成器函数的方式就是函数表达式定义函数方式的 function 关键字后原创 2020-07-24 22:58:38 · 384 阅读 · 0 评论 -
ES2015 实现可迭代接口与迭代器模式
for…of 循环在 ECMAScript 中遍历数据有很多中方法,首先是最基本的 for 循环,它比较适用于变量普通的数组,然后就是 for...in 循环,它比较适合于遍历键值对,再有就是一些对象的遍历方法,比如数组的 forEach() 方法。这些各种各样的遍历数据的方式都会有一定的局限性,所以 ECMAScript2015 借鉴了很多其他语言引入了一种全新的 for...of 循环,这种循环方式作为遍历所有数据结构的统一方式。换句话说,只要明白 for…of 内部工作的原理就可以使用这种循环去遍历原创 2020-07-24 12:52:04 · 238 阅读 · 0 评论 -
ES2015 Symbol数据类型
对象的属性名同名的问题在 ECMAScript2015 之前对象的属性名都是字符串类型,而字符串是有可能会重复的,那如果重复的话就会产生冲突。比如创建一个用来数据缓存的对象,约定这个对象是全局共享的,然后通过注释的方式模拟不同的 JavaScript 文件使用这个数据缓存对象的情况。比如在 shared.js 文件中创建这个数据缓存对象,如下代码所示:const cache = {}然后在 a.js 文件当中向数据缓存对象添加缓存数据,如下代码所示:cache['foo'] = Math.ran原创 2020-07-23 18:06:15 · 282 阅读 · 0 评论 -
ES2015 Set与Map数据结构
Set 数据结构ECMAScript2015 中新增了一个叫做 Set 的全新数据结构,可以理解为集合,它与传统的数组非常的类似。不过,Set 内部的成员是不允许重复的。那也就是说,每一个值在同一个 Set 当中是唯一的。Set 是一个类型,可以通过 new Set() 构造函数创建一个实例对象。如下代码所示:const s = new Set()然后,再通过 Set 的实例方法 add() 向 Set 集合添加数据。如下代码所示:s.add(1).add(2).add(3).add(4)由原创 2020-07-23 16:18:01 · 533 阅读 · 0 评论 -
ES2015 类、静态方法与类的继承
class 类在此之前,ECMAScript 中都是通过定义函数以及函数的原型对象来实现的类型。如下代码所示:function Person(name) { this.name = name}如果需要这个类型所有实例之间共享一些成员,可以借助于函数对象的 prototype 来实现。如下代码所示:Person.prototype.say = function () { console.log(`hi, my name is ${this.name}`)}自从 ECMAScript2原创 2020-07-22 23:11:55 · 224 阅读 · 0 评论 -
ES2015 模板字符串与字符串扩展方法
模板字符串在 ECMAScript2015 中增强了定义字符串的方式,ECMAScript2015 之前定义字符串需要通过单引号或者双引号的方式,如下代码所示:const str = 'hello es2015, this is a string.'console.log(str)在 ECMAScript2015 中新增了一种叫做模板字符串的方式来定义字符串,它需要使用反引号(`)进行标识。如下代码所示:const str = `hello es2015, this is a string.`原创 2020-07-15 23:41:22 · 258 阅读 · 0 评论 -
ES2015 数组与对象的解构
ECMAScript2015 新增了一种从数组或者对象获取指定元素的快捷方式,这是一种新的语法,这种新语法叫做解构。如下代码所示,定义一个数组:const arr = [100, 200, 300]const foo = arr[0]const bar = arr[1]const baz = arr[2]console.log(foo, bar, baz)在 ECMAScript2015 之前想要获取这个数组中的元素,需要通过索引访问对应的值,然后将访问的结果赋值给一个变量。数组的解构而原创 2020-07-13 23:38:46 · 419 阅读 · 0 评论 -
ES2015 let与块级作用域
什么是块级作用域作用域,顾名思义就是指某个成员可访问的范围。在 ECMAScript5 之前只有两种作用域:全局作用域函数作用域ECMAScript2015 之后新增了块级作用域,这时 ECMAScript 存在三种作用域:全局作用域函数作用域块级作用域块,指的就是一对花括号所包裹起来的范围,比如 if 语句或者 for 语句中的花括号都会产生这里所说的块的概念。if (true) { console.log('前端课湛')}for (var i = 0; i < 1原创 2020-07-10 22:53:28 · 255 阅读 · 0 评论 -
ECMAScript与ECMAScript2015
ECMAScript 与 JavaScriptECMAScript 也是一种脚本语言,通常缩写为 ES,通常会把它看作是 JavaScript 语言的标准化规范。实际上 JavaScript 是 ECMAScript 的扩展语言,因为在 ECMAScript 只是提供了最基本的语法。通俗点来说,就是约定了我们的代码要如何编写,比如我们要怎么定义变量和函数,要怎么定义分支和循环的语句。ECMAScript 只是停留在语言层面,并不能用来在完成实际功能开发。而我们经常使用的 JavaScript 实现了 E原创 2020-07-08 17:30:06 · 314 阅读 · 0 评论 -
这可能是迄今为止对大前端最好的解释
前端技术领域发展至今,已经不仅仅是 PC 端浏览器网页的开发这么简单了。现在很流行一个词来形成前端技术领域,叫做大前端。但是,至少到目前为止我个人还没有看到一个对大前端的解释非常不错的。不过,接下来的内容我个人觉得是目前我看到对大前端的解释是最好的了。向服务端进发众所周知,一个完整的 Web 应用应该包含服务端和客户端两个部分。很多人认为前端程序员更多地是开发客户端这一部分,但现在比较主流的是服务端中的一部分是需要前端程序员进行参与的。现在前端程序员需要参与到服务端中 MVC 架构的 View 层的原创 2020-07-07 00:24:11 · 460 阅读 · 0 评论 -
ES2015 函数的参数默认值与剩余参数
参数默认值ECMAScript2015 为函数的形参列表扩展了一些有用的新语法,其中一个叫做参数默认值。在 ECMAScript2015 之前要为函数中的参数定义默认值,需要在函数体中通过逻辑代码来实现。如下代码所示:function foo(enable) { enable = enable || true console.log(`foo invoked - enable: ${enable}`)}foo()这里存在一个很多人经常犯错误的地方,就是很喜欢使用短路运算的方式来设置参数原创 2020-07-18 11:30:41 · 343 阅读 · 0 评论 -
ES2015 箭头函数
箭头函数在 ECMAScript2015 简化了函数表达式的定义方式,允许使用 => 符号来定义函数,称为箭头函数。这种函数一来简化了函数的定义,二来多了一些特性。在 ECMAScript2015 之前使用函数表达式定义函数需要使用 function 关键字进行定义,如下代码所示:function inc(number) { return number + 1}在 ECMAScript2015 之后可以使用箭头函数来定义一个完全相同的函数,如代码所示:const inc = n =&原创 2020-07-20 16:01:46 · 261 阅读 · 0 评论 -
ES2015 对象字面量增强与扩展方法
对象字面量的增强对象是 ECMAScript 中最常用的数据结构,ECMAScript2015 升级了对象字面量的语法。在 ECMAScript2015 之前使用字面量方式定义一个对象,如下代码所示:const bar = '前端课湛'const obj = { foo: 100, bar: bar}从上述代码可以看到,即使 obj 对象的 bar 属性名和 bar 变量名相同,也需要按照对象字面量的方式进行定义。如下图所示:在 ECMAScript2015 之后,如果变量名与属性原创 2020-07-21 17:40:04 · 237 阅读 · 2 评论 -
ES2015 Proxy代理对象与Reflect反射对象
Proxy 代理对象如果想要监视某个对象中属性的读写,可以使用 ECMAScript2015 之前的 Object.defineProperty() 方法为对象添加属性,这样的话就可以监测到对象属性的读写过程。这种方法应用的非常广泛,在 Vue3.0 之前的版本就是使用这样的方法来实现数据响应,从而完成双向数据绑定。在 ECMAScript2015 当中设计了 Proxy 类型,它就是专门为对象设置访问代理器的。如果你不能理解什么是代理的话,你可以把它想象成门卫。也就是说,无论你是从里面拿东西还是放东西原创 2020-07-22 14:08:47 · 305 阅读 · 1 评论