javascript知识点

程序员文章站 2024-01-30 14:52:16

...

注释

JavaScript中代码注释：

单行 //
多行 /* */

引入文件

引入外部文件

<script type="text/javascript" src="JS文件"></script>

存放在HTML的或中

<script type="text/javascript">
Js代码内容
</script>　`

HTML的head中
HTML的body代码块底部(推荐)

为什么要放在代码块底部？

HTML代码从上到下执行，先加载CSS，避免html出现无样式状态；
将JavaScript代码块放在最后，可以让网页尽快的呈现给用户，减少浏览者的等待时间，避免因为JS代码块阻塞网页的呈现。

变量

需要注意的是：局部变量必须以 var 开头申明，如果不写 var 则为全局变量

<script type="text/javascript">
// 全局变量
name = 'nick';
function func()
{// 局部变量
var age = 18;
// 全局变量
gender = "man"
}</script>

注：需要注意变量提升，就是把变量位置放到函数体的最上方

运算符

1. 算术运算符

一元算术
+ 一元加，数值不会产生影响	对非数值应用一元加运算时，会调用Number()转型函数对这个值进行转换
- 一元减，转换为负数	~
++ 递增1	通过Number()转型为数字，再加1，再重新赋值给操作数值
– 递减1	~
二元算术
+ 加法
- 减法
* 乘法
/ 除法
% 取模

二元运算过程

1> 如果其中一个操作数是对象，则对象会转换为原始值：日期对象通过toString()方法执行转换，其他对象通过valueOf()方法执行转换。如果结果还不是原始值，则再使用toString()方法转换
2> 在进行了对象到原始值的转换后，如果其中一个操作数是字符串的话，另一个操作数也会转换成字符串，进行字符串拼接
3> 两个操作数都将转换成数字或NaN，进行加法操作

2. 比较运算符

=== 严格运算符	比较过程没有任何类型转换
!== 严格运算符	===的结果取反
== 相等运算符	如果两个操作值不是同一类型，相等运算符会尝试进行一些类型转换，然后再进行比较
!= 不相等运算符	==的结果取反
> 大于运算符
>= 大于等于运算符
< 小于运算符
<= 小于等于运算符

3. 逻辑运算符

! 非（两个!!表示Boolean()转型函数）	返回一个布尔值
&& 与	两个操作都为true时返回true，否则返回false（返回值不一定是布尔值），可以多个连用（…&&…&&…）
\|\| 或	两个操作都是false时返回false，否则返回true（返回值不一定是布尔值），可以多个连用（…\|\|…\|\|…）

//七个假值：
console.log(!!undefined);//false
console.log(!!null);//false
console.log(!!0);//false
console.log(!!-0);//false
console.log(!!NaN);//false
console.log(!!'');//false
console.log(!!false);//false
console.log(!!{});//true
console.log(!![]);//true

数据类型

特殊值：

null　　　　　表示一个空对象指针，常用来描述"空值"；
undefined　　表示变量未定义。

1、数字（Number）

JavaScript中不区分整数和浮点数，所有数字均用浮点数值表示。

转换：

parseInt(…) 将某值转换成整数，不成功则NaN
parseFloat(…) 将某值转换成浮点数，不成功则NaN

特殊值：

NaN，非数字。可以使用 isNaN(num) 来判断。
Infinity，无穷大。可以使用 isFinite(num) 来判断。

Number	对数字的支持
Number.MAX_VALUE	最大数值
Number.MIN_VALUE	最小数值
Number.NaN	非数字
Number.NEGATIVE_INFINITY	负无穷大
Number.POSITIVE_INFINITY	正无穷大
Number.toExponential( )	返回四舍五入的科学计数法，加参数为保留几位
Number.toFixed( )	小数点后面的数字四舍五入，加参数为保留几位
Number.toPrecision( )	四舍五入，自动调用toFixed()或toExponential()
Number.toLocaleString( )	把数字转换成本地格式的字符串
Number.toString( )	将数字转换成字符串
Number.valueOf( )	返回原始数值

2、字符串（String）

String.length	字符串的长度
String.trim()	移除空白
String.trimLeft()	移除左侧空白
String.trimRight()	移除右侧空白
String.concat(value, …)	拼接
String.slice(start, end)	切片
String.split( )	分割
String.search( )	从头开始匹配，返回匹配成功的第一个位置(g无效)
String.match( )	全局搜索，如果正则中有g表示找到全部，否则只找到第一个
String.replace( )	`替换，正则中有g则替换所有，否则只替换第一个匹配项；` ``` $数字：匹配的第n个组内容；````$ &：当前匹配的内容；$`：位于匹配子串左侧的文本； $'：位于匹配子串右侧的文本````$ $：直接量$ 符号`
String.charAt( )	返回字符串中的第n个字符
String.charCodeAt( )	返回字符串中的第n个字符的代码
String.fromCharCode( )	从字符编码创建—个字符串
String.indexOf( )	查找子字符串位置
String.lastIndexOf( )	查找子字符串位置
String.localeCompare( )	用本地特定的顺序来比较两个字符串
String.substr( )	抽取一个子串
String.substring( )	返回字符串的一个子串
String.toLocaleLowerCase( )	把字符串转换小写(针对地区，在不知道程序在哪个语言环境中运行时用)
String.toLocaleUpperCase( )	将字符串转换成大写(针对地区)
String.toLowerCase( )	小写
String.toUpperCase( )	大写
String.toString( )	返回原始字符串值
String.toString()	返回原始字符串值
String.valueOf( )	返回原始字符串值

