ES2015
喝着绿茶的猫
这个作者很懒,什么都没留下…
展开
-
ES2015 迭代器模式 Iterator
设计模式:迭代器模式一、实现迭代器的目的是干什么呢?// 迭代器设计模式// 场景:你和我协同开发一个任务清单应用// 我的代码 =========const todoList = { life:['吃饭','睡觉','撸猫'], study:['语文','数学','英语']}// 你的代码 =========for (const item of todoList.life) { console.log(item);}for (const item原创 2020-11-22 17:01:10 · 306 阅读 · 2 评论 -
ES2015 Iterable(可迭代的)接口
一、为什么ES2015提供Iterable(可迭代的)接口ES中能够表示有结构的数据类型越来越多,以前有数组、对象等等,ES2015中新增了Map和Set对象…为了给各种各样的数据结构提供统一遍历方式,ES2015提供了Iterable(可迭代的)接口接口的概念:可以理解为一种规格标准例如在ES中,任意一种数据类型都有toString()方法,这是因为他们都实现了统一的规格标准,即他们都实现了统一的接口实现Iterable接口就是for…of的前提二、了解for…of 的内部原理在控制台打原创 2020-11-22 16:36:04 · 414 阅读 · 0 评论 -
ES2015 for of 循环
一、为什么ES2015 引入 for of 循环我们先来回想一下,ES2015以前与遍历相关的方法for循环:遍历普通的数组for in : 遍历键值对一些函数式的遍历方法 ,比如forEach这些遍历方式都有一定的局限性,比如说forEach() 不能退出循环// for of 基本语法const arr = [100,200,300,400]for(const item of arr){ console.log(item) if(item > 100){ br原创 2020-11-18 06:57:27 · 508 阅读 · 0 评论 -
ES2015 Symbol 一种全新的原始数据类型
一、Symbol 的基本使用在ES2015之前,对象的属性名都是字符串,而字符串有可能会重复,重复的话有可能会有冲突。看一个例子,比如有3个js文件// share.js=========const cache = {}// a.js=========cache['foo'] = '123'// b.js=========cache['foo'] = Math.random()console.log(catch)现在我们大量使用第三方库,很多时候需要自己去扩展。如果出现属性重复怎么办原创 2020-11-17 19:14:19 · 245 阅读 · 0 评论 -
ES2015 Reflect 统一的对象操作API
Reflect属于一个静态类,也就是说他不能通过new方法去构建一个实例对象 new Reflect。只能够去调用这个静态类的一些静态方法,比如 Reflect.get( ),Math对象也是如此。Reflect 内部封装了一系列对对象的底层操作,提供了13个静态方法。Reflect.get(target, name, receiver)Reflect.set(target, name, value, receiver)Reflect.has(target, name)Reflect.de原创 2020-11-07 14:36:06 · 243 阅读 · 0 评论 -
ES2015 class
一、类 classES2015以前ECMAScript都是通过定义函数和定义原型对象来实现类// 比如定义一个Person类// 先定义一个函数,作为类的构造函数function Person(name){ this.name = name;}Person.prototype.say = function(){ console.log(`say ${this.name}`)}ES2015以后新增了class关键词来声明一个类class Person{ // 如果需要在原创 2020-11-07 13:44:38 · 287 阅读 · 0 评论 -
ES2015 Proxy 对比 defineProperty
如果我们想监视某个对象的读写,我们可以使用ES5提供的defineProperty方法为对象添加属性,可以捕获到对象属性的读写过程。defineProperty应用场景:在vue3.0 以前的版本,就是使用defineProperty实现了数据响应从而实现双向数据绑定。因为Proxy比defineProperty,vue3.0 中使用的是Proxy在ES2015中,全新设计了一个叫做Proxy 的类型,专门用来为对象设置访问代理器。什么是代理呢?通俗点解释:把代理想象成门卫,无论你是想出去还是原创 2020-11-06 17:22:26 · 460 阅读 · 0 评论 -
ES2015 箭头函数( Arrow functions ) 与 this
箭头函数没有this的机制,箭头函数不会改变this的指向第一个例子const person = { name:'tom', sayHi:function(){ console.log(`hi,my name is ${this.name}`) }}person.sayHi()// hi,my name is tomconst person = { name:'tom', sayHi:()=>{ console.log(`hi,my name is原创 2020-11-06 15:44:05 · 221 阅读 · 0 评论 -
ES2015 ...操作符的2种用法
ES2015中新增了一种...的操作符,...操作符有两个作用一、剩余参数 RestES2015以前对于未知个数的参数,我们是用arguments对象来接收,arguments是一个伪数组function foo(){ console.log(arguments)}foo(1,2,3,4,5,6,7)ES2015以后,可以用...来代替arguments 接收剩余参数//在形参前面加上...操作符,这个形参以数组的形式接收从当前这个位置开始往后所有的实参。可以取代以前以argumens原创 2020-11-06 15:19:10 · 232 阅读 · 0 评论 -
ES2015 函数的参数默认值 Default Parameters
ES2015以前,如果我们想要设置参数默认值,需要在函数体中通过逻辑代码来实现。// ES2015以前我们需要在函数体中通过逻辑代码来实现function foo(param){ param = param === undefined ? true : param; console.log(param)}foo() // trueES2015以后,实现方法就简单方便多了:function foo(param = true){ console.log(param)}foo()原创 2020-11-05 16:33:28 · 446 阅读 · 2 评论 -
ES2015 解构 Destructuring
ES2015 新增了一种从数组/对象中获取指定元素的方法,叫解构。一般来说,所有新增方法都是为了弥补过去版本的不完美,正是因为遇到了问题,才出现了新的解决方案。一、数组的解构 (Destructuring)在过去,如果我们想提取一个数组的元素,方法如下:const arr = [100,200,300]const item1 = arr[0]const item2 = arr[1]const item3 = arr[2]console.log(item1,item2,item3) //原创 2020-11-05 16:22:03 · 373 阅读 · 0 评论 -
ES2015 let与块级作用域
一、块级作用域在ES2015之前,ES中只有2种作用域:全局作用域函数作用域ES2015新增了一种作用域——块级作用域,现在有3种了:全局作用域函数作用域块级作用域块: 代码中用花括号所包裹起来的范围举两个常见的块:if(true){ console.log('花括号里面是块')}for(var i = 0; i<10; i++){ console.log('花括号里面是块')}ES2015以前块是没有单独的作用域的,这就导致我们在块里面定义的成员,外部也可以原创 2020-11-05 16:01:01 · 175 阅读 · 0 评论 -
JavaScript和ECMAScript之间的关系
JavaScript是ECMAScript的扩展语言ECMAScript 也是一门脚本语言,缩写为ES,通常看做JavaScript的标准化规范。但实际上JavaScript是ECMAScript的扩展语言,因为ECMAScript只提供了最基本的语法,通俗点说只是约定了我们的代码如何编写,比如定义变量和函数,循环和分支…它只是停留在语言层面,并不能用来完成我们应用中的实际功能开发。JavaScript实现了ECMAScript的语言标准,并且在这个基础之上做了一些扩展,使得我们可以在浏览器环境中操作原创 2020-11-05 11:33:26 · 2959 阅读 · 1 评论