欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript 基础一 var 变量;简单数据类型--数字型、字符串型、布尔型等,以及他们的转换。parseInt、Float、变量.toString()等

程序员文章站 2022-04-10 15:38:35
...

1. 变量概述

通俗:变量是用于存放数据的容器。 我们通过 变量名 获取数据,甚至数据可以修改

1.2 变量在内存中的存储

本质:变量是程序在内存中申请的一块用来存放数据的空间。

1.3 变量的使用

变量在使用时分为两步:

  1. 声明变量
		var age; // 声明一个 名称为age 的变量

var 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管

age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间

  1. 赋值
		age = 10; // 给 age 这个变量赋值为 10

= 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思

变量值是程序员保存到变量空间里的值

1.4 变量的初始化

		var age = 18; // 声明变量同时赋值为 18

声明一个变量并赋值, 我们称之为变量的初始化

1.5 变量的语法扩展(三个特殊情况)

        // 1.更新变量
        var age = '18';
        console.log(age);
        age = '81'
        console.log(age);
        
        // 2.同时声明多个变量
        var age = '18',
            name = 'wangsihua',
            address = 'yangluo',
            gz = '10000';
            
        // 3.声明变量的特殊情况
        //    1.只声明不赋值 结果是?   undefined 未定义的
        var sex;
        console.log(sex);
        //    2.不声明 不赋值 直接使用某个变量会报错  (这个报错了,下面的代码全部无法使用)
        // console.log(tel);
        //    3.不声明直接赋值使用
        age = '10';
        console.log(age);

1.6 小结

为什么需要变量?
因为我们一些数据需要保存,所以需要变量

变量是什么?
变量就是一个容器,用来存放数据的。方便我们以后使用里面的数据

变量的本质是什么?
变量是内存里的一块空间,用来存储数据。

声明变量的本质是什么?
声明变量本质是去内存申请空间。

变量怎么使用的?
我们使用变量的时候,一定要声明变量,然后赋值

什么是变量的初始化?
声明变量并赋值我们称之为变量的初始化

变量命名规范有哪些?
变量名尽量要规范,见名知意——驼峰命名法

交换2个变量值的思路?
创建一个值为空的临时变量 temp,互相赋值。

2.0 数据类型

在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。

2.1 变量的数据类型

在代码运行时,变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后, 变量就确定了数据类型

JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型:

2.2 数据类型的分类

JS 把数据类型分为两类:

  1. 简单数据类型 (Number,String,Boolean,Undefined,Null)
  2. 复杂数据类型 (object)

3.0 简单数据类型(基本数据类型)

3.1 数字型(Number)

JavaScript 数字类型既可以用来保存整数值,也可以保存小数(浮点数)。

        // 1.有两种数字型
        var num1 = 18; //这是一种
        console.log(num1);
        var num2 = 3.14; //  带小数的
        console.log(num2);
        
        // 2.八进制  0-7 我们程序里面数字前面加 0 表示八进制
        var num3 = 010; // '010'八进制转换为10进制就是 8
        console.log(num3);
        var num4 = 012; // 为 8+2=10
        console.log(num4);
        
        // 3.十六进制 0-9 a-f 数字前面加 0x 表示十六进制
        var num5 = 0x9; // 值为9
        console.log(num5);
        var num6 = 0xa; // 值为10
        console.log(num6);
        
        // 4.数字型最大值
        console.log(Number.MAX_VALUE);
        
        // 5.数字型最小值
        console.log(Number.MIN_VALUE);
        
        // 6.数字型的三个特殊值
        // 1. 无穷大
        console.log(Number.MAX_VALUE * 2); // Infinity 无穷大 
        // 2. 无穷小
        console.log(-Number.MAX_VALUE * 2); // -Infinity 负的无穷大
        // 3. 非数字 (Not a number)
        console.log('pink老师' - 100); // NaN
        
        // 7.isNaN() 这个方法用来判断非数字    
        // 并且返回一个值 如果是数字返回的是 false 如果不是返回的是 true
        console.log(isNaN(12)); // false
        console.log(isNaN('pink')); //  true

