从零开始巩固JavaScript基础：理解、声明与作用域-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43563864/article/details/123407761

前言

本片开始从新夯实JavaScript基础知识，之前学习囫囵吞枣，导致后面项目和学习中出现各种各样的问题；从这篇笔记开始，放缓速度，好好理解JavaScript，为以后升职加薪打下坚实的基础。

一、注解

JavaScript的注解分为两种：单行注解和多行注解

// 单行注释

/* 这是一个更长的,
   多行注释
*/

/* 然而, 你不能, /* 嵌套注释 */ 语法错误 */

二、声明

JavaScript有三种声明方式

var 声明一个变量，可以初始化一个值。
let 声明一个块作用域的局部变量，可以初始化一个值。
const 声明一个块作用域的只读常量。

三、变量

在应用程序中，使用变量来作为值的符号名。变量的名字又叫做标识符，其需要遵守一定的规则。

1、声明变量

可以用下列三种方式声明变量：

使用关键词 var 。例如 var x = 42。这个语法可以用来声明局部变量和全局变量。
直接赋值。例如x = 42。在函数外使用这种形式赋值，会产生一个全局变量。在严格模式下会产生错误。因此你不应该使用这种方式来声明变量。
使用关键词 let 。例如 let y = 13。这个语法可以用来声明块作用域的局部变量。

2、变量求值

用 var 或 let 语句声明的变量，如果没有赋初始值，则其值为 undefined 。

如果访问一个未声明的变量会导致抛出一个引用错误（ReferenceError）异常：

var a;
console.log("The value of a is " + a); // a 的值是 undefined

console.log("The value of b is " + b);// b 的值是 undefined
var b; // 此处存在变量提升

let x;
console.log("The value of x is " + x); // x 的值是 undefined

// 未捕获的引用错误： y 未被定义
console.log("The value of y is " + y);
// Uncaught ReferenceError: Cannot access 'y' before initialization at 'xxxxx'
let y;

数值类型环境中 undefined 值会被转换为 NaN

var a;
console.log(a + 2)    // 计算为 NaN

当你对一个 null 变量求值时，空值 null 在数值类型环境中会被当作0来对待，而布尔类型环境中会被当作 false。

var n = null;
console.log(n * 32); // 在控制台中会显示 0

3、变量作用域

在函数之外声明的变量，叫做***全局*** 变量，因为它可被当前文档中的任何其他代码所访问。在函数内部声明的变量，叫做***局部*** 变量，因为它只能在当前函数的内部访问。

ECMAScript 6 之前的 JavaScript 没有语句块作用域；相反，语句块中声明的变量将成为语句块所在函数（或全局作用域）的局部变量。例如，如下的代码将在控制台输出 5，因为 x 的作用域是声明了 x 的那个函数（或全局范围），而不是 if 语句块。

if (true) {
  var x = 5;
}
console.log(x); // 5

如果使用 ECMAScript 6 中的 let 声明，上述行为将发生变化。

if (true) {
  let y = 5;
}
console.log(y); // ReferenceError: y 没有被声明

4、变量提升

JavaScript 变量的另一个不同寻常的地方是，你可以先使用变量稍后再声明变量而不会引发异常。这一概念称为变量提升；JavaScript 变量感觉上是被“提升”或移到了函数或语句的最前面。但是，提升后的变量将返回 undefined 值。因此在使用或引用某个变量之后进行声明和初始化操作，这个被提升的变量仍将返回 undefined 值。

// 例子1
console.log(x === undefined); // true
var x = 3;


