整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript中的隐藏数据类型转换

avascript是一门弱类型语言,意思就是语言中的数据类型,很轻易就能被改变

比如定义一个变量值为数字,然后重新给他赋值为字符串,类型就由数字类型转为了字符串类型。

类型的转换,可以有很多种方法,例如在js中常用的parseInttoString、等方法,这些方法都是强制将某个类型转为指定的类型。

除了这些方法,还有一些特殊应用场景,会将类型悄悄的进行转换,如下几种情况:

1、数学运算

如果一个数字跟另一个其他类型的数据进行数学运算时,另一个数据会被转为数字类型进行运算,例:

var a = 1;
var b = true;
var c = a + b;
console.log(c); // 2 - 此时的布尔类型true被转为了数字1,进行了数学加法运算

var a = 3;
var b = undefined;
var c = a + b;
console.log(c); // NaN - 此时的b被转为了数字类型进行了数学运算


注意:加法比较特殊,因为符号
+,除了可以进行数学加法以外,还可以进行字符串的拼接。例:

var a = 2;
var b = [1,2,3]
var c = a / b;
console.log(c); // NaN - 此时的b被转为了数字类型
​
var a = 2;
var b = [1,2,3]
var c = a + b;
console.log(c); // 21,2,3 - 此时的a和b不再是加法运算,而是进行了拼接

2、字符串拼接

+符号左右两边有一个是字符串的时候,另一个也会转为字符串进行拼接,例:

var a = 2;
var b = '3';
var c = a + b;
console.log(c); // 23 - 此时的a被转为了字符串,进行了拼接

3、比较运算

当比较运算符(除相等比较和全等比较)左右两边有一个是数字的时候,另一个也会转为数字进行比较大小,例:

var a = 2;
var b = '10';
console.log(a>b) // false - 说明b被转为数字10进行了大小比较

4、判断条件


所有被放在if分支语句的小括号中的代码会被转为布尔类型,例:

var a = 2;
if(a){
 console.log('a变量是true'); // a变量是true - 说明变量a的2被转为了布尔值true
}else{
 console.log('a变量是false');
}
​
var b;
if(b){
 console.log('b变量是true');
}else{
 console.log('b变量是false'); // b变量是false - 说明b变量undefined被转为了布尔值false
}

5、date输出


我们知道,new 一个构造函数会得到一个对象,但是
new Date()之后,输出的却是一个字符串,例:

var d = new Date();
console.log(d); // Mon Mar 15 2021 17:50:25 GMT+0800 (中国标准时间)
// 这说明,new出来的对象d,在输出的时候被悄悄的转换成了字符串输出了

6、对象数组输出在页面


当在控制台输出一个数组或对象的时候,是本省的类型显示,例:

var arr = [1,2,3,4];
var obj = {name:"张三",age:12}
console.log(arr);
console.log(obj);


输出效果如下图:


但是如果将数组或对象在文本中输出的话,数组和对象会默认调用自己原型中的toString方法,以字符串形式显示在文本中,例:

var arr = [1,2,3,4];
var obj = {name:"张三",age:12}
document.write(arr)
document.write(obj)


文本中显示如下:


数组和对象其实已经调用了他们原型上的toString方法,被转为了字符串,例:

var arr = [1,2,3,4]; 
var obj = {name:"张三",age:12} 
console.log(arr.toString()); 
console.log(obj.toString());


控制台显示如下图:

隐形转换在多处出现,我们在编程的时候,需要谨慎小心,熟悉后可以对之进行利用,例如判断一个数据或对象中的值是否存在时,可以利用分支语句的条件中的隐形转换来搞定。

.form 标签

1)作用

<form></form>定义表单的开始位置和结束位置,表单提交时的内容就是<form>表单中的内容

2)基本格式

<form action="服务器端地址(接受表单内容的地址)" name="表单名称" method="post|get">...</form>

3)常用属性

1.name

表单名称

2.method

传送数据的方式,分为post和get两种方式:

  1. get方式:get方式提交时,会将表单的内容附加在URL地址的后面,所以限制了提交的内容的长度,不超过8192个字符,且不具备保密性。
  2. post方式:post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理,没有数据大小限制。
