汇总JavaScript中常用的知识点-js教程-PHP中文网

一.Javascript的含义

是一种解释性的语言，主要给网页添加各色各样的动态功能，同时为用户提供浏览效果。

二.JavaScript的主要特点

1. 简单性2. 动态性3. 安全性4. 跨平台性

登录后复制

三.JavaScript的组成

1. ECMAScript :描述语言的语法和基本对象2. BOM：描述网页内容的方法和接口3. DOM：描述与浏览器进行交互的方法和接口

登录后复制

四.JavaScript的三种引入方式

1.标签内引入
2.内部引入
3.外部引入

五.javaScript语法的基本要求

1.按照顺序依次执行2.严格区分的大小写3.javascript中的结束分号不能省略4.javascript中会忽略空白符和换行符

登录后复制

六. JavaScript常用的调试方法

1.alert()

2.confirm();

3.prompt();

4.console.log();

5.document.write()

登录后复制

七.表示符的使用规则

1.只用用数字、字母、下划线、$2.不能使用数字开头3.区分大小写4.不能用关键字5. 驼峰命名法

登录后复制

八.javaScript中常见的数据类型

1.Number2.Boolean3.undefined4.Null5.String6.Object

登录后复制

九. 算术运算符

+、-、*、/、%。

1.+ 运算符：运算规则

* 如果两个都是Number则，则就按照普通的数学加法运算。

* 如果有一个是字符串，就按照字符串的串联的方式连接。(如果另外一个不是字符串，则先转换成字符串再连)。
* 如果有一个是NaN，则结果就是NaN。
*如果同时是Infinity或-Infinity，则结果就是Infinity或-Infinity。
* 如果一个是Infinity另外一个是-Infinity，则结果为NaN。2.- 运算符：运算符规则

- 如果两个都是Number则，则就按照普通的数学减法运算。
- 如果有一个操作数是字符串、布尔值、null 或undefined，则先在后台调用Number()转型函数将其转换为数值，然后再根据正常减法计算。如果转换的结果有一个是NaN,则减法的结果就是NaN
* 如果有一个操作数是对象，则调用对象的valueOf()方法以取得表示该对象的数值。如果得到的值是NaN，则减法的结果就是NaN。如果对象没有valueOf()方法，则调用其toString()方法并将得到的字符串转换为数值(了解)3.* 运算符：运算符规则。

- 运算规则同减法。1. / 运算符：运算规则

- 就是普通的除法运算，运算规则同 *4. %运算符：运算规则

- 求余(求模)运算。

登录后复制

十.javaScript中常见的运算符

1.逻辑与  （  只要有一个是false，则返回false）2.逻辑或   （只要有一个是true，结果就是true）3.逻辑非    （先转换成Boolean值，再取反得到最终的结果）###   &&()和|| 的结果总结：1. 如果第一个能够决定结果，则结果就是第一个表达式的值2. 如果第一个不能决定结果，则结果就是第二个表达式的值

登录后复制

十一.JavaScript中的判断语句

1.if语句

>##### 语法：if(condition){  //语句1
}2.if...else语句

>##### 语法：if(condition){  //语句1
}

else{  //语句2
}3.    if...else if...elsif... 语句

>##### 语法：if(condition1){  //语句1
}

else if(condition2){  //语句2
}

...

else if(condition3){  //语句n
}4.if...else if...else ...else语句

>#####  语法：if(condition1){  //语句1
}

else if(condition2){  //语句2
}

...

else if(condition3){  //语句n
}

else{  //else语句
}5. switch条件语句

>##### 语法：
switch (expression) {  case value1: //语句1
  break;  case value2: //语句2
  break;  case value3: //语句3
  break;  case value4: //语句4
  break;

  default: 

}

登录后复制

十二.JavaScript中的循环结构

1.for循环

语法：
for(表达式1; 表达式2; 表达式3){      //循环体
}

>注意：

- 3个表达式的都可以省略。
- 对表达式1和表达式3省略，对for循环没有任何影响，只是少执行了代码而已。
- 如果表达式2省略，表示此处为true，那么这个循环就是死循环。 
- 如果第一次检查表达式2的时候就是false，则循环体内的代码可能一次也不执行。


2.while循环

语法：while(condition){   }

>注意：

- condition不能省略。如果省略为语法错误
- while循环也有可能一次也不执行。


3. do...while循环

