JavaScript

JS的变量与保留字

1、变量

  • 在js中使用var关键字 进行变量的声明,注意 分号做为一句代码的结束符
  • 声明变量时 能够不用var. 若是不用var那么它是全局变量
  • 命名方式:Pascal标记法命名的变量前附加一个小写字母(或小写字母序列),说明该变量的类型。例如,i 表示整数,s 表示字符串,以下所示“ Var iMySalary = 1000000, sMyInfo = "hello";

2、保留字

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile、javascript

3、语言类型

  • 静态类型语言html

    一种在编译期间就肯定数据类型的语言。大多数静态类型语言是经过要求在使用任一变量以前声明其数据类型来保证这一点的。Java 和 C 是静态类型语言。
  • 动态类型语言前端

    一种在运行期间才去肯定数据类型的语言,与静态类型相反。VBScript 和 Python 是动态类型的,由于它们肯定一个变量的类型是在您第一次给它赋值的时候。
  • 强类型语言java

    一种老是强制类型定义的语言。Java 和 Python 是强制类型定义的。您有一个整数,若是不明确地进行转换 ,不能将把它当成一个字符串去应用。
  • 弱类型语言python

    一种类型能够被忽略的语言,与强类型相反。JS 是弱类型的。在JS中,能够将字符串 '12' 和整数 3 进行链接获得字符串'123',而后能够把它当作整数 123 ,全部这些都不须要任何的显示转换。 因此说 Python 既是动态类型语言 (由于它不使用显示数据类型声明),又是强类型语言 (由于只要一个变量得到了一个数据类型,它实际上就一直是这个类型了)。

基本数据类型

1、数值:number

  • NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会获得一个NaN数据
  • NaN参与的全部的运算都是false,除了!=
  • var b = 5/0; console.log(b); Infinity 无限大
  • ps:在JavaScript中,只要是数,就是数值型(number)的。不管整浮、浮点数(即小数)、不管大小、不管正负,都是number类型的。
  • var age = Number(18);
  • parseInt("1.2"); parseFloat("1.2");

2、字符串:string

  • + 若是加号两边都是数值,此时是数字的加号。不然就是连字符(用来链接字符串)。
  • var name = String("hello");
  • 经常使用方法:     obj.trim()     obj.charAt(index)     obj.substring(start,end)     obj.indexOf(char)     obj.length

3、布尔:boolean

  • var status = true;
  • var status = false;
  • var status = Boolen(1==1)

4、空对象:null

  • 若是函数或方法要返回的是对象,那么找不到该对象时,返回的一般是 null。
  • 值undefined 其实是从值null 派生来的,所以 ECMAScript 把它们定义为相等的。
  • undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示还没有存在的对象

5、未定义:undefined

  • 当声明的变量未初始化时,该变量的默认值是 undefined。
  • 当函数无明确返回值时,返回的也是值 "undefined"
  • undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示还没有存在的对象

运算符

算术运算符:
    +   -    *    /     %       ++        -- 
比较运算符:
    >   >=   <    <=    !=    ==    ===   !==
逻辑运算符:
     &&   ||   !
赋值运算符:
    =  +=   -=  *=   /=
字符串运算符:
    +  链接,两边操做数有一个或两个是字符串就作链接运算
    
// && ||
if (2>1 && [1,2]){
    console.log("...")  //...
}

if (2<1 && [1,2]){
    console.log("...")  //
}
//
console.log(1 && 3); //3
console.log(0 && 3); //0
console.log(0 || 3); //3
console.log(2 || 3); //2

//字符串比较
var bResult = "Blue" < "alpha";
console.log(bResult); //输出 true  由于字母 B 的字符代码是 66,字母 a 的字符代码是 97。
var bResult = "25" < "3";
console.log(bResult); //输出 "true"  ("2" 的字符代码是 50,"3" 的字符代码是 51)。
var bResult = "25" < 3;
console.log(bResult); //输出 "false"  这里,字符串 "25" 将被转换成数字 25,而后与数字 3 进行比较
/*
总结:
比较运算符两侧若是一个是数字类型,一个是其余类型,会将其类型转换成数字类型.
比较运算符两侧若是都是字符串类型,比较的是最高位的asc码,若是最高位相等,继续取第二位比较.
*/

//等性运算符:执行类型转换的规则以下:

若是一个运算数是 Boolean 值,在检查相等性以前,把它转换成数字值。false 转换成 0,true 为 1。
若是一个运算数是字符串,另外一个是数字,在检查相等性以前,要尝试把字符串转换成数字。
若是一个运算数是对象,另外一个是字符串,在检查相等性以前,要尝试把对象转换成字符串。
若是一个运算数是对象,另外一个是数字,在检查相等性以前,要尝试把对象转换成数字。
在比较时,该运算符还遵照下列规则:

值 null 和 undefined 相等。
在检查相等性时,不能把 null 和 undefined 转换成其余值。
若是某个运算数是 NaN,等号将返回 false,非等号将返回 true。
若是两个运算数都是对象,那么比较的是它们的引用值。若是两个运算数指向同一对象,那么等号返回 true,不然两个运算数不等。

