JavaScript之变量及数据类型基础知识总结

熊凯瑞

于 2022-07-14 14:47:11 发布

阅读量387

点赞数

分类专栏： JavaScript 文章标签： html5 css javascript

本文链接：https://blog.csdn.net/qq_46106857/article/details/125784040

版权

JavaScript 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

JavaScript学习之变量及数据类型基础知识

一、初识JavaScript
二、JavaScript输入输出语句
三、变量相关知识
四、数据类型
五、拓展阅读

一、初识JavaScript

1、JavaScript是什么

javascript是一种运行在客户端的脚本语言（Script是脚本的意思）。
脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行。
现在也可以基于Node.js技术进行服务器端编程。

2、JavaScript的作用

表单动态校验（密码强度检测）（JS产生最初的目的）
网页特效
服务器端开发（Node.js）
桌面程序（Electron）
App（Cordova）
控制硬件-物联网（Ruff）
游戏开发（cocos2d-js）

3、HTML/CSS/JS的关系

3.1 HTML/CSS标记语言—描述类语言

HTML决定网页结构和内容（决定看到什么），相当于人的身体
CSS决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服、化妆

3.2 JS脚本语言—编程类语言

实现业务逻辑和页面控制（决定功能），相当于人的各种动作。

4、浏览器执行JS简介

浏览器分成两部分，分别是渲染引擎和JS引擎

4.1 渲染引擎

用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink,老版本的webkit。

4.2 JS引擎

也称为JS解释器，用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器和V8

4.3 相关解释

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

5、JS的组成

5.1 JavaScript语法

ECMAScript

ECMAScript是由ECMA国际进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript,但实际上后两者是ECMAScript语言的实现和扩展。

5.2 页面文档对象类型

DOM————文档对象模型

文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过DOM提供的接口可以对页面上的各种元素进行操作（大小，位置，颜色等）。

5.3 浏览器对象模型

BOM————浏览器对象模型

BOM是指浏览器对象模型，它提供了独立于内容的，可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

6、JS三种书写位置

JS有3种书写位置，分别为行内、内嵌和外部

6.1 行内式

（1）行内式的js，直接写到元素的内部

 <input type="button" value="xxxxx" onclick="alert('xxx')">

（2）可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick
（3）注意单双引号的使用：在HTML中推荐使用双引号，JS中我们推荐使用单引号
（4）可读性差，在html中编写JS大量代码时，不方便阅读
（5）引号易错，引号多层嵌套匹配时，容易弄混
（6）特殊情况下使用

6.2 内嵌式

（1）可以将多行JS代码写到script标签中
内嵌JS是学习时常用的方式

（2）示例

 <script>
        alert('沙漠骆驼');
 </script>

6.3 外部

（1）利用HTML页面代码结构化，把大量JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
（2）引用外部JS文件的script标签中间不可以写代码
（3）适合于JS代码量比较大的情况

（4）示例

<script src="my.js"></script>     //外部js script 双标签

my.js里的内容

 alert('xxxxx')

7、JS注释

7.1 单行注释

 快捷键：ctrl + /

    表示方式： //

7.2 多行注释

 快捷键：shift + alt + a
 vscode中修改多行注释的快捷键： ctrl + shift + /

    表示方式：/* 内容  */

二、JavaScript输入输出语句

1、prompt(info)

    浏览器弹出输入框，用户可以输入  （归属：浏览器）

2、alert(msg)

    浏览器弹出警示框 （归属：浏览器）

3、console.log(msg)

    浏览器控制台打印输出信息 （归属：浏览器）

4、相关例子

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之输入输出语句</title>
    <script>
        //这是一个输入框
        prompt('请输入一个数字');
        //alert 弹出警示框 （输出的，展示给用户的）
        alert('计算的结果是');
        //console 控制台输出（给程序员测试用的）
        console.log('你好，程序员');
    </script>
</head>
<body>
    
</body>
</html>

5、效果如下

5.1 输入

5.2 输出

5.3 控制台显示

三、变量相关知识

1、变量

1.1 什么是变量？

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

1.2 变量在内存中的存储

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

2、变量的使用

2.1 声明变量

   //声明一个名称为age的变量
   //var是一个JS关键字，用来声明变量（variable变量的意思），使用该关键字声明变量后，计算机会自动为变量分配内存空间）
   //age是程序员定义的变量名，通过变量名来访问内存中分配的空间）
   var age;

2.2 变量的初始化

    var myage = 21;

3、对应例子

3.1 例一

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之输入输出语句</title>
    <script>
        //声明一个age的变量
        var age;
        //赋值 把值存入这个变量中
        age=18;
        //输出结果
        console.log(age);
        //变量的初始化
        var myage = 21;
        console.log(myage);
    </script>
