前端三剑客——javascript变量与数据类型
javascript： 编程语言（解释型）大纲：
1.注释方法
2.js中断句形式（, 和 ;）
3.js存在形式与引入
4.变量与常量的声明和定义
5.基本数据类型及方法
6.数据类型的转换
7.隐式转换
8.三元表达式
注释方法
js中断句形式
“ , ”: 对象的属性和方法用 , 分割
“ ; ”: 语句的借宿用 ; 分割
js存在形式与引入
1.外部js（一般位于static目录的js文件夹下面）
引入：
2.内部jjs（一般位于head标签的css样式下面 或 body标签结束位置）
head标签里
<body>
</body><head>
<body>
</body><body>
</body><meta charset="UTF-8">
<body>
</body><body>
</body><title>Title</title>
<body>
</body><body>
</body>
</head><body>
</body>
body标签结束位置
<body>
</body><body>
<h1 id="h1">你好</h1>
</body><body>
</body><body>
</body>1-> 2-> 3->
原因：单线程
<body>
</body> 3.行间js：一般写在元素的指定属性值中
变量与常量定义和声明
1，变量 var let
声明：变量首次出现用var或者let关键字进行声明，后续使用改变量无须加关键字 var全局变量 let局部变量
定义：var 变量名 = 值 let 变量名 = 值
2.常量 const
声明：用const声明
定义：const 变量名 = 值
3.超全局对象进行属性赋值 不用var let const声明 name = "guoahn"
<body>
</body>
基本数据类型及方法
通过typeof进行查看类型 console.log(typeof num);
与python区别：1.python3中bool类型是int类型的子类 而js中2者是完全不相干的数据类型
2.js中Array表象相当于python中的list
3.js中Object表象相当于python中的字典
4.js中Array类型属于Object类型
1.String类型
声明： var name = "guohan"； var name = String（“guohan”）;
常见方法： 1.length var v = name.length；
2.索引 var v = name;
3.切片 var v = name.substring(0，2)；
4.去除空白 var v = name.trim（）；
2.Array类型（属于Object类型）
声明： var v =["guohan","gh"]; var v = Array["guohan","gh"];
常见方法： 1.length 2.索引（改/查）
3.增： 3.1 尾部增加：v.push("你好")；
3.2 头部增加：v.unshift("你好")；
3.3 索引增加：v.splice（索引位置，0，元素）； v.splice(1,0,"你好"）；
4.删： 4.1 尾部删除：v.pop();
4.2 头部删除：v.shift();
4.3 索引进行删除： v.splice(索引位置，1)；
5.判断是否是数组：Array.isArray(变量) 返回boolean类型 console.log( v , Array.isArray(v))；
3.Object类型 例：const obj = { name: "张三", age: 18 }; 对象的属性可以是任意数据类型的数据 如 1（属性）：2（值）
声明：
方式一（直接创建有属性有方法的对象） 属性名与属性值之间必须用 : 连接
<body>
</body><body>
</body><body>
</body>
方式二（用函数创建对象）
<body>
</body> <body>
</body><body>
</body>
方式三（用类创建对象）
<body>
</body><body>
</body><body>
</body>
方式四（创建空对象，添加属性和方法）不常用
<body>
</body>//创建对象(Object)方式二(创建空对象再去添加属性和方法)
var Info = new Object();
Info.name = "guohan";
Info.age = 18;
Info.say = function(){
return "你好";
};
console.log(Info);<body>
</body>
常见方法: 1.length
2.增/改/查类似python
3.删 delete info["属性"]
4.undefined类型
触发undefined条件 1.变量未进行赋值 2.变量赋值为undefined
5.null类型（本身也是对象）
相当于python中的None 只有给变量赋值为null时才有null的存在 用于进行变量的初始化
数据类型的转换
String
String转Boolen
除了空字符串转为false 其他有类容的字符串（如“ ”（空格）“0”）均转换为true python中纯空格的str转bool是False
<body>
</body>//String转Boolean var name = "guohan"; var name1 = Boolean(name); console.log(name1,typeof name1);<body>
</body><body>
</body>//true 'boolean'<body>
</body>var age = ""; var age1 = Boolean(age); console.log(age1,typeof age1);<body>
</body><body>
</body><body>
</body>//false 'boolean'<body>
</body>
String转Number
除了纯数字形式的字符串能通过Number进行转换其他符合一定条件的得通过parseInt和parseFloat方法进行转换转换 “-.5”表示－0.5可转
<body>
</body>//String转Number<body>
</body><body>
</body> var age = "10";<body>
</body><body>
</body> var new_age = Number(age);<body>
</body><body>
</body> console.log(new_age,typeof new_age);<body>
</body><body>
</body><body>
</body>var num = "12岁";<body>
</body><body>
</body> var new_num = Number(num);<body>
</body><body>
</body><body>
</body>//10 'number'<body>
</body><body>
</body> console.log(new_num,typeof new_num);<body>
</body><body>
</body><body>
</body> //NaN 'number'<body>
</body>NaN是特殊的数值类型<body>
</body>当转换对象不符合条件时才转换成NaN<body>
</body><body>
</body> console.log(typeof NaN);<body>
</body><body>
</body><body>
</body><body>
</body>//number<body>
</body>
String和Array
<body>
</body>//String转Array<body>
</body><body>
</body> var age = "18";<body>
</body><body>
</body> console.log(Array(age),typeof Array(age));<body>
</body><body>
</body><body>
</body>//['18'] 'object'<body>
</body>
Number（较常见）
Number转Number和Number转String和String转Number
1.数值之间可以进行转换：parseInt和parseFloat（Int->Float , Float->Int) 但是Int转Float时不展示小数位
<body>
</body>//数值之间的转换<body>
</body> parseInt和parseFloat var num1 = 10; var num2 = 3.14; console.log(parseFloat(num1),parseInt(num2));<body>
</body><body>
</body><body>
</body> //整数转浮点数不加小数位 10 3<body>
</body>2.所有数值类型均可以转成字符串类型
3.字符串类型转数值类型：
只要是数值开头的字符串均可以通过parseInt和parseFloat进行转换 注意：千分位表示的数值字符串通过这方法只能识别开头
<body>
</body>//字符串转数值<body>
</body>//纯数值形式的字符串<body>
</body><body>
</body> Number var num3 = "12.3"; console.log(Number(num3));<body>
</body><body>
</body><body>
</body>//12.3 console.log(parseInt(num3));<body>
</body><body>
</body>//12<body>
</body>//以数字开头的字符串转数值<body>
</body><body>
</body> parseInt和parseFloat var num4 = "3.3公斤" console.log(parseInt(num4));<body>
</body>//3 console.log(parseFloat(num4));<body>
</body><body>
</body>//3.3<body>
</body>//数值开头的千分位表示法的字符串<body>
</body><body>
</body><body>
</body> parseInt只能识别开头的数值并转换 var num6 = "100_200_300" console.log(parseInt(num6));<body>
</body>//100<body>
</body> 非数值开头的字符串通过parseInt和parseFloat进行转换 得到NaN（特殊的数值类型）
<body>
</body>//非数值开头的字符串转数字 var num5 = "共3元"; console.log(parseInt(num5));<body>
</body><body>
</body><body>
</body><body>
</body>//NaN<body>
</body>
Boolean转Number和Number转Boolean
数值类型转布尔类型
只有0和NaN转成Boolean为false
<body>
</body>//数值类型转布尔类型 console.log(Boolean(99));<body>
</body><body>
</body><body>
</body>//true console.log(Boolean(0));<body>
</body><body>
</body> //false<body>
</body>布尔类型转数值类型
<body>
</body>//布尔类型转数值类型 console.log(Number(true));<body>
</body><body>
</body><body>
</body>//1 console.log(Number(false));<body>
</body><body>
</body> //0<body>
</body>
隐式转换
<body>
</body>/* 隐式转换:<body>
</body><body>
</body>存在于弱类型语言如js php要求不像py那样苛刻<body>
</body><body>
</body><body>
</body><body>
</body><body>
</body>+规则：俩个数值相加或者两个字符串拼接<body>
</body><body>
</body><body>
</body><body>
</body><body>
</body><body>
</body>-规则：两个数值相减<body>
</body><body>
</body><body>
</body><body>
</body><body>
</body>与python不同：python中隐式转换主要集中于数值运算和布尔判断print(1-True)>>>0<body>
</body>print(1 + 1.1)>>>2.1<body>
</body>if 1:<body>
</body><body>
</body><body>
</body><body>
</body><body>
</body><body>
</body><body>
</body><body>
</body><body>
</body><body>
</body><body>
</body><body>
</body>不能print("2"-"1")<body>
</body><body>
</body>即python隐式转换要求苛刻 */<body>
</body><body>
</body><body>
</body>//数值类型和布尔类型<body>
</body><body>
</body> console.log(1+true);<body>
</body><body>
</body>//2<body>
</body><body>
</body> console.log(1-true);<body>
</body><body>
</body>//0<body>
</body><body>
</body><body>
</body>//字符串类型和布尔类型<body>
</body><body>
</body> console.log("guohan"+true);<body>
</body><body>
</body> //guohantrue<body>
</body><body>
</body> console.log("1"-false);<body>
</body><body>
</body> //1<body>
</body><body>
</body> console.log("2"-"1");<body>
</body><body>
</body><body>
</body><body>
</body><body>
</body> //1<body>
</body>
三元表达式
<body>
</body>//三元表达式 /*<body>
</body><body>
</body> js:条件？真时返回的结果:假时返回的结果<body>
</body><body>
</body> py:真时的返回结果 if 条件 else 假时返回的结果 */<body>
</body>//js age = 18; var ret = age>=20?"成年人":"未成年人"; console.log(ret);<body>
</body>//py age = 18 ret = "成年人" if age>=18 else "未成年人" print(ret)<body>
</body>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 用心讨论，共获提升！ 谢谢楼主提供！
页:
[1]