ES6学习笔记
前端小黑
never give up never give in
展开
-
前端面试题 我在面试bat字节时被问的ES6相关问题
做为前端开发,应该都知道,ES6是我们必学的,而之所以强调ES6,是因为在ES6那个版本增加了很多东西,以至于阮一峰大佬还写了本书,也因此,我们经常会在面试里面被问到,你了解ES6吗,知道哪些新特性,而在你说出来之后,就会引来一系列的问题,这篇博客就从我面试bat字节时被问到的一些问题和网上的面经结合做一些总结和问题的回答,同时也会谈到如何从被问的问题里面“引导”面试官去问你其他的问题新增声明符...原创 2020-05-05 23:40:07 · 593 阅读 · 1 评论 -
前端面试题 ES5-ES6 function-class实现类的区别记录详解
在ES5中,我们是通过function来实现类和类的继承,而在ES6中,我们多了class这个语法糖,除了看起来更像一个类外,在很多方面class做到了比function更加严格1. 写法上在ES5中,我们是通过prototype和Object.create()来实现类和继承function Person(){}function Student(){}Student.prototype ...原创 2020-03-02 17:28:39 · 1308 阅读 · 0 评论 -
ES6学习笔记(二)参数的默认值和rest参数
ES6在函数参数上有了一些很方便的改变,其一就是参数的默认值可以在写形参的时候直接写参数默认值的使用参数的默认值是在参数被省略或者参数为undefined时使用。function fn(a=1){ console.log("a: "+a);}fn() // "a: 1"fn(undefined) // "a: 1"fn(2) // "a: 2"这两种情况看起...原创 2019-01-09 23:33:20 · 729 阅读 · 0 评论 -
ES6学习笔记(九)数值的扩展
在ES6中,对于数值的扩展,主要是扩展了进制的表示方法,在Number对象和Math对象上增加了一些常量和方法,还有增加了指数运算符。二进制和八进制的表示法ES6提供了二进制和八进制的写法,在ES5中,虽然也有在数字前面加一个0来表示八进制的写法,但在严格模式下会报错,而ES6提供的0b,0o即使在严格模式下也不会报错。(function (){ console.log(01...原创 2019-01-16 13:07:54 · 379 阅读 · 0 评论 -
ES6学习笔记(十五)Generator函数
Generator函数是ES6中提供的一种异步解决方案,该函数同时也可以用来部署遍历器。Generator函数的使用Generator函数和普通的函数不一样,其function和函数名之间有个*,函数体内部用yield表达式来定义不同的状态。function* gen(){yield 1;yield 2; yield 3;}上面代码即为一个G...原创 2019-01-22 11:59:59 · 418 阅读 · 0 评论 -
ES6学习笔记(十六)async函数
async函数简介async函数简单来说就是Generator函数的语法糖,可以看成多个异步操作包装成的Promise对象。相比较于Generator函数,async函数多了几个改进的地方1.内置执行器在使用Generator函数时,我们需要自己设置一个执行器,但是async自带执行器,在使用时与普通函数一样只需要函数名和括号来传入参数。2.更好的语义相对于Generator函...原创 2019-01-22 16:02:27 · 681 阅读 · 0 评论 -
ES6学习笔记(十八)尾调用优化
尾调用优化是ES6中出现的一个涉及函数调用的特定化有形式相关的特殊要求,该优化解决的问题举一个常见的例子就是我们使用递归时因为调用递归太多次而报错的情况。如果我们使用尾调用的话就不会有这种问题。首先来了解以下什么是尾调用尾调用尾调用顾名思义,是在函数的最后一步调用另一个函数,如下代码:function f1(){ return f2();}f2是在f1的最后一步调用...原创 2019-02-18 18:27:54 · 473 阅读 · 0 评论 -
ES6学习笔记(十九)正则的扩展
RegExp构造函数RegExp构造函数并非ES6中新增的,而是在ES5中就有的,首先来看ES5的用法。在ES5中,RegExp构造函数有两种用法,可以传入一个参数,也可以传入两个参数传入一个参数时,需要传入一个正则表达式,此时会返回该正则表达式的拷贝。var regex = new RegExp(/xyz/i);// 等价于var regex = /xyz/i;传入两个...原创 2019-02-23 21:42:43 · 413 阅读 · 0 评论 -
ES6语法实现Promise过程
Promise是ES6中的一种异步实现方式,现在我们来自己实现Promise。(有关Promise使用:ES6学习笔记 Promise)下面会详细写出实现过程及遇到的问题,如果要看代码实现的话直接滑至博客底部Promise构造首先,我们创建一个promise.js来实现promise,使用class构造类并使用module.exports导出Promiseclass Promise { ...原创 2019-07-29 03:27:16 · 706 阅读 · 0 评论 -
webpack配置babel执行ES module语法
ES module中的import和export语法等现在还不受浏览器和node支持(我的node版本是v10.14.2,运行的时候是会报错的),所以这里通过使用webpack配置babel来执行得到结果npm init初始化内容在package.json中的script加入build,当执行npm run build时执行webpack{ "name": "babel-config...原创 2019-08-12 12:23:22 · 2326 阅读 · 0 评论 -
ES6学习笔记(二十)ES Module的语法与使用
下面要写出的ES Module的语法,现在还无法在浏览器和node直接执行,建议使用babel转码后执行首先,在谈及ES module的语法前,要先明确一点,ES module默认使用严格模式javascript严格模式整理,所以松散模式下的一些不会报错的地方在使用ES module时要注意export输出方式1. 将整个声明输出简单的变量export var a = 1;方法...原创 2019-08-12 12:24:42 · 1054 阅读 · 0 评论 -
ES6学习笔记(十四)Promise对象
promise是用于实现异步编程的一种解决方案,异步操作保存在promise中,在promise状态发生改变时触发对应的异步操作。Promise的特点promise有三种状态,pending(进行中),resolve(已成功),rejected(已失败)。只有异步操作的结果才能改变promise的状态,其他操作无法改变其状态。 Promise的状态转换只有两种,从pending转为res...原创 2019-01-20 17:49:33 · 558 阅读 · 0 评论 -
ES6学习笔记(八)字符串的扩展
在谈及字符串的扩展之前,先说说字符的扩展,ES6中对于字符的扩展,主要就是解决Unicode码点超过0xFFFF的字符在过去的版本中出现的问题,填了之前遍历含Unicode码点超过0xFFFF的字符串时的一些坑。字符的Unicode表示法在JavaScript中允许使用\uxxxx表示一个字符,其中xxxx是字符的Unicode码点。但这种方法的码点需要在0000~ffff之间,超出这个范...原创 2019-01-15 00:54:47 · 912 阅读 · 1 评论 -
ES6学习笔记(四)解构赋值
ES6中的解构赋值,在我的理解来看,就是把一个类型的数据分解构造,然后把值赋给另一个同样分解了构造的变量。下面是几种类型的解构赋值。几种类型的解构赋值一.数组的解构赋值数组的解构赋值可以将等号右边对应位置的数值赋值给等号左边对应位置的变量let [a,b,c]=[1,2,3];a;//1b;//2c;//3如果等号右边的数组长度小于左边数组的长度,就会出现解构不成功的情...原创 2019-01-11 16:48:18 · 728 阅读 · 0 评论 -
ES6学习笔记(五)Set结构和Map结构
Set Set的构建 Set是ES6中新的数据结构,它与数组类似,但是Set里面没有重复的值,可以用new运算符来构造一个Set,Set的构造函数可以传入一个参数,参数要是有iterable的结构,比如数组,arguments,字符串,元素集合,Set结构,Map结构等let s1=new Set([1,2,3,4,5]);let s2=new Set("abcdef");S...原创 2019-01-11 19:26:03 · 782 阅读 · 0 评论 -
ES6学习笔记(六)Iterator接口
在ES6中,添加了Set和Map结构(ES6学习笔记(五)Set结构和Map结构),加上之前的数组和对象,一共有四种可以表示“集合”的数据结构,而通过组合使用它们可以定义自己的数据结构。为了处理不同的数据结构,需要一个统一的机制,而Iterator接口就是这样的机制。Iterator接口的作用和遍历过程作用:Iterator接口用于为不同的数据结构提供统一的接口,使得数据结构的成员能按一定...原创 2019-01-13 16:09:44 · 593 阅读 · 0 评论 -
ES6学习笔记(十七)类class
类的使用类是ES6为了更接近传统语言的写法而加入的新的概念,作为对象的模板,通过class关键字,可以定义类。要注意的是,类其实可以说只是一个语法糖,因为它能实现的都能在ES5中实现,它本身的数据结构是函数。它虽然叫类,但它实际上并非是类机制,而是委托机制,其继承还是基于[[Prototype]]的。class c{}typeof c// "function"类的构建类在...原创 2019-01-23 18:15:59 · 714 阅读 · 0 评论 -
ES6学习笔记(十)对象的扩展
ES6对于对象的扩展,主要是在其属性的操作上提供了更多方便,属性的表示更为简洁方便,对属性更好地遍历,提供了几个新的方法。属性的新表示法属性的简便写法如果在属性块外声明一个变量,将该变量放入属性块中,就能直接生成对应的属性名和属性值,属性名就是变量名,属性值就是该变量的值let a=1;foo={a};foo//{a:1}简便写法和普通的写法可以结合let a=...原创 2019-01-18 17:40:20 · 557 阅读 · 0 评论 -
ES6学习笔记(七)数组的扩展
扩展运算符扩展运算符的使用跟rest参数刚好相反,rest参数是将多个逗号分隔的参数转为一个数组,而扩展运算符是将数组转为逗号分隔的参数扩展运算符后面可放表达式,表达式的结果要是一个带有Iterator接口的数据结构,如果后面是一个空数组,则返回空,而如果放在括号内,则会被认为是函数调用扩展运算符内部调用的是数据结构的 Iterator 接口,只要带有Iterator接口,就可以使...原创 2019-01-14 00:38:15 · 384 阅读 · 0 评论 -
ES6学习笔记(十一)Symbol
在JavaScript中,原本是有六种数据类型:undefined,null,数值,字符串,布尔值,对象。在ES6种,新增了Symbol这种数据类型Symbol的构建Symbol值通过Symbol函数来生成,表示独一无二的值,其方法可以传入一个字符串作为参数,表示对Symbol值的描述。但不管是否传入参数,参数是否相同,Symbol值都是独一无二的,没有两个Symbol值会相等。va...原创 2019-01-18 22:49:16 · 671 阅读 · 0 评论 -
ES6学习笔记(十二)Proxy代理
Proxy的使用Proxy用于修改部分操作,具体为拦截操作后按自己定义的方式执行操作,通过proxy可以实现对访问的过滤和改写。varproxy =newProxy(target,handler);Proxy构造函数接受两个参数,第一个参数是要拦截的目标对象,第二个参数是拦截的行为,包括允许的拦截操作和自定义的修改。varproxy =newProxy({},{...原创 2019-01-19 18:59:23 · 2114 阅读 · 0 评论 -
ES6学习笔记(十三)Reflect对象
Reflect与Proxy一样,是为了更好地操作对象而设计的,Proxy代理通过拦截修改某些方法,而Reflect是将一些方法移植到该对象上,使某些方法变为更加合理。Reflect设计的目的将Object中一些方法放到reflect对象上。现阶段某些方法同时在Object和Reflect对象上部署,未来的新方法将只在Reflect对象上部署。 修改某些Object的返回值,使其更为合理。...原创 2019-01-20 00:06:41 · 2640 阅读 · 0 评论 -
ES6学习笔记(一)let和const 块级作用域
letlet使用的作用域let是ES6中新加入的变量声明,和var类似,但是let声明的变量只能在其声明的块级作用域中使用if(true){ var a=1; }console.log(a);//输出1if(true){ let b=1;}console.log(b);//报错:Uncaught ReferenceError: b is not defi...原创 2018-11-23 19:36:00 · 791 阅读 · 0 评论 -
ES6学习笔记(三)箭头函数
接触ES6之前一看到箭头函数,脑子里真的是一堆问号,不知道到底写的什么东西,但是看了一些资料了解之后,觉得也是挺容易使用的,而且在一些场合特别方便,尤其是在使用数组函数的时候,所以就把箭头函数的内容做了份笔记写下来。箭头函数的使用//ES5function fn1(){};function fn2(a){};function fn3(a,b,c){};//ES6let fn1...原创 2019-01-10 22:02:40 · 905 阅读 · 0 评论