初学者的JavaScript变量教程

前端小工
60 阅读9分钟

在每一种编程语言中，你都会发现变量。这对JavaScript来说也是如此。本质上，变量是用来携带信息的。没有它们，就不可能真正编写任何应用程序。在某些时候，你总是要在变量中保存或传输信息。在这篇JavaScript教程中，我想通过实例和大家一起探讨一下JavaScript的变量。

JavaScript变量

例如，假设我们有下面这个JavaScript变量：

var name = 'Robin Wieruch';

这里的变量name 携带信息'Robin Wieruch' 。一旦你在JavaScript中拥有这样的变量，你就可以在你的代码中引用它。例如，你可以在JavaScript中以如下方式输出一些东西：

console.log('Robin Wieruch');

所以，你可以把信息放到一个变量中，而不是明确地使用这些信息，并以隐含的方式使用这个变量：

var name = 'Robin Wieruch';
console.log(name);// "Robin Wieruch"

你不仅可以在这个变量中携带信息并在你的JavaScript代码中的某个地方使用它，你还可以多次使用它：

var name = 'Robin Wieruch';
console.log(name);// "Robin Wieruch"console.log(name);// "Robin Wieruch"

现在想象一下，你在整个JavaScript应用程序的不同地方多次使用一个变量。如果你没有一个变量并明确地使用这些信息，你将不得不在许多地方改变它：

console.log('Dennis Wieruch');console.log('Dennis Wieruch');

相反，通过为这些信息设置一个变量，你可以一次改变它，并影响所有使用它的地方：

var name = 'Dennis Wieruch';
console.log(name);// "Dennis Wieruch"console.log(name);// "Dennis Wieruch"

实际上，如果你给变量分配一个新的值，就可以改变变量。不过你不需要var 语句，因为这个变量之前已经声明过了。

var name = 'Robin Wieruch';
console.log(name);// "Robin Wieruch"
name = 'Dennis Wieruch';
console.log(name);// "Dennis Wieruch"

在本节中，你已经从一组可用的JavaScript数据类型中使用了一个字符串基元。在下面的内容中，你将会了解到更多关于这个数据类型和JavaScript中的其他数据类型。

练习

  • 前往CodeSandbox，移除JavaScript占位符的内容，玩一玩JavaScript变量。

JavaScript变量字符串

一个字符串基元由一个或多个字符组成。如果一个字符串基元被定义为一个变量，它必须被设置在引号中。否则，JavaScript会认为它只是另一个变量。

var firstName = Robin;// doesn't work, because Robin is an undefined variable
var lastName = 'Wieruch';// does work, because Wieruch is set in quotes

你可以将字符串连接到一个新的字符串变量。

var firstName = 'Robin';
console.log(`${firstName} Wieruch`);// "Robin Wieruch"

你也可以把另一个字符串定义为它自己的变量。

var firstName = 'Robin';var lastName = 'Wieruch';
var name = `${firstName} ${lastName}`;
console.log(name);// "Robin Wieruch"

你在这里所做的，叫做字符串插值。通过把你的新字符串放入反斜线而不是单引号中，任何JavaScript变量都可以用${} ，以创建一个新的JavaScript字符串。后面的符号在JavaScript中被称为模板字面。

var firstName = 'Robin';var lastName = 'Wieruch';
var sentence = `Hello, my name is ${firstName} ${lastName}.`;
console.log(sentence);// "Hello, my name is Robin Wieruch."

在早期的JavaScript版本中，模板字面的功能并不存在，你会使用字符串连接，而不是用+ 操作符进行字符串插值。

var firstName = 'Robin';var lastName = 'Wieruch';
var sentence = 'Hello, my name is ' + firstName + ' ' + lastName + '.';
console.log(sentence);// "Hello, my name is Robin Wieruch."

JavaScript字符串只是JavaScript六个基元中的一个，它是JavaScript数据类型的一个子集。

定义和声明

一个JavaScript变量的初始化方式如下：

var name = 'Robin Wieruch';

声明和定义一个变量只需要一个步骤。但是这两者之间是有区别的。如果没有给变量赋值，就已经发生了变量声明：

var name;
console.log(name);// undefined

在另一个步骤中，可以进行变量的定义。因为它已经被声明过了，所以不需要其他的声明，只需要一个赋值。

