目录

1.变量声明 const 和 let

2.字符串

3.函数

4.拓展的对象功能

5.更方便的数据访问--解构

6.Spread Operator 展开运算符

7.import 和 export

8. Promise

9.Generators

总结


刚开始用Vue或者React,很多时候我们都会把ES6+这位大兄dei加入我们的技术栈中。但是ES6+那么多那么多新特性,我们真的需要全部都掌握吗?秉着二八原则,掌握好常用的、有用的,这个可以让我们的开发快速起飞。

接下来我们就聊聊ES6那些可爱的新特性吧!

1.变量声明 const 和 let

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

  function aa() {if(flag) {var test = 'hello man'} else {console.log(test)}}

以上的代码实际上是:

  function aa() {var test // 变量提升,函数最顶部if(flag) {test = 'hello man'} else {//此处访问 test 值为 undefinedconsole.log(test)}//此处访问 test 值为 undefined}

所以不用关心 flag 是否为 true or false。实际上,无论如何 test 都会被创建声明。

接下来ES6主角登场:
我们通常用 letconst 来声明,let 表示变量const 表示常量letconst 都是块级作用域。怎么理解这个块级作用域?

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

说白了,只要在 {}花括号内 的代码块即可以认为 letconst 的作用域。

看以下代码:

  function aa() {if(flag) {let test = 'hello man'} else {//test 在此处访问不到console.log(test)}}

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

再来说说 const
const 声明的变量必须提供一个值,而且会被认为是常量,意思就是它的值被设置完成后就不能再修改了。

    const name = 'cc'name = 'yy' // 再次赋值此时会报错

还有,如果 const 的是一个对象,对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址不能改变,而变量成员是可以修改的。

看以下例子就非常清楚:

    const student = { name: 'cc' }student.name = 'yy' // 修改变量成员,一点儿毛病没有student  = { name: 'yy' } // 修改变量绑定,这样子就会报错了

说说TDZ(暂时性死区),想必你早有耳闻。

    {console.log(value) // 报错let value = 'lala'}

我们都知道,JS引擎扫描代码时,如果发现变量声明,使用的是 var 声明变量时会将声明的变量提升到函数或全局作用域的顶部。但是 let 或者 const,会将声明的变量关进一个小黑屋也是TDZ(暂时性死区),只有执行到变量声明这句语句时,变量才会从小黑屋被放出来,才能安全使用这个变量。

哦了,咱们说一道面试题!

  var funcs = []for (var i = 0; i < 10; i++) {funcs.push(function () {console.log(i)})}funcs.forEach(function(func) {func()})

这样的面试题是大家很常见,很多同学一看就知道输出十次10
但是如果我们想依次输出0到9呢?
有两种解决方法,直接看一下代码:

    // ES5知识,我们可以利用“立即调用函数”解决这个问题var funcs = []for (var i = 0; i < 10; i++) {funcs.push((function(value) {return function() {console.log(value)}})(i))}funcs.forEach(function(func) {func()})
  // 再来看看es6怎么处理的const funcs = []for (let i = 0; i < 10; i++) {funcs.push(() => console.log(i))}funcs.forEach(func => func())

达到相同的效果,ES6 简洁的解决方案是不是更让你心动!!!

2.字符串

先聊聊模板字符串

javascript es6 特性简介相关推荐

  1. JavaScript ES6 特性

    JavaScript ES6 特性 下面的代码主要是描述以下内容: let是块区作用域,不会变量提升.var也是块做作用域,但是会变量提升. -展开操作符作用于数组. 数组解构赋值. 对象增强. -展 ...

  2. JavaScript ES6新特性(二):模块化

    简介 模块化指的是将一个很大的程序文件按照一定的规则进行拆分,然后根据需要进行引入组合. 好处: 防止命名冲突. 代码复用. 高维护性. 语法: 主要分为暴露语法和引入语法. 暴露语法: 在js代码块 ...

  3. 【VUE】看完这篇文章能够了解es6特性和vue基础

    Vue讲解 1.Vue.js特性简介 什么是Vue.js Vue是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只 ...

  4. [转]JavaScript ES6 class指南

    [转]JavaScript ES6 class指南 前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建 ...

  5. es6 数组合并_九个前端开发必学超级实用的 ES6 特性

    1.展开操作符 顾名思义,用于对象或数组之前的展开操作符(-),将一个结构展开为列表. 这种写法够优雅,够简洁吧?如果不用展开操作符 我们得这么写: 展开操作符也适用于合并对象的属性: 不用展开操作符 ...

  6. 最常用的ES6特性(转)

    最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, defaul ...

  7. Javascript Proxy对象 简介

    Javascript Proxy对象 简介 本文转载自:众成翻译 译者:eJayYoung 链接:http://www.zcfy.cc/article/4755 原文:https://blog.cam ...

  8. 第四节:教你如何快速让浏览器兼容ES6特性

    写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...

  9. Javascript - ES6新语法概览

    Javascript - ES6新语法概览 简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联 ...

最新文章

  1. 程序员面试题精选100题(19)-反转链表[数据结构]
  2. c# 扩展方法奇思妙用基础篇八:Distinct 扩展(转载)
  3. Thymeleaf 学习笔记 (4)~~~~
  4. 【angularJS】简介
  5. char、varchar、nchar、nvarchar的区别
  6. win10搜索框没反应怎么修复
  7. python与财务工作总结_Python小结1
  8. 主流H.264编码器对比测试 (MSU出品)
  9. 莫比乌斯反演汇总【算法+题目】
  10. 调用钉钉接口和微信实现消息通知
  11. js实现简单的图片上传
  12. kali中rarcrack命令爆破rar压缩包密码
  13. 不要过分相信基础函数, 因为那也是人写的------警惕负负得正的现有逻辑之坑
  14. 利用PROGISP实现ARDUINO IDE编写的程序的下载以及如何把AVR单片机做成ARDUINO板
  15. ESP32-CAM+PIR传感器=动作抓拍监控
  16. 柳岩清晨晒素颜照称拿去辟邪 网友称吓人没认出来
  17. 这些年,为保住阿里饭碗学习的并发编程
  18. php++内购续期订阅,关于自动订阅(auto renewal)
  19. 操作系统之进程调度与内存管理
  20. Hls.js播放m3u8视频 DPlayer视频播放器(easypan) MSE简介

热门文章

  1. python aes padding_python笔记43-加解密AES/CBC/pkcs7padding
  2. 4G EPS 中的 FDD/TDD 无线帧
  3. VMware vSphere 虚拟化简介
  4. Python OOP知识积累
  5. Linux 驱动 Printk 在终端没有输出
  6. altium designer 的Import wizard 没有内容或为空的解决方法
  7. Kingdee v7.0账套修复
  8. 基于Hadoop生态系统的一种高性能数据存储格式CarbonData(性能篇)
  9. oss https 代理
  10. 文字如何实现完美UI?文本排版设计告诉你