JavaScript语言基础速览

今天我们来总结一下 JavaScript 的基础语法，它是实现业务逻辑的基础。古人云：万丈高楼平地起，所以基础还是很重要的。

一、变量和关键字

ECMAScript 中无论时变量、函数还是操作符都是区分大小写的，你不能使用 typeof 作为函数名，但是 Typeof 是一个完全有效的函数名。

我们使用的变量，函数，属性或函数参数的名称统一称为标识符，标识符的命名也有两个规则：

• 第一个字符必须是一个字母、下划线（ _）或美元符号（ $）

• 剩下的其他字符可以是字母、下划线、美元符号或数字

如果一个标识符由多个单词组成，应使用驼峰命名，即第一个单词的首字母小写，后面每个单词的首字母大写。

注意：关键字、保留字、true、false 和 null 不能作为标识符。

此外，语句尾加分号有助于在某些情况下提升性能，因为解析器会尝试在合适的位置补上分号以纠正语法错误。

二、变量

var，const 和 let 可以用来声明变量，const 和 let 只能在 ES6 及更晚的版本使用。

var 关键字

定义一个变量，在不初始化的情况下，变量会保存一个特殊值 undefined。使用 var 操作符定义的变量会成为包含它的函数的局部变量，如果在一个函数内部定义一个变量，那么该变量将在函数退出时被销毁：

function test() {
  var message = "hi"; // 局部变量
}
test();
console.log(message); // ReferenceError: message is not defined

在严格模式下，给未定义的变量赋值，会导致抛出 ReferenceError:

"use strict";
message = 1; // ReferenceError: message is not defined

var 定义的变量会自动提升到函数作用域顶部，此外多次重复使用 var 声明同一个变量也没有问题。

// 变量提升
function foo() {
  console.log(age);
  var age = 26;
}
foo(); // undefined

function foo() {
  var age;
  console.log(age);
  age = 26;
}
foo(); // undefined

var 声明的变量会成为 window 对象的属性

var name = "山呱呱";
console.log(window.name);

我们应该尽可能不使用 var 来声明变量。

let 声明

let 声明的范围是块作用域，而 var 声明的范围是函数作用域。 let 不允许同一个块作用域中出现冗余声明：

var name;
let name; // SyntaxError: Identifier 'name' has already been declared

// 👆----------------------👇

let name;
var name; // SyntaxError: Identifier 'name' has already been declared

let 与 var 的另一个重要区别，就是 let 声明的变量不会在作用域中被提升。

// name 会被提升
console.log(name); // undefined
var name = "Matt";

// age 不会被提升
console.log(age); // ReferenceError： age 没有定义
let age = 26;

在使用 var 声明变量时，由于声明会被提升， JavaScript 引擎会自动将多余的声明在作用域顶部合并为一个声明。

因为 let 的作用域是块，所以不可能检查前面是否已经使用 let 声明过同名变量，同时也就不可能在没有声明的情况下声明它。

在 let 出现之前，for 循环定义的迭代变量会渗透到循环体外部：

for (var i = 0; i < 5; ++i) {
  setTimeout(() => console.log(i), 0);
}
// 你可能以为会输出 0、 1、 2、 3、 4
// 实际上会输出 5、 5、 5、 5、 5

之所以会这样，是因为在退出循环时，迭代变量保存的是导致循环退出的值：5。在之后执行超时逻辑时，所有的 i 都是同一个变量，因而输出的都是同一个最终值。

而在使用 let 声明迭代变量时， JavaScript 引擎在后台会为每个迭代循环声明一个新的迭代变量。

每个 setTimeout 引用的都是不同的变量实例。

for (let i = 0; i < 5; ++i) {
  setTimeout(() => console.log(i), 0);
}
// 会输出 0、 1、 2、 3、 4

const 声明

它声明变量时必须同时初始化变量，且尝试修改 const 声明的变量会导致运行时错误。

const name = "Tom";
name = "Jack"; // TypeError: Assignment to constant variable.

const 声明的限制只适用于它指向的变量的引用。换句话说，如果 const 变量引用的是一个对象，那么修改这个对象内部的属性并不违反 const 的限制。

const person = {};
person.name = "Matt"; // ok

三、数据类型

ES6 有 6 中简单数据类型(原始类型)：Undefined、 Null、 Boolean、 Number、String 和 Symbol 还有一种复杂类型 Object(对象)。

1、typeof 操作符

因为 JS 的类型系统是松散的，需要使用 typeof 操作符来确定任意变量的数据类型。对一个值使用 typeof 操作符会返回下列字符串之一：

• "undefined"表示值未定义

• "boolean"表示值为布尔值

• "string"表示值为字符串

• "number"表示值为数值

• "object"表示值为对象(而不是函数)或 null

• "function"表示值为函数

• "symbol"表示值为符号

typeof 是操作符而不是函数，不需要参数的。调用 typeof null 返回的是"object"。这是因为特殊值 null 被认为是一个对空对象的引用。

2、Undefined

Undefined 类型只有一个值，就是特殊值 undefined。当使用 var 或 let 声明了变量但没有初始化时，就相当于给变量赋予了 undefined 值。

let message;
console.log(message == undefined); // true