3.action

表单数据的处理程序的URL地址,如果为空则使用当前文档的URL地址,如果表单中不需要使用action属性也要指定其属性为”no“。

4.enctype

设置表单的资料的编码方式。属性值:

  1. application/x-www-form-urlencoded:在发送前编码所有字符(默认)
  2. multipart/form-data:不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
  3. text/plain:空格转换为 "+" 加号,但不对特殊字符编码。
5.target

和超链接的属于类似,用来指定目标窗口。

2.input 标签

1)注意

input 标记没有结束标记。

2)基本语法

<input type="" name="" value="" size="" maxlength="">

3)属性

1.type属性
  1. text:文本输入域
  2. password:密码输入域
  3. submit:提交按钮
  4. reset:重置按钮
  5. button:普通按钮
  6. radio:单选按钮,可以使用”checked“属性来设置默认选中项
  7. checkbox:复选框,可以使用”checked“属性来设置默认选中项
  8. hidden:隐藏表单域
  9. file:文件域
2.name属性

定义控件的名称

3.value属性

初始化值,打开浏览器时,文本框中的内容

4.size属性

设置控件的长度

5.maxlength属性

输入框中最大允许输入的字符数

3.textarea 标签

1)作用

使用 textarea 标记可以实现一个能够输入多行文本的区域。

2)语法格式

rows属性和cols属性分别用来指定,显示的行数和列数,单位是字符个数;value指定传送到服务器上面的值。

<textarea name="name" rows="value" cols="value" value="value">... ... </textarea>

4.select 标签

1)作用

菜单下拉列表域,生成一个下拉列表。

2)option 标签

作用:

option 标记用来指定列表中的一个选项,需要放在 select 之间。

值:

  1. value:给选项赋值,指定传送到服务器上面的值。
  2. selected:指定默认的选项。

3)语法格式

<select name="" size="value" multiple>    <option value="value1" selected>选项1</option>    <option value="value2">选项2</option>    <option value="value3">选项3</option>    ... ... ...</select>

4)属性

  1. multiple属性:multiple属性不用赋值,其作用是,表示用可以多选的下来列表,如果没有这个属性就只能单选。
  2. size属性:设置列表的高度。
  3. name属性:定义这个列表的名称。

5.label 标签

1)作用

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

2)语法
<label for="male">Male</label><input type="radio" name="sex" id="male">

6.举例

<form name="form" method="post" action="no" enctype="multipart/form-data">  <label for="male">账号:</label><input type="text" name="username" value="admin"  id="male"><br>  密码:<input type="password" name="password" size="50" maxlength="6"><br>  性别:<input type="radio" name="sex" value="男"> 男    <input type="radio" name="sex" value="女" checked="checked"> 女<br>  兴趣:<input type="checkbox" name="interest" value="篮球">篮球    <input type="checkbox" name="interest" value="足球" checked="checked">足球    <input type="checkbox" name="interest" value="羽毛球" checked="checked">羽毛球    <input type="hidden" name="hidden"><br>  头像:<input type="file" name="file"><br>  简介:    <textarea rows="10" cols="30">        </textarea><br>  城市:    <select name="city" multiple>      <option value="beijing">北京</option>      <option value="shanghai" selected>上海</option>      <option value="nanjing">南京</option>      <option value="guangdong">广东</option>    </select>  <br>  <input type="submit" value="注册">  <input type="reset">  <input type="button" value="普通按钮"></form>

前几篇中,我们已经学习了如何在Python中表示字符串、数值、逻辑值等字面值数据。也学习了如何使用变量引用这些数据。

本文开始学习如何操作这些数据。操作数据最常用的方式是使用运算符。运算符即对数据进行运算的符号,我们在小学时学过的加减乘除就是最简单的运算符。

运算符简介

运算符的语法规则包括运算符的功能和优先级两个要点

Python运算符功能根据操作数的类型可以分为赋值运算符算术运算符逻辑运算符比较运算符成员运算符位运算符、身份运算符几类。

赋值运算符

在编程中,最常用的运算符是赋值运算符,赋值运算符用一个等于号表示,其使用基本格式如下:

变量 = 表达式

