响应式网页设计之变量及数据类型

---

一、变量

1.变量的定义与赋值

变量是用于存储信息的"容器"。
例如：用字母来保存值【age = 18】，这里的 age 被称为变量。

JS为弱类型语言(有数据类型，只是不需要严格规定)，常用变量类型（字符串、数字、布尔值、对象等）

1. 变量的命名规则
   ① 第一位必须是字母（也能以 $ 和 _ 符号开头，不推荐这么做）
   ② 可以包含字母、数字、下划线、美元符号$
   ③ 变量名不能是关键字或保留字
   ④ 通常情况下，统一使用小驼峰命名法（camelCase）
   补充：变量名称对大小写敏感（Name与name是不同的变量）
2. 变量的声明与赋值
   ① 先声明，后赋值
        var age;
        age = 8;
   ② 同时声明与赋值
        var age = 8;
   ③ 声明多个变量
        var a = 1, b = 2, c = 3;
        var e, f, g;
        e=1;
        f=2;
        g=3;

2.局部变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

3.全局变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

二、数据类型

1.String

字符串是存取字符的变量

var m_name = "小明";
var w_nam =  '小红';
var say = "Hello 'World'";    //输出 Hello 'World'

细心的小伙伴应该发现了这两个字符串是有点区别的，第一个小明是用的双引号，第二个小红是用的单引号，在JS中无论是用双引号还是单引号都是字符串；当然也可以在字符串中使用引号，只要不匹配包围字符串的引号即可

2.number

JS中只有一种数字类型就是number；数字可以带小数点，也可以不带。如果遇到很大或者很小的数字，我们通常采用“科学计数法”。

var age=18;      
var score=99.9; 
var y=123e4;      // 1230000
var z=123e-4;     // 0.0123        

3.boolean

布尔只有两个值（true、false）表示真和假，在条件判断中我们会经常使用。

var t=true;
var f=false;       

4.object

object（引用类型：object、array、function）

1. object：对象由花括号分隔；在括号内部，对象的属性以名称:值(name : value)的形式 来定义；多个属性之间由逗号分隔。

var person={
name : "小明",
age  : "6",
height :  132
};     

2. array：数组是用于存放一组数据的，在JS中一个数组中可以包含不同类型的元素(但通常情况下我们在数组中都会存放相同类型的元素)，数组下标是基于零的，所以第一个元素的下标就是 [0]，第二个就是 [1]，以此类推。

//第一种：先声明，再赋值
var student=new Array();
student[0]="马小跳";
student[1]="康康";
student[2]="迈克";
//第二种：声明的同时赋值
var cars = new Array("宝马","奔驰","兰博基尼"); 
var arr = new Array(1,"1dds",true); 

3. function：JS使用关键字 function 定义函数；函数就是一个被打包好的代码块，哪里需要哪里搬(调用函数)，这个打包好的代码块中可以实现某些功能，当我们需要使用这个功能的时候，就会调用这个函数。这里先学习函数的定义，后面会详细讲解函数的调用。

//第一种：无参函数
function functionname()
{
    // 执行代码（可实现的功能）
}
//第二种：有参函数
function functionname(var1,var2)
{
	//执行代码（可实现的功能）
}
//第三种：有返回值的函数
function functionname()
{
    var x=5;
    return x; //返回 x
}

5.undefined

undefined 这个表示变量只是声明了，并没有进行赋值。

var de;   

这里的变量 de 类型就是undefined

6.null

null 这个表示变量不仅声明了，而且赋值了，但是赋的就是null

var n=null;   

你以为这里的变量 n 类型就是null了吗？其实这里的 n 它的类型是 object，但是这个我还真解释不清楚是为什么了，就作为一个特殊的规定吧。

补充

既然JS是弱类型语言，不需要定义类型，那么我们怎么知道一个变量的类型是什么呢？这里就要引入一个方法：typeof(变量名)可以查看变量类型

三、类型转换

1.转换为数字（三种方式）

1. parseInt()方法
   parseInt()方法用于将字符串转换为整数，此方法有两个参数，parseInt(string,[进制])，第二个参数为可选性，取值范围2~36。

parseInt("123"); //123  
parseInt("123.4"); //123  
parseInt("123abc123"); //123  
parseInt("abc123"); // NaN 
parseInt("11",16);   //将11视为16进制，转换为十进制后输出17 

2. parseFloat()方法
   parseInt()方法用于将含有“ . ”的字符串转换为浮点数，此方法有两个参数，

parseFloat("123"); //123  
parseFloat("123.4.5"); //123.4 

3. Number()方法
   Number()方法把值转换成数字(整数或浮点数)；与parseInt()方法和parseFloat()方法区别在于 Number()方法转换的是整个值，而parseInt()方法和parseFloat()方法可以只转换开头部分。

Number("123"); //123  
Number("123.4"); //123.4  
Number("123a"); // NaN  

        此外Number可以转换布尔值和null

Number(true); //1  
Number(false); //0  
Number(null); //0  
Number(""); //0 

2.转换为字符串（两种方式）

1. String()方法
   String()方法把值转换为字符串，因为这个方法不是通过变量进行引用，而是变量作为参数，所以对于 null 或 undefined 值，用String()进行类型转换可以生成字符串而不会引发报错。

var a = 1;  
var b = String(a);  
console.log(b); //输出字符串"1" 
var c ;  
console.log(String(c)); //输出字符串"undefined"  

2. toString()方法
   toString()方法把值转换为字符串，但是这个方法是通过变量进行调用的，所以对于 null 或 undefined 值，用toString()进行类型转换就会报错。

var a = 1;  
var b = a.toString();  
console.log(b); //输出字符串"1" 
var c;
console.log(c.toString()); //报错

3.转换为布尔值

除了以下这些情况返回 false，其余情况都是返回 true

Boolean();   
Boolean(0);  
Boolean(null);  
Boolean(""); 
Boolean(undefined);  
Boolean(false);  
Boolean(NaN);