0-判断变量、参数是否初始化
|
1
|
if
(x){}
//变量被初始化了或者变量不为空或者变量不为零
|
1-声明函数不需要声明返回值、参数类型，句尾甚至都不需要';'
|
1
|
function
sum(i1,i2){
return
i1+i2}
|
2-直接声明匿名函数立即使用
|
1
2
3
|
var
f=
function
(i1,i2){
return
i1+i2;}; alert(f(1,2));
//普通匿名函数
alert(
function
(i1,i2){
return
i1+i2;}(3,4));
//直接声明,立即使用
|
3-js中没有类的概念，于是有些方法就长的像类了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function
Person(name,age){
this
.Name=name;
//动态增加属性，类似于C#里的dynamic A = new ExpendoObject();
this
.Age=age;
this
.SayHello=
function
(){alert(
'Hello,My name is '
+name+
' I am '
+age+
' years old.'
)};
}
var
p1=
new
Person(
'lorry'
,21);
p1.SayHello();
//像类一样调用
p1.Gender=
'男'
;
//动态增加‘性别'属性
alert(p1.Gender);
|
4-Array对象就是数组，定义数组不用预先限定长度
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
arr=
new
Array();
arr[0]=0;
arr[1]=1;
arr[2]=2;
for
(
var
i=0;i<=arr.length-1;i++){
alert(arr[i]);
}
|
5-Array是数组，也是Dictionary，也是Stack
|
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
|
var
dict=
new
Array();
//作为Dictionary使用
dict[
'我'
]=
'wo'
;
dict[
'爱'
]=
'ai'
;
dict[
'你'
]=
'ni'
;
alert(dict[
'我'
]);
//通过键值调用
alert(dict.爱);
//像调用属性一样调用（动态语言的特性）
for
(
var
k
in
dict){
//js中的遍历
alert(k);
//'我'，'爱'，'你'-->打印出的是key
}
for
(
var
k of dict){
//js中的遍历
alert(k);
//'wo'，'ai'，'ni'-->打印出的是value
}
var
arr = [1,2,3,4,5];
//Array的简化创建方式
var
arr = {
"lorry"
:21,
"cloud"
:20};
//字典风格的创建方式
|
6-遍历当前页面能够调用的所有元素
|
1
2
3
4
5
6
7
8
9
|
var
s=
null
;
for
(
var
k
in
document){
//对象的属性都是以key的形式出现的
s+=k+
" ;"
;
}
alert(s);
|
7-使用类似Array的下标操作获取字符串某个指定位置的字符
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var
s =
'Hello, world!'
;
s[0];
// 'H'
s[6];
// ' '
s[12];
// '!'
s[13];
// undefined 超出范围的索引不会报错，但一律返回undefined
需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果：
var
s =
'Test'
;
s[0] =
'X'
;
alert(s);
// s仍然为'Test'
|
8-改大写小写
|
1
2
3
4
5
6
7
8
9
|
var
s =
'Hello'
;
s.toUpperCase();
// 返回'HELLO'
var
s =
'Hello'
;
s.toLowerCase();
// 返回'hello'
|
9-搜索指定字符串出现的位置
|
1
2
3
4
5
|
var
s =
'hello, world'
;
s.indexOf(
'world'
);
// 返回7
s.indexOf(
'World'
);
// 没有找到指定的子串，返回-1
|
10-获取字符串指定索引区间的子串
|
1
2
3
4
5
|
var
s =
'hello, world'
s.substring(0, 5);
// 从索引0开始到5（不包括5），返回'hello'
s.substring(7);
// 从索引7开始到结束，返回'world'
|
11-JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成
|
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
|
var
xiaoming = {
name:
'小明'
,
birth: 1990,
school:
'No.1 Middle School'
,
height: 1.70,
weight: 65,
score:
null
//最后一个键值对不需要在末尾加','
};
xiaoming.name;
// '小明'
xiaoming.birth;
// 1990
访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用[]括起来：
var
xiaohong = {
name:
'小红'
,
'middle-school'
:
'No.1 Middle School'
};
xiaohong[
'middle-school'
];
// 'No.1 Middle School'
xiaohong[
'name'
];
// '小红'
xiaohong.name;
// '小红'
xiaohong.age;
// undefined
|
12-检测xiaoming是否拥有某一属性，用in操作符：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
'name'
in
xiaoming;
// true
'grade'
in
xiaoming;
// false
***如果
in
判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：
'toString'
in
xiaoming;
// true
***要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：
xiaoming.hasOwnProperty(
'name'
);
// true
xiaoming.hasOwnProperty(
'toString'
);
// false
|
13-Map
|
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
|
var
m =
new
Map([[
'Michael'
, 95], [
'Bob'
, 75], [
'Tracy'
, 85]]);
//二维数组初始化法
m.get(
'Michael'
);
// 95
var
m =
new
Map();
// 直接初始化一个空Map
m.set(
'Adam'
, 67);
// 添加新的key-value
m.set(
'Bob'
, 59);
m.has(
'Adam'
);
// 是否存在key 'Adam': true
m.get(
'Adam'
);
// 67
m.
delete
(
'Adam'
);
// 删除key 'Adam'
m.get(
'Adam'
);
// undefined
var
m =
new
Map([[1,
'x'
], [2,
'y'
], [3,
'z'
]]);
for
(
var
n of m) {
// 遍历Map
alert(n[1] +
'='
+ n[0]);
}
|
14-iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。
|
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
|
var
a = [
'A'
,
'B'
,
'C'
];
a.forEach(
function
(element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
alert(element);
});
Set与Array类似，但Set没有索引，因此回调函数最多两个参数：
var
s =
new
Set([
'A'
,
'B'
,
'C'
]);
s.forEach(
function
(element, set) {
alert(element);
});
Map的回调函数参数依次为value、key和map本身：
var
m =
new
Map([[1,
'x'
], [2,
'y'
], [3,
'z'
]]);
m.forEach(
function
(value, key, map) {
alert(value);
});
var
a = [
'A'
,
'B'
,
'C'
];
a.forEach(
function
(element) {
alert(element);
});
|
15-用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果：
|
1
2
3
4
5
6
7
8
9
10
11
|
var
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(
function
(x){
return
x*x;
}).forEach(
function
(element) {
alert(element);
// [1, 4, 9, 16, 25, 36, 49, 64, 81]
});
|
16-用map()把Array的所有数字转为字符串：
|
1
2
3
|
var
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String);
// ['1', '2', '3', '4', '5', '6', '7', '8', '9']
|
17-用Array的reduce()做累积计算
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
arr = [];
for
(
var
x = 1; x <= 100; x++) {
arr.push(x);
//将1~100放入数组
}
alert(arr.reduce(
function
(x,y){
return
x+y;
//对arr的所有对象累积求和，返回求和结果
}));
|
18-用reduce()做一个牛逼的转换：把[1, 2, 5, 8, 0]变换成整数12580
|
1
2
3
4
5
6
7
|
var
arr = [1, 2, 5, 8, 0];
alert(arr.reduce(
function
(x,y){
return
x*10+y;
}));
|
19-用filter()把Array的某些元素过滤掉
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var
arr = [0,1,2,3,4,5,6,7,8,9];
alert(arr.filter(
function
(x){
return
x%2===0;
}));
//0,2,4,6,8 //返回true则保留
把一个Array中的空字符串删掉
var
arr = [
'A'
,
''
,
'B'
,
null
, undefined,
'C'
,
' '
];
alert(arr.filter(
function
(s) {
return
s && s.trim();
// 注意：IE9以下的版本没有trim()方法
}));
// ['A', 'B', 'C']
|
20-Array的sort()方法默认把所有元素先转换为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
|
[10, 20, 1, 2].sort();
// [1, 10, 2, 20]
因此如果要按数字大小排序，可以这么写：
var
arr = [];
for
(
var
x = 1; x <= 10; x++) {
arr.push(x);
}
document.write(arr+
"<br/>"
);
document.write(arr.sort(
function
(x,y){
return
x<y?
true
:
false
;
}));
若要忽略字母大小写影响，则要先转化为大写或小写
var
arr = [
'Google'
,
'apple'
,
'Microsoft'
];
alert(arr.sort(
function
(s1, s2) {
var
x1 = s1.toUpperCase();
var
x2 = s2.toUpperCase();
return
x1 < x2 ?
false
:
true
;
}));
// ['apple', 'Google', 'Microsoft']
|
21-闭包（Closure）程序结构
|
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
|
①将函数作为返回值赋值给参数，调用该参数获得计算结果
var
arr = [];
for
(
var
n=1;n<101;n++){
arr.push(n);
}
function
lazy_sum(arr){
var
sum =
function
(){
return
arr.reduce(
function
(x,y){
return
x+y;
});
}
return
sum;
}
var
f = lazy_sum(arr);
alert(f());
②返回的函数并没有立刻执行，而是直到调用了f()才执行
function
count() {
var
arr = [];
for
(
var
i=1; i<=3; i++) {
arr.push(
function
() {
return
i * i;
});
}
return
arr;
}
var
results = count();
//results里存了3个function
var
f1 = results[0];
var
f2 = results[1];
var
f3 = results[2];
f1();
// 16 返回的函数引用了变量i，但它并非立刻执行。
f2();
// 16 等到3个函数都返回时，它们所引用的变量i已经变成了4，
f3();
// 16 因此最终结果为16
***返回闭包时牢记：返回函数不要引用任何循环变量，或者后续会发生变化的变量!
③如果一定要引用循环变量怎么办？
方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，
无论该循环变量后续如何更改，已绑定到函数参数的值不变：
function
count() {
var
arr = [];
for
(
var
i=1; i<=3; i++) {
arr.push(
function
(n){
return
function
(){
return
n*n;
}
}(i));
}
return
arr;
}
var
results = count();
var
f1 = results[0];
var
f2 = results[1];
var
f3 = results[2];
alert(f1());
// 1
alert(f2());
// 4
alert(f3());
// 9
④在没有class机制，只有函数的语言里，借助闭包，可以封装一个私有变量
function
creat_counter(init){
var
n = init||0;
return
{
add:
function
(){
n+=1;
return
n;
}
}
}
var
c = creat_counter();
alert(c.add());
//1
alert(c.add());
//2
alert(c.add());
//3
***在返回的对象中，实现了一个闭包，该闭包携带了局部变量n，并且，从外部代码根本无法访问到变量n。
换句话说，闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来。
⑤利用Math.pow(x, y)计算x^2或x^3
//Math.pow(x, y)-->x^y
function
make_pow(y){
return
function
(x){
return
Math.pow(x,y);
}
}
var
pow2 = make_pow(2)
var
pow3 = make_pow(3)
alert(pow2(3))
//9
alert(pow3(3))
//27
|
22-箭头函数(目前仅firefox支持) //参数=>函数体
|
1
2
3
|
var
f = x => x*x*x
alert(f(3))
//27
|
23-用generator产生斐波那契数列
|
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
|
function
* fib(max){
var
t,a=0,b=1,n=1;
while
(n<=max){
yield a;
t=a+b;
a = b;
b = t;
n++;
}
return
a;
}
for
(
var
x of fib(10)) {
//用for ... of循环迭代generator对象
document.write(x+
' '
);
// 依次输出0, 1, 1, 2, 3
}
用generator产生一个自增的ID(无需全局变量)
function
* next_id(){
for
(
var
x = 1; x < 100; yield x++ );
}
var
g = next_id();
alert(g.next().value);
//1
alert(g.next().value);
//2
alert(g.next().value);
//3
|
以上就是小编为大家带来的JavaScript自学笔记(必看篇)全部内容了，希望大家多多支持脚本之家~
扫一扫
1360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