\0 空字节
\n 换行
\t 制表
\b 空格
\r 回车
\f 进纸
\\ 斜杠
\' 单引号
\" 双引号

转义字符

3、布尔类型（Boolean）

true（真）和false（假）

toString()	返回Boolean的字符串值(‘true’或’false’)
toLocaleString()	返回Boolean的字符串值(‘true’或’false’)
valueOf()	返回Boolean的原始布尔值(true或false)

4、数组（Array）

`var` `name = Array(``"nick"``,``"jenny"``);``var` `name = [``"nick"``,``"jenny"``];`

Array.length	数组的大小
Array.push()	尾部添加元素
Array.pop()	删除并返回数组的最后一个元素
Array.unshift()	在数组头部插入一个元素
Array.shift( )	在数组头部移除一个元素
Array.slice( )	切片
Array.reverse( )	反转
Array.join( )	将数组元素连接起来以构建一个字符串
Array.concat( )	拼接
Array.sort( )	排序
Array	对数组的内部支持
Array.splice( start, deleteCount, value, …)	插入、删除或替换数组的元素obj.splice(n,``0``,val) 指定位置插入元素````obj.splice(n,``1``,val) 指定位置替换元素````obj.splice(n,``1``) 指定位置删除元素
Array.toLocaleString( )	把数组转换成局部字符串
Array.toString( )	将数组转换成一个字符串

5. Math

Math对象是一个静态对象，而不是构造函数。实际上，Math只是一个由Javascript设置的对象命名空间，用于存储数学函数。

作用是执行普通的算数任务。

Math 方法

常量

Math.E
常量e，自然对数的底数。

Math.LN10
10的自然对数。

Math.LN2
2的自然对数。

Math.LOG10E
以10为底的e的对数。

Math.LOG2E
以2为底的e的对数。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

静态函数

Math.abs( )
计算绝对值。

Math.acos( )
计算反余弦值。

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。

语句

1、条件语句

JavaScript中支持两个条件语句，分别是：if 和 switch。

if 语句：

`//if语句` `if(条件){`` ` `    ``}else if(条件){``         ` `    ``}else{`` ` `    ``}`

Switch 语句：

`//switch语句，name等于nick是执行第一个case,等于第二个执行第二个case,其它执行default.` `switch(name){``        ``case 'nick':``            ``age = 18;``            ``break;``        ``case 'jenny':``            ``age = 21;``            ``break;``        ``default :``            ``age = 0;``    ``}`

2、循环语句

JavaScript中支持四种循环语句，分别是：for、for in、while、do-while

for 循环：

`var names = ["nick", "jenny"];`` ` `for(var i=0;i<names.length;i++){``    ``console.log(i);    //索引``    ``console.log(names[i]);``}`

for in 循环：

`var names = ["nick", "jenny"];` `for(var index in names){``    ``console.log(index);``    ``console.log(names[index]);``}`