</head>
<body>
    
</body>
</html>

3.2 例二

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之输入输出语句</title>
    <script>
        var myname = '熊凯瑞';
        var address = '巴拉巴拉';
        var age = 21;
        var email = 'xkr@xx.cn';
        var gz = 6000;
        console.log(myname);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(gz);
    </script>
</head>
<body>
    
</body>
</html>

3.3 例三

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之输入输出语句</title>
    <script>
        //用户输入姓名，存储到一个myname的变量里
        var myname = prompt('请输入您的名字');
        //输出这个用户名
        alert(myname);
       
    </script>
</head>
<body>
    
</body>
</html>

4、变量语法扩展

4.1 更新变量

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

   //更新变量
        var myname = '熊凯瑞';
        console.log(myname);
        myname = '胡歌';
        console.log(myname);

4.2 同时声明多个变量

同时声明多个变量，只需要写一个var,多个变量名之间使用英文逗号隔开。

 //声明多个变量
        var age = 21,
            address = '啦啦啦啦',
            gz = 6000;

4.3 声明变量的特殊情况

4.3.1 只声明不赋值

    var age; 
    console.log(age);

得出结果是 undefined

4.3.2 不声明不赋值，直接使用

console.log(age);

结果报错

4.3.3 不声明，只赋值

    age=10; 
    console.log(age);

结果是10

4.4 完整代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之输入输出语句</title>
    <script>
        //更新变量
        var myname = '熊凯瑞';
        console.log(myname);
        myname = '胡歌';
        console.log(myname);

        //声明多个变量
        var age = 21,
            address = '啦啦啦啦',
            gz = 6000;
        
        //声明变量的特殊情况
        //只声明，不赋值  ,则程序也不知道里面存的是啥，所以结果是undefined (未定义的)
        var sex;
        console.log(sex);  //undefined

        //不声明，不赋值，直接使用某个变量会报错
        console.log(tel);    //直接报错

        //不声明直接赋值使用
        ww = 110;
        console.log(ww);  //直接使用
    </script>
</head>
<body>
    
</body>
</html>

5、变量命名规范

5.1 变量命名规范

由字母(A-Z a-z)、数字(0-9)、下划线(_)、美元符号($)组成，如：usrAge,num01,_name
严格区分大小写，var app; 和 var App;是两个变量
不能以数字开头。 18age是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD 
遵守驼峰命名法。首字母小写，后面单词首字母需要大写。myFirstName
推荐翻译网站：有道 爱词霸

四、数据类型

1、变量的数据类型

变量是用来存储值的所在处，有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型(动态语言)，这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

例
var num;  //num不确定属于哪种数据类型
var num = 10;  //num属于数字型
//js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
var str = 'pink';  //str字符串型
//js是动态语言 变量的数据类型是可以变化的
var x = 10;  //x是数字型
x = 'pink';  //x 字符串型

2、数据类型的分类

