JavaScript知识汇总 - 好文

<>1、Java Script概述

<>1.1、什么是JavaScript

JavaScript 是一种基于对象的脚本语言。

了解:

基于对象( Object-Based ) : 只要提供好对象就可以直接使用

面向对象( Object-Oriented ) : 需要设计类并创建类的实例后才能使用对象

<>1.2、运行环境

* 客户端 JavaScript 使用浏览器等工具执行 Chrome FireFox
* 服务端 JavaScript 通过服务端的 JavaScript 引擎来运行 ( node.js )
<>1.3、开发工具

记事本、Eclipse 、 IDEA 等。

<>1.4、JavaScript 的组成

网景公司开发了 LiveScript 后与原Sun公司合作重新开发完善 LiveScript 后改名为 JavaScript 。

网景公司挂了以后，由 ECMA 来管理和维护 JavaScript 标准，因此称作 ECMAScript 。

JavaScript = ECMAScript + BOM + DOM

MDN : https://developer.mozilla.org/zh-CN/
<https://developer.mozilla.org/zh-CN/>

<>1.5、客户端JavaScript的使用方式

* 直接在页面上嵌入 JavaScript 代码 <html> <head> <meta charset="UTF-8" >
<title>标题</title> <script type="text/javascript"> // 这里书写 JavaScript 代码
</script> </head> <body></body> </html>
* 链接外部 JavaScript 文件假设存在 hello.js 和 hello.html 在同一个目录中，则可以在 hello.html 的
head 区域中使用: <script type="text/javascript" src="hello.js"></script>
<>2、基础语法(核心语法)

【 JavaScript 跟 Java 语言一样，英文字母严格区分大小写】

<>2.1、变量和常量

*
变量使用 var 关键字声明，如 var x = 100 ;

*
常量使用 const 关键字声明，如 const PI = 3.14 ;
代码如下：
<script type="text/javascript"> var x ; //如果只声明变量但是没有赋值，则默认值是 undefined
console.log( x ); x = 100 ; console.log( x ); // 在浏览器的终端(Console)中输出 x =
"hello" ; console.log( x ); x = '张三丰' ; console.log( x ); x = true ;
console.log( x ); const PI = 3.14 ; console.log( PI ); </script>
运行结果：

<>2.2、数据类型

* 原生数据类型 number 表示数字类型，包括整数、浮点数 boolean 表示逻辑类型，其取值只有 true 和 false undefined
表示未定义的类型，如果仅仅声明了一个变量但是没有赋值，此时其取值就是 undefined ，这个值的类型就是 undefined 类型 null
类型，只有一个取值 null string 表示字符串类型，在 JavaScript 中不区分字符和字符串，因此使用 "" 或 '' 都可以表示字符串
注意:
当一个变量取值为 undefined 、null 、0 、-0 、"" 、’’ 、false 时可以表示 false ; 否则就表示 true 。

* 引用类型数组类型对象类型
* typeof 运算符 ( typeof() 函数 )
用来获取变量中存储的数值的简单类型。

因为 JavaScript 是弱类型语言，因此使用 typeof 运算符或 typeof() 函数求引用类型变量值的类型时是不准确的。

