Skip to content

Commit 1601a19

Browse files
muzhidongmuzhidong
committed
docs: 更新
1 parent 96503e2 commit 1601a19

File tree

3 files changed

+138
-125
lines changed

3 files changed

+138
-125
lines changed

‎src/javascript/ES6中篇.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,100 @@ tags:
5252
// padEnd(minLen, fillStr) 对字符串设置最小长度，超出则后补位
5353
```
5454

55+
## 模板字符串
56+
### 概念
57+
允许嵌入表达式的字符串字面量。在ES6之后又叫模板字面量。
58+
59+
### 特点
60+
- 使用反引号``
61+
- 嵌入的表达式使用${}标识
62+
- 识别换行
63+
- 使用转义字符时前面加反斜杠\
64+
- 允许模板字符串中的表达式嵌入另一个模板字符串，如`This is a ${isPen ? 'pen': `pig,sorry,${friend},you should be harder!`}`
65+
66+
### 标签模板
67+
- 概念：模板字符串前带有一个表达式，该表达式通常是一个函数
68+
- 特点
69+
- 标签函数是在模板字符串处理后被调用
70+
- 函数首个参数是包含所有普通字符串的数组对象，并额外有一个属性raw，值是一个数组，用于获取原始字符串，即不对模板字符串使用转义，跟String.raw函数是一样的效果
71+
- 函数剩余参数表示模板字符串中的出现的每一个表达式结果
72+
- 函数返回值可以是一个字符串，一个函数，一个对象
73+
- ES2016起，标签模板需遵守该转义规则：Unicode字符以"\u"开头，Unicode码位用"\u{}"表示，16进制以"\x"开头，8进制以"\"和数字开头
74+
```js
75+
// unicode字符在模板字符串的表示
76+
// `\u{55}`.length // 1
77+
// (/./).test(`\u{55}`) // true
78+
// `\u{2028}`.length // 1
79+
// (/./).test(`\u{2028}`) // false，从2028开始占位为2
80+
// `\u${55}`.length // Uncaught SyntaxError: Invalid Unicode escape sequence
81+
```
82+
- 唯一一个内置的模板字符串标签函数`String.raw`
83+
84+
用于获取字符串的原始字面量值。可以保证如\u开头(表示unicode字符)，\u{}(表示Unicode码位)，\x开头(表示16进制)，\数字开头(表示8进制)等不被转义
85+
```javascript
86+
console.log(`aaaa\unicode`) // Uncaught SyntaxError: Invalid Unicode escape sequence
87+
console.log(String.raw`aaaa\unicode`); // 'aaaa\\unicode'
88+
```
89+
90+
- 示例
91+
```js
92+
// 例1 标签函数返回对象
93+
function template1(strings) {
94+
// 0: undefined
95+
// length: 1
96+
// raw: ['\\unicode']
97+
return {
98+
"template": strings[0],
99+
"normal": strings.row[0]
100+
};
101+
}
102+
console.log(template1`\unicode`);// { template: undefined, normal: "\\unicode" }
103+
104+
// 例2 标签函数返回字符串
105+
function bar(arr1, arr2) {
106+
console.log('params:', arr1, arr2)
107+
return arr1.join('')
108+
}
109+
console.log(bar`just${'123'}javac`)
110+
111+
// 例3 标签函数返回字符串
112+
function foo(str) {
113+
return str[0].toUpperCase()
114+
}
115+
console.log(foo`justjavac`)
116+
117+
// 例4 标签函数返回字符串
118+
var name = "benben";
119+
var age = 18;
120+
function template2(strings,nameExp, ageExp) {
121+
var ageStr;
122+
if(ageExp > 100) {
123+
ageStr = "centenarian";
124+
} else {
125+
ageStr = "youngster";
126+
}
127+
return strings[0] + nameExp + strings[1] + ageStr;
128+
}
129+
console.log(template2`That ${name} is a ${age}`);
130+
131+
// 例5 标签函数返回函数
132+
function template3(strings,...keys){
133+
return function(...values) {
134+
var dict = values[values.length - 1] || {};
135+
var result = [strings[0]];
136+
keys.foreach((key, i) => {
137+
var val = Number.isInteger(key)? values[key] : dict[key];
138+
result.push(val, strings[i + 1]);
139+
})
140+
return result.join("");
141+
}
142+
}
143+
var t1 = template3`${0}${1}${0}!`;
144+
console.log(t1("Yes" ,"No")); // "YesNoYes!"
145+
var t2 = template3`${0} ${'foo'}!`;
146+
console.log(t2("Hello", { "foo": "World" })); // "Hello World!"
147+
```
148+
55149
## 数组扩展
56150
- 改变数组的方法
57151

‎src/javascript/JavaScript基础篇.md‎

Lines changed: 42 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ console.log(c.red + " " + c[5]); // 5 red
270270
- 宿主对象：宿主环境如果是浏览器，则宿主对象是指由浏览器定义的对象，包括window和document
271271

272272
## Global
273-
- 属性
273+
- 常量
274274

275275
Infinity
276276

@@ -434,11 +434,11 @@ console.log(c.red + " " + c[5]); // 5 red
434434
> 对象存储始终使用哈希表存储，且需额外处理原型链查找，访问速度较慢
435435
436436
## String
437-
- 属性
437+
- 实例属性
438438

439439
length：字符串长度
440440

441-
- 方法
441+
- 实例方法
442442

443443
1、获取
444444

@@ -498,24 +498,28 @@ console.log(c.red + " " + c[5]); // 5 red
498498
```
499499

