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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
| <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="testid">
测试div
</div>
<script src="http://blog.ropon.top/js/jquery.min.js"></script>
<script>
//1 let命令声明变量，但所声明变量只在let命令所在代码块内有效
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
//a[6]();
//var存在变量提升现象，即变量可以在声明之前使用值为undefined
//console.log(aa);
var aa = 33;
//console.log(bb); //报错
let bb = 44;
let cc = 55;
//let cc = 66; //报错不允许重复声明
//块级作用域
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = "test";
}
}
//f();
var s = "hello";
for (let i = 0; i < s.length; i++) {
console.log(s[i]);
}
//console.log(i);
//总结：let命令 不存在变量提升 不允许重复声明
//const命令声明变量不得改变值，也就是const一旦声明变量就必须立即初始化
//const dd; //报错
const ee = 66;
if (true) {
const ff = 5;
}
//console.log(ff);//报错
//与let命令一样，只在声明所在块级作用域内有效
//2 模板字符串 在反引号` `之间的字符串 若要在模板字符串中使用反引号，需要在前面加反斜线\转义
//如果使用模板字符串表示多行字符串，所有空格和缩进都会保留在输出之中
let gg = "test变量"
$("#testid").append(
`<p>模板字符串实例</p>${gg}
<p>\`Check Now\`</p>
<ul>
<li>111</li>
<li>222</li>
</ul>`
);
//3 箭头函数 基本语法 (=>) 定义函数
var func = a => a;
//等同于
var func = function (a) {
return a;
};
//使用一个圆括号()代表参数部分
var func = () => 5;
//等同于
var func = function () {
return 5
};
//多个形参
var sum = (num1, num2) => num1 + num2;
//等同于
var sum = function (num1, num2) {
return num1 + num2;
};
//注意 函数体内的this对象 是定义时所在的对象 而不是使用时所在的对象
var name = "ropon";
var person = {
name: "pengge",
age: 18,
//fav: function () {
//fav: () => {
fav() { //对象单体模式
console.log(this);
console.log(this.name);
}
};
person.fav();
function f1() {
setTimeout(() => {
console.log("id", this.id);
}, 1000);
}
var id = 22;
f1.call({id: 24});
//不能使用arguments对象 该对象在函数体内不存在
var person2 = {
name: "pengge",
age: 18,
fav: () => {
//console.log(arguments);//报错
}
};
person2.fav("test1", "test2");
class Person {
constructor(name="ropon12", age=18) {
this.name = name;
this.age = age;
}
showname() {
console.log(this.name);
}
showage() {
console.log(this.age);
}
}
let P = new Person();
P.showname();
</script>
</body>
</html>
|