while 循环：

`while(条件){``    ``// break;``    ``// continue;``}`

do-while 循环：

`//循环的代码至少执行一次，结果为1` `        ``var num = 0;``        ``do {``            ``num++;``        ``}while (num>10);`

3. label语句

label 语句可以理解为跳出任意循环

未加label实例

//输出结果为95

    <script>
        var num = 0;
        for (var i=0;i<10;i++) {
            for (var j=0;j<10;j++) {
                if (i==5 && j==5) {
                    break;
                }
                num++;
            }
        }
        console.log(num);
    </script>

加label实例

//输出结果为55
//i和j都循环为到5时，跳出了两层循环

    <script>
        var num = 0;
        outPoint:
        for (var i=0;i<10;i++) {
            for (var j=0;j<10;j++) {
                if (i==5 && j==5) {
                    break outPoint;
                }
                num++;
            }
        }
        console.log(num);
    </script>

4. 异常处理

主动跑出异常 throw Error(‘xxxx’)

`try` `{``    ``//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行``}``catch` `(e) {``    ``// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。``    ``//e是一个局部变量，用来指向Error对象或者其他抛出的对象``}``finally {``     ``//无论上述代码怎么，finally代码块始终会执行``}`

函数Function

函数定义的三种方式：

`// 普通函数``    ``function` `func(arg){``        ``return` `true``;``    ``}``          ` `// 匿名函数``    ``var` `func = ``function``(arg){``        ``return` `"nick"``;``    ``}``  ` `// 自执行函数``    ``(``function``(arg){``        ``console.log(arg);``    ``})(``'nick'``)`

函数参数：

函数传参的个数可以小于实际需传参的个数，没传参的默认为undefined

参数传多默认不起作用

`function` `man(name,age) {``    ``console.log(name,age);``}``man(``"nick"``,18); ``//nick 18``man(``"nick"``);    ``//nick undefined``man(``"nick"``,18,19);  ``//nick 18`

arguments 可接收所有参数，返回一个数组

`function` `man() {``    ``console.log(arguments);``}``man(``"nick"``,18); ``//["nick", 18]``man(``"nick"``);    ``//["nick"]``man(``"nick"``,18,19);  ``//["nick", 18, 19]`

函数的作用域与作用域链：

JavaScript中没有块级作用域

`        ``var` `name = ``'nick'``;``        ``(``function` `Main(){``            ``console.log(name);``//undefined``            ``if``(1){``                ``var` `name = ``'jenny'``;``            ``}``            ``console.log(name);``//jenny``        ``})();``        ``console.log(name);``//nick` `//输出结果第一个为undefined``//声明需提前（Hoisting），在JavaScript引擎“预编译”时进行，函数在被执行之前，会将其中的变量全部声明，而不赋值`

作用域链

每个构造函数都有一个内部对象指针，指向原型对象，而原型对象也包含一个指向构造函数的指针。如此层层递进，形成作用域链条

`        ``var` `name = ``'nick'``;``        ``function` `Main() {``            ``function` `F1(){``                ``var` `name = ``'jenny'``;``                ``console.log(name);``//jenny``            ``}``            ``function` `F2() {``                ``console.log(name);``//nick``            ``}``            ``F1();``            ``F2();``        ``}``        ``Main();` `// 从内到外的优先级寻找``// F2() 的作用域链为 F2()-->Main()`

闭包：

闭包就是能够读取其他函数内部变量的函数。

`        ``function` `f1(){``    ``　　　　``var` `n=1;``    ``　　　　Add=``function``(){``                    ``n++;``                ``};``    ``　　　　``function` `f2(){``    ``　　　　　console.log(n);``    ``　　　　}``    ``　　　　``return` `f2;``    ``　　  }``    ``　　``var` `result=f1();``    ``　　result(); ``//1``    ``　　Add();``    ``　　result(); ``//2` `//result就是闭包f2函数``//函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除`

闭包使函数中的变量都被保存在内存中，内存消耗大，所以少用闭包，否则会造成网页的性能低，在IE中可能导致内存泄露。

所以在退出函数之前，将不使用的局部变量全部删除。

面向对象