数据类型转换

将number类型转换成string类型
隐式转换: 
var n1 = 123;var n2 = '123';var n3 = n1+n2;console.log(typeof n3);
强制转换:String()或toString()
var str1 = String(n1); 或 console.log(n1.toString())
将string类型转换成number类型 Number:
var stringNum = '789.123wadjhkd'; console.log(Number(stringNum)); //NaN parseInt()或parseFloat console.log(parseInt(stringNum)); //789 console.log(parseFloat(stringNum)); //789.123
任何的数据类型均可以转换为boolean类型 console.log(Boolean(0)); console.log(Boolean('')); console.log(Boolean(false)); console.log(Boolean(null)); console.log(Boolean(undefined)); console.log(Boolean(NaN)); console.log(Boolean(Infinity)); //true

流程控制

1、if语句

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type= "text/javascript" >
var score=window.prompt( "您的分数:" );
if (score>90){
     ret= "优秀" ;
} else if (score>80){
     ret= "良" ;
} else if (score>60){
     ret= "及格" ;
} else {
     ret = "不及格" ;
}
console.log(ret);
</script>

2、switch语句

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script type= "text/javascript" >
         var x = 1;
         switch (x) {
             case 1:
                 y = "星期一" ;
                 console.log(x+y);
                 break ;
             case 2:
                 y = "星期二" ;
                 break ;
             case 3:
                 y = "星期三" ;
                 break ;
             case 4:
                 y = "星期四" ;
                 break ;
             case 5:
                 y = "星期五" ;
                 break ;
             case 6:
                 y = "星期六" ;
                 break ;
             case 7:
                 y = "星期日" ;
                 break ;
             default :
                 y = "未定义" ;
         }
         console.log(y)
     </script>

3、while循环

?
1
2
3
4
5
6
7
8
<script type= "text/javascript" >
// 例子:打印 1~9之间的数
var i = 1; // 一、初始化循环变量
while (i<=9){ // 二、判断循环条件
     console.log(i);
     i = i+1; // 三、更新循环条件
}
</script>

4、do-while循环

?
1
2
3
4
5
6
7
8
<script type= "text/javascript" >
//无论有没有知足while中的条件do里面的代码都会走一次
var i = 1;   //初始化循环变量
do {
     console.log(i);
     i++;     //更新循环条件
} while (i<3)  //判断循环条件
</script>

5、for循环

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type= "text/javascript" >
//用法1:
//输出1~10之间的数
for ( var i = 1;i<=10;i++){
      console.log(i)
}
 
//用法2:for( 变量 in 数组或对象){....}
li=[1,2,3,4,5,6];
for (i in li){
     console.log(i);
}
</script>

6、异常处理

try {
    //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 若是try代码块中抛出了异常,catch代码块中的代码就会被执行。
    //e是一个局部变量,用来指向Error对象或者其余抛出的对象
}
finally {
     //不管try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
}

注:主动抛出异常 throw Error('xxxx')

对象(复杂数据类型)

在JavaScript中除了null和undefined之外其余的数据类型都被定义成了对象,也能够用建立对象的方法定义变量,String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象。正则表达式

类型 内置对象 介绍
数据对象 Number 数字对象
String 字符串对象
Boolean 布尔值对象
组合对象 Array 数组对象
Math 数学对象
Date 日期对象
组合对象 Object 自定义对象
Error 错误对象
Function 函数对象
RegExp 正则表达式对象
Global 全局对象
?
1
2
3
4
5
6
7
8
9
10
<script language= "javascript" >
var aa=Number.MAX_VALUE;
//利用数字对象获取可表示最大数
var bb= new String( "hello JavaScript" );
//建立字符串对象
var cc= new Date();
//建立日期对象
var dd= new Array( "星期一" , "星期二" , "星期三" , "星期四" );
//数组对象
</script>

1、String

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script type= "text/javascript" >
//建立方式
var str= "hello world" ;
var str= new String( "hello word" );
 
//==================================================字符串查询方法
// chartAt(index) 返回指定索引的位置的字符
var str = 'hello world' ;
var charset = str.charAt(1);
console.log(charset); //e
// indexOf  lastIndexOf  查询字符串位置  找不到则返回-1
var str = 'hello world' ;
console.log(str.indexOf( 'm' ,0)); //-1
console.log(str.indexOf( 'o' ,0)); //4
console.log(str.indexOf( 'o' ,5)); //7
console.log(str.lastIndexOf( 'o' )); //7
//match(regexp)         match返回匹配字符串的数组,若是没有匹配则返回null
//search(regexp)        search返回匹配字符串的首字符位置索引
var str1= "welcome to the world of JS!" ;
var str2=str1.match( "world" );
//str2=["world", index: 15, input: "welcome to the world of JS!", groups: undefined]
var str3=str1.search( "world" );
console.log(str2[0],str2);  // 结果为"world"
console.log(str3);     // 结果为15
 
