JavaScript

最新推荐文章于 2023-03-13 15:08:07 发布
最新推荐文章于 2023-03-13 15:08:07 发布
阅读量400 收藏
点赞数
分类专栏： javascript JavaScript知识点

转载请标明出处：http://blog.csdn.net/wu_wxc/article/details/50933373
本文出自【吴孝城的CSDN博客】

现在基本上所有浏览器都支持javascript

它是一种轻量级的编程语言，可以给网页添加各种动态效果，使网页更加美观

可放在<head></head>和body></body>，一般放在<head></head>中

放在<head></head>中浏览器解析head时就会执行

放在<body></body>中页面读取到该语句时就会执行

javascript是一种区分大小写的编程语言

javascript的注释有

[javascript]  view plain  copy
  1. //单选注释  
  2. /*多选注释*/  

使用javascript我们可以使用<script></script>在Html页面中插入javascript代码

[html]  view plain  copy
  1. <script type="text/javascript">这里是javascript内容</script>  
type="text/javascript"是告诉浏览器，<script>中的文本内容(text)是javascript语言
也可以使用外部文件来引用，当用外部文件写js时，js文件不需要添加script标签

[html]  view plain  copy
  1. <script src="myjs.js"></script>  
javascript中每个语句用";"分隔开，";"可以不写，建议写上

变量：

声明变量用关键字：var

如：

[javascript]  view plain  copy
  1. var myVar;  
  2. var myVar="javascript";  
  3. var myNum=6;  
  4. var myChar="name", age="20";  
  5. var arr=[1, 2, 3, 4];  
  6. var arr=["wu", "xiao", "cheng"];  
  7. var arr=new Array("wu", "xiao", "cheng");  
  8.   
  9. var arr=new Array();  
  10. arr[0]=20;  
  11. arr[1]="Hello World"'  
当声明一个变量，但没有赋值时，其值为“undefined”

如：

[javascript]  view plain  copy
  1. var str;  
当然，变量可以不声明，直接使用，但这样做并不规范，建议声明后再使用

变量名的命名：

必须以字母、下划线(_)或美元符($)开始，可以使用多个字母、数字、下划线(_)或美元符($)

但不能使用javascript关键词和javascript保留字

当声明多个变量时，用","隔开

局部变量和成员变量

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title></title>  
  6.     </head>  
  7.     <body>  
  8.     <script>  
  9.         var n=1;    //全局变量，任何地方都可用  
  10.         m=2;        //全局变量，任何地方都可用  
  11.         function fun(){  
  12.             var x = 1;      //局部变量，当前函数可用  
  13.             y = 2;          //全局变量，任何地方都可用，但要调用本函数才会成为全局变量  
  14.         }  
  15.         fun();  
  16.         alert(x)  
  17.     </script>  
  18.     </body>  
  19. </html>  
函数：

javascript中定义函数的方法：

[javascript]  view plain  copy
  1. function 函数名(){  
  2.     函数代码;  
  3. }  

function是定义函数的关键字

函数名为给该函数起的名字

()括号里可以传递参数，也可以不传递参数，参数可以传递任意多个，当有多个参数时，用","分隔开

函数代码是要完成特定功能的代码

函数的调用：

函数定义好后要调用才会执行

调用方法：<script>标签内调用，Html文件内调用

在<script>中调用

[javascript]  view plain  copy
  1. <script>  
  2.     function demo(){  
  3.         代码内容;  
  4.     }  
  5.     demo();     //调用函数  
  6. </script>  
在html中调用
[html]  view plain  copy
  1. <script>  
  2.     function demo(){  
  3.         代码内容;  
  4.     }  
  5. </script>  
  6. //这里使用按钮来调用函数  
  7. <input type="button" onclick="demo()" value="按钮">  

输出：

可以使用document.write()向Html直接输出内容，输出多项内容用"+"连接

如：

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title></title>  
  6.         <script type="text/javascript">  
  7.             var mystr="world"  
  8.             document.write("Hello"+"<br/>"+mystr);  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.     </body>  
  13. </html>  

确定：

[javascript]  view plain  copy
  1. function con(){  
  2.     var showMessage=confirm("点击确定还是取消？");  
  3.     if(showMessage==true){  
  4.         document.write("你点击了确定");  
  5.     }else{  
  6.         document.write("你点击了取消");  
  7.     }  
  8. }  

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title></title>  
  6.         <script type="text/javascript">  
  7.             function con(){  
  8.                 var showMessage=confirm("点击确定还是取消？");  
  9.                 if(showMessage==true){  
  10.                     document.write("你点击了确定");  
  11.                 }else{  
  12.                     document.write("你点击了取消");  
  13.                 }  
  14.             }  
  15.         </script>  
  16.     </head>  
  17.     <body>  
  18.     <input type="button" onClick="con()" value="按钮" />  
  19.     </body>  
  20. </html>  

点击按钮后会在页面打印出相应的内容

提问：

带文本输入框的消息对话框

prompt(str1,str2);

str1为提示的内容，不可修改

str2为输入框中提示的内容，可修改