2.1 简单数据类型

   简单数据类型                   说明                                       默认值 
  Number             数字型，包含整型值和浮点型值，如21、0.21                    0
  Boolean            布尔值类型，如true、false,等价于1和0                      false
  String             字符串类型，如“张三”，js里面，字符串都带引号               ''''
  Undefined          var a; 声明了变量a,但是没有给值，此时a=undefined      undefined
  Null               var a = null;  声明了变量a为空值                        null

2.1.1 数字型Number

     var num = 10;
     var PI = 3.14
     //1、八进制 0~7  程序里面数字前面加0，表示八进制
     var num1=010;
     console.log(num1);
     var num2=012;
     console.log(num2);

     //2、十六进制 0~9 a~f  数字的前面加：0x 表示十六进制
     var num3=0x9;
     console.log(num3);
     var num4=0xa;
     console.log(num4);

2.1.2 数字类型范围

（1）JavaScript中数值的最大和最小值

最大值
alert(Number.MAX_VALUE);  //1.797631486231.......

最小值
alert(Number.MIN_VALUE);  //5e-324

无穷大，大于任何数值
alert(Infinity);
console.log(Number.MAX_VALUE*2); //Infinity  无穷大

无穷小,小于任何数值
alert(-Infinity);
console.log(-Number.MAX_VALUE*2);  //-Infinity  无穷小

NaN，Not a number,代表一个非数值
alert(NaN);
console.log('熊凯瑞'-10);   //NaN 结果得不出数字

（2）判断是否是非数字

//isNaN() 这个方法用来判断非数字，并且返回一个值，如果是数字返回的是false，如果不是数字返回的是true
console.log(isNaN(12));  //false
console.log(isNaN('熊凯瑞'));  //true

2.1.3 字符串型String

字符串型可以是引号中的任意文本，其语法为双引号和单引号
由于HTML标签里面的属性使用的是双引号，js推荐使用单引号

2.1.4 字符串长度及拼接

多个字符串之间可以使用+进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之拼接字符串</title>
    <script>
        //1. 检测获取字符串的长度 length
        var str = 'my name is andy';
        console.log(str.length);
        //2. 字符串的拼接 + 只要字符串和其他类型相拼接，最终结果是字符串类型
        console.log('沙漠' + '骆驼'); //沙漠骆驼
        console.log('熊凯瑞' + 22);   //熊凯瑞22
        console.log('熊凯瑞' + true);  //凯凯瑞true
        console.log(12 + 12);   //24
        console.log('12' + 12);  //1212

        var age = 18;
        console.log('年龄' + age);  //1212
        
        var age2 = promot('请输入年龄');
        var str = '年龄' + age2;
        alert(str);
    </script>
</head>
<body>
    
</body>
</html>

2.1.5 typeof检测变量数据类型

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之拼接字符串</title>
    <script>
         var num = 10;
         console.log(num);  //number
         var str = 'yingyu';
         console.log(str);  //string
         var flag = true;
         console.log(flag);  //boolean
         var vari = undefined;
         console.log(vari);   //undefined
    </script>
</head>
<body>
    
</body>
</html>

2.2 数据类型的转换

2.2.1 转换为字符串类型

toString()       转成字符串                   var num=1;  alert(num.toString());
String()         强制转换成字符串              var num=1;  alert(String(num));
加号拼接字符串     和字符串拼接的结果都是字符串     var num=1;  alert(num + "我是字符串");

2.2.2 转换为数字类型

parseInt(string) 将string类型转成整数数值型 parseInt(‘78’)
parseFloat(string) 将string类型转换成浮点数数值型 parseFloat(‘78.21’)
Number()强制转换函数将string类型转换成数值型 Number(‘12’)
js隐式转换（- * /）利用算术运算符转换为数值型 ‘12’-0

注意：console.log(parseInt(‘120px’)); //120 会去掉这个px单位
console.log(‘12’ - 0); //12 隐式转换

计算年龄案例

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之拼接字符串</title>
    <script>
        var year = prompt('请输入您的出生年份');
        var age = 2018 - year;   //year取过来的是字符串型，但这里用的减法，有隐式转换
        alert('您今年以经' + age + '岁了')
    </script>
</head>
<body>
    
</body>
</html>

简单加法器

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之简单加法器</title>
    <script>
        var num1 = prompt('请输入第一个值');
        var num2 = prompt('请输入第二个值');
        var result = parseFloat(num1) + parseFloat(num2);
        alert('结果是：' + result);
    </script>
</head>
<body>
    
</body>
</html>

2.2.3 转换为布尔型

（1）方式
Boolean( )函数
（2）说明
其他类型转换成布尔值
例如：代表空、否定的值会被转换为false，如 ‘’、0、NaN、null、undefined
其余值都会被转换为true
（3）代码

console.log(Boolean(''));  //false
console.log(Boolean(0));  //false
console.log(Boolean(NaN));  //false
console.log(Boolean(null));  //false
console.log(Boolean(undefined));  //false
console.log(Boolean('小白'));  //true
console.log(Boolean(12));  //true

五、拓展阅读

1、解释型语言和编译型语言

计算机不能直接理解任何除机器语言之外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

1.1 翻译器翻译方式

1.1.1 编译

代码执行前进行编译，生成中间代码文件（比如java生成.class文件）

1.1.2 解释

运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也称之为解释器）

1.2 编译型语言

代码全部编译完后，再执行代码

1.3 解释型语言

边解释，边执行代码

2、标识符、关键字、保留字

2.1 标识符

开发人员为变量、属性、函数、参数取的名字（标识符不能是关键字或保留字）

2.2 关键字

JS本身已经使用了的字，不能再用它们充当变量名、方法名。

2.3 保留字

预留的关键字（现在不是关键字，以后会成为关键字）

熊凯瑞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript之变量及数据类型基础知识总结

javascript是一种运行在客户端的脚本语言（Script是脚本的意思）。脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行。现在也可以基于Node.js技术进行服务器端编程。表单动态校验（密码强度检测）（JS产生最初的目的）网页特效服务器端开发（Node.js）桌面程序（Electron）App（Cordova）控制硬件-物联网（Ruff）游戏开发（cocos2d-js）HTML决定网页结构和内容（决定看到什么），相当于人的身体CSS决定网页呈现给用户的模
复制链接

扫一扫