var name;
console.log(name);// undefined
name = 'Robin Wieruch';
console.log(name);// "Robin Wieruch"

通过立即声明和定义变量，这两个步骤，即JavaScript变量声明和JavaScript变量定义可以在一行代码中进行。

var name = 'Robin Wieruch';
console.log(name);// "Robin Wieruch"

一个JavaScript变量也可以被重新赋值，只需覆盖定义的值，而不需要另作声明。

var name = 'Robin Wieruch';
console.log(name);// "Robin Wieruch"
name = 'Dennis Wieruch';
console.log(name);// "Dennis Wieruch"

这也被称为变量的突变或变量的突变--这只是比改变变量更专业的术语。后来这个知识很有用，因为可变和不可变的数据结构之间是有区别的。毕竟，突变一个变量只是意味着你在重新分配这个变量的值。

var name = 'Dennis Wieruch';
console.log(name);// "Dennis Wieruch"
var myBrother = name;
console.log(myBrother);// "Dennis Wieruch"console.log(name);// "Dennis Wieruch"

最后一个代码片断显示，在另一个已声明的变量的基础上声明/定义一个新的变量也是可能的。

练习。

  • 前往CodeSandbox，删除JavaScript占位符的内容，玩玩JavaScript定义和声明。
  • 看看如果你两次声明一个变量会发生什么

JavaScript的数据类型和数据结构

与其他许多编程语言相比，JavaScript是一种松散类型的语言--这只意味着变量不会被分配到一个特定的数据类型。正如你之前学到的，一个变量可以被重新赋值，这意味着它也可以改变数据类型。

// stringvar age = '30';
// numberage = 30;
// booleanage = true;

在上一个代码片段中，变量被声明和定义为一个字符串基元，被重新赋值为一个数字基元，并再次被重新赋值为一个布尔基元。一个JavaScript变量可以被分配给任何数据类型。JavaScript中的八种数据类型中有七种是基元。

  • 字符串
  • 数字
  • 布尔型
  • 未定义
  • 空值
  • 大英数
  • 符号

第八个数据类型是JavaScript对象。在探索JavaScript对象之前，让我们一步一步地浏览最重要的JavaScript数据类型，并对它们进行最简单的解释。

  • **字符串。**由一个或多个字符组成，用单/双引号或反斜线定义。
  • 数字。由一个或多个不带引号的数字组成。通常也称为整数。
  • **布尔型。**可以是true ，也可以是false ，如果它被定义。它用于在一个应用程序中做决定。
  • **未定义。**如果一个变量被声明但没有被定义，它就是undefined 。
  • **空值。**只能为空。如果一个变量故意没有值，就会使用它。
var anything = '30'; // a stringanything = 30; // a number (also called integer)anything = true; // a booleananything = false; // a booleananything = undefined; // not definedanything = null; // no value

在JavaScript中，你很少会用到BigInt或Symbol，这就是为什么我在介绍JavaScript变量时不把它们包括在内，以便让你在这个学习过程中保持流畅。你可以在下面的练习中阅读更多关于这些的内容。

然后是JavaScript对象。为了再次保持对初学者的友好，我将介绍对象是一个更复杂的JavaScript数据结构，它允许我们持有更多/其他的信息，而不仅仅是一个字符串或数字。JavaScripts中最常用的对象是。

  • 对象
  • 阵列
  • 函数

正确地说，JavaScript对象是数据结构的总称，但本身也是一种具体的数据结构。让我们在这里深入探讨一下所有具体的数据结构。数组是用来保存一个信息列表的。列表中的条目可以有任何数据类型。

var names = ['Robin Wieruch', 'Dennis Wieruch'];
var anything = ['Robin Wieruch', 30, true];

然而，通常数组中的所有条目都有相同的数据类型；这并不意味着不可能有一个具有不同数据类型的数组（如整数、布尔运算、字符串）。与对象相反，数组有一个特定的顺序。

var names = ['Robin Wieruch', 'Dennis Wieruch'];
console.log(names);// ["Robin Wieruch", "Dennis Wieruch"]

你可以通过其位置（索引）访问数组中的每个条目。不过，索引从0开始，这在其他编程语言中也是很常见的。

var names = ['Robin Wieruch', 'Dennis Wieruch'];
var name = names[1];
console.log(name);// "Dennis Wieruch"

