Skip to content

Commit cc4381c

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
更新
1 parent c4f32f7 commit cc4381c

File tree

7 files changed

+826
-4
lines changed

7 files changed

+826
-4
lines changed

‎1 基础语法/05-数据类型转换.html

+106-3
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,122 @@
66
</head>
77
<body>
88
<script>
9+
// 隐式类型转换
10+
// primitive type
11+
/**
12+
* Object => String
13+
*/
14+
// 1. 转换场景
15+
// console.log();
16+
// alert();
17+
// "" + obj; //字符串拼接
918

10-
// "=="引起的类型转换
19+
// 2. 转换方法
20+
// Object.prototype.toString() 返回一个表示该对象的字符串
21+
// Object.prototype.valueOf() 返回指定对象的原始值
22+
23+
// 3. 转换规则
24+
// 1. 设原始值为调用 ToPrimitive 的结果
25+
// 2. 调用 toString 方法返回原始值
26+
// (3). 若 toString 未返回原始值，调用 valueOf 返回原始值
27+
// (4). 若 valueOf　仍未返回原始值，报错
28+
29+
// 4. 案例
30+
var obj = {
31+
toString: function() {
32+
console.log('use obj.toString');
33+
return {};// 返回非原始类型
34+
},
35+
valueOf: function() {
36+
console.log('use obj.valueOf')
37+
return 'sun';// 返回原始类型
38+
}
39+
}
40+
console.log(obj);//use obj.toString //use obj.valueOf //sun
41+
// 说明：先调用 toString 方法，如果得不到原始类型数据，继续调用 valueOf 方法
42+
// 如果不重写 toString 方法，obj.toString() 返回 "[object Object]"，为字符串原始类型
43+
44+
/**
45+
* Object => Number
46+
*/
47+
// 1. 转换场景
48+
// Number() //强制转换
49+
// Math
50+
// obj == 1 //比较
51+
// obj + 1 //数值运算
52+
// +obj
53+
54+
// 2. 转换方法
55+
// Object.prototype.valueOf() 返回指定对象的原始值
56+
// Object.prototype.toString() 返回一个表示该对象的字符串
57+
58+
// 3. 转换规则
59+
// 1. 设原始值为调用 ToPrimitive 的结果
60+
// 2. 调用 valueOf 方法返回原始值
61+
// (3). 若 valueOf 未返回原始值，调用 toString 返回原始值
62+
// (4). 若 toString 仍未返回原始值，报错
63+
64+
// 4. 案例
65+
console.log(typeof(+[1])); //number
66+
console.log(+[]); // 0
67+
console.log(+[1,2]); // NaN
68+
console.log(+[undefined]); // 0
69+
console.log(+[undefined,undefined]); // NaN
70+
console.log(+Array(0)); // 0
71+
console.log(+Array(1)); // 0
72+
console.log(+Array(2)); // NaN
73+
console.log(+Array(017)); // NaN
74+
75+
var obj = {
76+
valueOf: function() {
77+
console.log('use valueOf');
78+
return {};
79+
},
80+
toString: function() {
81+
console.log('use toString');
82+
return 7;
83+
}
84+
}
85+
console.log(obj + 1);//use valueOf //use toString //8
86+
// 说明：先调用 valueOf 方法，如果得不到原始类型数据，继续调用 toString 方法
87+
// 如果返回的原始类型为 "7"，结果为 "71"
88+
89+
/**
90+
* => Boolean
91+
*/
92+
// 1. 转换场景
93+
// if(obj) //布尔比较
94+
// while(obj) //布尔比较
95+
96+
// 2. 转换规则
97+
// 只有以下为 false，其余为 true
98+
// undefined、null、-0、0、+0、NaN、''
99+
100+
// 3. 案例
101+
if(new Object() && [0] && [] && "0"){
102+
console.log("true");
103+
}else{
104+
console.log("false");
105+
}
106+
// true
107+
// 说明：对象一定为 true
108+
109+
110+
/**
111+
* "=="引起的类型转换
112+
*/
11113
// 1. 存在 NaN 必为 false
12114
// 2. 【null】 == 【undefined】 不转换，始终为 true
13115
// 3. 【null / undefined】 == 【其他非 null / undefined】 不转换，始终为 false
14116
// 4. 【原始类型 string / number / boolean】 == 【Date对象】 原始类型=>number，Date对象 --> toString() / valueOf()
15-
// 5. 【原始类型 string / number / boolean】 == 【非Date对象】 原始类型=>number，Date对象 --> valueOf() / toString()
117+
// 5. 【原始类型 string / number / boolean】 == 【非Date对象】 原始类型=>number，非Date对象 --> valueOf() / toString()
16118
// 6. 【原始类型 string / number / boolean】 == 【原始类型 string / number / boolean】 原始类型 => number
17119

18120
console.log(NaN == NaN);//false
19121
console.log("sunshine" == NaN);//false 存在 NaN 必为 false
20122
console.log(1 == true);//true true => 1
21123
console.log(true == "sun");//false true => 1 "sun" => NaN
124+
console.log("" == false);//true
22125