//==================================================子字符串处理方法
//substr(start, length)  start表示开始位置,length表示截取长度
//substring(start, end) end是结束位置
var  str =  'helworld' ;
console.log( '=====' ,str.substr(3)); //world
console.log(str.substr(3,4)); //worl
console.log(str.substr(3,2)); //wo
console.log(str.substring(3)); //world
console.log(str.substring(3,4)); //w
console.log(str.substring(3,2), '=====' ); //l
//slice(start,end) 左闭右开 切片操做字符串
var str1= "abcdefgh" ;
var str2=str1.slice(2,4);
var str3=str1.slice(4);
var str4=str1.slice(2,-1);
var str5=str1.slice(-3,-1);
console.log(str2); //结果为"cd"
console.log(str3); //结果为"efgh"
console.log(str4); //结果为"cdefg"
console.log(str5); //结果为"fg"
 
//==================================================字符串拼接方法
// concat 返回字符串值,表示两个或多个字符串的拼接一个新的字符串
var str1 = 'al' ;
var str2  = 'ex' ;
console.log(str1.concat(str2,str2)); //alexex
 
//==================================================字符串替换方法
//replace(a,b) 将字符串a替换成字符串b
var a = '1234567755' ;
var newStr = a.replace( "4567" , "****" );
console.log(newStr); //123****755
 
//==================================================字符串分割方法
//split('a',1) 以字符串a分割字符串,并返回新的数组。若是第二个参数没写,表示返回整个数组,若是定义了个数,则返回数组的最大长度
var str1= "一,二,三,四,五,六,日" ;
var strArray=str1.split( "," );
console.log(strArray[1]); //结果为"二"
 
//==================================================字符串其余方法
var str= "    hello world   " ;
//length 获取字符串的长度
//trim() 去除字符串两边的空格
console.log(str.length,str.trim().length);  //18 11
//toLowerCase()转小写
var str = 'HELLO' ;
console.log(str.toLowerCase()); //hello
//toUpperCase()转大写
var str = 'hello' ;
console.log(str.toUpperCase()); //HELLO
 
//1.将number类型转换成字符串类型
var num = 132.32522;
var numStr = num.toString();
console.log( typeof numStr);  //string
//四舍五入
var newNum = num.toFixed(2);  //132.33
console.log(newNum);
</script>

2、Array

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<script type= "text/javascript" >
//建立方式
//方式一、字面量方式
var colo = [ 'red' , 'green' , 'yellow' ];
//方式二、使用构造函数(后面会讲)的方式建立 使用new关键词对构造函数进行建立对象,构造函数与后面的面向对象有关系
var colors = new Array();
//经过下标进行赋值
colors[0] = 'red' ;
colors[1] = 'green' ;
//方式三、
var test= new Array(100, "a" , true );
 
//建立二维数组:
var cnweek= new Array(7);
for ( var i=0;i<=6;i++){
     cnweek[i]= new Array(2);
}
cnweek[0][0]= "星期日" ;
cnweek[0][1]= "Sunday" ;
cnweek[1][0]= "星期一" ;
cnweek[1][1]= "Monday" ;
//...
cnweek[6][0]= "星期六" ;
cnweek[6][1]= "Saturday" ;
console.log(cnweek);
 
// 数组的合并 concat()
var north = [ '北京' , '山东' , '天津' ];
var south = [ '东莞' , '深圳' , '上海' ];
var newCity = north.concat(south);
console.log(newCity, typeof newCity);  //...object
var a = [1,2,3];
var b=a.concat(4,5) ;
console.log(a);  //返回结果为1,2,3
console.log(b, typeof b);  //返回结果为1,2,3,4,5  object
 
// join() 将数组中元素使用指定的字符串链接起来,它会造成一个新的字符串
var score = [98,78,76,100,0];
var str = score.join( '|' );
console.log(str, typeof str); //"98|78|76|100|0"  string
 
//数组的切片  slice(start, end)  start表示开始位置索引  end是结束位置下一数组元素索引编号
/*
第一个数组元素索引为0
start、end可为负数,-1表明最后一个数组元素
end省略则至关于从start位置截取之后全部数组元素
*/
var arr1=[ 'a' , 'b' , 'c' , 'd' , 'e' , 'f' , 'g' , 'h' ];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);
 
alert(arr2.toString());
//结果为"c,d"
alert(arr3.toString());
//结果为"e,f,g,h"
alert(arr4.toString());
//结果为"c,d,e,f,g"
 
//子数组操做  splice(start, deleteCount, value, ...)
/*
splice的主要用途是对数组指定位置进行删除和插入
start表示开始位置索引
deleteCount删除数组元素的个数
value表示在删除位置插入的数组元素
value参数能够省略
*/
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
alert(a.toString()); //a变为 [1,4,5,6,7,8]
a.splice(1,1);
alert(a.toString()); //a变为[1,5,6,7,8]
a.splice(1,0,2,3);
alert(a.toString()); //a变为[1,2,3,5,6,7,8]
 
//push pop这两个方法模拟的是一个栈操做,push压栈 pop弹栈
 