语法：  do{  //循环体}while(condition);

>注意：

- condition条件不能省略，省略语法错误。
- 由于先执行在判断，所以，对do...while 循环来说，循环体至少执行一次。

登录后复制

十三. javaScript中的两个特殊控制语句

1.break语句
作用：在循环体中，break会提前结束循环

>例如：for(var i=0;i<6;i++){if(i==5){break;
    }
    console.log(i);
}2.continue语句
作用：在循环体中，continue会结束本次循环，不会执行剩余的代码，不过会继续执行它外层的循环
>例如：for(var i=0 i<10;i++){if(i==6){continue;
    }

}

登录后复制

十四.自定义函数

1.函数的声明

function 函数名(形式参数1, 形式参数2, ...){
//函数体
}

function mer(a,b,c){
var m=a+b;
}

2.函数的调用

3.函数的命名规范

十五.变量的作用域

##### 1.全局变量

定义： 在函数外部声明的变量

例如：

    var m=13;

    alert(m);

##### 2.局部变量

定义： 在函数体内部声明的变量

>例如：

  function f(){
      var m="234";
      alert(m);
  }

##### 3.匿名函数1.定义：没有声明函数名的函数
>例如：
var m=function(){
    alert("Hello world");
}
m();2.注意点：
* 匿名函数除了没有函数名以外，与其他函数没有任何区别
* 如果想要在其他地方调用该函数，则需要先声明一个变量，并把该函数的值赋值给声明的变量
* 可以将变量名做为函数名调用3.匿名函数的作用

* 可以将函数表达式存储在变量中
* 可以将匿名函数当作参数来传递

##### 4.匿名函数的立即执行1.语法：
* （function(){
    alert("立即执行");
}());2.注意点：
* 要把匿名函数用一对圆括号括起来，作为一个整体看
* 在函数的最后面添加一对圆括号来表示调用函数3.函数递归调用1. 定义：
  在函数的内部调用当前的函数2. 需要满足的条件
* 要有结束条件
* 递归不能无限的递归下去，否则会溢出。3. 总结：
   函数的调用原理与数据结构栈的实现是一致的。

登录后复制

十六.JavaScript中数组的特点

1.数组的长度是可以动态改变的
2.在同一个数组中可以存储不同的数据类型
3.每一个数组中都有一个 length的属性，表示的是数组中元素的个数

登录后复制

十七.数组的创建

数组中的两种基本创建方式
1.字面量的方式
例如：["a", 5, "b",8]

2.构造函数

注意点：

在构造函数创建数组对象时，最后一个元素后面不需要添加逗号
在构造函数中只传入一个Number值，这个值一定要大于 0
在构造函数创建数组对象时，new关键字可以省略

3.修改和访问数组中的元素

 var arr=[10,20,30,40,50,60];

 alert(arr[0]);

 arr[3]=100;

登录后复制

4.数组中的长度

var arr = [10, 20, 60, 5, 7];

alert(arr.length);

十八.数组的遍历

1.遍历数组的方法

* 普通的for循环
* for...in
* for each
* for... of

登录后复制

2.普通for循环的遍历

 var arr=[20,30,50,60,78];

 for (var i=0;i<arr.length;i++){

     console.log(arr[i]);
 }

登录后复制

3.for ...in循环的遍历

var arr=[50,30,60,12,45];

for (var index in arr){

    console.log(arr);
}
##### 注意：

登录后复制

for...in遍历数组时，遍历出来的是数组的下标

4.for each方法的遍历

  var arr=[23,4,56,7,80];

  arr.forEach(function(ele,index){

      alert(ele);

  });

登录后复制

十九.javaScript中数组的常用方法

1.转换方法：

toString（）

作用：返回由数组中每个值得字符串形式拼接而成的一个以逗号分割的字符串

  var arr=[2,3,45,6,78];
  alert(arr.toString());

登录后复制

2.join()方法

作用：可以使用指定的连接符连接

alert(arr.join("="));

登录后复制

二十.JavaScript中站的方法

1.入栈（ push() )

作用：把新的元素添加到数组的后面

2.出栈 ( pop() )

作用：把数组中的最后一个元素从数组中移除

var arr=[2,3,4,5,67];var num=arr.push("100");var hom=arr.pop();

alert(num);

alert(hom);

登录后复制

3.队列方法

1.shift()

作用：从队列中的头部移除元素

2.unshift()

作用：向队列尾部添加元素

var arr=[23,45,67];var num=arr.shift();var bak=arr.unshift();

alert(num);

alert(bak);

登录后复制

4.数组中的倒序

reverse()：

作用：将数组中的元素进行倒序

5.javaScript中查找指定元素在数组中的索引

1. indexOf(item,num)

作用：从num的位置开始向后查找item第一次出现的位置

2.lastIndex(item,num)

作用：从num的位置开始向前查找item第一次出现的位置

var arr=[2,3,5,3,6,2,8,8];