500500
## Array
501-
- 特点：
501+
- 特点
502502

503503
长度可变(根据元素操作而变化或修改length属性)
504504

505505
元素类型任意
506506

507507
元素密集且类型一致则使用连续缓冲区存储（V8还会根据元素类型再细分，如整数、浮点数、引用对象），适合查询；元素稀疏或类型不一致则使用哈希表存储，适合增删。使用哈希存储，查询元素时需要计算哈希值，处理冲突，效率比连续缓冲区慢。使用顺序存储，新增元素时会检查空间是否足够，不够则扩容，而使用哈希存储无需扩容，直接新增索引-值对
508508

509-
- 创建
509+
- 创建方式
510510
```js
511-
var arr=[]; // 数组长度为0
512-
var arr=[1, 2, 3, 3]; // 数组长度为4，元素为1,2,2,3
513-
var arr=new Array(); // 相当于var arr=[];
514-
var arr=new Array(5); // 数组长度为5
515-
var arr=new Array(5,6,7); // 数组长度为3，元素为5,6,7
511+
var arr = []; // 数组长度为0
512+
var arr = [1, 2, 3, 3]; // 数组长度为4，元素为1,2,2,3
513+
var arr = new Array(); // 相当于var arr=[];
514+
var arr = new Array(5); // 数组长度为5
515+
var arr = new Array(5,6,7); // 数组长度为3，元素为5,6,7
516516
```
517517

518-
- 属性
518+
- 静态方法
519+
520+
Array.isArray(obj)：判断对象是否是数组。若是则为true，否则为false
521+
522+
- 实例属性
519523

520524
length：数组长度，支持修改。默认数组长度 = max(initialLength, validValueMaxIndex + 1)
521525
```js
@@ -533,7 +537,7 @@ console.log(c.red + " " + c[5]); // 5 red
533537
console.log(arr2, arr2.length) // [ <100 empty items>, 1 ] 101
534538
```
535539

536-
- 方法
540+
- 实例方法
537541

538542
1、改变数组（排序、增删改）
539543

@@ -560,10 +564,6 @@ console.log(c.red + " " + c[5]); // 5 red
560564

561565
join(separator)：把数组中的所有元素转换为一个字符串，需指定元素之间的分隔符
562566

563-
3、静态方法（判断是否为数组）
564-
565-
Array.isArray(obj)：判断对象是否是数组。若是则为true，否则为false
566-
567567
- 其他
568568
```js
569569
// in判断数组元素在某个位置是否有值
@@ -574,27 +574,28 @@ console.log(c.red + " " + c[5]); // 5 red
574574

575575
// 类数组可通过call或apply调用数组原生方法
576576
console.log(Array.prototype.join.call({0: 'name', 1: 'age', 2: 'sex', length: 3}, '*'))
577-
578577
```
579578

580579
## Date
581580
- 函数调用
582581

583-
Date()：返回日期时间字符串，相当于调用了toString()
582+
Date()：返回日期时间字符串，相当于调用`new Date().toString()`
584583

585-
- 构造函数
584+
- 创建方式
586585

587586
new Date()
588587

589588
new Date(时间戳)
590589

591-
new Date(日期时间字符串)，该时间字符串能被Date.parse识别
590+
new Date(日期时间字符串)，该时间字符串要能被Date.parse识别
592591

593592
new Date(y, m[, d][, h][, m][, ms])
594593

595-
- 方法
594+
- 静态方法
596595

597-
Date.parse(datestr)：解析日期时间字符串，返回毫秒数
596+
Date.parse(dateStr)：解析日期时间字符串，返回毫秒数
597+
598+
- 实例方法
598599

599600
getDay()：获取一周的某一天[0-6]
600601