面向对象的三大特性:
　　封装：隐藏代码实现的细节，实现代码的模块化
　　继承：扩展已经存在的代码模块，实现代码重用
　　多态：接口的不同实现方式，实现接口重用

关键字：

this 代指此时的对象

new 创建对象时必须使用

构造函数模式：

`function` `Foo (name,age) {``    ``this``.Name = name;``    ``this``.age = age;``    ``this``.Func = ``function` `() {``        ``return` `this``.Name + ``this``.age``    ``}``}``var` `obj = ``new` `Foo(``"nick"``,18);``var` `ret = obj.Func();``console.log(ret);``var` `obj2 = ``new` `Foo(``"jenny"``,21);`

上述模式把同样的函数封装到了不同对象，造成了内存浪费。

原型模式（prototype）：

`function` `Foo(name,age) {``    ``this``.Name = name;``    ``this``.Age = age;``}``Foo.prototype = {``    ``GetInfo: ``function` `() {``        ``var` `str = ``" is good"``;``        ``return` `this``.Name + str;``    ``},``    ``Func: ``function` `() {``        ``return` `this``.Name + ``this``.Age;``    ``}``};``var` `obj = ``new` `Foo(``"nick"``,18);``console.log(obj.Name);``//nick``console.log(obj.Age);``//18``var` `ret = obj.GetInfo();``console.log(ret);``//nick is good``var` `ret2 = obj.Func();``console.log(ret2);``//nick18``var` `obj2 = ``new` `Foo(``"nick"``,18);`

所有的构造函数的prototype属性都指向另一个对象（同一块内存地址），这个对象的所有属性和方法，都会被构造函数的实例继承。

Prototype模式的验证方法

1. isPrototypeOf()

用来判断一个对象是否存在于另一个对象的原型链中

`Foo.prototype.isPrototypeOf(obj)``true``Foo.prototype.isPrototypeOf(obj2)``true`

2. hasOwnProperty()

用来判断某一个对象(不包括原型链)是否具有指定属性。``

`obj.hasOwnProperty(``'Name'``)``true``obj.hasOwnProperty(``'Age'``)``true`

3. in运算符

判断某个实例是否具有某个属性

`'Name'` `in` `obj``true``'Age'` `in` `obj``true`

其它

1、序列化

JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化

2、转义

decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出

3、eval

JavaScript中的eval既可以运行代码也可以获取返回值

`a = eval(``'1+1'``);``console.log(a); ``//2`

eval()
EvalError 执行字符串中的JavaScript代码

4、正则表达式

`var` `p = /nick/g;``console.log(p.test(``'nickjennynick'``)); ``// true``console.log(p.exec(``'nickjennynick'``)); ``// ["nick", index: 0, input: "nickjennynick"]`

JavaScript中支持正则表达式，其主要提供了两个功能：

test(string) 用于检测正则是否匹配
exec(string) 用于获取正则匹配的内容

匹配模式：

g:表示全局(global)模式，匹配所有字符串，不会匹配到第一项时停止

i:表示不区分大小写(case-insensitive)模式

m:表示多行(multiline)模式，到达一行文本末尾时还会继续查找下一行中是否存在匹配的项

括号分组：

`console.log(/(n)(i)ck/.exec(``'nickjenny'``)); ``// console.log(/(n)(i)ck/.exec('nickjenny'))``console.log(/(n)(i)ck{2}/.exec(``'nickkjenny'``)); ``// ["nickk", "n", "i", index: 0, input: "nickkjenny"]`

元字符         名称              匹配对象
.             点号              单个任意字符(除回车\r、换行\n、行分隔符\u2028和段分隔符\u2029外)
[]            字符组             列出的单个任意字符
[^]           排除型字符组        未列出的单个任意字符
?             问号               匹配0次或1次
*             星号               匹配0交或多次
+             加号               匹配1次或多次
{min,max}     区间量词           匹配至少min次，最多max次
^             脱字符             行的起始位置
$             美元符             行的结束位置
|             竖线               分隔两边的任意一个表达式
()            括号               限制多选结构的范围，标注量词作用的元素，为反向引用捕获文本
\1,\2...      反向引用            匹配之前的第一、第二...组括号内的表达式匹配的文本

元字符

匹配规则简写

