博客列表 >JavaScript_之简单入门变量类型,对象,函数定义介绍

JavaScript_之简单入门变量类型,对象,函数定义介绍

万物皆对象
万物皆对象原创
2020年05月21日 10:20:421211浏览

下面将会让读者很轻易就学会的内容,只要您认真阅读

<script> 标签用于定义浏览器客户端脚本
JavaScript 通常用于图像操作,表单验证以及动态内容更改
<script src="某.js"></script> 元素既可包含脚本语句, 也可以通过 “src” 属性指向外部 “某.js” 脚本文件
如果使用 “src” 属性, 则<script>元素必须是空的

有三种执行外部脚本的方式:

  1. 如果 async=”async”: 脚本相对于页面的其余部分异步地执行, 当页面继续进行解析时, 脚本将被执行
  2. 如果不使用async且 defer=”defer”: 脚本将在页面完成解析时执行
  3. 如果 async和defer 两者都不用: 在浏览器继续解析页面之前, 马上读取并执行脚本

代码演示:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>简单入门变量类型,对象,函数定义介绍</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. console.log("<==================== 知识点一: 数据类型 ====================>");
  10. /**
  11. * ----------------
  12. * 知识点一: 数据类型
  13. * ----------------
  14. * 涉及到类型数据赋值, 不用类型数据打印结果的差别
  15. * 原始类型: number(表示整型 如: 100), string(表示字符串型 如: "Jerry"), boolean(表示真假型 如: true|false)
  16. * 特殊类型: null(表示空), undefined(表示未定义)
  17. */
  18. var grade = 100; // 这是一个整型数据赋值给变量名为 grade 过程
  19. var name = "Jerry"; // 这是一个字符串型数据赋值给变量名为 name 过程
  20. var flag_1 = true, flag_2 = false; // 这是一个真假型型数据赋值给变量名为 flag 过程
  21. var role; // 声明了变量没有赋任何类型的值(包括null) 会输出: undefined, 当前 role 变量未定义的意思,用于表示非对象类型变量的空/无
  22. console.log(role); // 打印结果为: undefined
  23. var title = null; // 声明变量为null类型, 表示空对象, 什么也没有
  24. console.log(title); // 打印结果为: null
  25. console.log(null == undefined); // 打印结果为: true
  26. console.log(typeof null); // 打印结果为 object类型
  27. console.log(typeof undefined); // 打印结果为 undefined
  28. if (!null) {
  29. console.log(null + "结果为: 无");
  30. }
  31. if (!undefined) {
  32. console.log(undefined + "结果为: 无");
  33. }
  34. console.log(null + 100) // 结果为: 100 此效果等同于 0 + 100 = 100
  35. console.log(0 + 100); // 结果为: 100
  36. console.log(undefined + 100); // 结果为: NaN, 因undefined不是一个数字,也不是一个字符串
  37. console.log("<==================== 知识点二: 对象类型 ====================>");
  38. /**
  39. * ----------------
  40. * 知识点二: 对象类型
  41. * ----------------
  42. * 涉及到数组定义, 获取数组长度, 获取数组元素, 判断是否为数组(Boolean), 数组遍历
  43. * 对象类型有: array, object, function
  44. * 解: js的数组和php数组操作类似,差别不大
  45. */
  46. // 定义js数组,可以看出是和php一样的写法, 数组元素的key值默认是从 0 ~ n... 开始数起的
  47. var names = ["Tom", "Jerry", "Jack", "Amy", "Johnson"];
  48. // 数组的length属性在数组执行时,会被初始化,给数组添加新元素时,将会更新length值
  49. console.log(names.length); // 获取数组的长度(元素总数) 结果为: 5 表示当前数组有5个元素
  50. // 数组元素的key值默认是从 0 ~ n... 开始数起, 所以获取数据元素, 都是以 0 1 2 3 4 这样的姿势去获取数据元素
  51. // 姿势: 变量名[数组key值]
  52. console.log(names[0]); // 结果为: Tom, 因为Tom元素的key为是0
  53. console.log(names[1]); // 结果为: Jerry, 因为Tom元素的key为是1
  54. // 专业判断数组类型的方式是: Array.isArray(你的数组变量/数组)
  55. console.log(Array.isArray(names)); // names变量是一个数组, 结果为: true
  56. console.log(Array.isArray([])); // []是一个数组, 结果为: true, 这条只是判断它的类型,不用管它里面有没有元素
  57. // 1. 利用for循环遍历 names 数组
  58. // i 会从0开始循环直到 i 值不小于数组的长度, 这里会利用i作为数组的key,对应数组从 0 ~ n... 的key, 并将元素逐个输出
  59. for (var i = 0; i < names.length; i++) {
  60. console.log("key: " + i + ", value: " + names[i]);
  61. }
  62. // 2. 利用数组对象上的方法 forEach()来遍历数组
  63. // names.forEach(function(元素, key, 当前数组){});
  64. names.forEach(function(item, index, current){
  65. console.log("key: " + index + ", value: " + item);
  66. console.log(current[index]);
  67. });
  68. // 渲染到html标签上
  69. names.forEach(function(item, index, current){
  70. document.body.innerHTML += "<ol style='background-color: skyblue;'>"+ item +"</ol>"; // 往<body>标签追加<ol>元素
  71. });
  72. // 我们在学php中有slice()函数获取数组部分的元素,
  73. // js数组对象中也有相同的函数 names.slice(开始, 结束, 新增/替换元素)
  74. // 开始: 可选。规定从何处开始选取,如果是负数,那么它规定从数组尾部开始算起的位置,
  75. // -1表示最后一个元素, -2表示倒数第二个元素,以此类推
  76. // 结束: 可选。规定从何处结束选取,该参数是数组片断结束处的数组下标, 如果没有指定该参数,
  77. // 那么切分的数组包含从 开始 到数组结束的所有元素,如果这个参数是负数,
  78. // 那么它规定的是从数组尾部开始算起的元素
  79. console.log(names.slice()); // 不传任何参数或者只传递slice(0)的情况下,默认会返回数组的全部元素
  80. console.log(names.slice(0));
  81. console.log(names.slice(1, 3)); // 从第一个元素开始选取(不含第一个) 结果为: (2) ["Jerry", "Jack"]
  82. // splice(新增位置, 元素数量, 新增内容) 可以实现数组新增,替换,删除
  83. names.splice(1, 0, "Dog", "Cat"); // 表示从第一个元素后面开始 新增 "Dog", "Cat" 2个元素
  84. console.log(names); // 结果为: (7) ["Tom", "Dog", "Cat", "Jerry", "Jack", "Amy", "Johnson"]
  85. names.splice(1, 2, "狗", "猫"); // 表示从第一个元素后面开始, 替换2个元素
  86. console.log(names); // 结果为: (7) ["Tom", "狗", "猫", "Jerry", "Jack", "Amy", "Johnson"]
  87. names.splice(1,2); // 表示从第一个元素后面开始, 删除2个元素
  88. console.log(names); // 结果为: (5) ["Tom", "Jerry", "Jack", "Amy", "Johnson"]
  89. console.log("<==================== 知识点三: JS的对象 ====================>");
  90. /**
  91. * ----------------
  92. * 知识点三: JS的对象
  93. * ----------------
  94. * js中的数组几乎和php的索引数组一样, 这点和PHP的"关联数组"相似, 对象中也可以嵌套对象(对象中的对象)
  95. * 对象中可有各种类型的数据, number, string, Boolean, function, object, null, undefined
  96. * 字面量定义对象,无需实例化, 直接: "变量名.属性/方法" 使用
  97. */
  98. var student = {
  99. id: 1001,
  100. name: "Jerry",
  101. email: "Jerry@qq.com",
  102. isRegister: true,
  103. // 若索引对象的索引名称有空格,请务必要双引号("")包裹
  104. "my course": {
  105. PHP: 100,
  106. "java script": 98,
  107. CSS: 85
  108. },
  109. // JS对象中的两种方法定义, 类似于PHP的方法
  110. // 姿势: 方法名:function(){} 或者 方法名:()=>{}
  111. getName: function (id) {
  112. if(id === 1001){
  113. return "id: " + this.id + ", name: " + this.name;
  114. }
  115. }
  116. }
  117. // 访问对象属性/方法,在JS中都是用点 "." 或者 [] 数组方式来去访问
  118. console.log(student.id); // 结果为: 1001 (这种方式类似于PHP的 $student->id)
  119. console.log(student["name"]); // 结果为: Jerry 以关联数组的方式获取对象属性
  120. console.log(student["my course"]); // 结果为: {PHP: 100, JS: 98, CSS: 85} 注: key值和对象上的key值一一对应
  121. // 姿势: 这里一定要注意"my course" 只能用["my course"]方式获取 因为有空格原因, 不能用student.my course 这种方式获取
  122. // console.log(student.my course); // 这样获取带有空格的key会报语法错误
  123. // 因: "my course" 返回也是一个对象它有 PHP "java script" CSS 这三个属性
  124. console.log(student["my course"]["java script"]); // 结果为: 98
  125. console.log(student["my course"].PHP); // 结果为: 100
  126. // 对象获取方法, 不推荐用[]方式获取
  127. console.log(student["getName"]); // 这样不是返回方法处理的结果,而是直接返回方法(函数)的原样
  128. console.log(student["getName"](1001)); // 这样使用才正确, 但不推荐,除非你的方法名有空格
  129. // console.log(student.getName(1001)); // 结果为: id: 1001, name: Jerry
  130. // 1. 利用for in 循环遍历对象: for (对象的键名(key) in 对象) {}
  131. for (key in student) {
  132. console.log(key); // 这里会输出对象中所有的key
  133. console.log(student[key]); // 根据key值去调用对象中的方法/属性
  134. }
  135. // 2. 利用数组forEach()进行遍历
  136. // 事先将对象的键名(key)获取出来并保存在一个变量中: Object.keys(你的对象) 返回数组
  137. var keys = Object.keys(student);
  138. console.log(keys);
  139. console.log(Array.isArray(keys)); // 判断返回的结果是否为数组 结果为: true
  140. // keys.forEach(function(元素, 键值, 当前数组){}, 需要遍历的对象)
  141. keys.forEach(function(item, index, current){
  142. console.log(item);
  143. console.log(index);
  144. console.log(current);
  145. // this表示forEach(闭包函数 [,对象变量])第二个参数
  146. // 在forEach里的this == student对象
  147. console.log(this[item]); // 这里用数组方式访问,因为此对象里有空格键名
  148. }, student);
  149. console.log("<==================== 知识点四: JS的函数 ====================>");
  150. /**
  151. * 知识点四: JS的函数
  152. * js中的函数也是和php中的区别不大, 常用函数有三种: 普通函数,匿名函数,自执行函数
  153. * 下面将会介绍这三种函数是如何定义和使用的
  154. */
  155. // ①. 普通函数
  156. function f1(a, b){
  157. var sum = a + b;
  158. console.log(a + '+' + b + '=', sum);
  159. }
  160. // 函数定义后需要调用才有能执行里面的功能
  161. f1(100, 89); // 将100和99求和 结果为: 100+89= 189
  162. // ②. 匿名函数
  163. var f2 = function(c, d){
  164. var ride = c * d;
  165. console.log(c + '*' + d + '=', ride);
  166. };
  167. // 匿名函数调用是通过函数的宿主(就是f2这个变量名)调用
  168. f2(10, 30);
  169. // ③. 立即调用函数不像普通和匿名函数需要调用才有结果,而是写完即可执行无需调用
  170. // 姿势1: 先写两对大括号()(), 第一对大括号写函数,第二对大括号写需要传递给函数的参数
  171. // 示例: (function(e, f){ 代码执行块 })(100, 200)
  172. (function f3(e, f){
  173. var except = e / f;
  174. console.log(e + '÷' + f + '=', except);
  175. })(100, 200)
  176. // 姿势2: 先写一对大括号(), 在大括号里面写函数和传递参数
  177. // 示例: (function(g, h){ 代码执行块 }(100, 90))
  178. (function f4(g, h){
  179. var reduce = g - h;
  180. console.log(g + '-' + h + '=', reduce);
  181. }(100, 90))
  182. </script>
  183. </body>
  184. </html>