其功能是将表达式的值赋予变量。

其中变量一般是字面值和简单数据类型引用变量,也可以是对象的引用变量,还可以是对象的可写属性。关于变量的概念参见Python教程:第8篇 变量。

其中表达式是具有返回值的字面量、常量、变量、函数、语句以及运算符等的组合,一个单独的字面量、变量、常量也是表达式,称为简单表达式,也称基本表达式。使用运算符连接的表达式称为复杂表达式。

下面是一些简单的赋值示例,它们分别将字符串、数值、逻辑值赋予变量a,并在赋值后输出a的值:

注意,Python的赋值运算符没有返回值。这点与C语言不同。Python的函数参数可以使用赋值语句,并不是因为这个原因。而是用于区分哪个参数,参数的顺序可以错乱的。

如果将赋值表达式作为返回值赋予另一个变量,会产生语法错误:

也不能将其作为print函数的参数打印输出:

另一个需要注意的是,在Python中,变量的赋值是将对象的引用(指对象在内存中的地址,id函数可以返回它)传给变量,而不是传递值,比如下面的示例,a和b是两个变量,b最初的值由a赋值得到,但它们都指向同一个对象(这里是下面的编程名言字符串),b重新赋值之后,其指向改变了,内存地址不再与a相同。

增量赋值

从 Python 2.0 开始, 等号可以和另一个运算符(一般是算术运算符)组合在一起, 将计算结果重新赋值给左边的变量。这被称为增量赋值。 类似下面这样的语句:

变量 = 变量 + 表达式

现在可以写成:

变量 += 表达式

增量赋值通过使用赋值运算符,将数学运算隐藏在赋值过程当中。你可能在 C、C++、Java、JavaScript代码中见过以下增量运算符:

+= -= *= /= %= **=

<<= >>= &= ^= |=

增量赋值相对普通赋值的最主要的好处是可以带来运行效率上的提升:变量仅被修改一次,而普通赋值会被修改两次。

以下是增量赋值的常见应用示例:

赋值运算符一般与算术运算符(加减乘除、乘方、整除等)组成增量赋值,也可与位运算符组合:

但不支持比较运算符(比较大小的,比如大于等于>=)等运算符,下面是示例:

由于+、*也可用于字符串、列表等操作,所以增量赋值也可适用于字符串等数据的赋值:

从字符串的增量赋值结果来看,变量原来的值位于增量赋值后的前面,这一点也是需要注意的。

连续赋值

也可以使用下面的格式为多个变量赋予相同的值:

变量 = 变量 = 表达式

其中“变量 =”可以无限重复添加,下面是个示例(a、b、c的值都为表达式的返回值):

要注意的是,使用连续赋值时不能使用增量赋值,下面第2行第2个赋值号产生了语法错误:


元组赋值

元组是Python中一种用小括号包围的数据列表表示的基本数据类型(以后会介绍),但在赋值操作中,可以省略两端的小括号,所以你以后可能会常看到类似于以下形式的代码,它可以交换两个变量的值:

变量1,变量2 = 变量2,变量1

它实际上是下面元组赋值的缩写:

(变量1,变量2) = (变量2,变量1)

下面是个应用示例:

这是Python支持的特殊的交换两个变量的值的方式,在许多其他编程语言中,你需要定义一个中间变量,首先将第1个变量赋值给中间变量,然后将第2个变量赋值给第1个变量,最后将中间变量赋值给第2个变量,才能实现交换两个变量值的目的,下面是Python(也是其他语言都支持的)这种方式的应用示例:

结语

关于运算符的内容还有很多,欢迎各位读者多多评论互动,也可关注我,下篇教程我将尽快推出。

注:从2022年4月28日发布的本篇教程开始,代码截图加上了使用了随机生成的背景图。宽度统一为970像素,这是在1080px宽度手机上显示的原始宽度,以提高各位读者的阅读观感。语法高亮风格采用 Python3.10.4 的 IDLE 显示的风格,由于水平有限,注释高亮的功能还没有实现。

相关前文

在Python中,数据如何表示可以参阅:

「Python教程」第6篇 Python基本语法之字符串

「Python教程」第7篇 Python基本语法之数值与逻辑值