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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
| {
// let定义变量 const 定义常量
let a = 1;
a = 2
console.log(a);
const pi = 3.1415926;
// pi = 4;
console.log(pi);
// 不能重复定义
// let a = 3
// console.log(a);
// const pi = 10;
// console.log(19);
// 块级作用域
if (true) {
var b = 3
}
console.log(b);
if (true) {
let c = 3;
}
// console.log(c);
// 不存在变量提升
let arr = [1, 2, 3, 4, 5, 6, 7, 8];
for (var i = 0; i < arr.length; i++) {
}
console.log(i);
for (let j = 0; j < arr.length; j++) {
}
// console.log(j);
// -------------------------------------
// 箭头函数
// 参数 => 表达式/语句
let value = 2;
let double = x => 2 * x;
let treble = x => {
return 3 * x;
}
console.log('double', double(value));
console.log('treble', treble(value));
// 继承外层作用域
var obj = {
commFun: function () {
console.log(this);
},
arrowFun: () => {
console.log(this);
}
}
obj.commFun();
obj.arrowFun();
// 不能用作构造函数
let Obj = function () { }
let obj = new Obj();
let Animal = () => {
}
let animal = new Animal();
// 没有prototype属性
let constFm = function () { }
let pontFm = () => { }
console.log(constFm.prototype);
console.log(pontFm.prototype);
// -------------------------------------
// 模板字符串
// 反引号标记`
let str = `
<div class="title">
<h1>测试标题一</h1>
</div>
`;
// document.querySelector('body').innerHTML = str;
// 支持多行字符串
// 支持变量和表达式
let name = 'Rosen';
str += `${name}`;
// document.querySelector('body').innerHTML = str;
let getName = () => {
return 'Rosen title'
}
str += `${getName()}`;
// document.querySelector('body').innerHTML = str;
let names = ['tim', 'dodo']
str += `
<ul>
${names.map(name =>
`<li>Hi, i am ${name}</li>`
).join(' ')}
</ul>
`
document.querySelector('body').innerHTML = str;
// Promise
// Promise对象
new Promise((resolve, reject) => {
// 异步函数
$.ajax({
url: 'http://happymmall.com/user/get_user_info.do',
type: 'post',
// 关键词：resolve,reject,then
success(res) {
resolve(res)
},
error(err) {
reject(err)
}
})
}).then(
(res) => {
console.log('success:', res);
},
(err) => {
console.log('error:', err);
}
)
// 链式Promise
let promiseFn1 = new Promise((resolve, reject) => {
// 异步函数
$.ajax({
url: 'http://happymmall.com/user/get_user_info.do',
type: 'post',
success(res) {
resolve(res)
},
error(err) {
reject(err)
}
})
})
let promiseFn2 = new Promise((resolve, reject) => {
// 异步函数
$.ajax({
url: 'http://happymmall.com/user/get_cart_prodouct_count.do',
type: 'post',
success(res) {
resolve(res)
},
error(err) {
reject(err)
}
})
})
promiseFn1.then(() => {
console.log('promiseFn1 success')
return promiseFn2;
}).then(() => {
console.log('promiseFn2 success')
})
// 面向对象-类
// 关键词：class
// 语法糖，对应function
// 构造函数：constructor
class Animal {
constructor(name) {
this.name = name
}
getName() {
return this.name
}
}
let animal = new Animal('animal title');
console.log(animal.getName());
// 面向对象-类的继承
// extends：类的继承
// super：调用父类的构造函数
class Animal2 {
constructor() {
this.name = '张三'
}
getName() {
return this.name
}
}
class Cart extends Animal2 {
constructor() {
super();
this.name = 'cart'
}
}
let animal2 = new Animal2();
let cart = new Cart();
console.log(animal2.getName());
console.log(cart.getName());
// 面向对象-对象
// 对象里属性的简写
// 对象里方法的简写
// 属性名可以为表达式
// 其他扩展
var name = "Reson",
age = 18;
// old
var obj = {
name: name,
age: age,
getName: function () {
return this.name
},
getAge: function () {
return this.age
}
}
// news
let name1 = "Reson",
age1 = 18;
let obj1 = {
// 变量名可以用作对象属性名
name1,
age1,
// 对象方法可以简写
getName() {
return this.name1
},
// 表达式作为属性方法名
['get' + 'Age']() {
return this.age1;
}
}
// Object对象的扩展
Object.keys(obj1);
Object.assign({ a: 1 }, { a: 2, b: 2 }) // 浅拷贝
// ES6模块化
// 解决一个复杂问题时，自上而下逐层把系统划分成若干模块的过程
// CommonJS,AMD,CMD
// 关键词 export import
// 基本指令：let const
// 箭头函数：value => return value + 1
// 模板字符串： `Hell ${name}`
// promise: Promise, resolve, reject, then
// 面向对象： class, extends, super, constructor
// 模块化：export, import, as, default
}
|
