水牛的es6日记第一天【let和const】

介绍ES6

ECMAScript是JavaScript的标准化版本,目标是统一该语言的规范和特性。由于所有主要的浏览器和JavaScript运行时都遵循这个规范,所以ECMAScript这个术语可以与JavaScript这个术语互换。

freeCodeCamp上的大多数挑战都使用该语言的ECMAScript 5 (ES5)规范,该规范于2009年定稿。但JavaScript是一门不断发展的编程语言。随着特性的增加和修订,该语言的新版本将发布供开发人员使用。
最新的标准化版本是2015年发布的ECMAScript 6 (ES6)。

这个新版本的语言增加了一些强大的功能,这些功能将在本节的挑战中介绍,包括以下:

  • Arrow functions
  • Classes Modules
  • Promises
  • Generators
  • let and const

注意:不是所有的浏览器都支持ES6特性。如果您在自己的项目中使用ES6,您可能需要使用一个程序(编译器)将ES6代码转换为ES5,直到浏览器支持ES6。

let函数

  • 特性一. 不可重写

为什么要有let,因为使用var关键字声明变量的最大问题之一是,您可以覆盖变量声明而不会出错,这在代码量很大的时候,便会是个棘手的问题

var camper = 'James';
var camper = 'David';
console.log(camper);
// logs 'David'

正如您在上面的代码中所看到的,camper变量最初被声明为James,然后被覆盖为David。

在小型应用程序中,您可能不会遇到这种类型的问题,但是当您的代码变得更大时,您可能会意外地覆盖一个您不打算覆盖的变量。因为这种行为不会抛出错误,所以搜索和修复bug变得更加困难。

在ES6中引入了一个名为let的新关键字来解决var关键字的这个潜在问题。如果要用上面代码中的变量声明来替换var,结果将是一个error。

  • 特性二 作用范围

当使用var关键字声明变量时,该变量将在全局范围内声明,或者在函数内部声明时在本地声明。

let关键字的行为类似,但是具有一些额外的功能。当您在块,语句或表达式中使用let关键字声明变量时,其范围将限于该块,语句或表达式。

看例子吧

var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3

上面那段代码和下面的这段,是一样的

var numArray = [];
var i;
for (i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3

如果要创建一个函数并将其存储以供以后使用i变量的for循环使用,则此行为将导致问题。这是因为存储的函数将始终引用更新的全局i变量的值

var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 3

如您所见,printNumTwo()输出3而不是2。这是因为分配给i的值已更新,并且printNumTwo()返回全局i,而不是在for循环中创建函数时所具有的值。

下面看看 如果是let呢

let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns "i is not defined"

这里的i定义在循环里面,跳出循环,i就不起作用

const

const其实拥有let所有特性,再此基础上,多加了一条可看不可改的特性

"use strict";
const FAV_PET = "Cats";
FAV_PET = "Dogs"; // returns error

一旦尝试修改,就会抛出bug

const要注意的一个点是,最好用const的变量,命名时候一律大写,这是业务规范。

当然 const加完,其实是可以改的
怎么改呢,看下面代码

"use strict";
const s = [5, 6, 7];
s = [1, 2, 3]; // throws error, trying to assign a const
s[2] = 45; // works just as it would with an array declared with var or let
console.log(s); // returns [5, 6, 45]

如果想实现真正意义上的固定,不让别人改怎么办呢,仅const声明并不能真正保护您的数据免遭突变。为了确保您的数据不变,JavaScript提供了一个Object.freeze函数来防止数据突变。
冻结对象后,便无法再从中添加,更新或删除属性。更改对象的任何尝试都会被拒绝,不会出错。

代码如下

let obj = {
  name:"FreeCodeCamp",
  review:"Awesome"
};
Object.freeze(obj);
obj.review = "bad"; // will be ignored. Mutation not allowed
obj.newProp = "Test"; // will be ignored. Mutation not allowed
console.log(obj); 
// { name: "FreeCodeCamp", review:"Awesome"}

这样就可以让函数实现真正意义上的“冰冻”;

发布了60 篇原创文章 · 获赞 18 · 访问量 5219

猜你喜欢

转载自blog.csdn.net/szuwaterbrother/article/details/105601089
今日推荐