弱类型语言专家建议使用 “鸭子模型” 来识别一个引用类型的具体类型。
程序:
<script type="text/javascript" > var x = 100 ; console.log( "x = " + x + " ,
type : " + ( typeof x ) ); // number x = "有故事的人" ; console.log( "x = " , x ,"
type : " , typeof x ); // string x = '字' ; console.log( "x = " , x ," type : "
, typeof x ); x = true ; console.log( "x = " , x ," type : " , typeof( x ) );
// boolean console.log( "~~~~~~~~~~~~~~~~~~~~~~~" ); var y ; console.log( "y =
" , y ," type : " , typeof( y ) ); // undefined y = null ; // 数值 null 的类型就是
null 类型 console.log( "y = " , y ," type : " , typeof( y ) ); // object y = new
Object(); // 引用类型 console.log( "y = " , y ," type : " , typeof( y ) ); //
object y = new Array( 100 , 200 , 250 , 500 ); console.log( "y = " , y ," type
: " , typeof( y ) ); // object function add (){ } console.log( add );
console.log( typeof add ) ; // function </script>
运行结果：

<>2.3、运算符

== 和 ===
== 仅仅用于比较两个数值是否相等，比如: '100' == 100 返回 true '100' == 99 返回 false === 需要比较两个
数值和类型，比如 '100' === 100 返回 fasle '100' === "100" 返回 true '100' === ‘100’ 返回
true 100 === 100.0 返回 true
!= 和 !==
!= 比较两个数值是否不相等，如果不相等就返回true '100' != 100 返回 false '100' != 99 返回 true !==
用于比较两个数值和类型，两者只要有一个不相同就返回 true '100' !== 100 返回 true (因为类型不一样) '100' !==
'1000' 返回 true (因为数值不一样) 1000 !== 1000 返回 false (因为类型一样、数值也一样)
<>2.4、流程控制

* 分支语句 if .... else if .... else switch .... case ... default ....
* 循环语句 for while do .... while break continue
* for … in 循环
程序： <script type="text/javascript"> var a = new Array( "张三丰" , "张翠山" , "殷素素"
, "张无忌" , "赵敏" ); for( var i = 0 ; i < a.length ; i++ ) { var e = a[ i ] ;
console.log( i , e ) ; } console.log( "~~~~~~~~~~~~~~~~~~~~~~~" ); for( var i
in a ) { var e = a[ i ] ; console.log( i , e ) ; } console.log(
"~~~~~~~~~~~~~~~~~~~~~~~" ); // JSON : JavaScript Object Notation var map = {
"id" : 1001 , "name" : "王姨" , "gender" : "女" }; for( var key in map ) { var
value = map[ key ] ; // 相当于 Java 语言中根据 key 取出 value ( map.get( key ) )
console.log( key , value ); } </script>
程序运行：

处理数组: var a = new Array( "张三丰" , "张翠山" , "殷素素" , "张无忌" , "赵敏" ); for( var i =
0 ; i < a.length ; i++ ) { var e = a[ i ] ; console.log( i , e ) ; } for( var i
in a ) { var e = a[ i ] ; console.log( i , e ) ; } // JSON : JavaScript Object
Notation var map = { "id" : 1001 , "name" : "王姨" , "gender" : "女" }; for( var
key in map ) { var value = map[ key ] ; // 相当于 Java 语言中根据 key 取出 value (
map.get( key ) ) console.log( key , value ); }
<>2.5、异常处理

Error 类型表示异常，其中有两个常用属性:

*
name 表示异常类型

*
message 表示异常提示信息

异常处理语句

* 捕获异常 try … catch … finally try { } catch ( e ) { } finally { }
* 抛出异常 throw new Error( "message" );
常见的异常类型:

*
ReferenceError

*
TypeError

*
RangeError

