• JavaScript | 基础（变量/引用/转换/函数）

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

    变量

    • 全局变量：在函数体外声明，全局可以使用
    • 局部变量：通过关键字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
b
c	"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"></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 var Test = function Calc(a, b)
  2 {
  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 {
 13     return x * y;
 14 }
 15 var Test3 = Test2;
 16 document.write(Test2(3, 4) + "</br>");
 17 document.write(Test3(4, 5) + "</br>");
 18 /*******************************
 19  * 回调函数(匿名函数的应用)
 20  *******************************/
 21 // Demo1
 22 // 通过Calc2调用T1和T2函数
 23 function Calc2(x, y)
 24 {
 25     return x() + y();
 26 }
 27 function T1()
 28 {
 29     return 5;
 30 }
 31 function T2()
 32 {
 33     return 6;
 34 }
 35 document.write(Calc2(T1, T2) + "</br>");
 36 // Demo2
 37 // 调用Func1,在for循环中将abc的值先*2传入CallBack函数AddOne,将返回值存入arr数组并打印
 38 function Func1(a, b, c, CallBack)
 39 {
 40     var i,
 41     arr = [];
 42     for (i = 0; i < 3; i++)
 43     {
 44         arr[i] = CallBack(arguments[i] * 2);
 45     }
 46     return arr;
 47 }
 48 function AddOne(num)
 49 {
 50     return num + 1;
 51 }
 52 document.write(Func1(3, 4, 5, AddOne) + "</br>");
 53 // Demo3
 54 // 或者使用匿名函数作为回调函数,同Demo2
 55 function Func2(a, b, c, CallBack)
 56 {
 57     var i,
 58     arr = [];
 59     for (i = 0; i < 3; i++)
 60     {
 61         arr[i] = CallBack(arguments[i] * 2);
 62     }
 63     return arr;
 64 }
 65 document.write(Func2(5, 6, 7, function (a)
 66     {
 67         return a + 1
 68     }
 69     ) + "</br>");
 70 // Demo4
 71 // 使用系统的call()方法
 72 function Func4(a, b, c)
 73 {
 74     return a * b * c;
 75 }
 76 document.write(Func4.call(this, 2, 2, 2) + "</br>");
 77 // Demo5
 78 // apply()方法
 79 function Func5(a, b, c)
 80 {
 81     return a + b + c;
 82 }
 83 var params = [4, 5, 9]
 84 document.write(Func5.apply(this, params) + "</br>");
 85 /*******************************
 86  * 自调函数
 87  *******************************/
 88 (function (a, b)
 89 {
 90     document.write("函数自调用" + a + b);
 91 }
 92 )(3, 5);
 93 
 94 // 内部私有函数
 95 // 在内部封装不想让外部使用的代码
 96 function a(param)
 97 {
 98     function b(param1)
 99     {
100         return param1 + 10;
101     }
102     // 在a函数体内调用b函数
103     return b(param);
104 }
105 // 在a函数体外不能直接调用b函数
106 console.log(a(5));
107 
108 // 返回函数的函数
109 function c()
110 {
111     console.log('111');
112     return function ()
113     {
114         console.log('222');
115     }
116 }
117 // 在这里不可以直接调用c(),需要声明变量funcTest,让c()的返回值返回给funcTest
118 var funcTest = c();
119 funcTest();
120 // 或使用另一种形式c()();
121 c()();
122 
123 // 重写自己的函数,用新的函数覆盖自己
124 function d()
125 {
126     console.log('333');
127     d = function ()
128     {
129         console.log('444');
130     }
131 }
132 // 在d函数内将新的函数内容赋给自己,第一次调用时为333并将自己重写自己的函数
133 console.log(d);
134 d();
135 console.log(d);
136 d();
137 
138 // 针对不同的浏览器执行不同的代码
139 var e = function ()
140 {
141     function setUp()
142     {
143         console.log('setup');
144     }
145 
146     function doWhat()
147     {
148         console.log('dowhat');
149     }
150     setUp();
151     return doWhat;
152 }
153 ();
154 // 打印e()代码段可以看到e的内容是doWhat(),在function(){}()末尾的()代表执行,e得到了function()返回的doWhat
155 console.log(e);
156 e();
  • 相关阅读:
    php tp6 踩坑（1）使用cookie助手函数 接口报500错误，但却没用错误信息问题
    php 杂项（2）--md5加密
    php tp6学习笔记（100） 正则表达式
    php 杂项（1）--单引号和双引号的区别
    pins和ports区别
    analyze&elaborate
    编译前后保存database
    DC层次化设计
    synthesis建立和保存
    DC综合过程和目标
  • 原文地址：https://www.cnblogs.com/hughdong/p/7183740.html
Copyright © 2020-2023  润新知