无论变量是声明还是未声明，typeof 返回的都是字符串"undefined"：

let message; // 这个变量被声明了，只是值为 undefined

// 确保没有声明过这个变量
// let age

console.log(typeof message); // "undefined"
console.log(typeof age); // "undefined"

3、Null 类型

Null 只有一个值 null。严格来说 null 值表示一个空对象指针，这也是给 typeof 传一个 null 会返回"object"的原因。此外，建议变量使用 null 来初始化，不要使用其他值。

undefined 值是由 null 值派生出来的，用等于操作符（==）比较 null 和 undefined 始终返回 true。但要注意，这个操作符会为了比较而转换它的操作数。

console.log(null == undefined); // true

4、Boolean 类型

Boolean（布尔值）类型是 ECMAScript 中使用最频繁的类型之一，有两个字面值： true 和 false。 会转换为 false 的值有：false, ""(空字符串), 0, NaN, null, undefined

5、Number 类型

注意八进制字面量在严格模式下是无效的，会导致 Js 引擎抛出语法错误。

浮点值的精确度最高可达 17 位，在算术计算中远不如整数精确。

NaN 表示要返回数值的操作失败了(而不是错误)，在 ECAMScript 中，0，+0，-0 相除都会返回 NaN。

正无穷大 Infinity 和负无穷大-Infinity 两种表示。

有三个函数可以将非数值转换为数值：Number(), parseInt(), parseFloat()

6、String 类型

字符串可以使用双引号(")，单引号(')或反引号(`)来标示。

字符字面量表示非打印字符或有其它用途的字符，比如换行 \n

toString()可见于数值、布尔值、对象和字符串值，而 null 和 undefined 是没有 toString()方法的。

7、Symbol 类型

Symbol（符号）是 ECMAScript 6 新增的数据类型。符号是原始值，且符号实例是唯一、不可变的。 符号的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险。

8、Object 类型

ECMAScript 中的对象其实就是一组数据和功能的集合。Object 有一些属性和方法：

• constructor：用于创建当前对象的函数。

• hasOwnProperty(propertyName)：用于判断当前对象实例（不是原型）上是否存在给定的属性。

• isPrototypeOf(object)：用于判断当前对象是否为另一个对象的原型。

• propertyIsEnumerable(propertyName)：用于判断给定的属性是否可以使用 for-in 语句枚举。与 hasOwnProperty()一样，属性名必须是字符串。

• toString()：返回对象的字符串表示。

• valueOf()：返回对象对应的字符串、数值或布尔值表示。

四、操作符

操作符是一组可用于操作数据值的操作符，包括数学操作符（如加、减）、位操作符、关系操作符和相等操作符等。

在应用给对象时，操作符通常会调用 valueOf()和/或 toString()方法来取得可以计算的值。

1、一元操作符

如果将一元操作符应用到非数值，则会执行与使用 Number()转型函数一样的类型转换：布尔值 false 和 true 转换为 0 和 1，字符串根据特殊规则进行解析，对象会调用它们的 valueOf()和/或 toString()方法以得到可以转换的值。

2、位运算符

位运算符用于数值的底层操作，也就是操作内存中表示数据的比特(位)。

3、布尔操作符

逻辑非操作符由一个叹号(!)表示，而使用两个叹号(!!)相当于调用了转型函数 Boolean()。

逻辑与(&&)：当第一个操作数为 true 时，将不会判断第二个操作数，因为无论第二个操作数为何，最后的运算结果一定是 true。
逻辑或(||): 当第一个操作数为 false 时，将不会判断第二个操作数，因为此时无论第二个操作数为何，最后的运算结果一定是 false。

五、语句

1、if

if (condition) statement1 else statement2

2、do-while

do-while 语句是一种后测试循环语句，即循环体中的代码执行后才会对退出条件进行求值。换句话说，循环体内的代码至少执行一次。

do {
  statement;
} while (expression);

3、while

while 语句是一种先测试循环语句，即先检测退出条件，再执行循环体内的代码。

while (expression) statement;

4、for

for 语句也是先测试语句，只不过增加了进入循环之前的初始化代码，以及循环执行后要执行的表达式。

for (initialization; expression; post - loop - expression) statement;

5、for-in

for-in 语句是一种严格的迭代语句，用于枚举对象中的非符号键属性。

for-in 语句是一种严格的迭代语句，用于枚举对象中的非符号键属性

6、for-of

for-in 语句是一种严格的迭代语句，用于枚举对象中的非符号键属性。

for (property of expression) statement;

7、break 和 continue 语句

break 和 continue 语句为执行循环代码提供了更严格的控制手段。其中， break 语句用于立即退出循环，强制执行循环后的下一条语句。 而 continue 语句也用于立即退出循环，但会再次从循环顶部开始执行。

8、switch 语句

switch (expression) {
  case value1:
    break;
  case value2:
    statement;
    break;
  default:
    statement;
}

总结

• ECMAScript 中的基本数据类型包括 Undefined、Null、Boolean、Number、String 和 Symbol。

• Object 是一种复杂数据类型，它是这门语言中所有对象的基类。

 

欢迎关注公众号【前端技术驿站】，关注获取视频资源，共同学习！