网页前端培训6JavaScript/变量/数据类型/类型转换

逃离我推掉我的手 2024-05-01 16:11 63阅读 0赞

JavaScript是一种具有面向对象能力的、解释型的程序设计语言，是基于对象和事件驱动并具有相对安全性的客服端脚本语言，主要目的是，验证发往服务器的数据、增加Web互动、加强用户体验等。

#### 组成： ####

1.  ECMAScript（是JavaScript基础）
2.  DOM（文档对象模型）
3.  BOM（浏览器对象模型）

#### 基本用法： ####

*  1.行内JS
    
     *  在html标签上直接写JS代码
        
            
            <button onclick="alert('Hello World')">按钮</button>
 *  2.内部JS
    
     *  在script标签中写JS代码，script标签可以放在head或者body中，建议放在body标签最后
        
            
            <script type="text/javascript">
            	alert("这是一个按钮！");
            </script>
 *  3.外部JS文件
    
     *  定义JS文件，通过script标签的src属性引入对应的文件如果设置了src属性，则Script双标签之间的JS代码不会生效
        
            
            <script src="js/test.js" type="text/javascript">
            		
            </script>
        
        基础语法

1.  JS代码一行为单位，代码从上往下执行，一行一条语句
2.  语句结尾不加分号，如果一行定义多条语句，每条语句只能以分号结尾，所以建议每条语句都加分号
3.  表达式不需要以表达式结尾，如果加了分号，JavaScript引擎会当做语句执行生成无用的语句

### 标志符： ###

#### 规则： ####

*  由Unicode字符、\_、$、数字、中文组成
 *  不能数字开头
 *  不能是关键字
 *  严格区分大小写

#### 规范 ####

*  见名知意
 *  驼峰命名/下划线规则
 *  关键字
 *  声明变量时，避免使用关键字

### 变量 ###

声明JS是一种弱类型语言不需要指定数据类型

var a;

变量只声明不赋值则变量值为undefined

声明变量时可以不用var修饰符，直接声明并赋值

变量提升

所有的变量的声明语句，都会被提升到代码的头部，只对var声明的变量有效

### 数据类型 ###

虽然JS变量没有类型，但是数据本身是有类型的

#### 1.undefined表示值不存在，派生于null ####

1.  变量只声明未赋值，值为undefined
2.  当定义函数需要形参，调用函数未传递实参时，参数值为undefined
3.  当函数没有返回值，接收值为undefined
    
        <script type="text/javascript">
        			/* 1 */
        			var a;
        			console.log(a);
        			/* 2 */
        			function fn01(str){
        				console.log(str);
        			}
        			fn01();
        			/* 3 */
        			function fn02(){
        				
        			}
        			var b=fn02();
        			console.log(b);
        		</script>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_13_color_FFFFFF_t_70_g_se_x_16][]

#### 2.null表示此处的值为空 ####

typeof操作符，判断变量的类型，判断null类型为object

只声明未赋值的变量，与值为null的变量相等

#### 3.布尔类型 ####

#### 4.数值型 ####

包括整数和浮点数

*  1与1.0相等
 *  1+1.0=2
 *  存储时将浮点型的整数转换成整型

#### 5.字符串类型 ####

使用单引号或双引号引起来

可以用 + 拼接起来

#### 6.对象类型 ####

数组var 数组名=\[\]

对象var 对象名=\{\}

函数function 方法名（）\{

### 类型转换 ###

1.自动类型转换

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_17_color_FFFFFF_t_70_g_se_x_16][]

*  转字符串：加引号
 *  转布尔：有值为true，无值或者值为0为false
 *  转数值：空值为0，非空的数值型字符串直接转换，非数值字符串转换为NaN

2.函数转换

![481be38b336444eca1053508e4d4acf5.png][]

注：转换时会从值的第零个位置开始找有效数字，直到找到无效数字Float会比Tnt多识别一个小数点

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_14_color_FFFFFF_t_70_g_se_x_16][]

3.强制转换（显示转换）

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_11_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_20_color_FFFFFF_t_70_g_se_x_16][]

数值，布尔，字符串对象构造方法，用于强制转换全部，可以转换null

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_6_color_FFFFFF_t_70_g_se_x_16][]![ba5bc11128dd4af7ba269d8ad739fa32.png][]

![7ddead1da32447cc9c8f0acdcb6562c4.png][]![1e72eb880ee34f1fa4e4df470508a666.png][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_13_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/0f2b4686d187464aae42e8893e2d7765.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_17_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/175e2d8ffb584f2a861a13d40cf51ef6.png
[481be38b336444eca1053508e4d4acf5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/1cf2e27651214f3183439dc685b51771.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_14_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/f8f6052f503347cdaaba93af366ef449.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_11_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/070822ab0d124f27bcda019a21ea8b2c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/1913768973524cedae2e292281aa5589.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_6_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/4c157aad3e684ec885889b7aa73c0abe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5amJ5aip5rWB6YC4,size_6,color_FFFFFF,t_70,g_se,x_16
[ba5bc11128dd4af7ba269d8ad739fa32.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/a8bec1ebbf4f4813bce7050cba66e721.png
[7ddead1da32447cc9c8f0acdcb6562c4.png]: https://img-blog.csdnimg.cn/7ddead1da32447cc9c8f0acdcb6562c4.png
[1e72eb880ee34f1fa4e4df470508a666.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/797d08925b114f6aaa337a6e854614de.png