ES6 常用总结(前端开发js技术进阶提升总结)

一、变量声明const和let

在ES6之前,我们都是用var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数的最顶部就在全局作用域的最顶部)。这就是函数变量提升例如:

不用关心bool是否为true or false。实际上,无论如何str都会被创建声明。(如果未声明,返回的是null)

而es6之后,我们通常用let和const来声明。let表示变量、const表示常量,let和const都是块级作用域。如何理解这个块级作用域?

  • 在一个函数内部
  • 在一个代码块内部

let 的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。

const 声明的变量都会被认为是常量,表示它的值被设置完成后就不能再修改了。

如果const的是一个对象,对象所包含的值是可以被修改的。就是对象所指向的地址没有变就行。

二、模板字符串

es6模板字符简直是开发者的福音,解决了es5在字符串功能上的痛点。

2.1 基本的字符串格式化

将表达式嵌入字符串中进行拼接。用${}来界定。

2.2 多行字符串拼接

在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

2.3 更多方法

三、函数新特性

3.1 函数默认参数

在ES5我们给函数定义参数默认值是怎么样?

function action(num) {
    num = num || 200;

    //当传入num时,num为传入的值
    //当没传入参数时,num即有了默认值200
    return num;
}

但细心观察的同学们肯定会发现,num传入为0的时候就是false,但是我们实际的需求就是要拿到num = 0,此时num = 200 明显与我们的实际想要的效果明显不一样。

ES6为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传递进去时使用。

function action( num = 200 ){
    console.log(num)
}
action(0);  //0
action();   //200
action(300) //300

3.2 箭头函数

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。

箭头函数最直观的三个特点:

1.不需要 function 关键字来创建函数

 2.省略 return 关键字

3.继承当前上下文的 this 关键字

说个小细节。

当你的函数有且仅有一个参数的时候,是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return。例如:

作为参考:

来道笔试题:把下面ES5代码简化重构成ES6方式

四、拓展的对象功能

4.1 对象初始化简写

ES5我们对于对象都是以键值对的形式书写,是有可能出现键值对重名的。例如:

ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法:

ES6 对象提供了 Object.assign() 这个方法来实现浅复制。

Object.assign() 可以把任意多个源对象自身可枚举的属性拷贝给目标对象,然后返回目标对象。第一参数即为目标对象。在实际项目中,我们为了不改变源对象。一般会把目标对象传为{}。

五、更方便的数据访问--解构

数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息,ES6新增了解构,这是将一个数据结构分解为更小的部分的过程。

ES5我们提取对象中的信息形式如下:

五、更方便的数据访问--解构

数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息,ES6新增了解构,这是将一个数据结构分解为更小的部分的过程。

ES5我们提取对象中的信息形式如下:

是不是觉得很熟悉,没错,在ES6之前我们就是这样获取对象信息的,一个一个获取。现在,解构能让我们从对象或者数组里取出数据存为变量,例如:

六、Spread Operator 展开运算符

ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿...接下来就展示一下它的用途。

组装对象或者数组:

对于 Object 而言,还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名,右边覆盖左边。

七、import 和 export

7.1 import导入模块、export导出模块

导入的时候有没有大括号的区别是什么。下面是总结:

  1. 当用export default people导出时,就用 import people 导入(不带大括号)。
  2. 一个文件里,有且只能有一个export default。但可以有多个export。
  3. 当用export name 时,就用 import{name} 导入(记得带上大括号).
  4. 当一个文件里,既有一个export default people, 又有多个export name 或者 export age时,导入就用 import people,{name,age}
  5. 当一个文件里出现n多个 export 导出很多模块,导入时除了一个一个导入,也可以用 import * asexample

八、 Promise

在promise之前代码过多的回调或者嵌套,可读性差、耦合度高、扩展性低。通过Promise机制,扁平化的代码机构,大大提高了代码可读性;用同步编程的方式来编写异步代码,保存线性的代码逻辑,极大的降低了代码耦合性而提高了程序的可扩展性。

说白了就是用同步的方式去写异步代码。

发起异步请求:

八、 Generators

生成器( generator)是能返回一个迭代器的函数。生成器函数也是一种函数,最直观的表现就是比普通的function多了个星号*,在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号,机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了,直到下一个人再次唤起才会继续吐票。

OK。说说迭代器。当你调用一个generator时,它将返回一个迭代器对象。这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。next方法不仅返回值,它返回的对象具有两个属性:done和value。value是你获得的值,done用来表明你的generator是否已经停止提供值。继续用刚刚取票的例子,每张排队号就是这里的value,打印票的纸是否用完就这是这里的done。

那生成器和迭代器又有什么用处呢?

围绕着生成器的许多兴奋点都与异步编程直接相关。异步调用对于我们来说是很困难的事,我们的函数并不会等待异步调用完再执行,你可能会想到用回调函数,(当然还有其他方案比如Promise比如Async/await)。

生成器可以让我们的代码进行等待。就不用嵌套的回调函数。使用generator可以确保当异步调用在我们的generator函数运行一下行代码之前完成时暂停函数的执行。

那么问题来了,咱们也不能手动一直调用next()方法,你需要一个能够调用生成器并启动迭代器的方法。就像这样子的:

生成器与迭代器最有趣、最令人激动的方面,或许就是可创建外观清晰的异步操作代码。你不必到处使用回调函数,而是可以建立貌似同步的代码,但实际上却使用 yield 来等待异步操作结束。

十、 async 函数

es6引入了 async 函数,使得异步操作变得更加方便。

async 函数是什么?一句话,它就是 Generator 函数的语法糖。