alert(indexOf("2",2);

alert(lastIndeOf("3",4);

登录后复制

6.获取新的数组

1.concat(arrayX,arrayX,......,arrayX)

作用：用于连接多个数组，并且不会对原数组做任何的改变

 var arr=[2,34,56]; var arr1=[87,65,43]; var newArr=arr.concat(arr1);

 alert(newArr);

登录后复制

2. slice(start,end)方法

作用：截取数组，并且返回结渠道的新数组

var arr=["a","s","d","f","g"];

var arr1.slice(0,3);

alert(arr1);

登录后复制

3.splice(index,howmany,item1,.....,itemX) 方法

作用：向数组中添加元素，删除元素，替换元素

var arr=[2,3,4,"as",d,f];

var num= arr.splice(1,3);

alert(num);

var num1=arr.splice(1,0,"m","n");

alert(num1);

var num2=arr.splice(1,2,"2","3");

alert(num2);

登录后复制

二十一.javaScript中数组的检测

1.instanceof运算符

作用：会返回一个Boolean值，指出对象是否是特定构造函数的一个实例

var arr = [];

alert(arr instanceof Array);

2.Array.isArray()方法

作用：判断一个变量是不是数组，是则返回true，否则返回false

二十二. JavaScript中字符串的操作

1.注意：

javaScript中字符串是不可变的，需要创建一个新的字符串

2. 字符串的创建

字符串直接量
例如：

var s = "good";

alert(typeof s);

通过String()转换函数
==例如：==

var s = String(123);

alert(typeof s);

二十三.JavaScript中字符串常见的方法

##### 1.s.charAt(index)
作用：返回的是指定位置的字符
>例如：

var s = "a你好bcd";

alert(s.charAt(0));
##### 2.s.charCodeAt(index)
作用：返回指定位置的字符的 Unicode 编码
>例如：

var s = "a你好bcd";

alert(s.charCodeAt(0));

##### 3.字符串连接方法
###### 1.s.concat(stringX,stringX,...,stringX) 
* 作用：用于连接两个或者多个字符

* 注意：1.并不会改变原字符串2.可以使用字符串连接符(+)

>例如：

var s = "你好";

alert(s.concat("啊", "凌源"));

##### 4.查找子字符串出现的位置
###### 1. s.indexOf(searchvalue,fromindex)
作用：可以返回某个指定的字符串值在字符串中首次出现的位置

>例如：

var v = "abcabdefgh";

alert(s.indexOf("ab"));
###### 2.s.lastIndexOf(searchvalue,fromindex)
作用：可以返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索
>例如：

var s = "abcabcdab";

alert(s.lastIndexOf("ab"));

##### 5.js字符串的截取
###### 1.s.substring(start,stop) 方法
作用：用于提取字符串中介于两个指定下标之间的字符
>例如：

var s="asdfghj";

alert (s.substring(1));

###### 2.s.substr(start, length) 方法
作用：可以在字符串中抽取从start下标开始的指定数目的字符
>例如：

var s="asdfghj";

alert (s.substr(1));
###### 3.s.slice(start,end) 方法
作用：可以提取字符串的某个部分，并且以新的字符串返回被提取的部分
>例如：

var s="asdfghj";

alert (s.slice(1，3));

##### 6.大小写转换方法
###### 1.s.toUpperCase
作用：字符串中所有的字符转变成为大写
>例如：
var s = "abcAbc";

alert(s.toUpperCase());
###### 2.s.toLowerCase

作用：字符串中的所有的字符转变成小写
>例如：

var s = "ABcAbc";

alert(s.toLowerCase());

##### 7.去除字符串首尾空白字符
s.trim() : 
作用;只是去除字符串的首尾的所有空白字符.  字符串内部的空白字符不做任何处理
>例如：

var s = " \n \t ABc   Abc   \t \n \t";

alert(s.trim());

##### 8.字符串替换、匹配、搜索方法
###### 1. s.replace(regexp/substr,replacement)方法

作用:用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
>例如：

var s = "abcaba";

var newStr = s.replace("ab", "js");

alert(newStr);
###### 2. s.match(匹配值)
作用：在字符串内检索指定的值
>例如：

var s = "abcaba";

var arr = s.match("ab");

alert(arr);

######  3.s.search(匹配的参数)

作用：始终从字符串的头部开始查找
>例如：

var s = "abcaba";

var arr = s.search("ab");

alert(arr);
##### 9.字符串比较
* ==    比较两个字符串的==内容==是否相等
* === 恒等    只有类型和内容都相等的时候才返回true

##### * s.localeCompare(other):
 - 如果字符串在字母表中应该排在字符串参数之前，则返回一个负值；
- 如果字符串的等于字符串参数，返回0；
- 如果字符串在字母表中应该排在字符串参数之后，则返回一个正数；

##### 10.字符串切割方法
s.split(separator,howmany)方法

作用：用于把一个字符串分割成字符串数组。
>例如:
var s = "How do you do";

var arr = s.split(" ");

alert(arr);

登录后复制

二十四.JavaScript中Math对象

1.常用属性

Math.PI : π的值
Math.E: 自然对数的底数

2.Math对象常用方法

Math.abs(x) : 返回x的绝对值
Math.max(任意个数值) ：返回传入的数值中的最大值
Math.min(任意个数值) ：返回传入的数值中的最小值
Math.ceil(number) ：返回大于等于number的最小整数(向上取整)
Math.floor(number) ：返回小于等于number的最大整数(向下取整)
Math.round(number): 四舍五入
Math.pow(x, y) : 返回 x^y
Math.random() : 返回 0-1之间的随机小数
Math.sin(x) 正弦, Math.cos(x) 余弦, Math.tan(x) 正切

二十五.BOM核心---window对象

1. 获取全局变量的方式

this
window.age

*window.sagAge()

 var num=24; function sagAge(){

     alert(this.num);

 }
 alert(window.age); window.sagAge();

登录后复制

2. window窗口大小

==获取浏览器窗口大小==

1.在Internet Explorer(9+)、Chrome、Firefox、Opera 以及 Safari

  window.innerHeight - 浏览器窗口的内部高度  window.innerWidth  -  浏览器窗口的内部宽度

登录后复制

2. 针对于 Internet Explorer 8、7、6、5

 document.documentEelement.clentWidth document.documentEelement.clentWidth

登录后复制

3.为了兼容浏览器的版本可以使用下面的代码

 var w=window.innerWidth || documentEelement.clentWidht; var h=window.innerHeight || documentEelemlent.clentHeight;

登录后复制

3.调整窗口大小

window.resize(w,h): 调整到指定的大小
resizeBy(deltW, deltH): 增加指定窗口的宽和高
例如：

<body>
    <button onclick="to();">将窗口调整到指定大小</button>
    <br/>
    <button onclick="by();">宽和高增加的像素</button>
    <script type="text/javascript">
        function to () {
            alert("我要缩小了");
            window.resizeTo(200, 300);
        }
        function by () {
             alert("我开始增大了");
             window.resizeBy(30, 30);
        }
    </script>
</body>

登录后复制

二十六. window中的定时器

1.window对象中定时器的功能方法

超时调用 setTimeout()

/*
    setTimeout(code,millisec)
    参数1：要执行代码。一般传入一个函数。(当然也可是字符串形式的代码，但是不建议使用)
    参数2：多长时间后执行参数1中的代码。  单位毫秒
*/<script type="text/javascript">  //传入函数的时，函数名不要加括号。(因为方法不是我们调用，是引擎帮助我们调用)      // setTimeout方法会返回一个值，表示超时调用的id，可以在任务执行前取消任务。var timeOutId = window.setTimeout(go, 3000);  // 3秒中之后执行函数go中的代码function go () {          window.open("http://www.yztcedu.com")
    }    window.clearTimeout(this.timerId);  //取消这个超时调用，如果超时调用已经执行完毕，就什么也不会发生。</script>

登录后复制

周期调用 setInterval()
例如：

<code class="xml">/*
    setInterval(code,millisec)
    参数1：每隔一段时间执行一次的代码。  一般是一个函数
    参数2：周期性执行的时间间隔。  单位毫秒

*/<span class="hljs-tag"><<span class="hljs-name">body><span class="hljs-tag"><<span class="hljs-name">h1 <span class="hljs-attr">id=<span class="hljs-string">"time"><span class="hljs-tag"></<span class="hljs-name">h1><span class="hljs-tag"><<span class="hljs-name">script <span class="hljs-attr">type=<span class="hljs-string">"text/javascript"><span class="javascript">  <span class="hljs-comment">//显示时间，每秒钟变化一次。<span class="hljs-built_in">window.setInterval(<span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">) {<span class="hljs-keyword">var timeElement = <span class="hljs-built_in">document.getElementById(<span class="hljs-string">"time");    <span class="hljs-comment">//找到h1标签<span class="hljs-keyword">var msg = <span class="hljs-keyword">new <span class="hljs-built_in">Date().toLocaleString();
            timeElement.innerHTML = msg;    <span class="hljs-comment">//设置h1标签中的值
        }, <span class="hljs-number">1000);<span class="hljs-tag"></<span class="hljs-name">script><span class="hljs-tag"></<span class="hljs-name">body>
    //清除间隔定时器
    window.clearInterval(id);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code><br/><br/>

登录后复制

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群

以上是汇总JavaScript中常用的知识点的详细内容。更多信息请关注PHP中文网其他相关文章！