登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›前端三剑客——javascript变量与数据类型

前端三剑客——javascript变量与数据类型

碣滥 4 小时前
javascript：  编程语言（解释型）
 
大纲：
  1.注释方法
  2.js中断句形式（, 和 ;）
  3.js存在形式与引入
  4.变量与常量的声明和定义
  5.基本数据类型及方法
  6.数据类型的转换  
  7.隐式转换
  8.三元表达式
 
 
注释方法
1.png

 
 
js中断句形式
“  ,  ”:   对象的属性和方法用 , 分割
“  ;  ”:  语句的借宿用 ; 分割 
 
 
js存在形式与引入
  1.外部js（一般位于static目录的js文件夹下面）
    引入：
  2.内部jjs（一般位于head标签的css样式下面 或 body标签结束位置）
    head标签里
<body>

</body>
  1. <head>
  2. <body>
  4. </body><body>
  6. </body><meta charset="UTF-8">
  7. <body>
  9. </body><body>
  11. </body><title>Title</title>
  12. <body>
  14. </body><body>
  16. </body>
  17. </head>
复制代码
<body>

</body>
2.png

    body标签结束位置
<body>

</body>
  1. <body>
  2. <h1 id="h1">你好</h1>
  5. </body>
复制代码
<body>

</body><body>

</body>1->
3.png
  2->
4.png
  3->
5.png

原因：单线程
 
<body>

</body>    3.行间js：一般写在元素的指定属性值中
6.png

7.png

 
变量与常量定义和声明
    1，变量  var  let
声明：变量首次出现用var或者let关键字进行声明，后续使用改变量无须加关键字    var全局变量  let局部变量
定义：var 变量名 = 值   let 变量名 = 值
    2.常量     const
声明：用const声明
定义：const 变量名 = 值
    3.超全局对象进行属性赋值  不用var let const声明  name = "guoahn"
  1. <body>
  3. </body>
复制代码
 
 
基本数据类型及方法
通过typeof进行查看类型  console.log(typeof num);
  
8.png
    
  
  与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[0];
       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))；
9.png

 
    3.Object类型    例：const obj = { name: "张三", age: 18 };              对象的属性可以是任意数据类型的数据  如 1（属性）：2（值）
声明：
方式一（直接创建有属性有方法的对象）    属性名与属性值之间必须用 : 连接
<body>

</body>
  1. <body>
  3. </body>
复制代码
<body>

</body>
10.png

 
方式二（用函数创建对象）
<body>

</body>
  1. <body>
  3. </body>
复制代码
<body>

</body>
11.png

 
方式三（用类创建对象）
<body>

</body>
  1. <body>
  3. </body>
复制代码
<body>

</body>
12.png

方式四（创建空对象，添加属性和方法）不常用
<body>

</body>
  1. //创建对象(Object)方式二(创建空对象再去添加属性和方法)
  2. var Info = new Object();
  3. Info.name = "guohan";
  4. Info.age = 18;
  5. Info.say = function(){
  6. return "你好";
  7. };
  8. 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>
  1. //String转Boolean var name = "guohan"; var name1 = Boolean(name); console.log(name1,typeof name1);<body>
  3. </body><body>
  5. </body>//true 'boolean'<body>
  7. </body>var age = ""; var age1 = Boolean(age); console.log(age1,typeof age1);<body>
  9. </body><body>
  11. </body><body>
  13. </body>//false 'boolean'
复制代码
<body>

</body> 
String转Number
除了纯数字形式的字符串能通过Number进行转换其他符合一定条件的得通过parseInt和parseFloat方法进行转换转换    “-.5”表示－0.5可转
<body>

</body>
  1. //String转Number<body>
  3. </body><body>
  5. </body> var age = "10";<body>
  7. </body><body>
  9. </body> var new_age = Number(age);<body>
  11. </body><body>
  13. </body> console.log(new_age,typeof new_age);<body>
  15. </body><body>
  17. </body><body>
  19. </body>var num = "12岁";<body>
  21. </body><body>
  23. </body> var new_num = Number(num);<body>
  25. </body><body>
  27. </body><body>
  29. </body>//10 'number'<body>
  31. </body><body>
  33. </body> console.log(new_num,typeof new_num);<body>
  35. </body><body>
  37. </body><body>
  39. </body> //NaN 'number'<body>
  41. </body>NaN是特殊的数值类型<body>
  43. </body>当转换对象不符合条件时才转换成NaN<body>
  45. </body><body>
  47. </body> console.log(typeof NaN);<body>
  49. </body><body>
  51. </body><body>
  53. </body><body>
  55. </body>//number
复制代码
<body>

</body> 
String和Array
<body>

</body>
  1. //String转Array<body>
  3. </body><body>
  5. </body> var age = "18";<body>
  7. </body><body>
  9. </body> console.log(Array(age),typeof Array(age));<body>
  11. </body><body>
  13. </body><body>
  15. </body>//['18'] 'object'
复制代码
<body>

</body> 
Number（较常见）
 
Number转Number和Number转String和String转Number
1.数值之间可以进行转换：parseInt和parseFloat（Int->Float   ,   Float->Int)  但是Int转Float时不展示小数位
<body>

