前端开发必知的ES610个特性

原创 Fly丶 教程 前端 116阅读 14 天前 举报

ES6,正式名称是ECMAScript2015,但是ES6这个名称更加简洁。ES6已经不再是JavaScript最新的标准,但是它已经广泛用于编程实践中。如果你还没用过ES6,现在还不算太晚…

下面是10个ES6最佳特性,排名不分先后:

  • 函数参数默认值
  • 模板字符串
  • 多行字符串
  • 解构赋值
  • 对象属性简写
  • 箭头函数
  • Promise
  • Let与Const
  • 模块化
  • 函数参数默认值
  • 不使用ES6

为函数的参数设置默认值:

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力
群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

这样写一般没问题,但是,当参数的布尔值为false时,是会出事情的!比如,我们这样调用foo函数:

因为0的布尔值为false,这样height的取值将是50。同理color的取值为‘red'。

使用ES6

模板字符串

不使用ES6

使用+号将变量拼接为字符串:

使用ES6

将变量放在大括号之中:

ES6的写法更加简洁、直观。

多行字符串

不使用ES6

使用“\n\t”将多行字符串拼接起来:

使用ES6

将多行字符串放在反引号“之间就好了:

解构赋值

不使用ES6

当需要获取某个对象的属性值时,需要单独获取:

使用ES6

一次性获取对象的子属性:

对于数组也是一样的:

对象属性简写

不使用ES6

对象中必须包含属性和值,显得非常多余:

使用ES6

对象中直接写变量,非常简单:

箭头函数

不使用ES6

普通函数体内的this,指向调用时所在的对象。

使用ES6

箭头函数体内的this,就是定义时所在的对象,而不是调用时所在的对象。

不使用ES6

嵌套两个setTimeout回调函数:

使用ES6

使用两个then是异步编程串行化,避免了回调地狱:

Let与Const

使用Var

var定义的变量未函数级作用域:

使用let与const

let定义的变量为块级作用域,因此会报错:

const与let一样,也是块级作用域。

不使用ES6

使用构造函数创建对象:

使用ES6

使用Class定义类,更加规范,且你能够继承:

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力
群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

模块化

JavaScript一直没有官方的模块化解决方案,开发者在实践中主要采用CommonJS和AMD规范。而ES6制定了模块(Module)功能。

不使用ES6

Node.js采用CommenJS规范实现了模块化,而前端也可以采用,只是在部署时需要使用Browserify等工具打包。这里不妨介绍一下CommenJS规范。

module.js中使用module.exports导出port变量和getAccounts函数:

main.js中使用require导入module.js:

使用ES6

ES6中使用export与import关键词实现模块化。

module.js中使用export导出port变量和getAccounts函数:

main.js中使用import导入module.js,可以指定需要导入的变量:

也可以将全部变量导入:

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:866109386,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复