//pop 移除数组的最后一个元素
var arr = [ '张三' , '李四' , '王文' , '赵六' ];
var bb = arr.pop(); //返回值就是删除的元素
console.log(arr,bb); //["张三", "李四", "王文"] "赵六"
 
//push() 向数组最后添加一个元素
var arr = [ '张三' , '李四' , '王文' , '赵六' ];
var cc = arr.push( '小马哥' ); //返回最终数组长度
console.log(arr,cc); //["张三", "李四","王文","赵六","小马哥"] 5
 
//shift和unshift:
//unshift是将value值插入到数组x的开始
//shift是将数组x的第一个元素删除
var arr1=[1,2,3];
var cc = arr1.unshift(4,5);
console.log( '+++' ,arr1,cc);  //结果为"4,5,1,2,3" 5
var dd=arr1.shift();
console.log( '+++' ,arr1,dd);  //结果为"5,1,2,3"  4
 
//reverse() 翻转数组
var names = [ 'alex' , 'xiaoma' , 'tanhuang' , 'angle' ];
names.reverse();
console.log(names); //["angle", "tanhuang", "xiaoma", "alex"]
 
//sort对数组排序
var names = [ 'alex' , 'xiaoma' , 'tanhuang' , 'abngel' ];
names.sort();
console.log(names); // ["alex", "angle", "tanhuang", "xiaoma"]
//数字的正确排序
arr=[1,5,2,100];
arr.sort(intSort);
function intSort(a,b){
     return a-b;
}
alert(arr); //1,2,5,100
 
 
//判断是否为数组:isArray()  布尔类型值 = Array.isArray(被检测的值)
var test = [1, 'a' ,3];
console.log(Array.isArray(test));  //true
 
//清空数组的几种方式
var array = [1,2,3,4,5,6];
array.splice(0);      //方式1:删除数组中全部项目
array.length = 0;     //方式2:length属性能够赋值,在其它语言中length是只读
array = [];           //方式3:推荐
 
//js中数组的特性
//特性1: js中的数组能够装任意类型,没有任何限制.
//特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.
var arr5 = [ 'abc' ,123,1.14, true , null ,undefined, new String( '1213' ), new Function( 'a' , 'b' , 'alert(a+b)' )];
alert(arr5.length); //8
arr5[10] = "hahaha" ;
alert(arr5.length); //11
alert(arr5[9]); // undefined
 
</script>

3、Math

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script type= "text/javascript" >
 
//该对象中的属性方法 和数学有关.
/*
abs(x)    返回数的绝对值。
exp(x)    返回 e 的指数。
floor(x)对数进行下舍入。
log(x)    返回数的天然对数(底为e)。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)    返回数的正弦。
sqrt(x)    返回数的平方根。
tan(x)    返回角的正切。
*/
 
console.log(Math.pow(2,4)); // 16  pow 计算参数1 的参数2 次方.
console.log(Math.round(1.5)); // 2  四舍五入
 
// Math.ceil() 向上取整,'天花板函数'
var x = 1.234;
//天花板函数  表示大于等于 x,而且与它最接近的整数是2
var a = Math.ceil(x);
console.log(a,x); //2  1.234
 
// Math.floor 向下取整,'地板函数'
var x = 1.234;
// 小于等于 x,而且与它最接近的整数 1
var b = Math.floor(x);
console.log(b,x); //1  1.234
 
//求两个数的最大值和最小值
console.log(Math.max(2,5)); //5
console.log(Math.min(2,5)); //2
 
//随机数 Math.random() 得到随机数 0~1不包括1.
var ran = Math.random();
console.log(ran);  //  min - max之间的随机数: min+Math.random()*(max-min);
 
</script>

4、Date

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<script type= "text/javascript" >
//方法1:不指定参数
var nowd1= new Date();
console.log(nowd1.toLocaleString( ));
//方法2:参数为日期字符串
var nowd2= new Date( "2004/3/20 11:12" ); //2004/3/20 上午11:12:00
console.log(nowd2.toLocaleString( ));
var nowd3= new Date( "04/03/20 11:12" );
console.log(nowd3.toLocaleString( )); //2020/4/3 上午11:12:00
//方法3:参数为毫秒数
var nowd3= new Date(5000);
console.log(nowd3.toLocaleString( )); //1970/1/1 上午8:00:05
console.log(nowd3.toUTCString()); //Thu, 01 Jan 1970 00:00:05 GMT
//方法4:参数为年月日小时分钟秒毫秒
var nowd4= new Date(2004,3,20,11,12,0,300);
console.log(nowd4.toLocaleString( )); //毫秒并不直接显示 2004/4/20 上午11:12:00
 
//Date对象的方法—获取日期和时间
/*
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月(0-11)
getFullYear ()            获取完全年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)
*/
 
