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";
