JavaScript | 变量

变量是用于存储数据信息的"容器"。

一、变量的声明和赋值

var a = 100;

var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”，

在JavaScript中，一般都是用var来声明变量

变量要先定义，才能使用。比如，我们不设置变量，直接输出：

<script type="text/javascript">
        console.log(a);
</script>

控制台将会报错：

正确写法：

var a;   // 定义
a = 100;  //赋值
console.log(a);  //输出100

控制台输出100，蓝色的字体，表示数字。

有经验的程序员，会把定义和赋值写在一起：

var a = 100;    //定义，并且赋值100
console.log(a);  //输出100

特殊情况

1. 一条语句，多个变量

您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行：

var lastname="Doe",
age=30,
job="carpenter";

一条语句中声明的多个不可以赋同一个值:

var x,y,z=1;

x,y 为 undefined， z 为 1。

2. Value = undefined

在计算机程序中，经常会声明无值的变量。变量声明之后，如果没有赋值，该变量是空的（它没有值），其值实际上是 undefined。

在执行过以下语句后，变量 carname 的值将是 undefined：

var carname;

3. 重新声明 JavaScript 变量

如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo";
var carname;

JavaScript 变量的值是可以被重复赋值的，最后的赋值是这个变量最后的结果。

var a=1;
var a=2;

//赋值覆盖相当于：
var a;
//a=1;
a=2;

//声明覆盖相当于：
//var a=1;
var a=2;

所说的覆盖，其实是赋值的覆盖。如果说后声明的会覆盖已声明的，那么后声明的应该是 undefined 而不是第一次声明时候的赋值，也就是说如果是声明覆盖的话，相当于没有 var a=1 那么一个只有声明没有赋值的变量，它的值就是 undefined。

如何验证这个覆盖是声明的覆盖还是赋值的覆盖呢？看下面的代码：

var a=1;
var a;

//赋值覆盖相当于：
var a;
//a=1;
a;

//声明覆盖相当于：
//var a=1;
var a;

我们再输出a的值，验证下是 undefined 还是 1 就知道了。

4. JavaScript 算数

您可以通过 JavaScript 变量来做算数，使用的是 = 和 + 这类运算符：

y=5;
x=y+2;

5. 不用var关键字声明变量

Javascript声明变量的时候，虽然用var关键字声明和不用var关键字声明，很多时候运行并没有问题，但是这两种方式还是有区别的。可以正常运行的代码并不代表是合适的代码。

// num1为全局变量，num2为window的一个属性
var num1 = 1;
num2 = 2;
// delete num1;  无法删除
// delete num2;  删除
function model(){
var num1 = 1; // 本地变量
num2 = 2;     // window的属性
    // 匿名函数
    (function(){
        var num = 1; // 本地变量
        num1 = 2; // 继承作用域（闭包）
        num3 = 3; // window的属性
    }())
}

二、变量的命名规范

JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

只能由英语字母、数字、下划线、美元符号$构成
不能以数字开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
并且不能是JavaScript保留字。
变量名称对大小写敏感（y 和 Y 是不同的变量）

下列的单词，叫做保留字，就是说不允许当做变量名，不用记：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto

implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

大写字母是可以使用的，并且大小写敏感。也就是说A和a是两个变量。

var A = 250;    //变量1
var a = 888;    //变量2

JavaScript 语句和 JavaScript 变量都对大小写敏感。

三、变量的类型

变量里面能够存储数字、字符串等。变量会自动的根据存储内容的类型不同，来决定自己的类型。

JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。

当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

数值型：number

如果一个变量中，存放了数字，那么这个变量就是数值型的。在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的。

var a = 100;               //定义了一个变量a，并且赋值100
console.log(typeof a);  //输出a变量的类型

typeof()表示“获取变量的类型”，语法为：typeof 变量

字符串型：string

var a = "abcde";
var b = "路飞";
var c = "123123";
var d = "";         //空字符串
 
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);

