Home > Article > Web Front-end > JavaScript basics explained
JavaScript basics explained
- 巴扎黑Original
- 2017-07-17 14:35:301221browse
————————————————————————————————————————————
变量
全局变量：在函数体外声明，全局可以使用
局部变量：通过关键字var来声明
变量类型
1 <script type="text/javascript"> 2 var a; 3 // 十进制 4 a = 1; 5 a = 1.2; 6 a = -23; 7 a = .23e4; 8 a = 3e-2; 9 // 十六进制10 a = 0xABCDE;11 a = 0Xff;12 // 八进制13 a = 0123;14 a = 01234567;15 // 正负无穷大16 a = 1.79e310;17 a = -1.79e310;18 // NaN:不是一个数字19 // p.s.NaN不能和自身比较,NaN!=NaN20 a = 0 / 0;21 // alert(a);22 // alert(isNaN(a));23 var str1 = "hello";24 var str2 = "world";25 var str = str1 + str2;26 // 转义字符,如果定界符用',内部是可以用"的 27 var strCh = 'a\nb\rc\t"d\\';28 // alert(strCh);29 // 赋不存在的值30 var emptyValue;31 // alert(emptyValue);32 // 赋空置33 var nullValue = null;34 alert(nullValue);35 </script>
在内存中的存储与释放（无用存储单元）
收集方式：自动进行收集，可以创建任何需要的无用对象，系统会自动进行清除
收集内容：收集器确定安全回收内存单元的时机，回收那些不再会被使用的值
回收算法：标记和清除无用存储单元的回收算法，通过回收器周期性遍历所有变量并且给变量所引用的值做标记，如果被引用的值是对象或数组，那么会以递归的形式做标记，如果值是数或图，回收器会找到对应的值。如果没有找到对应的值，则通过回收算法来回收。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
引用JS
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <!-- 调用外部文件 --> 6 <script type="text/javascript" src="./test.js?1.1.11"></script> 7 <!-- 使用代码屏蔽 --> 8 <script type="text/javascript"> 9 <!--10 alert("浏览器支持js,如果不支持则不显示该内容");11 // 向控制台书写内容12 console.log("hello");13 //-->14 </script>15 <!-- 在浏览器不支持js时显示该行字 -->16 <noscript>17 您的浏览器不支持js,建议更换高版本的浏览器以保证您的用户体验18 </noscript>19 </head>20 21 <body>22 <!-- 写在href中的js -->23 <p><a href="javascript:confirm('您确定么?')">报名</a></p>24 <!-- 写在onclick中的js -->25 <p onclick="javascript:alert('onclick')">点击</p>26 </body>27 28 </html>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
隐式转换
显式转换
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
参数调用的arguments的方法
1 <script type="text/javascript"> 2 // arguments数据类型是一个数组,可以得到我们传入的参数 3 function calc(x, y) { 4 alert(arguments[0]); 5 alert(arguments[1]); 6 alert(typeof arguments); 7 } 8 // alert(1, 2); 9 10 // 通过arguments.length获取参数的个数11 // 在这里调用的实参有5个,函数形参有4个,自动忽略一个,但arguments.lenth为512 // 通过arguments实现可变参数13 function test(a, b, c, d) {14 arguments[2] = 100;15 var paramsNum = arguments.length;16 var sum = 0;17 for (var i = arguments.length - 1; i >= 0; i--) {18 sum += arguments[i];19 }20 alert(sum);21 }22 test(1, 2, 3, 4, 5, 6);23 </script>————————————————————————————————————————————
函数
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
全局函数：见手册
代码样例
1 <script type="text/javascript"> 2 /*********************************** 3 * encodeURI() 4 * decodeURI() 5 * encodeURIComponent() 6 * decodeURIComponent() 7 ***********************************/ 8 // encodeURIComponent 在转义时会将整个URI中的所有标点符号都转义,包括分隔符/ 9 var str = "http://www.hughdong.com/Hugh Dong,/";10 document.write(encodeURI(str) + "</br>");11 document.write(encodeURIComponent(str) + "</br>");12 // decodeURI 无法完全解开encodeURIComponent的编码,需要对应decodeURIComponent来就解码13 document.write(decodeURI(encodeURIComponent(str)) + "</br>");14 document.write(decodeURIComponent(encodeURIComponent(str)) + "</br>");15 document.write("<hr>")16 /***********************************17 * escape()18 * unescape()19 ***********************************/20 // 对字符进行转义21 str = "(?!=()#%&))";22 document.write(escape(str) + "</br>");23 document.write(unescape(escape(str)) + "</br>");24 document.write("<hr>")25 /***********************************26 * eval()27 ***********************************/28 // 计算某个字符串,并执行其中的JavaScript代码29 eval("document.write('eval() is called')");30 document.write("<hr>")31 /***********************************32 * getClass(javaobj)33 * 未理解,略34 ***********************************/35 document.write("<hr>")36 /***********************************37 * isFinite()38 * isNan()39 ***********************************/40 // isFinite 判断不是无穷大时true41 document.write(isFinite(1.79e390) + "</br>")42 document.write(isFinite(-1.79e390) + "</br>")43 document.write(isFinite(2) + "</br>")44 // isNaN 判断不是数字时true45 document.write(isNaN("hello") + "</br>")46 document.write(isNaN(1.79e390) + "</br>")47 document.write("<hr>")48 /***********************************49 * Number()50 * parseFloat()51 * parseInt()52 * String53 * 数据类型转换,略54 ***********************************/55 document.write("<hr>")56 </script>-
实现效果
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
匿名函数：没有函数名的函数
函数表达式可以存储在变量中，变量也可以作为一个函数使用
可以将匿名函数作为参数传递给其他函数，接收方函数就可以通过所传递进来的函数完成某些功能
可以通过匿名函数来执行某些一次性的任务
回调函数：将函数的返回值作为参数调用来实现功能
- 回调函数调用的函数
call()
apply()
可以让我们在不做命名的情况下传递参数，这样可以节省全局变量
我们可以讲一个函数调用操作委托给另一个函数，节省代码编写
有助于提升性能
自调函数：不需要调用，自动执行的函数
使用自调函数不会产生任何全局变量
函数无法重复执行，适合执行一些一次性或初始化的任务
内部（私有）函数
确保全局名字空间的纯净性，防止命名出现冲突
只将一些必要的函数暴露给外部，并保留属于自己的函数，使其不被其他应用程序所调用
返回函数的函数
闭包（作用域链）
实现代码：
1 <script type="text/javascript"> 2 var Test = function Calc(a, b) { 3 return a + b; 4 } 5 document.write(Test(1, 2) + "</br>"); 6 var Test1 = Test; 7 document.write(Test1(1, 2) + "</br>"); 8 /******************************* 9 * 匿名函数,没有函数名10 *******************************/11 var Test2 = function(x, y) {12 return x * y;13 }14 var Test3 = Test2;15 document.write(Test2(3, 4) + "</br>");16 document.write(Test3(4, 5) + "</br>");17 /*******************************18 * 回调函数(匿名函数的应用)19 *******************************/20 // Demo121 // 通过Calc2调用T1和T2函数22 function Calc2(x, y) {23 return x() + y();24 }25 function T1() {26 return 5;27 }28 function T2() {29 return 6;30 }31 document.write(Calc2(T1, T2) + "</br>");32 // Demo233 // 调用Func1,在for循环中将abc的值先*2传入CallBack函数AddOne,将返回值存入arr数组并打印34 function Func1(a, b, c, CallBack) {35 var i, arr = [];36 for (i = 0; i < 3; i++) {37 arr[i] = CallBack(arguments[i] * 2);38 }39 return arr;40 }41 function AddOne(num) {42 return num + 1;43 }44 document.write(Func1(3, 4, 5, AddOne) + "</br>");45 // Demo346 // 或者使用匿名函数作为回调函数,同Demo247 function Func2(a, b, c, CallBack) {48 var i, arr = [];49 for (i = 0; i < 3; i++) {50 arr[i] = CallBack(arguments[i] * 2);51 }52 return arr;53 }54 document.write(Func2(5, 6, 7, function(a) { return a + 1 }) + "</br>");55 // Demo456 // 使用系统的call()方法57 function Func4(a, b, c) {58 return a * b * c;59 }60 document.write(Func4.call(this, 2, 2, 2) + "</br>");61 // Demo562 // apply()方法63 function Func5(a, b, c) {64 return a + b + c;65 }66 var params = [4, 5, 9]67 document.write(Func5.apply(this, params) + "</br>");68 /*******************************69 * 自调函数70 *******************************/71 (function(a, b) {72 document.write("函数自调用" + a + b);73 })(3, 5);74 </script> 
The above is the detailed content of JavaScript basics explained. For more information, please follow other related articles on the PHP Chinese website!
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills