ES2015入门系列2-let和const

godiscoder 发布于2019-08-20 17:37 / 1486人阅读

摘要：新增了两个变量修饰关键字它们都是块级别的，那什么是块简单的来说，块就是一组花括号中间的部分。全局变量使用基本上可以不用了

ES2015 新增了两个变量修饰关键字:

let

const

它们都是块级别的，那什么是块？简单的来说，块就是一组花括号中间的部分。

Var

为了理解let我们先从var说起，如下代码:

function checkStatus(status) {
  if (status) {
    var statusLabel = "ok";
    console.log(statusLabel);
  } else {
    console.log(statusLabel);
  }
}
checkStatus(true);
checkStatus(false);

在 Chrome Console 中运行后，获得结果:

ok
undefined

我们在false条件中加入一行代码：

function checkStatus(status) {
  if (status) {
    var statusLabel = "ok";
    console.log(statusLabel);
  } else {
    console.log(statusLabel);
    console.log(abc);//执行后会输出: Uncaught ReferenceError: abc is not defined(…)
  }
}
checkStatus(true);
checkStatus(false);

对于初次接触JavaScript的后端程序员来说，会觉得非常奇怪，在传入false的时候为什么得到的statusLabel是undefined而不是变量未定义？而尝试输出abc就能得到变量未定义的错误呢？

这是因为在JavaScript中使用var定义的变量会被预先提升到作用域最开始的地方(这里就是这个function), 在这个例子中也就是if位置的上面, 代码就可以写成:

function checkStatus(status) {
  var statusLabel;
  if (status) {
    statusLabel = "ok";
    console.log(statusLabel);
  } else {
    console.log(statusLabel);
  }
}

这是JavaScript独有的, 所以之前定义变量的好的习惯就是在所有可能会使用的地方之前定义好，如此，才不会产生各种奇怪奇怪的问题。

Let

let就是新的 var，和var不同的是它是块级的，将上面的代码中的var换成let

function checkStatus(status) {
  if (status) {
    let statusLabel = "ok";
    console.log(statusLabel);
  } else {
    console.log(statusLabel);
  }
}
checkStatus(true);
checkStatus(false);

这样的到的结果就是我们设想的，true的时候是ok， false的时候抛出变量不存在的错误，如果false的时候想要输出undefined, 那么就要手动定义在 if 的上面:

function checkStatus(status) {
  let statusLabel;
  if (status) {
    statusLabel = "ok"
    console.log(statusLabel);
  } else {
    console.log(statusLabel);
  }
}
checkStatus(true);
checkStatus(false);

const

const 和 let 一样是块级, 从名字上看是用来常量的，其实不然，正确的说法是 single-assignment, 也就是说只能对其进行一次赋值并且只能在定义的时候赋值，后面如果再想对其进行赋值操作就会报错。

const PI = 3.1415926;
PI = 2.0; //报错，Uncaught TypeError: Assignment to constant variable.

但是，这不代表const定义的就不可以改变的(immutable), 如下代码:

const animals = ["rabbit", "monkey"];
console.log(animals); //["rabbit", "monkey"]
animals.push("donkey");
console.log(animals);//["rabbit", "monkey", "donkey"]
animals = ["bird"]; //报错，Uncaught TypeError: Assignment to constant variable.

那如何决定该使用哪种关键词呢？

这个目前社区没有统一的规范，不过本人比较喜欢下面这种，即：

优先使用let

常量用const, 如常规常量, 导入的模块等等。

全局变量使用var (基本上可以不用了?)

云服务器服务器托管 es6-系列入门系列课程深度学习入门系列课程 spark入门实战系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83731.html

es6快速入门

摘要：快速入门简介以下简称是语言的下一代标准，已经在年月正式发布了。而且声明后必须立即初始化赋值，不能后面赋值。方法默认返回实例对象即，可以指定返回另外一个对象。参数搭配的变量是一个数组，该变量将多余的参数放入数组中。 es6快速入门 showImg(https://segmentfault.com/img/remote/1460000008519223?w=560&h=314); ES6简...

liujs 2019-08-20 14:39 评论0 收藏0
ES2015入门系列5-解构赋值

摘要：用过的同学肯定见过类似下面的代码这就是为带来的另一个新的语法解构赋值。解构赋值是用来让我们从数组或者对象中提取数据赋值给不同的变量。解构赋值操作不会抛错，如果没有找到，将会用赋值过去。用过ReactNative的同学肯定见过类似下面的代码: import { Text, View } from react-native; 这就是ES2015为JavaScript带来的另一个新的语法：...

chuyao 2019-08-20 17:40 评论0 收藏0
[ ES6 ] 快速掌握常用 ES6 （一）

摘要：常量变量先说说常量和变量的概念吧，常量是说那种进行一次赋值后不会更改的值，比如说游戏账户的，变量是说赋值后有更改的需求的，比如游戏名，游戏密码。常用实例交换变量的值提取数据解构赋值对提取对象中的数据，尤其有用。本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》学习 20% 的知识完成 80% 的工作关于 ...

ispring 2019-08-23 14:01 评论0 收藏0
2017-06-29 前端日报

摘要：前端日报精选如何在非项目中使用知乎专栏编码规范最常被遗忘的性能优化浏览器缓存个人文章译统一样式语言掘金新的开发者提及最多的个视频众成翻译中文第期在中使用译统一样式语言掘金前端现状答题救不了前端新人相学长怼前端岁以 2017-06-29 前端日报精选如何在非 React 项目中使用 Redux - 知乎专栏Javascript编码规范 - Clearlove - SegmentFau...

gaosboy 2019-08-20 17:37 评论0 收藏0
带你入门 JavaScript ES6 (一)

摘要：是国际组织于年月日发布的第六版，正式名为通常被成为或。二模版字面量提供一种简单实现表达式嵌套的字符串字面量操作，简而言之就是能够以简单的方法实现字符串拼接操作。本文同步带你入门 JavaScript ES6 (一)，转载请注明出处。 ES6: 是 ECMA国际组织于 2015 年 6 月 17 日发布的 ECMAScript 第六版，正式名为 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 评论0 收藏0