\d     数字，等同于[0-9]
\D     非数字，等同于[^0-9]
\s     空白字符
\S     非空白字符
\w     字母、数字、下划线，等同于[0-9A-Za-z_](汉字不属于\w)
\W     非字母、数字、下划线，等同于[^0-9A-Za-z_]

5、时间处理

时间操作中有两种时间：

时间统一时间
本地时间（东8区）

Date 方法

Date    操作日期和时间的对象
Date.getDate( )    返回一个月中的某一天
Date.getDay( )    返回一周中的某一天
Date.getFullYear( )    返回Date对象的年份字段
Date.getHours( )    返回Date对象的小时字段
Date.getMilliseconds( )    返回Date对象的毫秒字段
Date.getMinutes( )    返回Date对象的分钟字段
Date.getMonth( )    返回Date对象的月份字段
Date.getSeconds( )    返回Date对象的秒字段
Date.getTime( )    返回Date对象的毫秒表示
Date.getTimezoneOffset( )    判断与GMT的时间差
Date.getUTCDate( )    返回该天是一个月的哪一天(世界时)
Date.getUTCDay( )    返回该天是星期几(世界时)
Date.getUTCFullYear( )    返回年份(世界时)
Date.getUTCHours( )    返回Date对象的小时字段(世界时)
Date.getUTCMilliseconds( )    返回Date对象的毫秒字段(世界时)
Date.getUTCMinutes( )    返回Date对象的分钟字段(世界时)
Date.getUTCMonth( )    返回Date对象的月份(世界时)
Date.getUTCSeconds( )    返回Date对象的秒字段(世界时)
Date.getYear( )    返回Date对象的年份字段(世界时)
Date.parse( )    解析日期/时间字符串
Date.setDate( )    设置一个月的某一天
Date.setFullYear( )    设置年份，也可以设置月份和天
Date.setHours( )    设置Date对象的小时字段、分钟字段、秒字段和毫秒字段
Date.setMilliseconds( )    设置Date对象的毫秒字段
Date.setMinutes( )    设置Date对象的分钟字段和秒字段
Date.setMonth( )    设置Date对象的月份字段和天字段
Date.setSeconds( )    设置Date对象的秒字段和毫秒字段
Date.setTime( )    以毫秒设置Date对象
Date.setUTCDate( )    设置一个月中的某一天(世界时)
Date.setUTCFullYear( )    设置年份、月份和天(世界时)
Date.setUTCHours( )    设置Date对象的小时字段、分钟字段、秒字段和毫秒字段(世界时)
Date.setUTCMilliseconds( )    设置Date对象的毫秒字段(世界时)
Date.setUTCMinutes( )    设置Date对象的分钟字段和秒字段(世界时)
Date.setUTCMonth( )    设置Date对象的月份字段和天数字段(世界时)
Date.setUTCSeconds( )    设置Date对象的秒字段和毫秒字段(世界时)
Date.setYear( )    设置Date对象的年份字段
Date.toDateString( )    返回Date对象日期部分作为字符串
Date.toGMTString( )    将Date转换为世界时字符串
Date.toLocaleDateString( )    回Date对象的日期部分作为本地已格式化的字符串
Date.toLocaleString( )    将Date转换为本地已格式化的字符串
Date.toLocaleTimeString( )    返回Date对象的时间部分作为本地已格式化的字符串
Date.toString( )    将Date转换为字符串
Date.toTimeString( )    返回Date对象日期部分作为字符串
Date.toUTCString( )    将Date转换为字符串(世界时)
Date.UTC( )    将Date规范转换成毫秒数
Date.valueOf( )    将Date转换成毫秒表示

上一篇： php枚举指定路径所有文件速度很慢怎么解决？

javascript知识点

注释

引入文件

变量

运算符

数据类型

语句

函数Function

其它

JavaScript知识点

javascript 知识点

javascript知识点

JavaScript 基础表单验证示例(纯Js实现)

Javascript ES6中对象类型Sets的介绍与使用详解

JavaScript闭包和回调详解

javascript兼容性(实例讲解)

JavaScript实现设置默认日期范围为最近40天的方法分析

实现点击列表弹出列表索引的两种方式_javascript技巧

undefined==null引发的两者区别与联系第1/3页_javascript技巧