JavaScript数据类型、流程控制详解
1 数据类型
1.1 字符串
本节方法概览：
| 方法名 | 功能 |
|---|---|
| `…` | 其中包裹多行字符串 |
| `…${…}` | 连接字符串 |
| “字符串名”.length | 返回字符串长度 |
| “字符串名”.toUpperCase() | 将字符串转换为大写 |
| “字符串名”.toLowerCase() | 将字符串转换为小写 |
| indexOf(’’) | 定位字符 |
| substring() | 取出子字符串 |
详情请看以下内容。
-
正常字符串可以使用单引号，或双引号包裹
-
注意转义字符\
\' \n \t \u4e2d \u#### Unicode字符 "\x41" AscII字符 -
多行字符串编写
使用``包裹：
案例展示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> 'use strict' var str= `hello world demut 你好！ `; </script> </head> <body> </body> </html>测试结果：
![在这里插入图片描述]()
-
模版字符串，连接字符串 `…${…}`
案例展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> 'use strict' let name = "demut"; let age = 3; //符号拼接使用``符号 let msg = `你好, ${name}`; </script> </head> <body> </body> </html>打开控制台，测试代码：
![在这里插入图片描述]()
-
字符串长度
测试代码：
var student="student"; console.log(student.length)测试结果：
![在这里插入图片描述]()
-
字符串不可变
测试过程如下：
![在这里插入图片描述]()
-
大小写转换
大写转换：
toUpperCase()![在这里插入图片描述]()
小写转换：
toLowerCase()![在这里插入图片描述]()
-
indexOf() 定位
测试如下：
![在这里插入图片描述]()
本测试说明在JavaScript中，数组字符串也是从0开始计数。
-
substring()
- 传入一个数字，则从该位置（包含该位置）取至最后，返回子字符串。
- 传入两个数字，则按照左闭右开的原则取出子字符串。
测试如下：
![在这里插入图片描述]()
1.2 数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6]
本节方法概览：
| 方法名称 | 功能 |
|---|---|
| arr.length | 返回数组长度 |
| indexOf() | 定位元素 |
| slice() | 截取数组中一部分 |
| push(), pop() | 在数组尾部压入，弹出 |
| unshift(), shift() | 在数组头部压入，弹出 |
| sort() | 数组元素排序 |
| reverse() | 数组元素反转顺序 |
| concat() | 连接数组，返回新数组 |
| join() | 打印拼接数组 |
详情请看以下内容。
-
长度
arr.length注意：类似于matlab中特性，当赋值语句中的下标超过原始上限时，中间的元素自动用undefined元素填充，数组大小发生变化，若赋值过小，元素丢失。
测试如下：
![在这里插入图片描述]()
-
indexOf，通过元素获得下标索引
arr.indexOf(2) 1注意：字符串的"1"和数字1是不同的
-
slice() 截取Array的一部分，返回一个新数组。类似于substring
测试：
arr.slice(1,5) (4) [2, 3, 4, 5] -
push, pop 尾部操作
push 压入到尾部 pop 弹出尾部的一个元素测试：
![在这里插入图片描述]()
-
unshift(), shift() 头部操作
unshift 压入到头部 shift 弹出头部的一个元素测试：
![在这里插入图片描述]()
-
排序 sort()
var arr = ['b','a','c'] undefined arr.sort() (3) ["a", "b", "c"] -
元素反转
arr.reverse() (3) ["c", "b", "a"] -
concat()
arr.concat([1,2,3]) (6) ["c", "b", "a", 1, 2, 3] arr (3) ["c", "b", "a"]注意：concat()并没有修改数组，只是返回一个新的数组。
-
连接符 join
打印拼接数组，使用特定的字符串连接。
arr.join('-') "c-b-a" -
多维数组
arr = [[1,2],[3,4],[5,6]] (3) [Array(2), Array(2), Array(2)] arr[1][1] 4
数组： 存储数据（如何存入，如何取出）
1.3 对象
若干个键值对
JavaScript中的所有的键都是字符串，值可以是任意对象！
//格式
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义了一个person对象，它有四个属性
var person = {
name:"demut",
age: 3,
email: "[email protected]",
score: 1000
}
注意： js中对象, {…}表示一个对象，键值对描述属性xxxx:xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
-
对象赋值
测试如下：
person.name = "jever"![在这里插入图片描述]()
-
使用一个不存在的对象属性，不会报错！
person.hahaha undefined -
动态的删减属性，通过delete删除对象的属性！
![在这里插入图片描述]()
-
动态的添加属性，直接给新的属性添加值即可！
测试：
![在这里插入图片描述]()
-
判断属性值或方法是否在这个对象中！ xxx in xxx!
'age' in person true //方法继承 'toString' in person true -
判断一个属性值是否是这个对象自身拥有的
hasOwnProperty()person.hasOwnProperty('toString') false person.hasOwnProperty('age') true
1.4 Map和Set
ES6的新特性～
Map （类似于python中的字典）
创建Map：var map = new Map([['Saragh',100],['Demut',90],['Dottie',90]]);
| 方法名 | 功能 |
|---|---|
| map.set() | 添加key-value |
| map.delete() | 删除key-value |
| map.get(‘key’) | 取出key对应的值 |
Set 无序不重复的集合
创建Set：var set = new Set([3,1,1,1,1]);
| 方法名 | 功能 |
|---|---|
| set.add() | 添加元素 |
| set.delete() | 删除元素 |
| set.has() | 判断是否包含某个元素 |
Map与Set综合案例展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
//学生成绩，学生姓名
// var names = ["Saragh","Demut","Dottie"];
// var scores = [100,90,90];
var map = new Map([['Saragh',100],['Demut',90],['Dottie',90]]);
var value = map.get('Saragh'); //取出Saragh对应的值返回
map.set('admin',123456); //添加key-value
map.delete('admin'); //删除key-value
console.log(value);
var set = new Set([3,1,1,1,1]); //set可以去重
set.add(2); //添加元素
set.delete(2); //删除元素
</script>
</head>
<body>
</body>
</html>
测试语句及结果：
1.5 iterator
ES6新特性
遍历数组：
案例一：遍历数组
//通过for of 实现
//注： for in是下标,且有漏洞
var arr = [3,4,5,6,6];
for (var x of arr){
console.log(x)
}
运行结果：
案例二：遍历map
var map = new Map([["tony",100],["jack",90],["demut",100]]);
for (let x of map){
console.log(x)
}
运行结果：
案例三：遍历set
var set = new Set([1,2,4,45,3]);
for (let x of set){
console.log(x)
}
运行结果：
2 流程控制
2.1 条件控制
if-else语句
if (score > 60 && score < 70){
alert("60~70");
}else if (score >70 && score < 90){
alert("70~90");
}else{
alert("Other");
}
2.2 循环控制
while循环，避免程序死循环
var age = 3;
while(age <100){
age = age+1;
console.log(age)
}
//do-while循环，至少循环一次
do {
age = age+1;
console.log(age)
}while (age<100)
for循环：
for (let i = 0; i < 100; i++) {
console.log(i)
}
for-in循环遍历：
var age = [12,2,3,2,7,12,4,63,23];
//for(var index in Object)
for (var num in age){
console.log(age[num])
}
结果：
for-Each循环：
var age = [12,2,3,2,7,12,4,63,23];
//函数
age.forEach(function (value) {
console.log(value)
})
结果：
写在最后
我相信这世界上，有些人有些事有些爱，再见到的第一次，就注定要羁绊一生，就注定像一棵树一样，生长在心里，生生世世。
——宫崎骏
To Demut and Dottie!