javascript es6 特性简介
目录
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主角登场:
我们通常用 let
和 const
来声明,let
表示变量、const
表示常量。let
和 const
都是块级作用域。怎么理解这个块级作用域?
- 在一个函数内部
- 在一个代码块内部
说白了,只要在 {}花括号内 的代码块即可以认为
let
和const
的作用域。
看以下代码:
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 特性简介相关推荐
- JavaScript ES6 特性
JavaScript ES6 特性 下面的代码主要是描述以下内容: let是块区作用域,不会变量提升.var也是块做作用域,但是会变量提升. -展开操作符作用于数组. 数组解构赋值. 对象增强. -展 ...
- JavaScript ES6新特性(二):模块化
简介 模块化指的是将一个很大的程序文件按照一定的规则进行拆分,然后根据需要进行引入组合. 好处: 防止命名冲突. 代码复用. 高维护性. 语法: 主要分为暴露语法和引入语法. 暴露语法: 在js代码块 ...
- 【VUE】看完这篇文章能够了解es6特性和vue基础
Vue讲解 1.Vue.js特性简介 什么是Vue.js Vue是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只 ...
- [转]JavaScript ES6 class指南
[转]JavaScript ES6 class指南 前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建 ...
- es6 数组合并_九个前端开发必学超级实用的 ES6 特性
1.展开操作符 顾名思义,用于对象或数组之前的展开操作符(-),将一个结构展开为列表. 这种写法够优雅,够简洁吧?如果不用展开操作符 我们得这么写: 展开操作符也适用于合并对象的属性: 不用展开操作符 ...
- 最常用的ES6特性(转)
最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, defaul ...
- Javascript Proxy对象 简介
Javascript Proxy对象 简介 本文转载自:众成翻译 译者:eJayYoung 链接:http://www.zcfy.cc/article/4755 原文:https://blog.cam ...
- 第四节:教你如何快速让浏览器兼容ES6特性
写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...
- Javascript - ES6新语法概览
Javascript - ES6新语法概览 简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联 ...
最新文章
- 程序员面试题精选100题(19)-反转链表[数据结构]
- c# 扩展方法奇思妙用基础篇八:Distinct 扩展(转载)
- Thymeleaf 学习笔记 (4)~~~~
- 【angularJS】简介
- char、varchar、nchar、nvarchar的区别
- win10搜索框没反应怎么修复
- python与财务工作总结_Python小结1
- 主流H.264编码器对比测试 (MSU出品)
- 莫比乌斯反演汇总【算法+题目】
- 调用钉钉接口和微信实现消息通知
- js实现简单的图片上传
- kali中rarcrack命令爆破rar压缩包密码
- 不要过分相信基础函数, 因为那也是人写的------警惕负负得正的现有逻辑之坑
- 利用PROGISP实现ARDUINO IDE编写的程序的下载以及如何把AVR单片机做成ARDUINO板
- ESP32-CAM+PIR传感器=动作抓拍监控
- 柳岩清晨晒素颜照称拿去辟邪 网友称吓人没认出来
- 这些年,为保住阿里饭碗学习的并发编程
- php++内购续期订阅,关于自动订阅(auto renewal)
- 操作系统之进程调度与内存管理
- Hls.js播放m3u8视频 DPlayer视频播放器(easypan) MSE简介