5 前端 Javascript 数据类型流程控制对象

最新推荐文章于 2024-04-10 14:06:13 发布

Jianhao92

最新推荐文章于 2024-04-10 14:06:13 发布

阅读量245

点赞数

分类专栏：前端学习文章标签： js javascript

本文链接：https://blog.csdn.net/qq_36565509/article/details/106162957

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前端

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
无论存什么，都会立即消失，可用于数据库集群部署。