JS学习——基础

学习内容来源：JavaScript 输出、JavaScript Let、JavaScript Const

JavaScript 输出

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

• 使用 window.alert() 写入警告框
• 使用 document.write() 写入 HTML 输出
• 使用 innerHTML 写入 HTML 元素
• 使用 console.log() 写入浏览器控制台

使用 innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容。

例子：

// javascript 代码
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

提示：更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

使用 document.write()

出于测试目的，使用 document.write() 比较方便。

例子：

// javascript 代码
<script>
  document.write(5 + 6);
</script>

注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML。
提示：document.write() 方法仅用于测试。

使用 console.log()

通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。

例子：

// javascript 代码
<script>
  console.log(5 + 6);
</script>

JavaScript Let

JavaScript 块作用域

1、通过 var 关键词声明的变量没有块作用域。在块 {} 内声明的变量可以从块之外进行访问。

// javascript 代码
{ 
  var x = 10; 
}
// 此处可以使用 x

2、可以使用 let 关键词声明拥有块作用域的变量。在块 {} 内声明的变量无法从块外访问。

// javascript 代码
{ 
  let x = 10;
}
// 此处不可以使用 x

重新声明变量

1、使用 var 关键字在块中重新声明变量也将重新声明块外的变量。

// javascript 代码
var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

2、使用 let 关键字在块中重新声明变量不会重新声明块外的变量。

// javascript 代码
var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

循环作用域

例子：
1、在循环中使用 var：（相当于重新声明变量）

// javascript 代码
var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

2、在循环中使用 let：

// javascript 代码
let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7

函数作用域

在函数内声明变量时，使用 var 和 let 很相似。它们都有函数作用域。

// javascript 代码
function myFunction() {
  var carName = "porsche";   // 函数作用域
}
function myFunction() {
  let carName = "porsche";   // 函数作用域
}

全局作用域

如果在块外声明声明，那么 var 和 let 很相似。它们都拥有全局作用域。

// javascript 代码
var x = 10;       // 全局作用域
let y = 6;       // 全局作用域

HTML 中的全局变量

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。在 HTML 中，全局作用域是 window 对象。通过 var 关键词定义的全局变量属于 window 对象。

1、通过 var 关键词定义的全局变量属于 window 对象

// javascript 代码
var carName = "porsche";
// 此处的代码可使用 window.carName

2、通过 let 关键词定义的全局变量不属于 window 对象

// javascript 代码
let carName = "porsche";
// 此处的代码不可使用 window.carName

重新声明

1、允许在程序的任何位置使用 var 重新声明 JavaScript 变量

// javascript 代码
var x = 10;
// 现在，x 为 10
var x = 6;
// 现在，x 为 6

2、在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的

// javascript 代码
var x = 10;       // 允许
let x = 6;       // 不允许
{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

3、在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的

// javascript 代码
let x = 10;       // 允许
let x = 6;       // 不允许
{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}

4、在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的

// javascript 代码
let x = 10;       // 允许
var x = 6;       // 不允许
{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

5、在不同的作用域或块中，通过 let 重新声明变量是允许的

// javascript 代码
let x = 6;       // 允许
{
  let x = 7;   // 允许
}
{
  let x = 8;   // 允许
}

提升

1、通过 var 声明的变量会提升到顶端，可以在声明变量之前就使用它

// javascript 代码
// 在此处，可以使用 carName
var carName;

2、通过 let 定义的变量不会被提升到顶端，在声明 let 变量之前就使用它会导致 ReferenceError

// javascript 代码
// 在此处，不可以使用 carName
let carName;

JavaScript Const

通过 const 定义的变量与 let 变量类似，但不能重新赋值

例子：

// javascript 代码
const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

块作用域

在块作用域内使用 const 声明的变量与 let 变量相似

// javascript 代码
var x = 10;
// 此处，x 为 10
{ 
  const x = 6;
  // 此处，x 为 6
}
// 此处，x 为 10

在声明时赋值

JavaScript const 变量必须在声明时赋值

// javascript 代码
// 不正确
const PI;
PI = 3.14159265359;
// 正确
const PI = 3.14159265359;

不是真正的常数

关键字 const 有一定的误导性。它没有定义常量值，它定义了对值的常量引用。因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。

1、可以更改常量对象的属性，但是无法重新为常量对象赋值
例子：

// javascript 代码
// 创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 更改属性：
car.color = "White";

// 添加属性：
car.owner = "Bill";

2、可以更改常量数组的元素，但是无法重新为常量数组赋值
例子：

// javascript 代码
// 创建常量数组：
const cars = ["Audi", "BMW", "porsche"];

// 更改元素：
cars[0] = "Honda";

// 添加元素：
cars.push("Volvo");

重新声明

1、在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const

// javascript 代码
var x = 2;         // 允许
const x = 2;       // 不允许
{
  let x = 2;     // 允许
  const x = 2;   // 不允许
}

2、在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的

// javascript 代码
const x = 2;       // 允许
const x = 3;       // 不允许
x = 3;             // 不允许
var x = 3;         // 不允许
let x = 3;         // 不允许

{
  const x = 2;   // 允许
  const x = 3;   // 不允许
  x = 3;         // 不允许
  var x = 3;     // 不允许
  let x = 3;     // 不允许
}

3、在不同的作用域或块中重新声明 const 是允许的：

// javascript 代码
const x = 2;       // 允许
{
  const x = 3;   // 允许
}
{
  const x = 4;   // 允许
}

提升

1、通过 var 声明的变量会提升到顶端，可以在声明变量之前就使用它

// javascript 代码
carName = "Volvo";    // 可以在此处使用 carName
var carName;

2、通过 const 定义的变量不会被提升到顶端。const 变量不能在声明之前使用

// javascript 代码
carName = "Volvo";    // 不可以在此处使用 carName
const carName = "Volvo";