「翻译系列」--JavaScript变量

Hollyoon
84 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 1⃣️ 天, 点击查看活动详情

信息卡片

🔗原文链接：www.developer.com/languages/j…
✒️作者：Robert Gravelle

你可能听说过这样说法：JavaScript是一种松散类型的语言。那是因为开发者不必指定数据类型，但这并不意味着JavaScript没有变量(或者数据类型)；只是JavaScript解释器会根据变量的值选择其数据类型，并生成相应的可执行代码。在这篇文章中，我们将会看到JavaScript是如何声明和设置变量，一些作用域的基础知识，Hoisting（笔者保留Hoisting，中文翻译一般是变量提升，但感觉不是准确的，因为还有函数提升，所以保留英文），以及应该给什么样的变量名。

如何声明和设置变量

在此开始之前，我们首先要确定变量是在哪个作用域，它有两个作用域：局部作用域和全局作用域。

局部作用域包括函数作用域和块级作用域（比如使用const，let，在函数中使用var并且只能在本函数中可访问到）:

function aFunction() {
  var myLocalVar = 99; //局部变量  
  console.log(myLocalVar); //99
}


console.log(myLocalVar); //报错: myLocalVar未定义

另一方面，全局变量是指不用const，let，var这些关键字，或者直接在全局环境中直接添加。这样一旦声明了，这个变量就能访问全局作用域的任何地方。它们可以在函数外声明，也可以明确添加到window对象中，比如下面：

globalVar = 'I am global!';

function aFunction() {
  var myLocalVar = 99; //local variable  
  console.log(myLocalVar); //99 
  //Inside aFunction: I am global!
  console.log('Inside aFunction: ' + globalVar);
  window.anotherGlobalVar = 4.5;
}
aFunction();

//函数外
console.log('Outside a function: ' + globalVar); // I am global

//window对象
console.log('anotherGlobalVar = ' + anotherGlobalVar);// 4.5

let，const和var

JavaScript语言自从1995年成立到2015年之内，一直只有var声明局部变量。然后到ES6才出现let，cost。我们开发者应该多使用let，const来声明，除非你需要考虑兼容老旧的浏览器。事实上，如果可以的话，最好使用const，它意味着变量的值不可改变，不容易被改动的。除非是需要动态改变值，才可以用let。

Read:  Working with Output in JavaScript

声明多个变量

在js中，我们可以在一行中声明多个变量：

let bandMember1 = 'John', age = 29, job = 'vocalist';

有时会有很多变量的情况，这就会看到很长的一行，可读性不太好。为了提高可读性，建议每个变量就每一行，比如下面：

let bandMember1 = 'John', 
    age = 29, 
    job = 'vocalist';

有些人喜欢用“逗号优先”的风格，比如下面：

let bandMember1 = 'John' 
    , age = 29
    , job = 'vocalist';

两个都可以！

Hoisting以及对变量的影响

Hoisting是一个比较复杂的话题，它与声明变量有关，特别是用var。Hoisting是因为JavaScript解释器在执行代码之前，会把函数、变量和声明移到其范围的顶部，这样该变量被声明之前就能被访问到。如果没有Hoisting，函数就没办法工作，比如下面的getName()，它被声明之前就调用:

getName(bandMember1);

function getName(name) {
  console.log(`My name is ${name}`);
}

变量的情况也是如此，它被声明之前也可以被引用的，它的值将会是undefined，比如下面：

console.log(num); // undefined，不报错，因为num被提升了
var num = 6; // 声明并且赋值了
console.log(num); // 6

var，它是唯一允许你重复声明同样的变量名，事实上，你可以随心所欲地命名同一个变量名，比如下面：

function aFunction() {
  var myLocalVar = 99; //local variable  
  console.log(myLocalVar); //99 
  
  var myLocalVar = 100;
  console.log('The new myLocalVar = ' + myLocalVar); //100 
}

欲知详解，看看这个.

命名规则以及约定

变量名在js上称为标识符，可以取短名，比如x,y，也可以取长名，比如age, sum, totalVolume。变量名的一般规则是：

  • 可以包含字母、数字、_ 和 $，但必须以字母开头
  • 也可以以 _ 和 $ 开头
  • 变量名是区分大小写
  • 变量名不能用关键字或者保留字（比如class，throw，if)

虽说遵遁上述规则可以避免编译报错，但我们开发人员也不能随意命名。这里有几点建议的写法：

  • 组合单词时，使用驼峰法（除了第一个字母），比如：myAwesomeVariable
  • 要有描述性的，比如说yearlyInterestRate 或者 employeeMiddleName，比单个字母或者难懂的单词强多了。除了循环体用单个字母，比如下面：
for (let i=0; i<users.length; i++) {
  //process users...
}
  • 声明结束后要用 ;

Read:  Top Collaboration Tools for Web Developers

avatar
文章
阅读
粉丝