Javascript高级之变量

变量

• 概述
  • 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
  • 使用变量可以方便的获取或者修改内存中的数据
  • 变量就是存储数据的容器

变量的命名规则

• 强制规则

  • 由字母、数字、下划线、$符号组成，且不能以数字开头
  • 区分大小写
  • 不能是关键字和保留字，例如：for、while。

• 泛性规则

  • 变量名必须有意义
  • 遵守驼峰命名法。(首字母小写，后面单词的首字母需要大写。例如：userName、userPassword)
  • name变量名，本身不是保留字/关键字，建议少用
    • name在有的浏览器中，是自动声明过的。

• 交换两个变量的值

var num1 = 10;
var num2 = 20;
num1 = num1 + num2;
num2 = num1 - num2;
num1 = num1 - num2;
console.log(num1);
console.log(num2);

var关键字

var声明作用域

• 说明
  • 使用var操作符定义的变量会成为包含他的函数的局部变量

// 局部变量
function test(){
    var message= 'hi';
}
test();
console.log(message); // 出错！

// 全局变量
function test(){
    message= 'hi';
}
test();
console.log(message); // "hi"

var声明提升

• 说明
  • 提升，就是把所有变量声明都拉到函数作用域的顶部
  • 反复多次使用var声明同一个变量也没问题

function foo(){
    console.log(age);
    var age= 16;
}
foo();

let声明

• 概念
  • let声明的范围是块作用域，var声明的范围是函数作用域
  • JS引擎会记录用于变量声明的标识符及其所在的块作用域
    • 因此嵌套使用相同的标识符不会报错
    • 这是因为一个块中没有重复声明

暂时性死区

• 说明
  • let声明的变量不会在作用域中被提升
  • 在let声明之前的执行瞬间被称为"暂时性死区"

console.log(age);
let age= 26;    // ReferenceError: Cannot access 'age' before initialization

全局声明

• 说明
  • 使用let在全局作用域中声明的变量不会成为window对象的属性
  • var声明的变量则会

var name1= 'Sunny';
console.log(window.name1);  // Sunny

let name2= 'Jerry';
console.log(window.name2);  // undefined

条件声明

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

if(typeof name === 'undefined'){
    let name;
}
name= 'Sunny';
// name被限制在if{}块的作用域内
// 因此这个赋值形同全局赋值

try{
    console.log(age);
}
catch(error){
    let age;
}
age= 26;
// name被限制在catch{}块的作用域内
// 因此这个赋值形同全局赋值

for循环中的let声明

• 说明
  • 每次迭代声明一个独立变量实例的行为适用于所有风格的for循环
    • for-in
    • for-of

for(var i=0; i<5; i++){
    setTimeout(function(){
        console.log(i);
    },10)
}
// 5, 5, 5, 5, 5

for(let i=0; i<5; i++){
    setTimeout(function(){
        console.log(i);
    },10)
}
// 0, 1, 2, 3, 4

const声明

• 概念
  • 声明变量时必须同时初始化变量
  • 且尝试修改const声明的变量会导致运行出错
    • const定义的是常量
    • const不允许重复声明
    • const声明的作用域也是块

对象声明

• 说明
  • const声明的限制只适用于它指向的变量的引用

const person= {}
person.name= "Jerry";

for循环中的const声明

• 说明
  • const可以声明一个不会修改的for循环变量
  • 每次迭代只是创建一个新变量
  • 对for-in和for-of循环特别有意义

let i= 0;
for(const j=1; i<5; i++){
    console.log(j);
}
// 1, 1, 1, 1, 1

for(const key in {a: 1, b: 2}){
    console.log(key);
}
// a, b

for(const value of ['Sunny', 'Jerry', 'Tommy', 'Sandy', 'Marry']){
    console.log(value);
}
// 'Sunny', 'Jerry', 'Tommy', 'Sandy', 'Marry'

声明风格及最佳实践

• 最佳实践
  • 不使用var
  • const优先，let次之

代码调试（输出变量）

• alert弹框:浏览器页面弹框

const num = 10;
alert(num);

• console.log()浏览器console控制台

const num1 = 10;
const num2 = 20;
console.log(num1);
console.log(num1, num2);

• document.write()浏览器页面中

const num = 10;
document.write(num);