@@ -603,16 +604,24 @@ console.log(c.red + " " + c[5]); // 5 red
603604
g[s]etFullYear([year][,month][,day])：获取或设置当前年份
604605

605606
g[s]etMonth(month[,day])：获取或设置当前月份
607+
608+
g[s]etDate(day)：获取或设置当前日期
606609

607-
g[s]etDate(day)：获取或设置一个月中的某一天
610+
g[s]etHours(hour)：获取或设置当前小时
611+
612+
g[s]etMinutes(minute)：获取或设置当前分钟
613+
614+
g[s]etSeconds(second)：获取或设置当前秒
615+
616+
g[s]etMilliseconds(millisecond)：获取或设置当前毫秒
608617

609618
toLocaleString()：将日期时间转化为本地格式化字符串
610619

611620
toLocaleDateString()
612621

613622
toLocaleTimeString()
614623

615-
g[s]etUTCXXX()：除了参照本地客户端时间，也提供了参照UTC时间。获取或设置格林威治时间，XXX表示fullYear/month/date/hours/minutes/seconds/millseconds任意一个
624+
g[s]etUTCXXX()：除了参照本地客户端时间，也提供了参照UTC时间。获取或设置格林威治时间，XXX表示fullYear/month/date/day/hours/minutes/seconds/milliseconds任意一个
616625

617626
toString()
618627

@@ -676,7 +685,7 @@ console.log(c.red + " " + c[5]); // 5 red
676685

677686
MIN_VALUE：最小数值
678687

679-
- 方法
688+
- 实例方法
680689

681690
toExponential(digits)：指定小数点后的数字位数，返回指数形式表示数字字符串
682691