23126
var a = [0];
24127
if(a){
@@ -84,7 +187,7 @@
84187
console.log(parseInt(str2));
85188
console.log(parseFloat(str2));
86189
console.log(Number(str3));
87-
190+
console.log(Number("")); // 0
88191

89192
</script>
90193
</body>

‎2 常用操作/03-Array.html

+17
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,23 @@
172172
* 定义 [[],[],[]]
173173
* 访问 [][]
174174
*/
175+
176+
/**
177+
* (六) 是否改变原数组总结
178+
*/
179+
// 【改变】：
180+
// pop：删除最后一个并返回，改变原数组
181+
// push：向数组末尾添加元素，并返回新的长度，改变原数组
182+
// shift：将第一个元素删除并且返回，空即为undefined，改变原数组
183+
// unshift：向数组开头添加元素，并返回新的长度，改变原数组
184+
// reverse：颠倒数组顺序，改变原数组
185+
// splice:splice(start,length,item)新增删除替换数组元素，返回被删除数组，无删除则不返回，改变原数组
186+
// sort：对数组排序，改变原数组
187+
// 【不变】：
188+
// concat：连接多个数组，返回新的数组，不改变原数组
189+
// join：将数组中所有元素以参数作为分隔符放入一个字符串，不改变原数组
190+
// slice：slice(start,end)，返回选定元素，不改变原数组
191+
175192
</script>
176193

177194
</body>

‎2 常用操作/08-正则表达式.html

+5
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@
3636
document.write(line+"<br/>");//sun jian feng
3737
}
3838
console.log(reg.exec(str));// ["sun", index: 0, input: "sun jian feng sunshine studio"]
39+
//compile() 在脚本执行过程中编译正则表达式
40+
reg=/abc/g;
41+
reg.compile(reg);
42+
43+
// 【字符串方法】
3944
// match() 根据正则表达式去查找字符串符合规则的内容，返回数组，没有匹配项返回null
4045
console.log(str.match(reg));// ["sun", "jian", "feng"]
4146
// replace()

‎2 常用操作/09-事件.html

+19
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<body>
2222
<div id="box" onclick="fn()"></div>
2323
<button>事件监听</button>
24+
<a href="http://www.csxiaoyao.com">链接</a>
2425
<script>
2526

2627
//1.【获取事件源】（document.getElementById("box")）
@@ -121,6 +122,24 @@
121122
EventListen.addEvent(btn,fn2,"mouseout");
122123
EventListen.removeEvent(btn,fn2,"mouseout");
123124

125+
/**
126+
* stopPropagation() preventDefault()
127+
*/
128+
document.onclick = function(){
129+
alert("冒泡事件");
130+
}
131+
document.getElementsByTagName("a")[0].onclick = function(e){
132+
alert('链接地址：' + this.href + ',但不跳转');
133+
stopDefault(e);// 阻止默认事件 e.preventDefault() 的兼容写法
134+
e.stopPropagation();// 阻止冒泡
135+
}
136+
function stopDefault( e ) {
137+
if ( e && e.preventDefault )
138+
e.preventDefault();
139+
else
140+
window.event.returnValue = false;
141+
return false;
142+
}
124143
</script>
125144
</body>
126145
</html>

‎5 进阶/02-JavaScript数据类型.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<body>
88
ECMAScript标准定义了7种数据类型
99

10-
6种基本数据类型
10+
6种基本数据类型（除String，占 8 bytes）
1111
Boolean 可以有两个值:true、false
1212
Null 只有一个值:null
1313
Undefined 一个没有被赋值的变量会有个默认值 undefined

‎5 进阶/59-柯里化.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
</head>
6+
<body>
7+
<script>
8+
9+
// 实现一个函数，运算结果满足如下预期结果：
10+
// add(1)(2) // 3
11+
// add(1, 2, 3)(10) // 16
12+
// add(1)(2)(3)(4)(5) // 15
13+
14+
15+
function add() {
16+
// 第一次执行时，定义一个数组专门用来存储所有的参数
17+
var _args = [].slice.call(arguments);
18+
// 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
19+
var adder = function () {
20+
var _adder = function() {
21+
[].push.apply(_args, [].slice.call(arguments));
22+
return _adder;
23+
};
24+
// 利用隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
25+
_adder.toString = function () {
26+
return _args.reduce(function (a, b) {
27+
return a + b;
28+
});
29+
}
30+
return _adder;
31+
}
32+
return adder.apply(null, [].slice.call(arguments));
33+
}
34+
// 输出结果，可自由组合的参数
35+
// console.log(add(1, 2, 3, 4, 5)); // 15
36+
// console.log(add(1, 2, 3, 4)(5)); // 15
37+
// console.log(add(1)(2)(3)(4)(5)); // 15
38+
39+
40+
function add () {
41+
console.log('进入add');
42+
var args = Array.prototype.slice.call(arguments);
43+
var fn = function () {
44+
console.log('调用fn');
45+
var arg_fn = Array.prototype.slice.call(arguments);
46+
return add.apply(null, args.concat(arg_fn));
47+
}
48+
fn.valueOf = function () {
49+
console.log('调用valueOf');
50+
return args.reduce(function(a, b) {
51+
return a + b;
52+
})
53+
}
54+
return fn;
55+
}
56+
console.log(add(1)(2,3));// 进入add 调用fn 进入add 6 调用valueOf
57+
console.log(add(1)(2)(3));// 进入add 调用fn 进入add 调用fn 进入add 6 调用valueOf
58+
59+
// 每次循环合并参数，递归调用本身返回 fn 函数，最后一次调用 valueOf，利用 reduce 对所有参数求和
60+
// apply 第一个参数为 null/undefined，指向 window
61+
// 此处也可改写 toString()
62+
// 如果只改写 valueOf() 或 toString() 中一个，会优先调用被改写了的方法
63+
// 如果两个同时改写，遵循 Number 类型转换规则，优先查询 valueOf() 方法
64+
65+
66+
</script>
67+
</body>
68+
</html>

0 commit comments

Comments
 (0)