控制台输出：

字面量（literal）

字面量（literal）用于表达源代码中一个固定值的表示法（notation），整数、浮点数以及字符串等等都是字面量。

示例：

var a=1;   // a 是变量，1 是字面量

又如:

var stooge = {                  // stooge 是一个对象
   "frist-name" = "Julie",      // 等号左为属性名，右侧为属性值
    last_name = "beck"          // 属性名如果是合法的标识符，可省略引号

};                              // "frist-name", last_name, "Julie", "beck" 都是对象字面量

总之，字面量就是没有用标识符封装起来的量，是“值”的原始状态。

与常量的区别如下：

//  C/C++:
const int A = 1;    // A 是常量，1 是字面量
A++;                // error，常量值不能改变

四、 JavaScript 作用域

作用域是可访问变量的集合。在 JavaScript 中, 对象和函数同样也是变量。在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

首先，来了解一下全局变量和局部变量：

全局变量

　　在函数外声明的变量作用域是全局的，全局变量在 JavaScript 程序的任何地方都可以访问。

var carName = "Volvo";
 
// 这里可以使用 carName 变量
 
function myFunction() {
    // 这里也可以使用 carName 变量
}

HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

//此处可使用 window.carName
 
function myFunction() {
    carName = "Volvo";
}

局部变量

　　在函数内声明的变量作用域是局部的（函数内），函数内使用 var 声明的变量只能在函数内访问，如果不使用 var 则是全局变量。

// 这里不能使用 carName 变量
 
function myFunction() {
    var carName = "Volvo";
    // 这里可以使用 carName 变量
}
 
// 这里不能使用 carName 变量

函数参数

函数参数只在函数内起作用，是局部变量。

JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。

局部变量：在函数中通过var声明的变量。

全局变量：在函数外通过var声明的变量。

没有声明就使用的变量，默认为全局变量，不论这个变量在哪被使用。

JavaScript 局部作用域

变量在函数内声明，变量为局部作用域，只能在函数内部访问。

局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

JavaScript 全局作用域

变量在函数外定义，即为全局变量。全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

以下实例中 carName 在函数内，但是为全局变量。

// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

在myFunction()被第一次调用之前，carName变量是不存在的即 undefined。myFunction()被调用过之后，carName成为全局变量。

五、JavaScript中的let变量

在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。let 声明的变量只在 let 命令所在的代码块内有效。

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。在Function中局部变量推荐使用let变量，避免变量名冲突。

局部变量

　　在函数体内使用 var 和 let 关键字声明的变量有点类似。它们的作用域都是 局部的:

// 使用 var
function myFunction() {
    var carName = "Volvo";   // 局部作用域
}

// 使用 let
function myFunction() {
    let carName = "Volvo";   //  局部作用域
}

全局变量

　　在函数体外或代码块外使用 var 和 let 关键字声明的变量也有点类似。它们的作用域都是 全局的:

// 使用 var
var x = 2;       // 全局作用域

// 使用 let
let x = 2;       // 全局作用域

let 声明的变量只在其声明的块或子块中可用，这一点，与 var 相似。二者之间最主要的区别在于 var 声明的变量的作用域是整个封闭函数。

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同样的变量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

HTML 代码中使用全局变量

在 JavaScript 中, 全局作用域是针对 JavaScript 环境。
在 HTML 中, 全局作用域是针对 window 对象。

使用 var 关键字声明的全局作用域变量属于 window 对象:

var carName = "Volvo";
 // 可以使用 window.carName 访问变量

使用 let 关键字声明的全局作用域变量不属于 window 对象:

let carName = "Volvo";

// 不能使用 window.carName 访问变量

作用域规则

let 声明的变量只在其声明的块或子块中可用，这一点，与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

function varTest() {
    var x = 1;
    if (true) {
        var x = 2;       // 同样的变量!
        console.log(x);  // 2
    }
    console.log(x);  // 2
}