</body>
  1. //数值之间的转换<body>
  3. </body> parseInt和parseFloat var num1 = 10; var num2 = 3.14; console.log(parseFloat(num1),parseInt(num2));<body>
  5. </body><body>
  7. </body><body>
  9. </body> //整数转浮点数不加小数位 10 3
复制代码
<body>

</body>2.所有数值类型均可以转成字符串类型
3.字符串类型转数值类型：
    只要是数值开头的字符串均可以通过parseInt和parseFloat进行转换  注意：千分位表示的数值字符串通过这方法只能识别开头
<body>

</body>
  1. //字符串转数值<body>
  3. </body>//纯数值形式的字符串<body>
  5. </body><body>
  7. </body> Number var num3 = "12.3"; console.log(Number(num3));<body>
  9. </body><body>
  11. </body><body>
  13. </body>//12.3 console.log(parseInt(num3));<body>
  15. </body><body>
  17. </body>//12<body>
  19. </body>//以数字开头的字符串转数值<body>
  21. </body><body>
  23. </body> parseInt和parseFloat var num4 = "3.3公斤" console.log(parseInt(num4));<body>
  25. </body>//3 console.log(parseFloat(num4));<body>
  27. </body><body>
  29. </body>//3.3<body>
  31. </body>//数值开头的千分位表示法的字符串<body>
  33. </body><body>
  35. </body><body>
  37. </body> parseInt只能识别开头的数值并转换 var num6 = "100_200_300" console.log(parseInt(num6));<body>
  39. </body>//100
复制代码
<body>

</body>    非数值开头的字符串通过parseInt和parseFloat进行转换  得到NaN（特殊的数值类型）
<body>

</body>
  1. //非数值开头的字符串转数字 var num5 = "共3元"; console.log(parseInt(num5));<body>
  3. </body><body>
  5. </body><body>
  7. </body><body>
  9. </body>//NaN
复制代码
<body>

</body> 
Boolean转Number和Number转Boolean
数值类型转布尔类型
只有0和NaN转成Boolean为false
<body>

</body>
  1. //数值类型转布尔类型 console.log(Boolean(99));<body>
  3. </body><body>
  5. </body><body>
  7. </body>//true console.log(Boolean(0));<body>
  9. </body><body>
  11. </body> //false
复制代码
<body>

</body>布尔类型转数值类型
<body>

</body>
  1. //布尔类型转数值类型 console.log(Number(true));<body>
  3. </body><body>
  5. </body><body>
  7. </body>//1 console.log(Number(false));<body>
  9. </body><body>
  11. </body> //0
复制代码
<body>

</body> 
隐式转换
<body>

</body>
  1. /* 隐式转换:<body>
  3. </body><body>
  5. </body>存在于弱类型语言如js php要求不像py那样苛刻<body>
  7. </body><body>
  9. </body><body>
  11. </body><body>
  13. </body><body>
  15. </body>+规则：俩个数值相加或者两个字符串拼接<body>
  17. </body><body>
  19. </body><body>
  21. </body><body>
  23. </body><body>
  25. </body><body>
  27. </body>-规则：两个数值相减<body>
  29. </body><body>
  31. </body><body>
  33. </body><body>
  35. </body><body>
  37. </body>与python不同：python中隐式转换主要集中于数值运算和布尔判断print(1-True)>>>0<body>
  39. </body>print(1 + 1.1)>>>2.1<body>
  41. </body>if 1:<body>
  43. </body><body>
  45. </body><body>
  47. </body><body>
  49. </body><body>
  51. </body><body>
  53. </body><body>
  55. </body><body>
  57. </body><body>
  59. </body><body>
  61. </body><body>
  63. </body><body>
  65. </body>不能print("2"-"1")<body>
  67. </body><body>
  69. </body>即python隐式转换要求苛刻 */<body>
  71. </body><body>
  73. </body><body>
  75. </body>//数值类型和布尔类型<body>
  77. </body><body>
  79. </body> console.log(1+true);<body>
  81. </body><body>
  83. </body>//2<body>
  85. </body><body>
  87. </body> console.log(1-true);<body>
  89. </body><body>
  91. </body>//0<body>
  93. </body><body>
  95. </body><body>
  97. </body>//字符串类型和布尔类型<body>
  99. </body><body>
  101. </body> console.log("guohan"+true);<body>
  103. </body><body>
  105. </body> //guohantrue<body>
  107. </body><body>
  109. </body> console.log("1"-false);<body>
  111. </body><body>
  113. </body> //1<body>
  115. </body><body>
  117. </body> console.log("2"-"1");<body>
  119. </body><body>
  121. </body><body>
  123. </body><body>
  125. </body><body>
  127. </body> //1
复制代码
<body>

</body> 
 
三元表达式
<body>

</body>
  1. //三元表达式 /*<body>
  3. </body><body>
  5. </body> js:条件？真时返回的结果:假时返回的结果<body>
  7. </body><body>
  9. </body> py:真时的返回结果 if 条件 else 假时返回的结果 */<body>
  11. </body>//js age = 18; var ret = age>=20?"成年人":"未成年人"; console.log(ret);<body>
  13. </body>//py age = 18 ret = "成年人" if age>=18 else "未成年人" print(ret)
复制代码
<body>

</body> 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
前端三剑客javascript变量数据

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
碣滥
4 小时前

0

粉丝关注

23

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