@@ -729,7 +738,7 @@ console.log(regExp.lastIndex); //2
729738
// 解决办法：每次调用前重新分配一个正则对象
730739
```
731740

732-
- JS中正则表达式书写方式
741+
- 正则表达式书写方式
733742

734743
JS风格：new RegExp(正则字符串, 修饰符);
735744

@@ -894,7 +903,10 @@ const chineseRegex = /^[\u4e00-\u9fa5]*$/;
894903
- 函数调用作为表达式，如`var f = 函数名();`，赋值函数结果，而`var f = 函数名;`是将函数引用赋值给f
895904

896905
### 函数参数
897-
形参与实参个数可以不一致，但是顺序必须一致
906+
- 形参与实参个数可以不一致，但是顺序必须一致
907+
- arguments表示存储函数参数的类数组对象，是所有非箭头函数的局部变量
908+
909+
所谓类数组对象，即只有length和callee(指向当前执行的函数)属性，以及键是从0开始的整数索引，并不具有数组其他属性和方法。无论是否在严格模式下，只要函数使用了剩余参数、默认参数或解构赋值当中的一种时，函数就不会改变arguments对象的行为，但若在非严格模式下函数没有使用剩余参数、默认参数或解构赋值时，修改arguments对象某个属性值，则会改变arguments对象的行为
898910

899911
### 函数返回值
900912
默认是undefined
@@ -905,13 +917,12 @@ const chineseRegex = /^[\u4e00-\u9fa5]*$/;
905917
- 3.函数调用时没有指明this，一般默认是当前的宿主对象
906918

907919
### 属性
908-
- prototype：原型对象
920+
- name：函数名
909921
- length：函数声明的参数个数
910-
- arguments：存储函数参数的类数组对象。是所有非箭头函数的局部变量。所谓类数组对象，即只有length和callee(指向当前执行的函数)属性，以及键是从0开始的整数索引，并不具有数组其他属性和方法。无论是否在严格模式下，只要函数使用了剩余参数、默认参数或解构赋值当中的一种时，函数就不会改变arguments对象的行为，但若在非严格模式下函数没有使用剩余参数、默认参数或解构赋值时，修改arguments对象某个属性值，则会改变arguments对象的行为
911922

912923
### 方法
913-
- apply(context,argsArr)：改变函数的this指向，传入上下文对象和参数数组，且立即执行
914-
- call(context,...args)：改变函数的this指向，传入上下文对象和不定参数，且立即执行
924+
- apply(context, argsArr)：改变函数的this指向，传入上下文对象和参数数组，且立即执行
925+
- call(context, ...args)：改变函数的this指向，传入上下文对象和不定参数，且立即执行
915926
- bind(context)：改变函数的this指向，传入上下文对象，不执行
916927

917928
```js
@@ -945,100 +956,6 @@ const chineseRegex = /^[\u4e00-\u9fa5]*$/;
945956
addOne(2); // 3
946957
```
947958

948-
## 模板字符串
949-
### 概念
950-
允许嵌入表达式的字符串字面量。在ES6之后又叫模板字面量。
951-
952-
### 特点
953-
- 使用反引号``
954-
- 嵌入的表达式使用${}标识
955-
- 识别换行
956-
- 使用转义字符时前面加反斜杠\
957-
- 允许模板字符串中的表达式嵌入另一个模板字符串，如`This is a ${isPen ? 'pen': `pig,sorry,${friend},you should be harder!`}`
958-
959-
### 标签模板
960-
- 概念：模板字符串前带有一个表达式，该表达式通常是一个函数
961-
- 特点
962-
- 标签函数是在模板字符串处理后被调用
963-
- 函数首个参数是包含所有普通字符串的数组对象，并额外有一个属性raw，值是一个数组，用于获取原始字符串，即不对模板字符串使用转义，跟String.raw函数是一样的效果
964-
- 函数剩余参数表示模板字符串中的出现的每一个表达式结果
965-
- 函数返回值可以是一个字符串，一个函数，一个对象
966-
- ES2016起，标签模板需遵守该转义规则：Unicode字符以"\u"开头，Unicode码位用"\u{}"表示，16进制以"\x"开头，8进制以"\"和数字开头
967-
```js
968-
// unicode字符在模板字符串的表示
969-
// `\u{55}`.length // 1
970-
// (/./).test(`\u{55}`) // true
971-
// `\u{2028}`.length // 1
972-
// (/./).test(`\u{2028}`) // false，从2028开始占位为2
973-
// `\u${55}`.length // Uncaught SyntaxError: Invalid Unicode escape sequence
974-
```
975-
- 唯一一个内置的模板字符串标签函数`String.raw`
976-
977-
用于获取字符串的原始字面量值。可以保证如\u开头(表示unicode字符)，\u{}(表示Unicode码位)，\x开头(表示16进制)，\数字开头(表示8进制)等不被转义
978-
```javascript
979-
console.log(`aaaa\unicode`) // Uncaught SyntaxError: Invalid Unicode escape sequence
980-
console.log(String.raw`aaaa\unicode`); // 'aaaa\\unicode'
981-
```
982-
983-
- 示例
984-
```js
985-
// 1 标签函数返回对象
986-
function template1(strings) {
987-
// 0: undefined
988-
// length: 1
989-
// raw: ['\\unicode']
990-
return {
991-
"template": strings[0],
992-
"normal": strings.row[0]
993-
};
994-
}
995-
console.log(template1`\unicode`);// { template: undefined, normal: "\\unicode" }
996-
997-
// 2 标签函数返回字符串
998-
function bar(arr1, arr2) {
999-
console.log('params:', arr1, arr2)
1000-
return arr1.join('')
1001-
}
1002-
console.log(bar`just${'123'}javac`)
1003-
1004-
// 3 标签函数返回字符串
1005-
function foo(str) {
1006-
return str[0].toUpperCase()
1007-
}
1008-
console.log(foo`justjavac`)
1009-
1010-
// 4 标签函数返回字符串
1011-
var name = "benben";
1012-
var age = 18;
1013-
function template2(strings,nameExp, ageExp) {
1014-
var ageStr;
1015-
if(ageExp > 100) {
1016-
ageStr = "centenarian";
1017-
} else {
1018-
ageStr = "youngster";
1019-
}
1020-
return strings[0] + nameExp + strings[1] + ageStr;
1021-
}
1022-
console.log(template2`That ${name} is a ${age}`);
1023-
1024-
// 5 标签函数返回函数
1025-
function template3(strings,...keys){
1026-
return function(...values) {
1027-
var dict = values[values.length - 1] || {};
1028-
var result = [strings[0]];
1029-
keys.foreach((key, i) => {
1030-
var val = Number.isInteger(key)? values[key] : dict[key];
1031-
result.push(val, strings[i + 1]);
1032-
})
1033-
return result.join("");
1034-
}
1035-
}
1036-
var t1 = template3`${0}${1}${0}!`;
1037-
console.log(t1("Yes" ,"No")); // "YesNoYes!"
1038-
var t2 = template3`${0} ${'foo'}!`;
1039-
console.log(t2("Hello", { "foo": "World" })); // "Hello World!"
1040-
```
1041-
1042959
## 代码运行过程
1043960
涵盖执行上下文、this指向、作用域链、闭包等内容
1044961

‎src/javascript/函数式编程篇.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,5 +220,7 @@ Result.of = function(ok, err) {
220220
```
221221

222222
## 一类函数
223+
<!-- TODO: -->
223224

224225
## Lambda函数
226+
<!-- TODO: -->

0 commit comments

Comments
 (0)