// 例子2
// will return a value of undefined
var myvar = "my value";
(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();
//==========================等同于=====================================
// 例子1
var x;
console.log(x === undefined); // true
x = 3;

// 例子2
var myvar = "my value";
(function() {
  var myvar;
  console.log(myvar); // undefined
  myvar = "local value";
})();

由于存在变量提升，一个函数中所有的var语句应尽可能地放在接近函数顶部的地方。这个习惯将大大提升代码的清晰度。

在 ECMAScript 6 中，let（const）同样会被提升变量到代码块的顶部但是不会被赋予初始值。在变量声明之前引用这个变量，将抛出引用错误（ReferenceError）。这个变量将从代码块一开始的时候就处在一个“暂时性死区”，直到这个变量被声明为止。

console.log(x); // ReferenceError
let x = 3;

5、函数提升

对于函数来说，只有函数声明会被提升到顶部，而函数表达式不会被提升。

/* 函数声明 */
foo(); // "bar"
function foo() {
  console.log("bar");
}

/* 函数表达式 */
baz(); // 类型错误：baz 不是一个函数
var baz = function() {
  console.log("bar2");
};

6、全局变量

全局变量是全局对象的属性。在网页中，全局对象是 window ，所以你可以用形如 window.variable 的语法来设置和访问全局变量。

7、常量

可以用关键字 const 创建一个只读的常量。常量标识符的命名规则和变量相同：必须以字母、下划线（_）或美元符号（$）开头并可以包含有字母、数字或下划线。

const PI = 3.14;

常量不可以通过重新赋值改变其值，也不可以在代码运行时重新声明。它必须被初始化为某个值。

常量的作用域规则与 let 块级作用域变量相同。若省略const关键字，则该标识符将被视为变量。

在同一作用域中，不能使用与变量名或函数名相同的名字来命名常量。例如：

// 这会造成错误
function f() {};
const f = 5;

// 这也会造成错误
function f() {
  const g = 5;
  var g;

  //语句
}

然而，对象属性被赋值为常量是不受保护的，所以下面的语句执行时不会产生错误。

const MY_OBJECT = {"key": "value"};
MY_OBJECT.key = "otherValue";

同样的，数组的被定义为常量也是不受保护的，所以下面的语句执行时也不会产生错误。

const MY_ARRAY = ['HTML','CSS'];
MY_ARRAY.push('JAVASCRIPT');
console.log(MY_ARRAY); //logs ['HTML','CSS','JAVASCRIPT'];

四、数据类型

最新的 ECMAScript 标准定义了8种数据类型：

七种基本数据类型:
- 布尔值（Boolean），有2个值分别是：true 和 false.
- null ，一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的，因此 null 与 Null、NULL或变体完全不同。
- undefined ，和 null 一样是一个特殊的关键字，undefined 表示变量未赋值时的属性。
- 数字（Number），整数或浮点数，例如： 42 或者 3.14159。
- 任意精度的整数 (BigInt) ，可以安全地存储和操作大整数，甚至可以超过数字的安全整数限制。
- 字符串（String），字符串是一串表示文本值的字符序列，例如：“Howdy” 。
- 代表（Symbol） ( 在 ECMAScript 6 中新添加的类型).。一种实例是唯一且不可改变的数据类型。
以及对象（Object）。

1、数据类型的转换

JavaScript是一种动态类型语言。这意味着你在声明变量时可以不必指定数据类型，而数据类型会在代码执行时会根据需要自动转换。

五、字面量

字面量是由语法表达式定义的常量；或，通过由一定字词组成的语词表达式定义的常量

1、数组字面量

数组字面值是一个封闭在方括号对([])中的包含有零个或多个表达式的列表，其中每个表达式代表数组的一个元素。当你使用数组字面值创建一个数组时，该数组将会以指定的值作为其元素进行初始化，而其长度被设定为元素的个数。

下面的示例用3个元素生成数组coffees，它的长度是3。

var coffees = ["French Roast", "Colombian", "Kona"];

2、布尔字面量

即逻辑字面量

布尔类型有两种字面量：true和false。

不要混淆作为布尔对象的真和假与布尔类型的原始值true和false。布尔对象是原始布尔数据类型的一个包装器。

3、整数

整数可以用十进制（基数为10）、十六进制（基数为16）、八进制（基数为8）以及二进制（基数为2）表示。

4、字符串字面量

在ES2015中，提供了一种模板字面量（template literals），模板字符串提供了一些语法糖来帮你构造字符串。

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`