function getCurrentDate(){
         //1. 建立Date对象
         var date = new Date(); //没有填入任何参数那么就是当前时间
         //2. 得到当前年份
         var year = date.getFullYear();
         //3. 得到当前月份 js中月份是从0到11.
         var month = date.getMonth()+1;
         //4. 得到当前日
         var day = date.getDate();
         //5. 得到当前小时
         var hour = date.getHours();
         //6. 得到当前分钟
         var min = date.getMinutes();
         //7. 得到当前秒
         var sec = date.getSeconds();
         //8. 得到当前星期
         var week = date.getDay(); //没有getWeek
         // 2014年06月18日 15:40:30 星期三
         return year+ "年" +changeNum(month)+ "月" +day+ "日 " +hour+ ":" +min+ ":" +sec+ " " +parseWeek(week);
     }
 
alert(getCurrentDate());
 
//解决 自动补齐成两位数字的方法
     function changeNum(num){
     if (num < 10){
         return "0" +num;
     } else {
         return num;
     }
}
//将数字 0~6 转换成 星期日到星期六
     function parseWeek(week){
     var arr = [ "星期日" , "星期一" , "星期二" , "星期三" , "星期四" , "星期五" , "星期六" ];
     return arr[week];
}
//Date对象的方法—设置日期和时间
/*
setDate(day_of_month)       设置日
setMonth (month)            设置月
setFullYear (year)          设置年
setHours (hour)         设置小时
setMinutes (minute)     设置分钟
setSeconds (second)     设置秒
setMillliseconds (ms)       设置毫秒(0-999)
setTime (allms)     设置累计毫秒(从1970/1/1午夜)
*/
var x= new Date();
x.setFullYear (1997);    //设置年1997
x.setMonth(7);        //设置月7
x.setDate(1);        //设置日1
x.setHours(5);        //设置小时5
x.setMinutes(12);    //设置分钟12
x.setSeconds(54);    //设置秒54
x.setMilliseconds(230);        //设置毫秒230
document.write(x.toLocaleString( )+ "<br>" );
//返回1997年8月1日5点12分54秒
 
x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+ "<br>" );
//返回1997年8月1日12点23分50秒
 
//Date对象的方法—日期和时间的转换
getTimezoneOffset(); //8个时区×15度×4分/度=480; 返回本地时间与GMT的时间差以分钟为单位
toUTCString(); //返回国际标准时间字符串
toLocalString(); //返回本地格式时间字符串
Date.parse(x); //返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x); //返回累计毫秒数(从1970/1/1午夜到国际时间)
</script>

5、Function

  • 可使用变量、常量或表达式做为函数调用的参数
  • 函数名的定义规则与标识符一致,大小写是敏感的
  • 注意:js的函数加载执行与python不一样,它是总体加载完才会执行,因此执行函数放在函数声明上面或下面均可以:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script type= "text/javascript" >
//注意:js的函数加载执行与python不一样,它是总体加载完才会执行,因此执行函数放在函数声明上面或下面均可以:
//声明方式1:
function add(x,y){
     return x+y;
}
//js中调用函数
console.log(add(1,2));
//声明方式2:
var func2= new Function( "name" , "alert(\"hello\"+name);" );
func2( "tom" );
 
// 一、伪数组 arguments arguments表明的是实参。arguments只在函数中使用。
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b,c) {
     console.log(arguments);
     console.log(fn.length);         //获取形参的个数  一直是3
     console.log(arguments.length);  //获取实参的个数
     console.log( "----------------" );
}
// 二、arguments是伪数组,是由于:arguments能够修改元素,但不能改变数组的长短。
function fn2(a,b) {
     arguments[0] = 99;  //将实参的第一个数改成99
     //arguments.push(8);  //报错,由于没法增长元素  TypeError: arguments.push is not a function
}
 
//arguments的用处1:
function nxAdd(){
     var result=0;
     for ( var num in arguments){
         result+=arguments[num]
     }
     alert(result);
}
nxAdd(1,2,3,4,5);
 
//arguments的用处2:
function f(a,b,c){
     if (arguments.length!=3){
         throw new Error( "function f called with " +arguments.length+ " arguments,but it just need 3 arguments" )
     }
     else {
         alert( "success!" )
     }
}
f(1,2,3,4,5);
 
//只要函数名写对便可,参数怎么填都不报错.
function func1(a,b){
     console.log(a+b);
}
func1(1,2);  //3
func1(1,2,3); //3
func1(1);    //NaN
func1();     //NaN
 
// 匿名函数
     var func = function (arg){
         return "tony" ;
     };
// 匿名函数的应用
     ( function (){
         alert( "tony" );
     })()
 
     ( function (arg){
         console.log(arg);
     })( '123' )
 
</script>

6、Object

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<script type= "text/javascript" >
/*
对象Object
1.使用Object或对象字面量建立对象
2.工厂模式建立对象
3.构造函数模式建立对象
4.原型模式建立对象
*/
 
// 1.使用Object或对象字面量建立对象
//使用Object建立对象
var student = new Object();
student.name = "easy" ;
student.age = "20" ;
 
//使用字面量方式
var sutdent = {
   name : "easy" ,
   age : 20
};
 