function letTest() {
    let x = 1;
    if (true) {
        let x = 2;       // 不同的变量    
        console.log(x);  // 2  
    }
    console.log(x);  // 1
}

JavaScript 块级作用域(Block Scope)

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

在 ES6 之前，是没有块级作用域的概念的。ES6 可以使用 let 关键字来实现块级作用域。

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

重新定义变量

使用 var 关键字重新声明变量可能会带来问题。

在块中重新声明变量也会重新声明块外的变量：

var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 {} 内有效。

var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

循环作用域

使用 var 关键字：

var i = 5;
for (var i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 10

使用 let 关键字：

let i = 5;
for (let i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 5

在第1个实例中，使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。
在第2个实例中，使用 let 关键字，它声明的变量作用域只在循环体内，循环体外的变量不受影响。

重置变量

使用 var 关键字声明的变量在任何地方都可以修改：

var x = 2;
// x 为 2
 
var x = 3;
// 现在 x 为 3

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量:

var x = 2;       // 合法
let x = 3;       // 不合法

{
    var x = 4;   // 合法
    let x = 5   // 不合法
}

在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量:

let x = 2;       // 合法
var x = 3;       // 不合法

{
    let x = 4;   // 合法
    var x = 5;   // 不合法
}

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量:

let x = 2;       // 合法
let x = 3;       // 不合法

{
    let x = 4;   // 合法
    let x = 5;   // 不合法
}

let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

let x = 2;       // 合法

{
    let x = 3;   // 合法
}

{
    let x = 4;   // 合法
}

六、const 常量

const 关键字用来声明 JavaScript中的常量（与变量相对，不可修改，但同样是用于存储信息的"容器"）。常量的值不能通过重新赋值来改变，并且不能重新声明。

//定义常量a并赋值为0
const a = 0;

//报错（不能重新赋值）
a = 1;

//报错（不能重新声明）
const a = 2;

//输出0
console.log("a is: " + a);

七、其他

变量与函数重名的时候，变量生效

这涉及到了变量和函数的预解析：

变量声明会被顶置，函数声明也会被顶置且比变量更先声明。
变量的声明和赋值语句一起写时，JS引擎在解析时，会将其拆成声明和赋值2部分，声明置顶，赋值保留在原来位置。
声明过的变量不会再重复声明。

var a = 100;
function a() {
    return "function";
}
console.log(a);     //输出 100
console.log(a());   
/*
报错
Uncaught TypeError: a is not a function
    (anonymous function) @test.html:9
*/

JS 中有两种函数，一种是普通函数，一种是函数对象。下面的这种就是“函数对象”，它实际上是声明一个匿名函数，然后将该函数的 init 方法赋值给该变量。

var a = 100;
var a = function() {
    return "function";
}
console.log(a);
/* 
输出
function() {
    return "function";
}
*/
console.log(a());   //输出 "function"

函数与内部变量重名

定义普通函数，即在 window 变量下，定义一个 key，它的名字为该函数名，值为该函数的地址。函数内部的 this 指向 window 对象。

function a() {
    console.log(this);  //输出 window{...}
    this.a = 1;         //即 window.a = 1，此时window下的function a已经被该变量覆盖了。
    var a = 5;          //下面的这几个变量都是局部变量，仅在花括号范围内有效。  
    a = 10;
    var v = "value"
    return "function";
}
console.log(a);         //输出 function a {...}
console.log(a());       //输出 "function"
console.log(a);         //输出 1
console.log(v);
/*
输出
Uncaught ReferenceError: v is not defined
    (anonymous function) @ mycolor.html:15
*/

posted @ 2019-08-24 18:21 PythonGirl 阅读(269) 评论(0) 收藏举报

刷新页面返回顶部

iPython

博客已迁移至简书：https://www.jianshu.com/u/4ef402efc5e9