一、JavaScript 基础——变量、数据类型、数据转换

一、JavaScript 基础

1.1 使用场景

<!-- 1.本地书写 -->
<script type="text/javascript">
    alert('Hello World!');
</script>
​
<!-- 2.外部引入 -->
<script type="text/javascript" src="1.js"></script>
​
<!-- 3.事件属性 -->
<div id="box" οnclick="alert('Hello World!')"></div>
​
<!-- 4.JS标识 -->
<a href="javascript: alert('特等奖')">点我中奖</a>

1.2 基本语法

1. 分号结尾

2. 单行多行注释

1.3 代码调试

//1. 弹窗调试   /* 注释内容 */
alert('弹窗测试');
​
//2. 窗体输出调试
document.write('窗体输出调试');
​
//3. 控制台调试
console.log('控制台调试');

2. 变量

2.1 概念

和 MySQL 及 Linux 的变量概念一致，它们都是一个容器，用来存储不同类型的信息。

2.2 命名规范

//定义变量
var num1 = 10;
var num2 = 20;
​
//开始计算
var res = num1 + num2;

1. 字母数字下划线

2. 首字母不能为数字

3. 严格区分大小写

4. 且不能使用关键字

5. 更不能使用中文

2.3 变量交换

//1. 使用a、b、c三个临时变量，完成变量a、b两个变量值的交换
var a = 10;
var b = 20;
var c = null;
​
//变量置换的过程
c = a;
a = b;
b = c;
​
//2.不使用第三个变量，完成两个变量值的交换
var a = 12;
var b = 18;

3. 数据类型

如果变量时杯子，数据类型就是杯子当中不同类型的水。

3.1 基本数据类型

1. 字符串（String）

   //1. 单引号定义【不可解析变量，可以解析转义符】
   var str1 = '勤能补拙是良训，一分辛苦一分才！';
   ​
   //2. 双引号定义【不可解析变量，可以解析转义符】
   var str2 = "勤能补拙是良训，一分辛苦一分才！";

2. 数值型（Number）

   var num1 = 123;             //整数
   var num2 = 3.14;            //浮点
   var num3 = 2.5e3;           //科学计数
   var num4 = -123;            //负数
   var num5 = NaN;             //非数字（与任何内容进行运算，结果均为NaN）
   var num6 = Infinity;        //无穷大，超出安全范围后显示该值

      2.1.进制转换

        var num1 = 0b101010;        //二进制
        var num2 = 04551;           //八进制
        var num3 = 123456;          //十进制
        var num4 = 0x929;           //十六进制

        3.布尔型（Boolean）

常用于表现一种状态，例如真与假，对与错，严格区分大小写！

//1.定义布尔型数据
var bool1 = true;
var bool2 = false;
​
//2.判断两值是否相等
console.log( bool1==bool2 );    //false

3.2 复合数据类型

顾名思义，通常存储的内容都是非单一的内容。

1. 对象型（Object）

   有了对象，就可以让对象帮我们做很多事儿了！

   //1. 定义一个女朋友
   var girlFriend = {
     //设置属性
     name:'波多老师',
     sex:'w',
     age:28,
     city:'日本',
     
     //设置功能
     clean:function(){
       alert('波多老师可以帮你打扫卫生');
     },
     cook:function(){
       alert('波多老师可以帮你做一日三餐');
     },
   }
   ​
   //2. 查看对象
   console.log(girlFriend);            //查看女朋友详细信息
   console.log(girlFriend.name);   //查看女朋友的名字
   console.log(girlFriend.age);    //查看女朋友的年龄
   ​
   //3. 使用对象
   girlFriend.clean();     //让女朋友打扫卫生
   girlFriend.cook();      //让女朋友烹饪美食

2. 数组型（Array）

   有了数组，我们就可以将一组数据存储起来了！

   //1.普通变量
   var car1 = '儿童三轮车';
   var car2 = '飞鸽自行车';
   var car3 = '爱玛电动车';
   var car4 = '时风三蹦子';
   var car5 = '奇瑞小QQ';
   var car6 = '丰田凯美瑞';
   ​
   //2.数组变量【下标从 0 开始】
   var cars1 = ['儿童三轮车','飞鸽自行车','爱玛电动车','时风三蹦子','奇瑞小QQ','丰田凯美瑞'];
   ​
   //3.数组变量【下标从 0 开始】
   var cars2 = new Array('儿童三轮车','飞鸽自行车','爱玛电动车','时风三蹦子','奇瑞小QQ','丰田凯美瑞');
   ​
   //4.使用变量
   console.log(car1[0])；       //儿童三轮车
   console.log(car2[5]);       //丰田凯美瑞

3.3 特殊数据类型

1. Null空型（Null）

   一个变量的值为Null，代表这个变量什么都没有存储，是空的，我们可以直接给一个变量赋值为Null将其清空。

   //1.定义一个空变量
   var str1 = null;        //该变量为null空
   var str2 = 0;           //该变量不为null
   var str3 = '';          //该变量也不为null

   1. 注意事项：

      • 0 是一个数值，不是Null

      • '' 表示长度为 0 的字符串，不是Null

      • Null 表示一个变量为空（一种状态）

2. 未定义型（Undefined）

   当我们定义一个变量并未赋值或使用了一个对象中不存在的属性时，会返回 undefined 未定义值。

   //1.定义一个不赋值的变量
   var test1;
   ​
   //2.定义一个女朋友对象
   var girlFriend = {
     //设置属性
     name:'波多老师',
     sex:'w',
   }
   ​
   //3.打印变量信息
   console.log(test1);             //undefined
   console.log(girlFriend.age);    //undefined

3. 函数型（function）

   在js中，函数也是一种数据类型。

   //1.定义一个函数变量
   var demo = function(){
     alert('这是一个测试函数！');
   };
   ​
   //2.打印该变量的类型
   console.log(typeof(demo));      //function

4.1 强制转换

在某些情况下，我们需要对数据进行类型转换，可以通过以下三个方法将其他类型的数据转换为指定数据类型

//1.转化成数字   Number()
var num1 = "123abc";
var num2 = "abc123";
var num3 = "123456";
​
console.log(Number(num1));  //NaN
console.log(Number(num2));  //NaN
console.log(Number(num3));  //123456
​
//2.转化成字符串  String()
var str1 = 999887;
console.log(typeof(String(str1)));  //string
​
//3.转化成布尔   Boolean()
/*
    会自动转换成布尔假的情况
    false        ：布尔型假
    0                ：整数0
    0.0          ：浮点数0.0
    ''           ：空字符串
    null         ：null空
    undefined：未定义
    NaN          ：非数字
*/
var num1 = false;
var num2 = 0;
var num3 = 0.0;
var num4 = '';
var num5 = null;
var num6 = undefined;
var num7 = NaN;
​
console.log(Boolean(num1), Boolean(num2), Boolean(num3), Boolean(num4), Boolean(num5), Boolean(num6), Boolean(num7));

4.2 自动转换

//当我们使用不同类型的数据进行运算时，会发生自动类型转换，也叫隐式类型转换
var res1 = 100 + 100 + '100';           //200100
var res2 = 100 + '100' + 100;           //100100100
var res3 = 100 - '100';                     //0
var res4 = 100 * '100';                     //10000
var res5 = 100 / '100';                     //1
​
console.log(res1, res2, res3, res4, res5);
​
console.log(100=='100');        //true
console.log(100==='100');       //false