// 要建立同类的student1,student2,…,studentn时,不得不将以上的代码重复n次....故工厂模式登陆
// 2.工厂模式建立对象
function createStudent(name, age) {
   var obj = new Object();
   obj.name = name;
   obj.age = age;
   return obj;
}
var student1 = createStudent( "easy1" , 20);
var student2 = createStudent( "easy2" , 20);
 
 
function createFruit(name, color) {
   var obj = new Object();
   obj.name = name;
   obj.color = color;
   return obj;
}
var v1 = createStudent( "easy1" , 20);
var v2 = createFruit( "apple" , "green" );
console.log(v1 instanceof Object); //true
console.log(v2 instanceof Object); //true
console.log(v1 instanceof createFruit); //false
console.log(v2 instanceof createFruit); //false
 
/*
对象v一、v2,用instanceof操做符去检测,他们通通都是Object类型。
咱们但愿v1是Student类型的,而v2是Fruit类型的。为了实现这个目标,能够用自定义构造函数的方法来建立对象
 
构造函数和普通函数有什么区别:
一、对于任意函数,使用new操做符调用,那么它就是构造函数;不使用new操做符调用,那么它就是普通函数。
二、按照惯例,约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分两者。
三、使用new操做符调用构造函数时,会经历4个阶段。
     (1)建立一个新对象;
     (2)将构造函数做用域赋给新对象(使this指向该新对象);
     (3)执行构造函数代码;
     (4)返回新对象;
*/
// 3.构造函数模式建立对象
 
function Student(name, age) {
   this .name = name;
   this .age = age;
   this .alertName = function (){
     alert( this .name)
   };
}
 
function Fruit(name, color) {
   this .name = name;
   this .color = color;
   this .alertName = function (){
     alert( this .name)
   };
}
 
var v1 = new Student( "easy" , 20);
var v2 = new Fruit( "apple" , "green" );
 
console.log( '=============================' );
console.log(v1 instanceof Student);  //true
console.log(v2 instanceof Student); //false
console.log(v1 instanceof Fruit);  //false
console.log(v2 instanceof Fruit);  //true
 
console.log(v1 instanceof Object);  //true 任何对象均继承自Object
console.log(v2 instanceof Object);  //true 任何对象均继承自Object
 
//能够区分对象类型了,可是Student和Fruit对象中有一样的方法,调用时无疑是对内存的消耗。
// 3.1 过分  将alertName()函数定义为全局函数,解决了内存浪费的问题,
// 若是这样定义的全局函数多了,想要将自定义对象封装的初衷便几乎没法实现了。更好的方案是经过原型对象模式来解决。
/*
function Student(name, age) {
   this.name = name;
   this.age = age;
   this.alertName = alertName;
}
 
function alertName() {
   alert(this.name);
}
 
var stu1 = new Student("easy1", 20);
var stu2 = new Student("easy2", 20);
 
stu1.alertName();  //在调用stu1.alertName()时,this对象才被绑定到stu1上。
*/
 
// 4.原型模式建立对象 ******************
function Student() {
     this .name = 'easy' ;
     this .age = 20;
}
 
Student.prototype.alertName = function (){
     alert( this .name);
};
 
var stu1 = new Student();
var stu2 = new Student();
 
stu1.alertName();
stu2.alertName();
 
alert(stu1.alertName == stu2.alertName);  //true 两者共享同一函数
</script>
数组(Array):
var names = ['alex', 'tony', 'eric']
var names = Array('alex', 'tony', 'eric')

 
经常使用方法:
    添加
        obj.push(ele)                   追加
        obj.unshift(ele)                最前插入
        obj.splice(index,0,'content')   指定索引插入
    移除
        obj.pop()                       数组尾部获取
        obj.shift()                     数组头部获取
        obj.splice(index,count)         数组指定位置后count个字符
      
    切片
        obj.slice(start,end)          
    合并
        newArray = obj1.concat(obj2)  
    翻转
        obj.reverse()
      
    字符串化
        obj.join('_')
    长度
        obj.length
 


var names = ["alex", "tony", "rain"];
// 数组:方式一
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

// 数组:方式二
for(var index in names){
    console.log(index);
    console.log(names[index]);
}


var names = {"name": "alex", "age": 18};

// 字典:方式一
for(var index in names){
    console.log(index);
    console.log(names[index]);
}

函数的声明
    function func(arg){
        return true;
    }

匿名函数
    var func = function(arg){
        return "tony";
    }

自执行函数
    (function(arg){
        console.log(arg);
    })('123')

面向对象
function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}

var obj = new Foo('alex', 18);
var ret = obj.Func("sb");
console.log(ret);

URL和刷新
location.href
location.href = "url"  window.location.reload()


标签属性
var obj = document.getElementById('container');
固定属性
    obj.id
    obj.id = "nid"
    obj.className
    obj.style.fontSize = "88px";

自定义属性
    obj.setAttribute(name,value)
    obj.getAttribute(name)
    obj.removeAttribute(name)

提交表单
document.geElementById('form').submit()


window.onload = function(){}
        //jQuery:$(document).ready(function(){})
        //onload是全部DOM元素建立、图片加载完毕后才触发的。而ready则是DOM元素建立完毕后触发的,不等图片加载完毕。图片还么有渲染,就能够进行事件的执行。
