ES6新特性:let和const的使用
(声明, 本文的所有代码均在node的最新稳定版本v4.4.3中执行的, 如果在浏览器中执行请把JS的运行环境提升为ES6)
以前一直用var定义变量, 现在有了两种新的定义变量的方式, 1: let, 2: const;本文大概概括下使用let和const定义变量有哪些好处;
let:
1:声明提前
使用var声明变量,存在声明提前的问题, 输出的tmp为"undefined":
{
var tmp = new Date();
let f = function (){
console.log(tmp); //undefined
if (false){
//使用var声明变量的声明提前;
var tmp = "hello world";
}
}
f();
}
如果我们把定义tmp的方式改为let呢? 那么tmp输出的结果为当前的日期。
{
var tmp = new Date();
let f = () => {
console.log(tmp); //输出的结果为当前的日期
if (false){
//使用let的方式声明, tmp的作用域只有在离他最近的一个{}括号中;
let tmp = "hello world";
}
}
f();
}
2:块状作用域
let和const不但拥有块状作用域, 还也不存在声明提前这个玩意儿, 以下代码会报ReferenceError错
{
let tmp = ;
{
tmp = ;
let tmp = ;
}
}
使用let声明的元素作用域更加明确, 不会出现作用域混乱的情况, 可以减少bug的产生;
{
let foo = ;
{
let foo = ;
foo = ;
}
console.log(foo);
}
以上这段代码相当于是IIFE(立即执行函数表达式), 效果和以下的相同;
{
var foo = ;
(function(){
var foo = ;
foo = ;
}());
console.log(foo);
}
再来猜猜这个的结果是什么,( var 形式声明的变量会提升到{}外面去哦 , {}形式的块状作用域相当于是if(true){//code}的写法):
{
var foo = ;
{
var foo = ;
foo = ;
}
console.log(foo);
}
3:重复声明
使用let声明的变量不能重复声明,否则会出现一下错误:
SyntaxError: Identifier 'a' has already been declared
注意: 在全局下用let声明变量和用var声明变量还是有区别的:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
<script>
"use strict";
let foo = ;
console.log(window.foo); //输出 undefined
var bar = ;
console.log(window.bar); //输出1
</script>
</body>
</html>
const:
使用const定义的常量, 而且定义一次以后不能再进行更改, 否者会报错;
使用const定义的常量, 拥有let一样的特性(无声明提前, 有块状作用域, 重复声明);
但是要注意, 如果给常量定义的是对象,只要该对象指向在内存中的地址不发生改变, 数据可以随便改的(这涉及到计算机的传值和传址);
对象:
{
const foo = {};
foo.bar = ;
console.log(foo.bar);
}
数组:
{
const foo = [];
foo.push();
foo.push();
console.log(JSON.stringify(foo));
}
这些新语法让JS更加规范, 也更加适合大项目, 我仿佛猜到以后要用private和public声明变量了....( ╯□╰ )
参考:
阮一峰:http://es6.ruanyifeng.com/#docs/let
https://github.com/DrkSephy/es6-cheatsheet#var-versus-let--const
作者: NONO
出处:http://www.cnblogs.com/diligenceday/
QQ:287101329
微信:18101055830
ES6新特性:let和const的使用的更多相关文章
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
- 你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
- 前端入门21-JavaScript的ES6新特性
声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...
- ES6新特性三: Generator(生成器)函数详解
本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...
- 34.js----JS 开发者必须知道的十个 ES6 新特性
JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...
- Atitit js es5 es6新特性 attilax总结
Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...
随机推荐
- USACO1.5Superprime Rid[附带关于素数算法时间测试]
题目描述 农民约翰的母牛总是产生最好的肋骨.你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们.农民约翰确定他卖给买方的是真正的质数肋骨,是因为从右边开始切下肋骨,每次还剩下的肋骨上的数字都组 ...
- 第10章 同步设备I/O和异步设备I/O(2)_同步IO和异步IO基础
10.3 执行同步设备I/O (1)对设备读写操作的函数 ①ReadFile/WriteFile函数 参数 描述 hFile 文件句柄 pvBuffer 指向要接收文件数据的缓冲区或把缓冲区数据写入设 ...
- AC日记——逆波兰表达式 openjudge 3.3 1696
1696:逆波兰表达式 总时间限制: 1000ms 内存限制: 65536kB 描述 逆波兰表达式是一种把运算符前置的算术表达式,例如普通的表达式2 + 3的逆波兰表示法为+ 2 3.逆波兰表达式 ...
- 代码静态解析PMD
在正式进入测试之前,进行一定的静态代码分析及code review对代码质量及系统提高是有帮助的,以上为数据证明 Pmd 它是一个基于静态规则集的Java源码分析器,它可以识别出潜在的如下问题:– 可 ...
- [No00001A]天天换图,百词斩到底在折腾啥
- 转: YAML 语言教程 from(阮一峰)
YAML 语言教程 from: http://www.ruanyifeng.com/blog/2016/07/yaml.html
- Windows 7 USB DVD Download Tool
1.下载.安装.运行Windows 7 USB DVD Download Tool: 百度官方下载 http://rj.baidu.com/soft/detail/20458.html 2.点击&qu ...
- HTML 学习笔记 CSS(选择器2)
CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 该选择器可以单独使用 也可以和其他元素结合使用 提示 只要适当的 ...
- Entity Framework Code Migration 新建、更新数据库
在Package Manager Console中执行 A:新建数据库: 1.Add-Migration init[名称](为挂起的Model变化添加迁移脚本) 2.Update-Database(将 ...
- 苹果IOS开发者账号总结--发布应用APP时team name是否可以随意写?
个人账号(Individual): 费用99美金一年, 该账号在App Store销售者只能显示个人的ID,比如zhitian zhang,单人使用.个人账号只能有一个开发者.100个苹果的iOS设备 ...