首页 > 代码库 > JavaScript基础知识（变量/引用/转换/函数）

JavaScript基础知识（变量/引用/转换/函数）

2024-10-27 01:43:39   209人阅读

————————————————————————————————————————————

变量

  • 全局变量：在函数体外声明，全局可以使用
  • 局部变量：通过关键字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!=NaN
20     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 = http://www.mamicode.com/null;
34     alert(nullValue);
35     </script>

在内存中的存储与释放（无用存储单元）

  • 收集方式：自动进行收集，可以创建任何需要的无用对象，系统会自动进行清除
  • 收集内容：收集器确定安全回收内存单元的时机，回收那些不再会被使用的值
  • 回收算法：标记和清除无用存储单元的回收算法，通过回收器周期性遍历所有变量并且给变量所引用的值做标记，如果被引用的值是对象或数组，那么会以递归的形式做标记，如果值是数或图，回收器会找到对应的值。如果没有找到对应的值，则通过回收算法来回收。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

引用JS

 1     <!DOCTYPE html>
 2     <html>
 3     
 4     <head>
 5         <!-- 调用外部文件 -->
 6         <script type="text/javascript" src="http://www.mamicode.com/test.js"></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为5
12     // 通过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 判断不是无穷大时true
41     document.write(isFinite(1.79e390) + "</br>")
42     document.write(isFinite(-1.79e390) + "</br>")
43     document.write(isFinite(2) + "</br>")
44     // isNaN 判断不是数字时true
45     document.write(isNaN("hello") + "</br>")
46     document.write(isNaN(1.79e390) + "</br>")
47     document.write("<hr>")
48     /***********************************
49      * Number()
50      * parseFloat()
51      * parseInt()
52      * String
53      * 数据类型转换,略
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     // Demo1
21     // 通过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     // Demo2
33     // 调用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     // Demo3
46     // 或者使用匿名函数作为回调函数,同Demo2
47     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     // Demo4
56     // 使用系统的call()方法
57     function Func4(a, b, c) {
58         return a * b * c;
59     }
60     document.write(Func4.call(this, 2, 2, 2) + "</br>");
61     // Demo5
62     // 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>

 技术分享

JavaScript基础知识（变量/引用/转换/函数）


联系
我们