总结

JSON

1、两种结构

  • JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用彻底独立于语言的文本格式,是理想的数据交换格式。
  • JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
  • 在JSON中,有两种结构:对象和数组。json

    1. 对象
      var packJSON= {"name":"alex", "password":"123"};
      一个对象以“{”开始,“}”结束,“key/value”之间运用 “,”分隔。
    2. 数组
      var packJSON = [{"name":"alex", "password":"123"}, {"name":"wusir", "password":"456"}];
      数组是值的有序集合。一个数组以“[”开始,“]”结束。值之间运用 “,”分隔。

2、JSON对象和JSON字符串转换

在数据传输过程当中,JSON是以字符串的形式传递的,而JS操做的是JSON对象数组

  • JSON字符串
    var jsonStr ='{"name":"alex", "password":"123"}' ;
  • JSON对象:
    var jsonObj = {"name":"alex", "password":"123"};
  • JSON字符串转换JSON对象:
    var jsonObject= JSON.parse(jsonstr);
  • JSON对象转化JSON字符串:
    var jsonstr =JSON.stringify(jsonObject );

3、遍历JSON对象和JSON数组

?
1
2
3
4
5
6
7
8
9
10
11
12
<script type= "text/javascript" >
//对象
var packAlex  = { "name" : "alex" , "password" : "123" } ;
for ( var k in packAlex ){ //遍历packAlex 对象的每一个key/value对,k为key
    console.log(k + " " + packAlex[k]);
}
//数组
var packAlex = [{ "name" : "alex" , "password" : "123" }, { "name" : "wusir" , "password" : "456" }];
for ( var i in packAlex){ //遍历packJson 数组时,i为索引
    console.log(packAlex[i].name + " " + packAlex[i].password);
}
</script>

js的做用域

  • 做用域就是变量与函数的可访问范围,即做用域控制着变量与函数的可见性和生命周期。
  • 在JavaScript中,变量的做用域有全局做用域和局部做用域两种。

1、全局做用域(Global Scope)

在代码中任何地方都能访问到的对象拥有全局做用域浏览器

一、最外层函数和在最外层函数外面定义的变量拥有全局做用域

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
var name= "alex" ;
     function foo(){
         var age=23;
         function inner(){
             console.log(age);
         }
         inner();
     }
     console.log(name);    // alex
     //console.log(age);   // Uncaught ReferenceError: age is not defined
     foo();                // 23
     inner();              // Uncaught ReferenceError: inner is not defined
</script>

二、全部末定义直接赋值的变量自动声明为拥有全局做用域

?
1
2
3
4
5
6
7
8
9
10
<script>
var name= "alex" ;
     function foo(){
         age=23;
         var sex= "male"
     }
     foo();
     console.log(age);   //  23
     console.log(sex);   // sex is not defined
</script>

三、全部window对象的属性拥有全局做用域

通常状况下,window对象的内置属性都都拥有全局做用域,例如window.alert()、window.location、window.top等等。app

2、局部做用域(Local Scope)

  • 通常只在固定的代码片断内可访问到,最多见的例如函数内部,因此也称为函数做用域
  • 如示例1中的age与inner都只有局部做用域。(js中if、for没有本身的做用域)

3、做用域链(Scope Chain)

  • 在JavaScript中,函数也是对象,实际上,JavaScript里一切都是对象。
  • 函数对象和其它对象同样,拥有能够经过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。
  • 其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被建立的做用域中对象的集合,
  • 这个集合被称为函数的做用域链,它决定了哪些数据能被函数访问。

一、函数定义阶段:

  • 当一个函数建立后,它的做用域链会被建立此函数的做用域中可访问的数据对象填充。
  • 在函数bar建立时,它的做用域链中会填入一个全局对象,该全局对象包含了全部全局变量,以下图所示:

二、函数调用阶段:

  • 解析到函数调用时,即bar(5),会生成一个active object的对象
  • 该对象包含了函数的全部局部变量、命名参数、参数集合以及this,而后此对象会被推入做用域链的前端,当运行期上下文被销毁,活动对象也随之销毁。
  • 新的做用域链以下图所示:

三、实例练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<script>
/*
域:只要是域就会发生域解析
    1:script:全局变量,全局函数,自上而下(因此引入jQuery库的时候要在script前引入)
    2:函数:由里到外
    3:{}

"JS解析器":浏览器内部专门用来处理js程序,为了理解起的名字,至少包含下面2步骤
1:JS的域解析:
   找东西:var,function,参数
   根据var 找到变量a后,不会读取变量a的值而是把变量a赋值为 undefined能够理解为偷懒机制,万一变量a是一大串json或者数组
   ***全部的变量,在正式运行代码以前,都提早赋了一个值undefined ***
   ***全部的函数,在正式运行代码以前,都是整个函数块 ***
   ***函数的声明,不改变任何值***
   ***遇到重名的:只留下一个,后面的覆盖前面的,遇到变量和函数重名了,留下函数(与变量在前在后没有关系)***
   a=undefined
   fn1=function fn1(){alert(2);}
2:逐行读取代码:(去域中找)
   表达式:= + - * / % ++ -- ! 参数(参数本质就是一个局部变量) 等
   表达式能够修改域解析的值
   函数调用:
          1:JS的域解析:
             找东西:var,function,参数
             ....
             ....
          2:逐行读取代码:
          3:函数自身找不到,才会去script域中找
*/
//===============================script域
console.log(a);      //从域解析中找   此时的a是function a(){alert(4);}
var a=1;            //表达式改变了域解析的值
console.log(a);     //此时的a是1
function a(){alert(2);} //函数的申明,不改变任何值
console.log(a);     //此时的a是1
var a=3;
function a(){alert(4);}
console.log(a);     //此时的a是3,不能在写a()这样的代码了