3.2 字符串型 String

        // 'pink'  'pink老师'  '12'  'true'  都是字符串型
         1. js 可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,内双外单)
        var str = '我\\是\'一\"个\t"高富帅"\b的\n程序员'
        console.log(str);
        
         2. 字符串转义符
        /*      类似html里面的特殊字符。  转义符都是\开头的
                \n    换行符,  n 是 newline 的意思
                \\    斜杠\
                \''   单引号
                \"    双引号
                \t    tab 缩进
                \b    空格, b是 blank 的意思 */
                
         3. 检测获取字符串的长度  length
         var str = 'my name is andy';
         console.log(str.length); //15
         
         4.字符串的拼接
         alert('hello' + ' ' + 'world') // hello world
         alert('100' + 100) //100100
         alert(100 + 100) //200
         
         5. 拼接加强
         var age = 18;
         console.log('pink老师' + age + '岁啦');
    </script>

3.3 布尔型 Boolean

布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。

布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0

		console.log(true + 1); // 2
		console.log(false + 1); // 1

3.4 Undefined 和 Null

        // 如果一个变量声明未赋值,就是 undefined  未定义数据类型
        var str;
        console.log(str); // 未定义的
        var variable = undefined;
        console.log(variable + 'pink'); //  undefinedpink
        console.log(variable + '1'); //  NaN undefined 和数字相加最后的结果是 NaN
        
        // null 空值
        var space = null;
        console.log(space + 'pink'); // spacepink
        console.log(space + 1); //1
        console.log(space + true); //1

4.0 获取检测变量的数据类型—typeof

        var num = 10;
        console.log(typeof num); //number
        var str = 'pink';
        console.log(typeof str); //string
        var flag = true;
        console.log(typeof flag); //boolean
        var vari = undefined;
        console.log(typeof vari); //undefined
        var timer = null;
        console.log(typeof timer); //object
        // prompt 取过来的值都是  字符型的
        var age = prompt('你的年龄');
        console.log(age);
        console.log(typeof age);

4.1 字面量

        字面量是在源代码中的一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
        数字字面量:8,9,10
        字符串字面量:'黑马程序员'''大前端'
        布尔字面量:truefalse */

5.0 数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换:

  1. 转换为字符串类型
  2. 转换为数字型
  3. 转换为布尔型

5.1 转换为字符串

        1.把数字型转换为字符串型  变量.toString()
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        
        2.利用  String(变量)
        console.log(String(num));
        
        3.利用 + 拼接字符串的方式实现转换效果   隐式转换
        console.log(num + '');
        console.log(typeof num);

toString() 和 String() 使用方式不一样。

三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式, 这一种方式也称之为隐式转换。

5.2 转换为数字型(重点)

        var age = prompt('请输入您的年龄')1.parseInt(变量)    可以把 字符型的转换为数字型  得到的是整数
        // console.log(parseInt(age));
        console.log(parseInt('3.14')); //  3 取整
        console.log(parseInt('3.94')); //  3 取整
        console.log(parseInt('120px')); //   120 会去除掉这个PX单位
        console.log(parseInt('rem120px')); //  NaN   得不到

        2.parseFloat(变量)  可以把  字符型的转换为数字型 得到是小数 浮点数
        console.log(parseFloat('3.94')); //  3.14  有浮点数
        console.log(parseFloat('120px')); //   120 会去除掉这个PX单位
        console.log(parseFloat('rem120px')); //  NaN   得不到

        3. 利用 Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));

        4. 利用了算法运算 - * /   隐式转换
        console.log('12' - 0); // 12
        console.log('123' - '120'); // 3
        console.log('123' * 1); // 123
    </script>

注意 parseInt 和 parseFloat 单词的大小写,这2个是重点

隐式转换是我们在进行算数运算的时候,JS 自动转换了数据类型

5.3 转换为布尔型

代表空、否定的值会被转换为 false ,如 ‘’、0、NaN、null、undefined

其余值都会被转换为 true

		方式:
		Boolean(0/Nan/null) 这些都是错的