效果图:

知识点一: 数据类型

知识点二: 对象类型

知识点三: JS的对象

知识点四: JS的函数

总结:

序号 说明
1 文章虽然很基础,但对入门来说花点心思去看,会有不同的体验
2 通过本文章可以精确地学习到变量值的类型,当你在使用变量时,你就会了解到这个变量是什么类型有什么值
3 也会体验到非常有趣js对象类型,它可以用点”.”或”[]” 的方法获取, 字面量定义对象也非常简单, 只需要一对{},就可以写一波猛如虎的操作,还有遍历对象和数组差点不多,主要关系key和value
4 最后还学会三种js函数的定义,使用也是非常简单,定义函数时函数名称不推荐和系统关键字一致,也不推荐以数字运算符作为函数名称的开头 如: 100test() -test()
5 注: 在JS中函数名称字母是区分大小写的
6 建议函数命名方式:
大驼峰: GetDataInfo(), 三个单词首字母都大写 Get Data Info
小驼峰: getDataInfo(), 第一个单词首字母小写, 往后的单词首字母大写 get Data Info
下划线: get_data_info(), 每个单词用下划线区分, get_data_info
7 精确地使用了 slice() 函数来提取数组的片断 和 splice() 函数来对数组新增删除替换操作

如有错误希望读者能够在评论区发表意见,作者会对错误内容即时更新

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议