[javascript]  view plain  copy
  1. function pro(){  
  2.     var showMessage=prompt("显示内容","输入内容");  
  3.     if(showMessage>100){  
  4.         document.write("你输入的内容大于100");  
  5.     }else{  
  6.         document.write("你输入的内容小于100");  
  7.     }  
  8. }  
[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title></title>  
  6.         <script type="text/javascript">  
  7.             function pro(){  
  8.                 var showMessage=prompt("显示内容","输入内容");  
  9.                 if(showMessage>100){  
  10.                     document.write("你输入的内容大于100");  
  11.                 }else{  
  12.                     document.write("你输入的内容小于100");  
  13.                 }  
  14.             }  
  15.         </script>  
  16.     </head>  
  17.     <body>  
  18.     <input type="button" onClick="pro()" value="按钮" />  
  19.     </body>  
  20. </html>  

警告：
alert(字符串或变量);

如

[html]  view plain  copy
  1. alert("Hello World");  

异常处理：

如下，

[javascript]  view plain  copy
  1. <script>  
  2.     function demo(){  
  3.         alert(message)  
  4.     }  
  5.     demo();  
  6. </script>  
message是没有声明的，所以运行该函数时会有错误，但没胡任何提示，这时可以用try catch来捕获异常
[javascript]  view plain  copy
  1. function demo(){  
  2.     try{  
  3.         //执行的语句  
  4.         alert(message);  
  5.     }catch(err){  
  6.         //对错误的处理，弹出提示  
  7.         alert(err)  
  8.     }  
  9. }  
  10. demo();  
也可以用throw来捕获异常，它可以用来自定义一个错误，可以与try，catch一起使用

throw的使用

[javascript]  view plain  copy
  1. throw "输出的内容";  

Javascript-DOM

DOM是文档对象模型(Document Object Model)

当页面加载时，用来访问和处理Html文档的标准方法，DOM以树结构呈现html文档中的元素属性等


通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 Html

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

DOM操作Html

[javascript]  view plain  copy
  1. document.write();  
要注意的是不要在加载完文档后用例document.write();，这样会覆盖掉该文档

寻找元素：
通过ID找到Html元素

[html]  view plain  copy
  1. <p id="pid">原来内容</p>  
  2. <script>  
  3.     function demo(){  
  4.         var n=document.getElementById("pid").innerHTML="新内容";  
  5.     }  
  6. </script>  
  7. <button onclick="demo()">按钮</button>  
通过标签名找到Html元素，当有多个同样的标签名时，只会执行第一个

[html]  view plain  copy
  1. <script>  
  2.     function demo(){  
  3.             document.getElementsByTagName("button");  
  4.             alert("通过标签名找到")  
  5.     }  
  6. </script>  
  7. <button onclick="demo()">按钮</button>  
attribute，用来获得标签的属性值
[html]  view plain  copy
  1. <a id="aid" href="http://www.google.com">谷歌</a>  
  2. <button onclick="demo()">下次点击"谷歌时将跳转到www.wuxiaocheng.cn"</button>  
  3. <script>  
  4.     function demo(){  
  5.         document.getElementById("aid").href="http://www.wuxiaocheng.cn";  
  6.     }  
  7. </script>  
DOM操作CSS：
[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title></title>  
  6.         <style >  
  7.             .c{  
  8.                 background: red;  
  9.             }  
  10.         </style>  
  11.     </head>  
  12.     <body>  
  13.     <div id="divid" class="c">Html</div>  
  14.     <button onclick="demo()">按钮</button>  
  15.         <script>  
  16.             function demo(){  
  17.                 /* 通过ID用javascript修改CSS样式*/  
  18.                 document.getElementById("divid").style.background="blue";  
  19.             }  
  20.         </script>  
  21.     </body>  
  22. </html>  









1.什么是闭包？

所谓闭包：在一个函数作用域中 保留 它上级作用域的局部变量，这些局部变量不会随着上级函数的执行完毕而被销毁。

简单的理解闭包：子函数可以使用父函数的局部变量（包括参数，因为参数也是局部变量）；

 

[javascript]  view plain  copy
  1. function test() {  
  2.         var i=0;  
  3.         function b() {  
  4.             alert(++i);  
  5.         }  
  6.         return b;  
  7.    
  8. }  
  9. var c= test();  
  10. c();  

闭包是和JS的垃圾回收机制(以下简写GC)相关的，正常来说在test()函数调用完毕后，为局部变量i分配的空间就会被GC回收了. 但是这里在test函数里又定义了一个子函数b，并且在函数b的里面用到了 上级函数的局部变量i，然后在test()里return b.  这样一来就会导致：

当test()函数调用完毕，为局部变量i分配的空间也不会被GC收回。

所以在var c= test();这句执行完毕后，调用c()依然可以访问到局部变量i，所以就弹出了1.

[javascript]  view plain  copy
  1. function parent(num1) {  
  2.         var num2= 10;  
  3.         return function child() {  
  4.             alert(num1+num2);  
  5.         }  
  6. }  
  7. var fun = parent(10);  
  8. fun();  

在 parent 函数内部返回值也是一个函数，在 return 的这个 child() 函数里，用到了 parent 函数的参数 num1 和局部变量 num2 ， 因为形成了闭包，所以调用 fun() 的时候就可以访问到 num1 和 num2. 所以就弹出 20 了 .

 接着看一个稍微复杂的例子：

[javascript]  view plain  copy
  1. var name = 'zj';  
  2. var obj = {  
  3.         name:'z3',  
  4.         getName:function () {  
  5.            return function () {  
  6.                return this.name;  
  7.            }  
  8.         }  
  9. }  
  10. alert(obj.getName()());// 弹出zj  

为什么会弹出 zj 那？让我们一点点来看：

首选把alert里内容改成alert(obj.getName);看一下

 

 

 

直接alert(obj.getName)就相当于调用obj这个对象下的getName属性，弹出getName这个属性的值，所以弹出是一大段代码接着改写成alert(obj.getName( ) ),看下结果

 

直接alert(obj.getName( ) )就相当于直接执下面的代码：

[javascript]  view plain  copy
  1. function () {  
  2.         return function () {  
  3.                return this.name;  
  4.     }  
  5. }  

而执行这个函数执行之后返回值又是一个函数，所以alert(obj.getName( ) )还是一段函数代码

[javascript]  view plain  copy
  1. function () {return this.name;}  
接着把alert(obj.getName( ) )改成alert(obj.getName( ) ( )) , 到这里就相当于直接运行

function () { return this.name; }这段代码，此时的this代表的就是window这个对象，所以return this.name 就相当于return window.name ,所以就弹出zj了，到这里有没有看明白

其实alert(obj.getName( ) ( ))这种写法和前面的用一个变量来接受的写法是等价的，同样我们也可以用个变量来接受

[javascript]  view plain  copy
  1. var n = obj.getName();  
  2. alert(n());  

这样弹出的结果也是 zj

 2. 怎么样才能形成闭包？

在有函数嵌套的情况下，子函数用到了父函数的参数或者局部变量，一般都会形成闭包。

3. 闭包有什么好处？

好处1：具有封闭性，可以起到保护变量的作用

[javascript]  view plain  copy
  1. // 1级作用域  
  2. function f(x){ //2级作用域  
  3. var temp = x;  
  4. return function(x){//3级作用域  
  5.    temp += x;  
  6.    alert(temp);   
  7. }  
  8. }  
  9. var a = f(50);  
  10. a(5); // 55  
  11. a(10);  

我们在二级作用域里定义了一个局部变量 temp ，然后再三级作用域里用到了这个变 量，这里就形成了闭包，把 temp 这个变量 保护起来，不被 GC 所回收，方便在以后再 使用 temp 这个变量。

当执行完这句话 var a = f(50);temp=50并且temp变量的值被保存了起来，接着调用a(5)此时temp的值就变成了55，所以会弹出55。完a(5)之后，temp里保存的值是55.接着a(10).所以弹出65。 

好处2 ：避免全局变量的污染

[javascript]  view plain  copy
  1. var a = 1;  
  2. function test(){  
  3. a++;  
  4. alert(a);  
  5. }  
  6. test(); // 调用一次a就加1  
  7. test();  
此时的 a 是全局变量，程序当中经可能的避免全局变量，此时把 a 提到内部，变成局部变量看一下

[javascript]  view plain  copy
  1. function test(){  
  2.     var a = 1;  
  3.     a++;  
  4.     alert(a);  
  5. }  
  6. test(); //2  
  7. test();//2  

我们发现不管调多少次结果都是 2. 这也是因为每调用一次 test(); 都会重新定义变量 a = 1 ，然后累加一次变成 2 ，然后弹出就结束了；再调用 test()  还是重新定义变量 a = 1..., 所以永远是弹出 2;

这和js的GC有关，当函数test()执行完毕后，GC就会把为test的局部变量分配的空间收回，所以局部变量就不存在了；因为每次调用test()都是重新为局部变量分配空间；

这里就可以通过闭包就可以实现：test()调用完毕后不让GC把局部变量的空间收回，同时又避免了全局变量污染

 

[javascript]  view plain  copy
  1. function test(){  
  2.             var a = 1;  
  3.             function b(){  
  4.                 a++;  
  5.                 alert(a);  
  6.             }  
  7.             return b;  
  8. }  
  9. var c = test(); //2  
  10. c();//2  
  11. c();  
  12. c();  

再来看一个例子：

[html]  view plain  copy
  1. <ul>  
  2.     <li>000</li>  
  3.     <li>111</li>  
  4.     <li>222</li>  
  5.     <li>333</li>      
  6. </ul>  

有 4 个 li ，当点击第一个 li 弹出 0 ，点击第二个弹出 1 ，点第三个弹出 2 ，点第四个弹出 3 ，

[javascript]  view plain  copy
  1. <script>  
  2.    var aLi = document.getElementsByTagName('li');  
  3.    for(var i=1;i<=aLi.length;i++){  
  4.        aLi[i].onclick = function () {  
  5.            alert(i);  
  6.        }  
  7.    }  
  8. </script>  

这样写完之后发现每次点击弹出来都是 4, 因为当每次当我们点击 li 的时候，其实 for 循环已经循环结束了，所以每次都会弹出 4 。

这里就可以利用闭包在aLi[i].onclick = function () { alert(i)；} 外面再套一个自执行函数，然后把for循环里的局部变量i当作参数传给这个函数，这样每次循环就会把i的值保存起来，这样外部函数执行完毕之后，并不会影响内部函数。

[javascript]  view plain  copy
  1. <script>  
  2.    var aLi = document.getElementsByTagName('li');  
  3.    for(var i=0;i<aLi.length;i++){  
  4.        (function (i) { // 把for循环的变量i当作参数  
  5.            aLi[i].onclick = function () {  
  6.                alert(i);  
  7.            }  
  8.        })(i);  
  9.    }  
  10. </script>  
所以这样每次点击第一个 li 就会弹出 0 ，点击第二个弹出 1 ，点第三个弹出 2 ，点第四个弹出 3 了

4. 闭包会引起哪些问题？

闭包在IE下引发内存泄露

所谓内存泄露是指： 我们定义了一个变量，而这个变量会常驻在内存中不被释放，只有当关闭浏览器的时候才会被释放；

 1. 什么条件下可能导致内存泄露？

当一个变量的属性，引用一个内部函数，而在这个函数内部 又 用到了函数外部的 变量的其他属性或者引用的时候，就会导致内存泄露

例如：

[javascript]  view plain  copy
  1. window.onload = function(){  
  2.     var oDiv = document.getElementById('div1');  
  3.     oDiv.onclick = function(){  
  4.         alert(oDiv.id);  
  5.     }  
  6. }  

var oDiv 这个变量的  onclick 属性引用了一个匿名函数，而在这个函数内部又用到了 oDiv.id  的引用，因为 oDiv 是在这个匿名函数外部定义的，此时就会引起内存泄露；

2. 那怎么解决内存泄露问题那？？

[javascript]  view plain  copy
  1. window.onload = function(){  
  2.     var oDiv = document.getElementById('div1');  
  3.     oDiv.onclick = function(){  
  4.         alert(oDiv.id);  
  5.     }  
  6.     window.onunload = function(){  
  7.         oDiv.onclick = null;  
  8.     }当页面跳转的时候把oDiv.onclick引用置为空就好了  
  9. }  

或者是

[javascript]  view plain  copy
  1. window.onload = function(){  
  2.     var oDiv = document.getElementById('div1');  
  3.     var id = oDiv.id;  
  4.     oDiv.onclick = function(){  
  5.         alert(id);  
  6.     }  
  7.     oDiv = null;  
  8. }  

在内部匿名函数引用之前把 oDiv.id  通过一个变量接受一下，然后用完之后把 oDiv 置为空也可以解决内存泄露问题。
顶
0
 
踩
0


一、基本语法

1、JavaScript代码可以嵌在网页的任何位置，通常放在<head></head>标签里。

2、<script></script>中包含的是JavaScript代码，可以直接被浏览器执行。

3、可将JavaScript代码放在一个.js文件中，通过<script src="js文件地址"></script>。多个页面可以引用同一份js文件。同一个页面可以同时引入多个js文件，浏览器按顺序依次执行。

4、<script>标签type默认属性为text/javascript。

5、JavaScript严格区分大小写。

6、console.log("xxx")：在控制台打印出内容。

7、alert("xxx")：弹窗。

二、数据类型和变量

1、Number

（1）JavaScript不区分整数和浮点数，统一使用Number表示。

（2）NaN表示Not A Number，当无法计算结果时使用NaN表示。

（3）Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，使用Infinity表示。

2、字符串

（1）字符串是用单引号或双引号括起来的任意文本。

（2）可以使用“+”将多个字符串连接起来。

（3）字符串是不可变的。

（4）常用方法

toUpperCase()：将字符串全部变为大写。

toLowerCase()：将字符串全部变为小写。

indexof()：指定字符串出现的位置。

substring()：返回指定索引之间的字符串。

3、布尔值

（1）一个布尔值只有true和false两个值。

（2）可以使用true或false表示布尔值，也可以使用布尔运算计算出来布尔值。

4、比较运算符

（1）JavaScript允许对任何数据类型进行比较。

（2）比较运算符

==：自动转换数据类型再做比较。

===：若数据类型不一致，返回false；数据类型一致则进行比较。

（3）NaN与所有其他值都不相等，包括它自己。可通过isNaN()函数判断NaN（唯一判断方式）。

（4）比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值。

5、null和undefined

（1）null表示一个空的值，0是一个数值，''表示一个长度为0的字符串。

（2）undefined表示值未定义。仅在判断函数参数是否传递的情况下有用。

6、数组

（1）数组是一组按顺序排列的集合，集合的每个值称为元素，JavaScript的数组可以包含任意数据类型。

（2）2种表示方式：

[1，5，9，7，2]：用[]表示，元素之间使用逗号隔开。

new Array(1，2，3)：使用函数Array()实现。

（3）常用方法

indexOf()：搜索指定元素的位置。

slice()：截取数组的部分元素（类似substring()），返回一个新的数组，起止参数包括起始索引，不包括结束索引。如果不给定slice()的参数，会从头到尾截取数组，可用来复制数组。

push()：向数组的末尾添加元素。

pop()：删除数组的最后一个元素。

unshift()：向数组的 头部添加元素。

shift()：删除数组第一个元素。

sort()：对数组进行排序。

reverse()：反转数组。

splice()：从指定的索引开始删除若干元素，然后再从该位置添加若干元素。

concat()：将当前数组与另一个数组连接起来，返回一个新的数组。

join()：将当前数组的每个元素都用指定的字符串连接起来，返回连接后的字符串。如果数组的袁术不是字符串，将自动转为字符串后再进行连接。

7、对象

（1）JavaScript的对象是一组由键-值组成的无序集合。J

（2）JavaScript用{...}表示对象，xxx:xxx表示键值，用逗号隔开，最后一个键值对末尾不需要添加逗号。

[javascript]  view plain  copy
  1. var person{  
  2. name:'zhangsan',  
  3. age:18  
  4. };  
（3）JavaScript对象的键都是字符串类型，值可以是任意数据类型。每个键又称为对象的属性。

（4）获取对象属性的方式：对象变量.属性名。

（5）如果属性名包含特殊字符，必须使用'xxx'括起来，访问这个属性必须用['xxx']来访问。

（6）hasOwnProperty()：判断某个对象自身是否拥有某个属性。

8、变量

（1）使用“=”对变量赋值，可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量，但是只能用“var”声明一次。

（2）如果一个变量没使用“var”声明就被使用，那么这个变量就自动被声明为全局变量。

（3）使用“var”声明的变量，使用范围被限制在该变量被声明的函数体内。

9、条件判断

JavaScrip使用if(){...}else{...}进行条件判断，else语句是可选的，如果语句块只包含一个语句则可以省略{}。

10、循环

（1）for循环， 可使用break语句跳出循环。

（2）for...in：将一个对象的所有属性一次循环出来。

[javascript]  view plain  copy
  1. var person{  
  2. name:'lisi';  
  3. age:15  
  4. };  
  5. for(var key in persion){  
  6. console.log(key);  
  7. }  
（3）while循环：先判断条件再执行。

（4）do...while循环：执行完后再判断条件。

11、Map

Map是一组键值对的结构，具有极快的查找速度。

[javascript]  view plain  copy
  1. var map=new map([['a',1],['b',2]]);  
  2. map.get('a');  

12、Set

（1）一组key的集合（key不能重复），不存储value。

（2）要创建一个Set，需要提供一个数组作为输入，或直接创建一个空Set。

（3）重复元素再Set中自动被过滤。

（4）可使用add(key)向Set中添加元素。

（5）可使用delete(key)删除Set中元素。

13、iterable

（1）遍历数组可使用下标循环，数组、Map、Set都属于iterable类型。

（2）具有iterable类型的集合可使用for...of循环（只循环集合本身的元素）来遍历。

[javascript]  view plain  copy
  1. var arr = ['A', 'B', 'C'];  
  2. var set = new Set(['A', 'B', 'C']);  
  3. var map = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);  
  4. for (var x of a) {   
  5.     console.log(x);  
  6. }  
  7. for (var x of s) {   
  8.     console.log(x);  
  9. }  
  10. for (var x of m) {   
  11.     console.log(x[0] + '=' + x[1]);  
  12. }  
（3）foreach方法：接收一个函数，每次迭代都自动回调该函数。
[javascript]  view plain  copy
  1. a.forEach(function (element, index, array) {  
  2.     // element: 指向当前元素的值，index: 指向当前索引，array: 指向Array对象本身  
  3.     console.log(element + ', index = ' + index);  
  4. });  

三、函数

1、定义函数

（1）方式一：

[javascript]  view plain  copy
  1. function xx(y){  
  2. //函数体  
  3. }  

function：指出这是一个函数定义。

xx：函数名。

y：函数参数，若有多个参数，中间以逗号隔开。

{...}：函数体，包含若干语句，也可没有语句。

（2）方式二（末尾需加上；）：

[javascript]  view plain  copy
  1. var xx = function (y) {  
  2.   //函数体  
  3. };  
function(y)：匿名函数，没有函数名。可通过变量xx调用该函数。

2、调用函数

调用函数时，按顺序传入参数 

3、arguments

（1）只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。

（2）利用arguments可以获得调用者传入的所有参数。即使函数不定义任何参数，还是可以拿到参数的值。

（3）arguments最常用于判断传入参数的个数。

4、rest参数

rest参数只能写在最后，常用...标识，

5、变量作用域与解构赋值

（1）如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量。

（2）不同函数内部的同名变量互相独立，互不影响。

（3）内部函数可以访问外部函数定义的变量。

（4）函数在查找变量时从自身函数定义开始，从内向外查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将屏蔽外部函数的变量。

（5）全局作用域：不在任何函数内定义的变量就具有全局作用域。JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性。

（6）名字空间：把自己的所有变量和函数全部绑定到一个全局变量中。

（7）局部作用域：使用let声明一个块级作用域的变量。

（8）常量：const定义常量，具有块级作用域。

（9）解构赋值：可以同时对一组变量赋值。

对数组元素进行解构赋值时，多个变量要用[...]括起来。

[javascript]  view plain  copy
  1. var [x, y, z] = ['1', '2', '3'];  

如果数组本身还有嵌套，嵌套层次和位置要保持一致。

[javascript]  view plain  copy
  1. let [x, [y, z]] = ['1', ['2', '3']];  
解构赋值可以忽略某些元素。
[javascript]  view plain  copy
  1. let [, , z] = ['1', '2', '3'];  
需要从一个对象中取出若干属性。
[javascript]  view plain  copy
  1. var person{  
  2. name:'lisi';  
  3. age:15  
  4. };  
  5. var {name} = person;  
快速获取当前页面的域名和路径。
[javascript]  view plain  copy
  1. var {hostname:domain, pathname:path} = location;  

6、方法

（1）在一个对象中绑定函数，称为这个对象的方法。

（2）在一个方法内部，this是一个特殊变量，它始终指向当前对象。如果以对象的方法形式调用，比如person.name()，该函数的this指向被调用的对象，也就是person。如果单独调用函数，getName()，此时，该函数的this指向全局对象，也就是window 。对普通函数调用，我们通常把this绑定为null。

要保证this指向正确，必须用obj.xxx()的形式调用。

用var that = this;，就可以在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。

（3）apply()

要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。

[javascript]  view plain  copy
  1. function getAge() {  
  2.     var y = new Date().getFullYear();  
  3.     return y - this.birth;  
  4. }  
  5.   
  6. var person = {  
  7.     name: 'zhangsan',  
  8.     birth: 1990,  
  9.     age: getAge  
  10. };  
  11.   
  12. getAge.apply(person, []);  
（4）call()：把参数按顺序传入。

（5）装饰器

JavaScript的所有对象都是动态的，即使内置的函数也可以重新指向新的函数。

7、高阶函数

（1）一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
[javascript]  view plain  copy
  1. function add(x, y, f) {  
  2.     return f(x) + f(y);  
  3. }  
（2）map/reduce

map()方法定义在JavaScript的Array中。

Array的reduce()把一个函数作用在这个Array的[x1，x2，x3，...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算。

[javascript]  view plain  copy
  1. [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)  
（3）filter

用于把Array的某些元素过滤掉，然后返回剩下的元素。Array的filter()也接收一个函数filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

8、箭头函数

[javascript]  view plain  copy
  1. x => x * x  
  2. 相当于  
  3. function (x) {  
  4.     return x * x;  
  5. }  
箭头函数相当于匿名函数。包含多条语句时不能省略{...}和return。如果参数不是一个，就需要用括号()括起来。
[javascript]  view plain  copy
  1. 返回一个单表达式对象：  
  2. x => ({ foo: x })  
箭头函数内部的this是词法作用域，由上下文确定。this总是指向词法作用域，也就是外层调用者obj。

9、generator

（1）generator由function*定义，并且，除了return语句，还可以用yield返回多次。

（2）调用generator对象的两个方法
不断地调用generator对象的next()方法。next()方法会执行generator的代码，每次遇到yield x；就返回一个对象{value: x,done: true/false}，然后“暂停”。返回的value就是yield返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()了。

直接用for...of循环迭代generator对象，这种方式不需要判断done。

四、标准对象

1、包装对象

（1）不要使用new Number、new Boolean、new String创建包装对象；

（2）用parseInt()或parseFloat()来转换任意类型到number；

（3） String()转换任意类型到 String，或者直接调用某个对象的toString()方法；

（4）通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}；

（5）typeof操作符可以判断出number、boolean、function、String和undefined；

（6）判断Array要使用Array.isArray(arr)；

（7）判断null请使用myVar === null；

（8）判断某个全局变量是否存在用typeof window.myVar === 'undefined'；

（9）函数内部判断某个变量是否存在用typeof myVar === 'undefined'。

2、Date

在JavaScript中，Date对象用来表示日期和时间。

（1）创建一个指定日期和时间的Date对象。

[javascript]  view plain  copy
  1. var d = new Date(2017,11, 1, 20, 15, 30, 123);  
（2）JavaScript的月份范围用整数表示是0~11。

3、RegExp

（1）正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，就认为它“匹配”了，否则，该字符串就是不合法的。

（2）在正则表达式中，如果直接给出字符，就是精确匹配。用\d可以匹配一个数字，\w可以匹配一个字母或数字，\s可以匹配一个空格（也包括Tab等空白符），.可以匹配任意字符，特殊字符在正则表达式中用\转义，^表示行的开头（^\d表示必须以数字开头），$表示行的结束（\d$表示必须以数字结束）。

（3）要匹配变长的字符，在正则表达式中，用*表示任意个字符（包括0个），用+表示至少一个字符，用？表示0个或1个字符，用{n}表示n个字符，用{n,m}表示n-m个字符。

（4）要做更精确地匹配，可以用[]表示范围，比如：
[0-9a-zA-Z\_]可以匹配一个数字、字母或者下划线；
[0-9a-zA-Z\_]+可以匹配至少由一个数字、字母或者下划线组成的字符串；
[a-zA-Z\_\$][0-9a-zA-Z\_\$]*可以匹配由字母或下划线、$开头，后接任意个由一个数字、字母或者下划线、$组成的字符串，也就是JavaScript允许的变量名；
[a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19}更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。

（5）JavaScript有两种方式创建一个正则表达式，第一种方式是直接通过/正则表达式/写出来，第二种方式是通过new RegExp('正则表达式')创建一个RegExp对象。

[javascript]  view plain  copy
  1. var re1 = /ABC\-001/;  
  2. var re2 = new RegExp('ABC\\-001');//\\相当于\  
（6）分组
用()表示的就是要提取的分组。如果正则表达式中定义了组，就可以在RegExp对象上用exec()方法提取出子串来。exec()方法在匹配成功后，会返回一个Array，第一个元素是正则表达式匹配到的整个字符串，后面的字符串表示匹配成功的子串。exec()方法在匹配失败时返回Array。

（7）正则匹配默认是贪婪匹配，也就是匹配尽可能多的字符。

（8）JavaScript的正则表达式指定的g，表示全局匹配。全局匹配可以多次执行exec()方法来搜索一个匹配的字符串。当我们指定g标志后，每次运行exec()，正则表达式本身会更新lastIndex属性，表示上次匹配到的最后索引。正则表达式指定i标志，表示忽略大小写，m标志，表示执行多行匹配。

4、JSON

（1）JSON是一种数据交换格式。JavaScript内置了JSON的解析。把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串。如果接收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象。

（2）JSON的字符串规定必须用双引号""，Object的键也必须用双引号'"。

五、面向对象编程

1、在JavaScript中，不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。

2、Object.create()方法可以传入一个原型对象，并创建一个基于该原型的新对象，但是新对象什么属性都没有。

3、创建对象

（1）JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。

[javascript]  view plain  copy
  1. 创建一个Array对象：  
  2. var arr = [1, 2, 3];  
（2）构造函数（构造函数首字母应大写）
[javascript]  view plain  copy
  1. function Student(name) {  
  2.     this.name = name;  
  3.     this.hello = function () {  
  4.         alert('Hello, ' + this.name + '!');  
  5.     }  
  6. }  
  7.   
  8.   
  9. var xiaoming = new Student('zhangsan');  
  10. xiaoming.name;   
  11. xiaoming.hello();  
如果不写new这就是一个普通函数，返回undefined。如果写了new，它就变成了一个构造函数，它绑定的this指向新创建的对象，并默认返回this，不需要在最后写return this;。
4、原型继承

JavaScript的原型继承实现方式就是：

（1）定义新的构造函数，并在内部用call()调用希望“继承”的构造函数，并绑定this；

（2）借助中间函数F实现原型链继承，最好通过封装的inherits函数完成；

（3）继续在新的构造函数的原型上定义新方法。

5、class继承

通过extends实现。

六、浏览器

1、浏览器对象

（1）window

window对象不但充当全局作用域，而且表示浏览器窗口。window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

（2）navigator

navigator对象表示浏览器的信息，最常用的属性包括：

navigator.appName：浏览器名称；

navigator.appVersion：浏览器版本；

navigator.language：浏览器设置的语言；

navigator.platform：操作系统类型；

navigator.userAgent：浏览器设定的User-Agent字符串。

（3）screen

screen对象表示屏幕的信息，常用的属性有：

screen.width：屏幕宽度，以像素为单位；

screen.height：屏幕高度，以像素为单位；

screen.colorDepth：返回颜色位数。

（4）location

location对象表示当前页面的URL信息。可以用location.href获取。要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()。

（5）document

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

document的title属性是从HTML文档中的<title>xxx</title>读取的，但是可以动态改变。

要查找DOM树的某个节点，需要从document对象开始查找。最常用的查找是根据ID和Tag Name。用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点。

document对象还有一个cookie属性，可以获取当前页面的Cookie。Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。Cookie还可以存储网站的一些设置，例如，页面显示的语言等等。JavaScript可以通过document.cookie读取到当前页面的Cookie

（6）history

history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。

2、操作DOM

操作一个DOM节点的几个操作：

（1）更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；（修改innerHTML属性；修改innerText或textContent属性）

（2）遍历：遍历该DOM节点下的子节点，以便进行进一步操作；

（3）添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；（使用appendChild，把一个子节点添加到父节点的最后一个子节点；使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。）

（4）删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。（获得该节点本身以及它的父节点，调用父节点的removeChild把自己删掉；）

3、操作表单

（1）HTML表单的输入控件主要有以下几种：

文本框：<input type="text">，用于输入文本；

口令框：<input type="password">，用于输入口令；

单选框：<input type="radio">，用于选择一项；

复选框：<input type="checkbox">，用于选择多项；

下拉框：<select>，用于选择一项；

隐藏文本：<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

（2）如果我们获得了一个<input>节点的引用，就可以直接调用value获得对应的用户输入值。

[javascript]  view plain  copy
  1. // <input type="text" id="email">  
  2. var input = document.getElementById('email');  
  3. input.value;   
（3）提交表单

方式一：通过<form>元素的submit()方法提交一个表单，例如，响应一个<button>的click事件，在JavaScript代码中提交表单；

方式二：响应<form>本身的onsubmit事件，在提交form时作修改；





Alvin_扣扣953821815
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
【前端】javascript:； 是什么
HolaOrange的博客
03-20 1万+
javascript: 是一个伪协议， ①javascript: 是一个伪协议,表示在触发默认动作时，执行一段JavaScript代码， ②javascript:; 表示什么都不执行，这样点击时就没有任何反应。 ③用在哪 ： 当前页面点一下，不跳转， 一般这么干的话会额外用jQuery绑定事件 其他的伪协议还有 mail: tel: file: 等等。
javascript中数组遍历的方法
摆脱菜鸟，砥砺前行
07-26 1960
1、for循环 最常用也是最简单的遍历方式，可以使用break或者continue终止，一个优化的方法是把length保存起来，避免重复获取，当数组长度很大时会体现出优化效果。 let arr = [1,2,3,4,5,6]; for(let i = 0, len = arr.length;i < len; i++){ if(arr[i] > 4) { break; } console.log(arr[i]); // 1 // 2
前端基础之JavaScript数据类型
Happy joker never give up
01-31 285
引言 javascript是一门前端必须达到精通程度的语言，为什么呢？javascript如今不再仅仅用来实现网页动画和交互，由javascript衍生出的产品开始涉及到后端，服务器等领域，所以它的强大足以使我们为之疯狂！ 1.ECMAScript和JavaScript 简单来讲，ECMAScript是一种W3C标准，而JavaScript是对此标准的一种实现。 2.数据类型 数据类型分
JavaScript中常用的数组操作方法
开源世界
09-14 139
一、concat() concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本。 var arr1 = [1,2,3]; var arr2 = [4,5]; var arr3 = arr1.concat(arr2); console.log(arr1); //[1, 2, 3] console.log(arr3); //[1, 2, 3, 4, 5] 复制代码 二、join() join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分
Javascript
03-22
javascript-examples JavaScript网页程式设计
JavaScript入门
03-04
JavaScript入门
JAVASCRIPT HashTable
10-31
JAVASCRIPT HashTable
javascript数组
leekos的博客，分享web安全相关知识~
01-30 744
问: 什么是数组呢? 答: 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是种将一组数据存储在单个变量名 下的优雅方式。 //普通变量次只能存储一个值 var num = 10; //数组一次可以存储多个值 var arr = [1,2,3,4,5]; 数组的创建方式 JS中创建数组有两种方式: ● 利用new创建数组 ● 利用数组字面量创建数组 1、利用new创建数组 var 数组名=new Array() ; var a...
＜ Javascript中数据处理小技巧 --- 数组篇 ＞
一个平平无奇的技术宅
03-31 793
文章目录前言一、Map函数的使用案例： 单纯的提取数组对象中的某个属性值，返回一个数组 或 数组对象。二、some函数 和 every函数的使用及区别1.引入库2.读入数据总结 前言 在日常开发中，我们时常需要对一些后端返回的数据进行筛选 或 解构重组之类的操作。在Js迭代升级的今天，Js中已经自带了许多我们可以利用的原生数据处理方法，合理使用这些方法，能够有效的提高代码效率、减少代码庸余 以及 提高代码的可读性。例如，最基础的 for 循环，以及常用的 forEach，除此之外，Js还提供了许多类似的循
a标签中的javascript:;是什么
weixin_33909059的博客
04-26 394
a标签中的javascript:;是什么 一、问题 &lt;a&gt;标签中href="javascript:;"表示什么意思？？   &lt;a id="jsPswEdit" class="set-item" href="javascript:;"&gt;修改密码&lt;/a&gt; 有一种说法是：href="javascript:;"会去解析&amp
JavaScript详解
热门推荐
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
ParseException: Could not parse as expression
BIG BOSS的博客
01-14 787
at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142) at java.util.concurrent.ThreadPo...
JavaScript初识及基本语法详解
最新发布
小小码农
03-13 1450
JavaScript初识及基本语法详解
JS中，a标签里的javascript:；和 javascript:void(0)还有##
weixin_72322475的博客
12-13 1595
JS中，a标签里的javascript:;和 javascript:void(0)还有##
Could not parse as expression
liu1202214005的博客
08-28 4748
问题描述： 问题原因： 因为[[…]]之间的表达式在thymeleaf中被认为是内联表达式,所以渲染错误。 为了让内联工作,我们必须激活它使用th:inline属性,它有三个可能的值或模式(text,javascript和none)。 1、文本内联： <body th:inline="text"> ... <p>Hello, [[${...
Javascript详细讲解
m0_71012114的博客
08-27 946
本文详细讲解了Javascript知识，并举了大量的案例来方便理解。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值