如前所述，对象有无序的信息，在对象内定义为键/值对，而任何数据类型都可以出现。

var person = {  firstName: 'Robin',  lastName: 'Wieruch',  age: 30,  isMarried: true,};

由于一个对象没有顺序，你可以通过它的键来访问值。

var person = {  firstName: 'Robin',  lastName: 'Wieruch',};
console.log(person.firstName);// "Robin"
var name = `${person.firstName} ${person.lastName}`;
console.log(name);// "Robin Wieruch"

由于数组（也叫列表）可以容纳任何类型的条目（也叫项），它也可以容纳对象的列表。

var me = {  firstName: 'Robin',  lastName: 'Wieruch',};
var myBrother = {  firstName: 'Dennis',  lastName: 'Wieruch',};
var persons = [me, myBrother];
console.log(persons[0].firstName);// "Robin"

由于对象可以有任何类型的值，所以它也可以容纳数组。

var me = {  firstName: 'Robin',  lastName: 'Wieruch',  parents: ['Heike Wieruch', 'Thomas Wieruch'],};
console.log(me.parents);// ["Heike Wieruch", "Thomas Wieruch"]

这可以继续下去，对象中的对象，数组中的数组--所谓的多维数组--，对象中的数组，以及数组中的对象。在这种更复杂的数据结构中，所有数据类型的变化都是可能的。

最后但不是，还有函数。与对象和数组一样，我不会在这里讨论太多细节。相反，我想给你一个介绍，以便以后更详细地阐述这些JavaScript数据结构。函数被用作在你的JavaScript应用程序中运行的小型程序。

function getName(person) {  var name = `${person.firstName} ${person.lastName}`;
  return name;}

基本上，一个函数有function 语句（1），一个名字（例如：getName ）（2），输入参数（例如：person ）（3），一些与业务相关的内部语句（4），以及一个return 语句（5）--用于从这个小型程序中返回一些东西。返回的值可以在调用函数（6）时再次存储在一个变量中。

// (1)(2)(3)function getName(person) {  // (4)  var name = `${person.firstName} ${person.lastName}`;
  // (5)  return name;}
var me = {  firstName: 'Robin',  lastName: 'Wieruch',};
// (6)var nameOfPerson = getName(me);
console.log(nameOfPerson);// "Robin Wieruch"

在一个函数中，小程序（4）的长度可以是你需要的，以完成你的程序的业务相关任务。如果只有一个计算变量，就像我们的例子（4），我们也可以使用一个立即返回，而不需要在中间分配一个新的变量。

function getName(person) {  return `${person.firstName} ${person.lastName}`;}

输入参数（3）和返回语句（5）都是可选的。

function addTwoPlusThree() {  console.log(2 + 3);}
addTwoPlusThree();// 5
addTwoPlusThree();// 5

然而，对一个函数来说，有输入和输出是一个很好的做法。

function sum(valueOne, valueTwo) {  return valueOne + valueTwo;}
var result = sum(2, 3);console.log(result);// 5
result = sum(result, 5);console.log(result);// 10

它使一个函数具有多功能性，并且更加注重输入/输出，从而使你的代码更加健壮，防止任何错误。总之，你在这里要学习的是JavaScript中的变量和数据类型/结构。在JavaScript中，函数是一流的公民--这只意味着你可以用比其他许多编程语言更强大的方式来使用它们。例如，作为一等公民的函数的一个属性是能够将它们分配给一个变量。

var whatsYourName = function(name) {  return `My name is ${name}.`;}
var result = whatsYourName('Robin Wieruch');console.log(result);// "My name is Robin Wieruch."

由于函数没有名字，它被称为匿名函数。

function whatsYourName(name) {  return `My name is ${name}.`;}
var result = whatsYourName('Robin Wieruch');console.log(result);// "My name is Robin Wieruch."

与前面的代码片段相比，匿名函数并没有什么不同，但稍后我们会遇到这是在JavaScript中比其他许多编程语言更动态地使用函数的一种强大方式。

这是对常用的JavaScript数据类型和结构的第一次介绍。虽然基元可以用字符串、数字（也叫整数）、布尔运算、未定义和空值来表示，但更复杂的数据结构则由对象、数组和函数来表示。

avatar
文章
阅读
粉丝