TL;DR

  • 变量是数据存储的容器。每个变量包含变量名、值和类型三个属性。JavaScript 是动态类型语言,会根据存储的数据自动推断数据的类型。
  • 使用关键字let声明变量,关键字const声明常量(初始值不会变化)。
  • 使用赋值运算符=)为变量赋值。
  • 变量的作用域是变量在程序中的有效范围。用letconst声明的是块级作用域变量。代码块被一组花括号({...})包围。
  • 表达式是一组代码的集合,它返回一个值。
  • 表达式可以嵌入到反引号(`…`)限定的字符串中,这类字符串称为模板字面量
  • 类型转换可以在程序执行时隐式转换,也可以使用命令Number()String()进行显式转换
  • 命令prompt()alert()处理信息输入并以对话框形式显示。
  • 尽可能使用描述性的命名,让代码更易读。建议使用驼峰式命名规范。

什么是变量

计算机程序使用变量存储数据。变量是数据存储的容器,可以把它想象成一个可以放东西的盒子!

变量有三个主要属性:

  • 变量名:可以包含大写和小写字母、数字(不能以数字开头)、下划线(_)、美元符号($)。
  • 值:存储在变量中的数据。
  • 类型:确定变量的作用与可用动作。

JavaScript 是动态类型语言,会根据存储的数据自动推断数据的类型,所以不必在 JavaScript 中显式定义变量类型。

声明变量

JavaScript 使用关键字let加变量名的形式来声明变量:

1
2
3
let a;
console.log(a);
// undefined

变量a因为没有值,控制台返回undefinedundefined是一个特殊的值,表示“未定义”。

在之前版本中 JavaScript 使用关键字var来声明变量,ES6 新增了let命令,let声明的变量只在它所在的代码块有效,var声明的变量全局有效。

变量赋值

程序运行时,变量的值可以改变。使用赋值运算符(=)为变量重新分配一个值。

1
2
3
4
let a;
a = 3.14;
console.log(a);
// 3.14

也可以使用一行命令同时声明变量并为其赋值:

1
2
3
let a = 3.14;
console.log(a);
// 3.14

声明常量

程序运行时,初始值不会变化的变量称为常量。使用关键字const来声明常量:

1
const a = 3.14;

常量不能被重新赋值。

数值递增

+=++运算符可以使变量数值增加。++称为递增运算符,每次增加1

1
2
3
4
5
6
let a = 0;
a += 1;
//相当于 a = a + 1;
// a = 1;
a++;
// a = 2;

变量作用域

变量的作用域是变量在程序中的有效范围。用letconst声明的是块级作用域变量:仅在声明它们的代码块(以及每个子块)。代码块被一组花括号({...})包围。JavaScript 默认形成一个代码块。

1
2
3
4
5
6
7
let num1 = 0;
{
num1 = 1; // OK; num1 在父级代码块中声明
const num2 = 0;
}
console.log(num1); // OK; num1 在当前代码块中声明
console.log(num2); // Error; num2 在当前块无效

表达式

表达式是一组代码的集合,它返回一个值。通过组合变量、值与运算符来创建表达式。

1
2
3
const c = 3; // 3
let d = c; // d=3
d = d + 1; // d=4

表达式的运算优先级与算术运算相同,也可以使用圆括号来改变优先级。

1
2
let e = 3 + 2 * 4; // 3+8=11
e = (3 + 2) * 4; // 5*4=20

表达式可以嵌入到反引号(`…`)限定的字符串中,这类字符串称为模板字面量。在模板字面量中的表达式语法为:${expression}

1
2
3
4
5
const country = 'China';
console.log(`I live in ${country}`); // I live in China.
const x = 5;
const y = 6;
console.log(`${x} + ${y} = ${x + y}`); // 5 + 6 = 11.

类型转换

在进行表达式求值时可以导致数据类型的转换,这被称为隐式转换,因为它们无需程序员干预自动进行。例如,字符串与数字相加(+)会将两者拼接成一个新的字符串:

1
2
3
const num = 100;
const str = 'Variable num contains the value ';
console.log(str + num); // Variable v contains the value 100

如果数据类型无法被转换为数字,则将得到结果 NaN(非数字):

1
2
const g = 'five' * 2;
console.log(g); // NaN

强制将数据转换为其他类型,称为显式转换。使用命令Number()String()可以数值强制转换为数字和字符串。

1
2
3
4
5
const h = '5';
console.log(h + 1); // 51

const i = Number(h);
console.log(i + 1); // 5+1=6

用户交互

信息输入

1
const name = prompt('请输入您的姓名:');

prompt()可以弹窗提醒用户输入一条字符串信息。

显示内容

console.log()alert()都可以向用户显示内容,console.log()显示信息时不会中断程序执行,并且可同时显示多条内容。

1
2
3
4
const temp1 = 36.9;
const temp2 = 37.6;
const temp3 = 37.1;
console.log(temp1, temp2, temp3); //输出:36.9 37.6 37.1

输入数字

prompt()命令会返回一个字符串,如果用于数值表达式中,必须使用Number()命令将内容转换为数字。

1
2
const input = prompt('请输入一个数字:');
const nb = Number(input);

也可以将上述代码合并为一行:

1
const nb = Number(prompt('请输入一个数字:'));

命名规范

正确的命名可以使代码更简洁、更易于理解。尽可能使用描述性的命名,让代码更易读。不要用只有开发者能理解的缩写,也不要通过砍掉几个字母来缩写单词。

每一个 JavaScript 关键字都是一个保留名称,不能使用它们命名。

为每个元素(变量、函数、类…)赋予一个反映其意义的特定名称,遵循以下命名规范:

  • 名称以小写字母开头。
  • 名称包含多个单词时,每个单词的第一个字母(第一个单词除外)均为大写
  • 函数和方法的名称需包含一个行为动词
  • 为了与其他编程语言一致,类名以大写字母开头。
  • 由于数组可能包含多个元素,因此数组以复数命名或名称添加list后缀。
  • 为了区分其他变量,DOM 元素需添加Element后缀(类数组变量Elements)。

JavaScript 命名区分大小写myVariablemyvariable是两个不同的变量。