*
EvalError
使用 eval 函数可以求一个表达式的值，比如 eval( "1+250" ) 的结果就是 251 尝试执行 eval( "haha + heihei
+ hehe + enen" )
* SyntaxError
<>3、自定义函数

<>3.1、声明方式
function 函数名称( 参数列表 ) { 函数体 } function hello( name ) { console.log( "hello ,
" + name ) ; }
<>3.2、调用方式

* 直接使用函数名调用(最常见的) 函数名称( 实参列表 ) ; hello( "zhangsanfeng" ) ;
*
使用 call 方式调用:

对于任意函数来说，都可以通过 “函数名.call( currentInstance [ , argumentArray ] )” 形式来调用。
function show(){ console.log( this.age ) ; } var tiger = { "id" : 1001 ,
"name" : "虎力大仙" , "age" : 1800 }; show.call( tiger );
程序：

运行结果：

* 使用 apply 方式调用:
对于任意函数来说，都可以通过 “函数名.apply( currentInstance [ , argsArray ] )” 形式来调用。
function hello( name ) { console.log( this.name , "向" , name , "问好" ); } var
names = [ "老唐" , "老孙" , "老吴" , "老王" ]; hello.apply( tiger , names );
程序：
<script type="text/javascript" > function hello( name ) { console.log( this.
name, "向" , name , "问好" ); } hello( "某平" ); var tiger = { "id" : 1001 , "name" :
"虎力大仙" , "age" : 1800 }; var sheep = { "id" : 1002 , "name" : "羊力大仙" , "age" :
1600 }; // hello.apply( tiger , "唐三藏" ); // TypeError: CreateListFromArrayLike
called on non-object // hello.apply( sheep , "怡" ); // TypeError:
CreateListFromArrayLike called on non-object var names = [ "老唐" , "老孙" , "老吴" ,
"老王" ]; hello.apply( tiger , names ); hello.apply( sheep , names ); </script>
运行结果：

<>3.3、参数传递

在调用函数时，可以向函数传递任意多个参数，这些参数(实参)被存放在一个名称是 arguments 的数组中，这个数组只能在函数内部使用

<>3.4、返回值

如果一个函数需要返回数据，则直接在函数内部使用 return 语句即可，不需要声明返回类型
function add( a , b ) { var c = a + b ; return c ; }
对于没有返回值的函数，如果使用变量接受其返回值，则该变量存储的值是 undefined
function show(){ } var x = show(); // x 此时的取值是 undefined
如果期望某个方法立即结束，可以使用 return 语句
function div( a , b ){ if( b === 0 ) { return ; // 仅仅让方法立即结束，不返回任何数据 } var c
= a / b ; return c ; // 返回变量 c 中存储的数据 }
<>3.5、匿名函数

如果将函数整体作为一个值赋值给一个变量，则这个变量就表示这个函数，使用这个变量的名称即可调用这个函数。
var x = function add( a , b , c ) { var d = a + b + c ; return d ; } ; var r
= x( 100 , 200 , 300 ); console.log( r );
此时，原来在 function 之后的函数名将不能再使用
对于上面的 add 函数来说，如果使用: var y = add( 100 , 200 , 300 ) ; 形式调用，将会触发
ReferenceError 异常
所以，可以在等号之后将函数名省略，从而让函数成为匿名函数
var x = function ( a , b , c ) { var d = a + b + c ; return d ; } ; var r =
x( 1 , 2 , 3 ); // 可以执行前面定义的函数 var haha = x ; haha( 5 , 6 , 7 ); // 可以执行
前面定义的函数 x = null ; x( 4 , 5 , 6 ) ; // 此时无法执行前面定义的函数
<>3.6、立即执行的函数

一个函数被声明后就立即执行
使用形式: ( 函数 ) ( 实参列表 ); 第一对圆括号内是一个函数的引用或函数的声明第二对圆括号内是执行该函数时传入的实际参数比如:
var x = function( a , b ) { return a + b ; } var r = ( x ) ( 1 , 2 ) ;
可以将以上代码简化为: ( function( a , b ) { return a + b ; } ) ( 1 , 2 ) ;
<>4、“面向对象编程”

<>4.1、声明 “类” ( 相当于 Java 语言中的 class )

在 JavaScript 中不能直接使用 class 关键字声明 “类”。

因此，需要借助于 function 关键字来声明 “类” 。

这里约定:

* 普通的函数名第一个单词全部，如果有多个单词则从第二个单词开始首字母大写 function add( a , b ){ } function
showName(){ }
* 对于当作 “类” 来使用的函数，应该将所有单词首字母大写 ( 就像 Java 语言中类的命名规范一样 ) function
Student(){ }
声明一个 “类” 时，可以借助于函数的参数向 “类” 的构造方法传递参数
// Human 相当于 "类" 名 // Human( id , name , gender ) 相当于 Human "类" 的构造方法 // id
、name 、gender 就是 Human "类" 的构造方法的形参 function Human( id , name , gender ) { //
当执行到 this.id 时就会为当前实例添加一个名称是 id 的属性( 它用来接受来自参数的值 ) this.id = id ; this.name
= name ; this.gender = gender ; }
如果创建一个 “类” 的实例并为其构造方法传入相应的参数，这些参数值应该属于当前被创建的实例

所以在 "类"内部可以使用 this 关键字来引用当前的实例，比如 this.id <http://this.id> 可以表示当前实例的 id 属性

以上 Human “类” 相当于 Java 语言中的:
public class Human { private Integer humanId ; // 字段(Field) private String name
; private char gender ; public Human( Integer id , String name , char gender ) {
this.id = id ; this.name = name ; this.gender = gender ; } // 方法 : getId()
------> 去除get 和 () 部分 ----> Id ---> 将首字母变小写 ---> id ( 属性 ( property ) ) public
IntegergetId(){ return this.humanId ; } public void setId( Integer id ) { this.
humanId= id ; } // 此处省略 name 和 gender 的 getter 和 setter }
* 声明实例(instance)属性
在 “类” 内部使用 this 关键字可以为当前实例添加属性，比如 this.id <http://this.id> 可以在当前实例中添加一个名称是
id 的属性。
function Human ( id , name , gender ) { this.id = id ; this.name = name ;
this.gender = gender ; }
* 声明实例(instance)函数
在 “类” 内部使用 this 关键字为当前实例添加函数(跟属性一样，只不过属性值是个函数)
function Human ( id , name , gender ) { this.show = function() { } }
<>4.2、创建 “类” 的实例 ( 相当于 Java 语言中的对象(实例: instance ) )

以之前的 Student “类” 为例，创建 Student “类” 的实例，使用以下语句:
var s = new Student();
以之前的 Human “类” 为例，创建 Human “类” 的实例，使用以下语句:
var h = new Human( 1001 , "李睿" , "女" );
<>4.3、访问实例(instance) 中的属性和方法

* 获取 console.log( h.id ) ; console.log( h.name ); console.log( h.gender ) ;
h.show(); // 调用 h 变量所引用的 Humen 实例的 show 函数
* 赋值 h.id = 2002 ; h.name = "李某" ;
<>4.4、JavaScript 中没有 “静态” 属性和 “静态” 方法

JavaScript 中没有 “静态” 属性和 “静态” 函数，只有属于 “类” 的属性和函数、属于实例的属性和函数

为 “类” 定义属性或函数，将来通过 “类” 名直接访问或直接调用:
通过以下形式声明属性 "类"名 . 属性名 = 属性值 ; // 不属于实例 "类"名 . 函数名 = function() { };
与 Java 语言不同，在 JavaScript 中属于"类"的就是属于"类"的，不能通过该"类"的实例来访问。
程序：
<script type="text/javascript" > function Tiger() { } // 声明 "类" 属性 Tiger.type =
"东北虎" ; // 声明 "类" 函数 Tiger.show = function(){ console.log( "我是一只小老虎" ); console.
log( "一只品种是" + Tiger.type + "的小老虎" ); } // 调用 "类" 函数 Tiger.show(); console.log(
"~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~" ); var t = new Tiger(); console.log( t.type )
; // undefined t.show(); // TypeError : t.show is not a function </script>
运行结果：

<>4.5、原型 ( prototype )

只有通过 “类” 才能获取其相应的模型，比如存在 Pan “类”
function Pan() { }
通过 Pan "类"的 prototype 可以获得它对应的原型:
var p = Pan.prototype ; // 获得 Pan 的原型 console.log( p ) ;
程序：
<script type="text/javascript" > function Pan () { } var p = Pan.prototype ;
console.log( p ) ; // 为 Pan "类" 增加实例成员 ( 属性 ) ，并指定其默认值 Pan.prototype.panName =
"平底锅" ; // 为 Pan "类" 增加实例成员 ( 函数 ) Pan.prototype.show = function () { console.
log( this.panName ); } var x = new Pan(); console.log( x.panName ); x.panName =
"红太狼的平底锅" ; console.log( x.panName ); x.show(); console.log( "~~~~~~~~~~~~~~~~~"
); var y = new Pan(); console.log( y.panName ); y.panName = "灰太狼的平底锅" ; console.
log( y.panName ); y.show(); console.log( "~~~~~~~~~~~~~~~~~" ); // 通过原型为 Pan
"类" 增加的 panName 属于实例(instance)，不属于 "类" console.log( Pan.panName ); // undefined
// 通过原型为 Pan "类" 增加的 show 属于实例(instance)，不属于 "类" Pan.show(); // TypeError:
Pan.show is not a function //不同的原型产生不同的实例 // 通过原型为 Pan "类" 增加的 show
属于实例(instance)，不属于 "类" </script>
运行结果：

<>5、JSON(JavaScript Object Notation)

* 使用 [ ] 形式声明的数组，都是 Array 对象(类级别) 的实例 // var array = new Array( "张三丰" ,
"张翠山" , "殷素素" , "张无忌" , "赵敏" ); // 使用 [ ] 形式声明的数组，都是 Array 对象(类级别) 的实例 var
array = [ "张三丰" , "张翠山" , "殷素素" , "张无忌" , "赵敏" ]; for( var i = 0 ; i <
array.length ; i++ ){ var e = array[ i ] ; console.log( i , e ) ; }
console.log( array.__proto__ ); console.log( Array.prototype ); console.log(
array.__proto__ === Array.prototype );
* 使用 {} 形式声明的键值对集合，都是 Object 对象(类级别) 的实例 // var map = new Object(); //
map.白象 = 2.5 ; // map.大豫竹 = 1 ; // 使用 {} 形式声明的键值对集合，都是 Object 对象(类级别) 的实例 var
map = { "白象" : 2.5 , "大豫竹" : 1 , "康师傅" : 3.5 , "今麦郎" : 3.5 } for( var key in
map ) { var value = map[ key ] ; console.log( key , value ) } console.log(
map.__proto__ ); console.log( Object.prototype ); console.log( map.__proto__
=== Object.prototype );
<>内置对象

<>他人所做，仅为搬运----------------------------

热门工具换一换