JavaScript

JS的变量与保留字

一、变量

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

二、保留字

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、

三、语言类型

  • 静态类型语言

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

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

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

    一种类型可以被忽略的语言,与强类型相反。JS 是弱类型的。在JS中,可以将字符串 '12' 和整数 3 进行连接得到字符串'123',然后可以把它看成整数 123 ,所有这些都不需要任何的显示转换。 所以说 Python 既是动态类型语言 (因为它不使用显示数据类型声明),又是强类型语言 (因为只要一个变量获得了一个数据类型,它实际上就一直是这个类型了)。

基本数据类型

一、数值: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");

二、字符串:string

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

三、布尔:boolean

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

四、空对象:null

  • 如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。
  • 值undefined 实际上是从值null 派生来的,因此 ECMAScript 把它们定义为相等的。
  • undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象

五、未定义: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

流程控制

一、if语句

?
1
2
3
4
5
6
7
8
9
10
11
12
13

二、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

三、while循环

?
1
2
3
4
5
6
7
8

四、do-while循环

?
1
2
3
4
5
6
7
8

五、for循环

?
1
2
3
4
5
6
7
8
9
10
11
12
13

六、异常处理

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

一、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

二、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

三、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

四、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

五、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

六、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
数组(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){
    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

一、两种结构

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

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

二、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 );

三、遍历JSON对象和JSON数组

?
1
2
3
4
5
6
7
8
9
10
11
12

js的作用域

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

一、全局作用域(Global Scope)

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2、所有末定义直接赋值的变量自动声明为拥有全局作用域

?
1
2
3
4
5
6
7
8
9
10

3、所有window对象的属性拥有全局作用域

一般情况下,window对象的内置属性都都拥有全局作用域,例如window.alert()、window.location、window.top等等。

二、局部作用域(Local Scope)

  • 一般只在固定的代码片段内可访问到,最常见的例如函数内部,所以也称为函数作用域
  • 如示例1中的age与inner都只有局部作用域。(js中if、for没有自己的作用域)

三、作用域链(Scope Chain)

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

1、函数定义阶段:

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

2、函数调用阶段:

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

3、实例练习




  
  







View Code

 

转载于:https://www.cnblogs.com/bubu99/p/9008028.html

你可能感兴趣的:(JavaScript)