前端
1 变量的命名规范
- 变量名只能由字母，数字，下划线 和 $ 组成；
- 区分大小写；
- 变量名不能以数字开头，允许以"_“或”$"开头；
- 推荐使用驼峰命名方式；
- 不能与关键字相冲突。
2 数值类型 number
2.1 动态类型语言
Javascript与Python都属于动态类型语言。
区分静态类型与动态类型，重点是确定数据类型的时机。
静态类型：在运行之前就确定数据类型，例如Java在编译阶段；
动态类型：在运行的时候才确定数据类型。
2.2 数字类型 number
数字类型包括整数和小数。
var a = 11;
var b = 11.11;
typeof(a); // "number"
typeof b; // "number"
2.3 NaN
NaN，Not a Number，代表非数字的特殊值。
一般用于说明某些运算的结果不是数字。
typeof(NaN); // number
isNaN(); // true
isNaN(12); // false
isNan('12.1') // false
isNaN('12'); // false
isNaN('12a'); // true
2.4 number类型转换
2.4.1 parseInt
parseInt() 解析一个字符串，返回一个十进制整数。
parseInt(string, radix)
string – 待解析的字符串；
radix – 可选，待解析的数字的基数，范围：2 - 36，默认基数是10。
只有字符串中的第一部分数字会被返回。
开头和结尾允许空格。
parseInt("10"); // 10
parseInt("10abc11"); // 10
parseInt(" 10abc "); // 10
parseInt("abc123"); // NaN
parseInt("111", 2); // 7 111是二进制数字
parseInt("0x111"); // 273 111是十六进制
parseInt("111", 16); // 273 111是十六进制
2.4.2 parseFloat
parseFloat() 解析一个字符串，返回一个浮点数。
只有字符串中的第一部分数字会被返回。
typeof(parseFloat('10.1')) // number
parseFloat('10.1'); // 10.1
parseFloat('10.0'); // 10
parseFloat(' 10.1 123 ') // 10.1
parseFloat('10.1 a123') // 10.1
parseFloat('a10.1') // NaN
parseFloat("3.14") // 3.14
parseFloat("314e-2") // 3.14
parseFloat("0.0314E+2") // 3.14
3 字符类型 string
3.1 string
var s = 'abc';
typeof(s) // string
typeof("123") // string
3.2 模板字符串
可以定义多行文本，
可以实现格式化输出，${ }。
var name = 'Elliot';
var age = 27;
var s = `
My name is ${name}, I am ${age} years old.
`; // My name is Elliot, I am 27 years old.
3.3 字符串拼接
Python中不推荐使用加号 + 进行字符串拼接，推荐使用函数join。
而Javascript中推荐使用加号 + 进行字符串拼接。
s1 = 'abc';
s2 = 'de';
s3 = s1 + s2; // "abcde"
3.4 常用方法
| Javascript | 作用 | 联想记忆 |
|---|---|---|
| string.length | 返回字符串长度 | [Python] len(string) |
| string.trim() | 去除字符串的头尾空格 | [Python] string.strip() 还可以指定带去除的字符 |
| string.trimLeft() | 去除字符串左侧空格 | [Python] string.lstrip() |
| string.trimRight) | 去除字符串右侧空格 | [Python] string.rstrip() |
| string.charAt(n)) | 返回第n个字符 | [Python] 索引取值 string[n] |
| string.indexOf(substring, start) | 返回子序列位置 | [Python] string.index() / string.find() |
| string.substring(start, end[可选]) | 切片 | [Python] string[start: end] |
| string.slice(start, end[可选])) (推荐) | 切片 | [Python] string[start: end] |
| arrayObj.concat(arrayX,arrayX,…,arrayX) | 用于将数组内的元素拼接成字符串，js是弱类型语言，会自动转换类型 | [Python] join(seq) seq内的元素必须是字符串类型 |
| string.split(separator, howmany) | 把一个字符串分割成字符串数组，只获取切割后的前howmany个元素 | [Python] string.split(separator, num) 最大切割次数为num |
| string.toLowerCase() | 切片 | [Python] string.lower() |
| string.toUpperCase() | 切片 | [Python] string.upper() |
substring与slice的区别
当接收的参数是负数时，slice会将它字符串的长度与对应的负数相加，结果作为参数；
substring不识别负数，将负数转换为0。
推荐使用slice。
s1 = 'abcde';
s1.substring(1, 3); // "bc"
s1.substring(3, 1); // "bc"
s1.substring(2, -1); // "ab" s1.substring(2, 0) => s1.substring(0, 2)
s1.slice(1, 3); // "bc"
s1.slice(3, 1); // ""
s1.slice(2, -1); // "cd" s1.slice(2, s1.length-1) => s1.slice(2, 4)
Python join函数
# join
s = '-'.join(['1', '2', '3'])
print(s) # 1-2-3
s = '-'.join([1, 2, 3]) # TypeError: sequence item 0: expected str instance, int found
Javascript concat函数
// concat
var a = [1, 2, 3]
a.concat('-'); // [1, 2, 3, "-"]
'-'.concat(a); // "-1,2,3"
Python split函数
a = 'a|b|c|d|e'.split('|', 2)
print(a) # ['a', 'b', 'c|d|e']
Javascript split函数
'a|b|c|d|e'.split('|', 2); // ["a", "b"]
4 布尔类型 boolean
true
false
typeof(true); boolean
布尔值是false的包括：
false、0、NaN、空字符串、null、undefined
5 null与undefined
5.1 null
null用来表示尚未存在的对象，一般用于指定或清空一个变量。
5.2 undefined
- 当变量声明后还未被初始化时，变量的默认值为undefined；
- 调用函数时，应该提供的参数没有提供时，该参数为undefined；
- 对象没有赋值的属性，该属性的值为undefined；
- 函数没有返回值时，会默认返回undefined。
5.3 判断 null undefined NaN
- 判断 null
var tmp = null;
if (!tmp && typeof(tmp) != "undefined" && tmp != 0) {
console.log("null");
}
// typeof 返回的类型是字符串，包括 "number"、"string"、"boolean"、"object"、"function"、"undefined"。
- 判断 undefined
var tmp = undefined;
if (typeof(tmp) == "undefined") {
console.log("undefined");
}
- 判断 NaN
var tmp = 0 / 0;
if (isNaN(tmp)) {
console.log("NaN");
}
// NaN 与任何值相比得到的结果均是false，因此不能使用 == 或 === 判断NaN。
- 判断 null 和 undefined
var tmp = undefined;
if (tmp == undefined) {
console.log("null or undefined");
}
var tmp = undefined;
if (tmp == null) {
console.log("null or undefined");
}
// null == undefined
- 判断 null、undefined 和 NaN
var tmp = null;
if (!tmp) {
console.log("null or undefined or NaN");
}
6 对象
Javascript是一门面向对象的编程语言，即Javascript中一切皆对象。
数组，类似于Python中的列表，中括号 [ ]；
自定义对象，类似于Python中的字典，大括号 { }。
var l = [11, "abc", true, [1, 2, 3]];
typeof(l); // "object"
6.1 数组长度
l.length; // 4
6.2 索引取值
支持索引取值，但不支持负数索引
l[0]; // 11
l[-1]; // undefined
6.3 操作元素（添加，获取，移除）
尾部追加元素 push
l.push(666); // 5
l; // (5) [11, "abc", true, Array(3), 666]
获取尾部元素
l[l.length - 1]; // 666
获取并移除尾部元素
l.pop(); // 666
l; // (4) [11, "abc", true, Array(3)]
添加头部元素
l.unshift(123); // 5
获取并移除头部元素
l.shift(); // 123
l; // (4) [11, "abc", true, Array(3)]
在特定位置对数组添加/删除项目，返回被删除的项目。
arrayObj.splice(index, howmany, item1, …, itemX)
index
index - 添加/删除项目的位置，支持负数；
howmany - 要删除的项目数量。如果设置为 0，则不会删除项目；
item1, …, itemX - 可选，向数组添加的新项目。
l1 = [1, 2, 3, 4, 5, 6];
l1.splice(3, 2); // [4, 5]
l1; // [1, 2, 3, 6]
l2 = [1, 2, 3, 4, 5, 6];
l2.splice(3, 2, 7, 8, 9); // [4, 5]
l2; // [1, 2, 3, 7, 8, 9, 6]
回顾：Python操作元素
append 尾部追加
extend 扩展列表，内部相当于 for循环 + append
insert 在指定位置插入元素
pop(index)
remove(item)
del 通用删除
6.4 切片
slice(start, end)
l.slice(1, 3);
(2) ["abc", true]
6.5 反转
reverse()
l.reverse(); // (4) [Array(3), true, "abc", 11]
6.6 拼接
拼接成字符串
join(seq)
l; // (4) [Array(3), true, "abc", 11]
l.join('-'); // ",,-true-abc-11"
使用方法与Python的join方法相似。
6.7 连接
concat
连接字符串
'-'.concat([1, 2, 3]); // "-1,2,3"
连接数组，不影响原数组
l.concat([1, 2, 3]); // (7) [Array(3), true, "abc", 11, 1, 2, 3]
l; // (4) [Array(3), true, "abc", 11]
6.8 排序
sort
[2, true, NaN, 20, undefined, false, null, 4, '3'].sort();
// (8) [2, 20, "3", 4, NaN, false, null, true, undefined]
function sortNumber(a,b) {
return a - b
}
[2, 20, 200, 3, 30, 4, 5].sort(); // (7) [2, 20, 200, 3, 30, 4, 5]
[2, 20, 200, 3, 30, 4, 5].sort(sortNumber); // (7) [2, 3, 4, 5, 20, 30, 200]
6.9 forEach
forEach函数会使数组中每个元素调用的函数，将元素值传递给回调函数。
对于空数组，forEach不会执行回调函数。
array.forEach(function(currentValue, index, arr), thisValue)
currentValue - 当前元素；
index - 可选，当前元素的索引值；
arr - 可选，当前元素所属的数组；
thisValue - 可选，传递给函数的值一般用 “this” 值，如果该参数为空， “undefined” 会传递给 “this” 值。
var arr = [1, 2, 3];
arr.forEach(function(item, index, input) {
console.log(item); // 1, 2, 3
console.log(index); // 0, 1, 2
console.log(input); // [1, 2, 3], [10, 2, 3], [10, 20, 3]
input[index] = item * 10;
})
console.log(arr); // (3) [10, 20, 30]
6.10 map
map函数返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
按照原始数组元素顺序依次处理元素。
map函数不会对空数组进行检测。
var arr = [1, 4, 9, 16];
var new_arr = arr.map(x => x * 2);
console.log(new_arr); // (4) [2, 8, 18, 32]
res = arr.map(function(item, index, input) {
console.log(item); // 1, 4, 9, 16
console.log(index); // 0, 1, 2, 3
console.log(input); // [1, 4, 9, 16], [10, 4, 9, 16], [10, 40, 9, 16], [10, 40, 90, 16]
input[index] = item * 10; // 类似forEach
return item * 100
})
console.log(arr); // [10, 40, 90, 160]
console.log(res); // [100, 400, 900, 1600]
7 运算符
算数运算符
var x = 10;
var x1 = x++;
var x2 = ++x;
console.log(x1); // 10
console.log(x2); // 12
比较运算符
1 == "1" // true 弱等于，内部自动进行类型转换。
1 === "1" // false 强等于
1 != "1" // false
1 !== "1" // true
逻辑运算符
&& // 与
|| // 或
! // 非
5 && "5" // "5"
!5 && "5" // false
0 || 1 // 1
赋值运算符
=
+= -= ...
8 流程控制
8.1 if else语句
if (条件1) {
条件1为 true 时执行的代码
} else if (条件 2) {
条件1为 false 条件2为 true 时执行的代码
} else {
条件全为 false 时执行的代码
}
8.2 switch语句
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
break关键词用于跳出switch代码块，阻止代码自动地向下一个case运行。
case的代码块中如果没有使用break，匹配到其中一个case后，会执行其后面所有的代码。
switch (new Date().getDay()) {
case 6:
text = "今天是周六";
break;
case 0:
text = "今天是周日";
break;
default:
text = "期待周末~";
}
案例：将当前日期按“2017-12-27 11:11 星期三”格式输出。
const WEEKMAP = {
0:"星期天",
1:"星期一",
2:"星期二",
3:"星期三",
4:"星期四",
5:"星期五",
6:"星期六"
}; //定义一个数字与星期的对应关系对象
function showTime() {
var d1 = new Date();
var year = d1.getFullYear();
var month = d1.getMonth() + 1; // 月份：0~11
var day = d1.getDate();
var hour = d1.getHours();
var minute = d1.getMinutes() < 10 ? "0" + d1.getMinutes() : d1.getMinutes();
var week = WEEKMAP[d1.getDay()]; // 星期：0~6
var strTime = `${year}-${month}-${day} ${hour}:${minute} ${week}`;
console.log(strTime);
};
showTime();
8.3 for 循环
for (语句 1; 语句 2; 语句 3) {
要执行的代码块
}
语句 1 在循环开始之前执行；
语句 2 定义运行循环的条件，每次执行循环前做判断；
语句 3 会在循环每次被执行后执行。
for (let i = 0, text = ""; i < cars.length; i++) {
text += cars[i] + "<br>";
}
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
8.4 while 循环
while (条件) {
要执行的代码块
}
8.5 三元运算符
// Python中的三元运算符：res = 1 if 1 > 2 else 3
// JS中三元运算符
res = 1 > 2 ? 1 : 3
9 函数
9.1 函数
function funcName(形参1， 形参2...) {
要执行的代码
}
// 调用
funcName(实参1， 实参2...)
调用时传入的实参多于定义的形参，不会报错。
调用时传入的实参少于定义的形参，也不会报错，缺少的用undefined代替。
返回值有多个时，只返回最后一个。
function f1(arg1, arg2) {
console.log(arguments); // 能够获取函数接收的所有参数。
console.log(typeof(arguments));
if(arguments.length != 2) {
console.log("参数数量错误。");
}
return 1, 2, 3 // 返回值有多个时，只返回最后一个。
}
res1 = f1(1, 2, 3); // 3
res2 = f1(1); // 3
res3 = f1(1, 2); // 3
9.2 匿名函数
function() {
console.log("匿名函数");
}
9.3 箭头函数
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 相当于
(param1, param2, …, paramN) => { return expression; }
// 加括号的函数体返回对象字面量表达式。
params => ({foo: bar})
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6
9.4 全局变量与局部变量
在函数的定义阶段查找变量。
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); // "ShenZhen"
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // "BeiJing"
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret(); // "ShangHai"
10 自定义对象
Javascript的自定义对象相当于Python中是字典。
10.1 创建自定义对象
使用大括号创建自定义对象
var d1 = {'name': 'Ben', 'age': 18};
typeof(d1); // "object"
d1['name']; // "Ben"
d1.name; // "Ben"
for(let i in d1) {
console.log(i, d1[i]); // 这里使用d1.i会返回undefined
}
// name Ben
// age 18
使用关键字new创建自定义对象
var d2 = new Object();
d2.name = 'Elliot';
d2['age'] = 20;
11 内置对象
11.1 Date对象
var d1 = new Date(); // 结构化时间（供程序使用）
console.log(d1); // Sun May 17 2020 18:40:41 GMT+0800 (中国标准时间)
// 转化为格式化时间（用于使用者查看）
d1.toLocaleString(); // "2020/5/17 下午6:40:41"
var d2 = new Date('2011/11/11 11:11:11');
d2.toLocaleString(); // "2011/11/11 上午11:11:11"
var d3 = new Date(2011, 11, 11, 11, 11, 11);
d3.toLocaleString(); // "2011/12/11 上午11:11:11" 月份从0开始 0-11月
时间对象方法
let d4 = new Date();
d4.getDate(); // 17 获取日
d4.getDay(); // 0 获取星期(0-6)
d4.getMonth(); // 4 获取月份(0-11)
d4.getFullYear(); // 2020 获取完整的年份
d4.getHours(); // 20 获取小时
d4.getMinutes(); // 1 获取分钟
d4.getSeconds(); // 48 获取秒
d4.getMilliseconds(); // 578 获取毫秒
d4.getTime(); // 1589716908578 时间戳(毫秒数)
11.2 JSON对象
python中的序列化反序列化操作
dumps # 序列化
loads # 反序列化
'''
+---------------+-------------------+
| JSON | Python |
+===============+===================+
| object | dict |
+---------------+-------------------+
| array | list |
+---------------+-------------------+
| string | str |
+---------------+-------------------+
| number (int) | int |
+---------------+-------------------+
| number (real) | float |
+---------------+-------------------+
| true | True |
+---------------+-------------------+
| false | False |
+---------------+-------------------+
| null | None |
+---------------+-------------------+
'''
Javascript中的序列化反序列化操作
JSON.stringify(); // 序列化
JSON.parse(); // 反序列化
var d = {'name': 'Ben', 'age': 18};
var res1 = JSON.stringify(d);
console.log(res1); // "{"name":"Ben","age":18}"
var res2 = JSON.parse(res1);
console.log(res2); // {name: "Ben", age: 18}
11.3 RegExp对象
/正则表达式主体/修饰符(可选)
- Javascript中使用正则需要先创建正则对象。
创建正则对象的两种方式。
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}');
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/;
- 匹配内容
reg1.test('abc1234567890bcd') // true
reg2.test('abc1234567890bcd') // true
案例：获取字符串里面所有的字母o
let s = "If you cannot beat them, join them!";
// 只匹配一个
s.match(/o/); // ["o", index: 4, input: "If you cannot beat them, join them!", groups: undefined]
// 全局匹配
s.match(/o/g); // ["o", "o", "o"]
注意1 全局匹配的lastIndex属性
var reg3 = /^[a-zA-Z][a-zA-Z0-9]{2,4}/g;
var s = "abcde";
reg3.test(s); // true
console.log(reg3.lastIndex); // 5
reg3.test(s); // false
console.log(reg3.lastIndex); // 0
reg3.test(s); // true
console.log(reg3.lastIndex); // 5
reg3.test(s); // false
console.log(reg3.lastIndex); // 0
全局模式有一个lastIndex属性。
如果匹配模式中带有g修饰符，这个属性存储在整个字符串中下一次检索的开始位置，这个属性会被方法 exec 和 test 使用。
当同一个正则表达式第二次调用函数 exec / test，它会将从lastIndex属性所指示的字符串处开始检索。如果没有发现任何匹配结果，lastIndex会重置为0。
注意2
什么都不传，默认传的是undefined。
var reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test(); // true
reg4.test(undefined); // true
var reg5 = /undefined/;
reg5.test(undefined); // true
reg5.test("undefined"); // true
reg5.test("unde123fined"); // false
reg5.test(); // true 证明默认传的是undefined。
11.4 Math对象
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
12 知识回顾
12.1 进制转换
二进制转换成十进制：v = "0b1111011"
十进制转换成二进制：v = 18
八进制转换成十进制：v = "011"
十进制转换成八进制：v = 30
十六进制转换成十进制：v = "0x12"
十进制转换成十六进制：v = 87
12.2 简述可迭代对象，迭代器对象，生成器对象。
迭代器指的是迭代取值的工具。
可迭代对象：内置有__iter__()方法的对象称为可迭代对象。
可以转换为迭代器的对象为可迭代对象。
迭代器对象：内置有__next__()方法和__iter__()方法的对象称为迭代器对象。
生成器对象：自定义迭代器。
生成器本身就是迭代器，调用内部存在yield语句的函数得到生成器。
12.3 什么是元类?元类的应用场景有哪些？
元类是一种特殊的类，用于实例化产生类。
继承元类type的类是自定义元类。
使用元类是一般是为了对类实例化产生对象的过程进行自定义控制，例如：
- 类实例化时只能以关键字的形式传递参数，且参数将作为对象的属性，属性名均为大写字母；
- 将类实例化产生对象时初始化的属性全部隐藏。
使用元类也可以对自定义的类进行控制，例如：
- 自定义的类的类名首字母必须大写；
- 自定义的类中必须有文档注释；
- 通过元类将自定义类的非隐藏属性变成大写字母。
12.4 MySQL主要存储引擎
- InnoDB
MySQL 5.5及其之后的默认存储引擎；
支持事务、行锁和外键，InnoDB存储数据比MyISAM更安全； - MyISAM
MySQL 5.5之前的默认存储引擎；
MyISAM在查询 速度上比InnoDB更快； - MEMORY
内存引擎，数据全部存放于服务端内存中；
速度快，但断电后/服务端重启后数据丢失，可用于临时数据存储； - BLACKHOLE
无论存什么，都会立即消失，可用于数据库集群部署。
455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