一比较就会发现,async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。

async函数对 Generator 函数的改进,体现在以下四点:

  • 内置执行器
  • 更好的语义
  • 更广的适用性
  • 返回值是 Promise

十一、 Class基本语法

JavaScript 语言中,生成实例对象的传统方法是通过构造函数:

es6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。

基本上,es6 的%(red)[class]可以看作只是一个语法糖,它的绝大部分功能,es5 都可以做到,新的%(red)[class]写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 es6 的%(red)[class]改写,就是下面这样。

上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,es5 的构造函数Point,对应 es6 的Point类的构造方法。

Point类除了构造方法,还定义了一个toString方法。注意,定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。

es6 的类,完全可以看作构造函数的另一种写法。

原文地址:https://www.cnblogs.com/yuer20180726/p/11382064.html

时间: 2024-10-19 17:47:19

ES6 常用总结(前端开发js技术进阶提升总结)的相关文章

Web前端开发——JS技术大梳理

什么是JS JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称 为javascript引擎,为浏览器的一部分,广泛用于客户端的脚本语言.JavaScript 是一种具有面向对象能力的.解 释型的程序设计语言.更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言. 因为他不需要 在一个语言环境下运行,而只需要支持它的浏览器即可.它的主要目的是,验证发往服务器端的数据.增加 Web互 动.加强用户体验度等. 下面对js从整体的角

前端工程师的技术进阶点,月薪5万难吗?难!

单纯讲技术进阶点意义不大,脱离场景都是耍流氓.我举个实际例子,今天的阿里大文娱优土,阿里接管后,底层替换差不多了,由内容为王转变为产品技术驱动. 这种情况下,前端如何进阶呢?业务很多,历史问题很多,老板迫切希望创新,赶超对手. 端上,我有pc.h5.小程序,播放器 api代理层,我有node,可以快速实现api保证,1.内部有直接用,2)内部没有,自己写,3)不够用,我自己包装,不会让api层限制我的发展 历史问题,我可以快速的想办法吃掉,尤其是老的php,这部分要做的是1)稳定改造2)提高团队

stb前端开发js性能优化总结

js性能优化 javascript是一种解释型语言,性能无法达到和C.C++等编译语言的水平,但还是有一些方法来改进. 1.循环 JavaScript中的循环方式有for(;;).while().for(in)3种.其中for(in)的效率极差,因为for(in)执行过程中需要查询散列键.for(;;)和while()比较,while循环的效率要优于for(;;). 2.局部变量和全局变量 局部变量的访问速度更快,因为全局变量其实是全局对象的成员,而局部变量是放在函数的堆栈当中的. 3.不使用e

常用的前端开发插件与工具合集

常用的前端开发插件与工具合集 Font Awesome字体图标插件 Font Awesome的矢量图标,将使您的网站在视网膜级的高分屏上大放异彩. 完美兼容其它框架 尽管是为Bootstrap设计,但Font Awesome同样能与其它框架完美协同运作. Font Awesome https://fontawesome.com/ SweetAlert系列(数据Ajax)插件 SweetAlert 是 JavaScript 原生 'alert' 弹窗的完美替代品... SweetAlert 让弹窗

Vim常用插件——前端开发工具系列

作为一名开发者,应该对编辑器之神Vim与神之编辑器Emacs有所耳闻吧.编辑器之战的具体细节有兴趣的童鞋可以google之. Vim最大的特点是打开速度快,功能强大,一旦掌握了其中的命令,编程过程双手就不需要离开键盘了. 用习惯了Vim的另一个好处是在linux下可以很轻松地用vi来处理文件,当然emacs也可以做默认编辑器,但是不是每台机器都有安装Emacs. 今天主要给大家介绍Vim在前端领域的一些常用插件: 1.mark.vim mark.vim主要的功能是变量的高亮. 选中要高亮的词,使

常用网站--前端开发类+网页设计类+平面素材类+flash类

前端开发类 animate CSS 前端开发网 我爱CSS 大家网 W3School jQuery开发技术详解教程视频 jQuery中文社区 jQueryChina 网页设计类 禅意花园 CSS Downunder CSS Impress CSS New websitelaunchpad wpglobe UI Maker 平面素材类 站酷网 昵图网 书法字体 图萝网 素彩网 三联素材 flash类 牛图库 Pian Tou 68 flash flash 片头之家 jQuery JavaScrip

web前端开发必备技术

1.Vue.js是什么? Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 如果你是有经验的前端开发者,想知道 Vue.js 与其它库/

我常用的前端开发工具—cutterman,mark man,sublime text,yeoman,gulp……

虽然才刚刚开始练习切图,不过之前还是接触到不少工具的,决定一一用上,果然用了一天就切完了一个psd,对于一个菜鸟来说,还是很开心的. 我先从学ui网下载了一个psd.切图肯定是要用的ps的啦,这里和大家推荐一个插件Cutterman,切起来不要太方便.可以到他们的官网下载http://www.cutterman.cn/ 教程可以看这里http://www.cnblogs.com/nifengs/p/5216013.html 除了切图,我们还需要知道设计图上一些元素的位置.大小和颜色.这时候就推荐

常用的前端开发工具

1.调试工具:firebug 2.jslint 检查错误 3.jsMin 压缩工具 4.JSCompress  压缩工具 5.JS Regexp Generator http://www.jslab.dk/tools.regex.php一个制作正则表达式的在线工具 6.JS Beautifierhttp://jsbeautifier.org/在线JS格式化工具 7.YUI Compressor http://developer.yahoo.com/yui/compressor/用java写的一个