//==============================函数域
var b=12;
function fb(){
    console.log(b);  //此时的b是 undefined
    var b=10;
    console.log(b);  //此时的b是 10
}
fb();                 //函数调用:开始新的域解析
console.log(b);      //此时的b是 12  全局的

//==============================函数域 和上面的区别就是函数中的c没有var
var c=22;
function fc(){
    console.log(c,'fc中');  //此时的c是22
    c=20;
    console.log(c,'fc中');  //此时的c是20
}
console.log(c);      //此时的c是22
fc();                //执行函数,改变了全局的c
console.log(c);      //此时的c是20

//==============================函数域 和上面的区别就是函数多了参数d
var d=32;
function fd(d){             //参数本质就是局部变量  function fd(var d)
    console.log(d,'fd中');  //此时的d是undefined
    d=20; //由内而外找,本身有就用本身的
    console.log(d,'fd中');  //此时的d是20
}
console.log(d);      //此时的d是32
fd();
console.log(d);      //此时的d是32

//==============================函数域 和上面的区别就是传参了
var g=32;
function fg(g){
    console.log(g,'fg中');  //此时的g是32
    g=20;
    console.log(g,'fg中');  //此时的g是20
}
console.log(g);      //此时的g是32
fg(g); //把全局的g当参数传进去了
console.log(g);      //此时的g是32

//==============================函数域 和上面的区别就是传参了
var e=32;
function fe(e){
    console.log(e,'fe中');  //此时的e是5
    e=20; //由于有参数,因此是局部变量,与var e=20同样
    console.log(e,'fe中');  //此时的e是20
}
console.log(e);      //此时的e是32
fe(5);
console.log(e);      //此时的e是32

//==============================遇到变量和函数重名了,留下函数(与变量在前在后没有关系)
var s=10;
function foo(){
  console.log(s);  //function s(){console.log("ok")}
  function s(){console.log("ok")}
  console.log(s);  //function s(){console.log("ok")}
  var s=5;        //遇到表达式改变值
  console.log(s);  //5
}
foo();

//==============================想要获取函数内的值 方式1:
var str='';
function fn(){
  var a='1个亿';
  str=a;
}
fn();
console.log(str);

//==============================想要获取函数内的值 方式2:
function fn2(){
  var a='2个亿';
  fn3(a);
}
fn2();
function fn3(a){
  console.log(a);
}
//==============================*****不能对下面的函数进行域解析,代码写规范
console.log(a99);
console.log(fn99);
if(true){
  var a99=1;
  function fn99(){
    alert(23323);
  }
}
//==============================*****随便点击那个按钮,3个按钮的颜色变黄
window.onload=function(){
  var aBtn=document.getElementsByTagName("input");
  for(var i=0;i<aBtn.length;i++){
    aBtn[i].onclick=function(){
      //aBtn[i].style.background="yellow";  //报错了,此时的i是3,for循环执行速度很快的,是for执行完了之后你才能点的
      for(var i=0;i<aBtn.length;i++){
        aBtn[i].style.background="yellow";
      }

    }
  }
};

//==============================
function bar(age) {
    console.log(age);
    var age = 99;
    var sex= 'male';
    console.log(age);
    function age() {
        alert(123)
    };
    console.log(age);
    return 100;
}
alert(result=bar(5)); //function age() {alert(123)} ,99,99
/*
一、域解析(涉及参数,局部变量声明,函数声明表达式):
    1-1 、分析参数,有一个参数,造成一个 AO.age=undefine;
    1-2 、接收参数 AO.age=5;
    1-3 、分析变量声明,有一个 var age, 发现 AO 上面有一个 AO.age ,则不作任何处理
    1-4 、分析变量声明,有一个 var sex,造成一个 AO.sex=undefine;
    1-5 、分析函数声明,有一个 function age(){} 声明, 则把原有的 age 覆盖成 AO.age=function(){};
二、逐行解读:
    2-1 、执行第一个 console.log(age) 时,当前的 AO.age 是一个函数,因此输出的一个函数
    2-2 、这句 var age=99; 表达式改变了AO.age的属性值, AO.age=99 ,因此在第二个输出的age是 99;
    2-3 、同理第三个输出的是 99, 由于中间没有改变 age 值的语句了。
*/

</script>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
</html>
View Code
相关文章
相关标签/搜索