JavaScript 数据类型
JavaScript 有多种数据类型：数字，布尔, 字符串，数组，对象等等：
var length = 16; // 数字
var lastName = "baiyongjie"; // 字符串
var cars = ["aaa", "bbb", "ccc"]; // 数组(python中的列表)
var person = {name:"baiyongjie", sex:"man"}; // 字典
JavaScript 数字
参考: https://www.w3school.com.cn/js/js_number_methods.asp
// 声明
var page = 111;
var age = Number(18);
var a1 = 1, a2 = 2, a3 = 3;
转换：
– parseInt(..) 将某值转换成数字，不成功则NaN
– parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
– NaN，非数字。可使用 isNaN(num) 来判断。
– Infinity，无穷大。可使用 isFinite(num) 来判断。
数字方法
Math 构造器
与其他全局对象不同，Math对象没有构造函数。方法和属性是静态的。
可以在不首先创建Math对象的情况下使用所有方法和属性（常量）。
Math 对象方法
| 方法 | 描述 |
|---|---|
| abs(x) | 返回 x 的绝对值 |
| acos(x) | 返回 x 的反余弦值，以弧度计 |
| asin(x) | 返回 x 的反正弦值，以弧度计 |
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
| atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度 |
| ceil(x) | 对 x 进行上舍入 |
| cos(x) | 返回 x 的余弦 |
| exp(x) | 返回 Ex 的值 |
| floor(x) | 对 x 进行下舍入 |
| log(x) | 返回 x 的自然对数（底为e） |
| max(x,y,z,…,n) | 返回最高值 |
| min(x,y,z,…,n) | 返回最低值 |
| pow(x,y) | 返回 x 的 y 次幂 |
| random() | 返回 0 ~ 1 之间的随机数 |
| round(x) | 把 x 四舍五入为最接近的整数 |
| sin(x) | 返回 x（x 以角度计）的正弦 |
| sqrt(x) | 返回 x 的平方根 |
| tan(x) | 返回角的正切 |
// Math对象方法
console.log(Math.PI); //圆周率
console.log(Math.round(6.6)) // 四舍五入
console.log(Math.round(6.4)) // 四舍五入
console.log(Math.sqrt(81)) // 返回 x 的平方根：
console.log(Math.abs(-6.6)) // 返回绝对值,正数
console.log(Math.ceil(6.8)) // 上舍入最接近的整数：
console.log(Math.ceil(6.2)) // 上舍入最接近的整数：
console.log(Math.floor(6.8)) // 下舍入最接近的整数：
console.log(Math.floor(6.2)) // 下舍入最接近的整数：
console.log(Math.max(0, 450, 35, 10, -8, -300, -78)) // 返回数组中的最大数
console.log(Math.min(0, 450, 35, 10, -8, -300, -78)) // 返回数组中的最小数
console.log(Math.random()) // 返回介于 0（包括） 与 1（不包括） 之间的随机数：
console.log(Math.floor(Math.random() * 10)) // 返回1到9的随机数
console.log(Math.floor(Math.random() * 100)) // 返回1到99的随机数
// 定义一个返回随机数的函数
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
console.log(getRndInteger(1,200))
JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。
var x=true;
var y=false;
Boolean() 函数
您可以使用 Boolean() 函数来确定表达式（或变量）是否为真：
Boolean(10 > 9) // 返回 true
true
Boolean(8 > 9) // 返回 false
false
Boolean() 函数可以忽略
8 > 9
false
10 > 9
true
JavaScript 字符串
参考教程:
– 银角大王
– w3school
– w3school
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>js 字符串学习</p>
<script>
// 方法参考: https://www.w3school.com.cn/jsref/jsref_obj_string.asp
// 定义一个变量
var name = "baiyongjie BAIYONGJIE 123 baiyongjie aaa "
// 获取字符串的长度
console.log(name.length)
// 移除空白
console.log(name.trim())
// 返回第几个字符串
console.log(name.charAt(1))
// 返回字符串指定位置
console.log(name.substring(2, 5))
// 字符串拼接
console.log(name.concat('asdasd'))
// 返回字符串值在字符串中首次和最后出现的位置
console.log(name.indexOf('bai'))
console.log(name.lastIndexOf('bai'))
// 切片
console.log(name.slice(2, 5))
// 大小写转换
console.log(name.toLowerCase())
console.log(name.toUpperCase())
// 字符串查找,
// 从头开始匹配，返回匹配成功的第一个位置, 后面追加i 忽略大小写
console.log(name.search(/BAI/))
console.log(name.search(/BAI/i))
// 全局搜索，如果正则中有g表示找到全部，否则只找到第一个, 后面追加i 忽略大小写
console.log(name.match(/bai/g))
console.log(name.match(/bai/ig))
// 字符串替换,默认替换第一个,i忽略大小写,g全局替换
console.log(name.replace(/BAIYONGJIE/, "白永杰"))
console.log(name.replace(/BAIYONGJIE/i, "白永杰"))
console.log(name.replace(/baiyongjie/ig, "白永杰"))
</script>
</body>
</html>
对象属性
| 属性 | 描述 |
|---|---|
| constructor | 对创建该对象的函数的引用 |
| length | 字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
对象方法
| 方法 | 描述 |
|---|---|
| anchor() | 创建 HTML 锚。 |
| big() | 用大号字体显示字符串。 |
| blink() | 显示闪动字符串。 |
| bold() | 使用粗体显示字符串。 |
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
| concat() | 连接字符串。 |
| fixed() | 以打字机文本显示字符串。 |
| fontcolor() | 使用指定的颜色来显示字符串。 |
| fontsize() | 使用指定的尺寸来显示字符串。 |
| fromCharCode() | 从字符编码创建一个字符串。 |
| indexOf() | 检索字符串。 |
| italics() | 使用斜体显示字符串。 |
| lastIndexOf() | 从后向前搜索字符串。 |
| link() | 将字符串显示为链接。 |
| localeCompare() | 用本地特定的顺序来比较两个字符串。 |
| match() | 找到一个或多个正则表达式的匹配。 |
| replace() | 替换与正则表达式匹配的子串。 |
| search() | 检索与正则表达式相匹配的值。 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| small() | 使用小字号来显示字符串。 |
| split() | 把字符串分割为字符串数组。 |
| strike() | 使用删除线来显示字符串。 |
| sub() | 把字符串显示为下标。 |
| substr() | 从起始索引号提取字符串中指定数目的字符。 |
| substring() | 提取字符串中两个指定的索引号之间的字符。 |
| sup() | 把字符串显示为上标。 |
| toLocaleLowerCase() | 把字符串转换为小写。 |
| toLocaleUpperCase() | 把字符串转换为大写。 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| toSource() | 代表对象的源代码。 |
| toString() | 返回字符串。 |
| valueOf() | 返回某个字符串对象的原始值。 |
JavaScript 数组
JavaScript 数组用方括号书写, 和python中的列表定义方法一样.
数组的项目由逗号分隔。
- https://www.w3school.com.cn/js/js_arrays.asp
- https://www.w3school.com.cn/js/js_array_methods.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>数组学习</title>
</head>
<body>
<p id="d1"></p>
<p id="d2"></p>
<p id="d3"></p>
<p id="d4"></p>
<p id="d5"></p>
<p id="d6"></p>
<p id="d7"></p>
<p id="d8"></p>
<p id="d9"></p>
<script>
/*
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
*/
// 方法参考: https://www.w3school.com.cn/js/js_array_methods.asp
// 定义一个数组
var l1 = ['小米', '华为', 'iPhone'];
var l2 = ['苹果', '水蜜桃'];
var l3 = [3, 2, 5, 1, 7, 41, 6, 40, 30, 100];
// 获取数组的数量
console.log(l1.length);
// 排序参考: https://www.w3school.com.cn/js/js_array_sort.asp
// 对数组进行排序, 顺序, 对数值排序时会产生不正确的结果因为100的1,比40的4小, 所以100会拍到40的前面
console.log('默认排序:', l3.sort());
// 通过一个比值函数来修正此问题, 从小到大排序
console.log(
'函数修复后:',
l3.sort(function (a, b) {
return a - b;
})
);
// 对数组进行排序, 反序, 对数值排序时会产生不正确的结果因为100的1,比40的4小, 所以100会拍到40的后面
console.log('默认排序:', l3.reverse());
// 通过一个比值函数来修正此问题, 从大到小排序
console.log(
'函数修复后:',
l3.sort(function (a, b) {
return b - a;
})
);
// 获取数组中的第一个元素, 只是访问
document.getElementById('d1').innerHTML = l1[0];
// 获取数组中的第一个元素, 获取后会删除
document.getElementById('d2').innerHTML = l1.shift();
document.getElementById('d3').innerHTML = l1;
// 获取数组中的最后一个元素, 只是访问
document.getElementById('d4').innerHTML = l1[l1.length - 1];
// 获取数组中的最后一个元素, 获取后会删除
document.getElementById('d5').innerHTML = l1.pop();
document.getElementById('d6').innerHTML = l1;
// 对数组的第一个元素重新赋值
l1[0] = 'OPPO';
// 对数组的第二个元素重新赋值为另一个数组
l1[1] = l2;
document.getElementById('d7').innerHTML = l1;
// 头部追加元素
l1.unshift('蓝色');
// 尾部追加元素
l1.push('红色');
document.getElementById('d8').innerHTML = l1;
// 判断类型, typeof会返回object, Array.isArrat会返回true
console.log(typeof l1);
console.log(Array.isArray(l1));
// 将数组转换为字符串
console.log(l3.toString());
// splice 拼接元素, 有三种用法
/* 添加新元素. 共三个参数,
* 第一个参数(2)定义应操作新元素的位置（拼接）,
* 第二个参数（0）定义应操作多少元素
* 其余参数（"黄色", "绿色"）定义要添加的新元素。 */
console.log('旧数组:', l1);
l1.splice(2, 0, '黄色', '绿色');
console.log('新数组:', l1);
/* 替换元素. 共三个参数,
* 第一个参数(2)定义操作元素的位置（拼接）,
* 第二个参数(1)定义替换元素的个数
* 第三个参数("黑色", "紫色") 定义要讲之前两个元素替换为的元素
* */
console.log('旧数组:', l1);
l1.splice(2, 2, '黑色', '紫色');
console.log('新数组:', l1);
/* 删除元素. 共两个参数,
* 第一个参数(2)定义应操作新元素的位置（拼接）,
* 第二个参数(2)定义要删除元素的个数*/
console.log('旧数组:', l1);
l1.splice(2, 2);
console.log('新数组:', l1);
// 合并（连接）数组, 可以拼接多个
var l4 = l1.concat(l2);
var l5 = l1.concat(l2, l3);
console.log('合并单个数组', l4);
console.log('合并多个数组', l5);
// 切片, 裁剪数组
var l6 = l1.slice(2);
console.log('裁剪数组', l6);
// 使用for循环获取所以元素
console.log('+++++++++++++ 第一种方式 ++++++++++++');
for (var item in l1) {
console.log('索引:', item);
console.log('索引对应的元素值', l1[item]);
}
console.log('+++++++++++++ 第二种方式 ++++++++++++');
for (var item = 0; item < l1.length; item++) {
console.log('索引', item);
console.log('索引对应的元素值', l1[item]);
}
console.log('+++++++++++++ 第三种方式 ++++++++++++');
var fruits, text;
fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
text = '<ul>';
fruits.forEach(myFunction);
text += '</ul>';
document.getElementById('d9').innerHTML = text;
function myFunction(value) {
text += '<li>' + value + '</li>';
}
</script>
</body>
</html>
数组迭代
https://www.w3school.com.cn/js/js_array_iteration.asp
Array.forEach()
forEach() 方法为每个数组元素调用一次函数（回调函数）。
该函数接受 3 个参数：
– 项目值
– 项目索引
– 数组本身
<p id="demo"></p>
<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt = txt + value + "<br>";
}
</script>
Array.map()
– map() 方法通过对每个数组元素执行函数来创建新数组。
– map() 方法不会对没有值的数组元素执行函数。
– map() 方法不会更改原始数组。
这个例子将每个数组值乘以2：
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
JavaScript 对象(字典)
字典 是一种以键-值对形式存储数据的数据结构，
字典中的键，是值在字典中的索引。
对于javascript来说，字典类(Dictionary)的基础是Array类，js中的Array既是一个数组，同时也是一个字典。
定义一个字典
var data = {name:"baiyongjie", age:"23", sex:"man"};
常用操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>字典,对象</title>
</head>
<body>
<script>
// 参考
var dic = { c: 4, a: 2, d: 3, b: 1 }; // 定义一个字典
console.log('输出最初的字典元素: ');
for (var key in dic) {
console.log('key: ' + key + ' ,value: ' + dic[key]);
}
console.log('字典元素按key值排序: ');
var res = Object.keys(dic).sort();
for (var key in res) {
console.log('key: ' + res[key] + ' ,value: ' + dic[res[key]]);
}
console.log('字典元素按value值排序: ');
var res2 = Object.keys(dic).sort(function (a, b) {
return dic[a] - dic[b];
});
for (var key in res2) {
console.log('key: ' + res2[key] + ' ,value: ' + dic[res2[key]]);
}
// 添加新的元素
dic['e'] = 5;
console.log(dic);
// 删除元素
delete dic['a'];
delete dic.b;
console.log(dic);
// 重新赋值
dic.c = 333;
console.log(dic);
// 更加全面的字典操作和使用
/*
function add(key, value) {
// 添加字典的键值(key:value)
this.dataStore[key] = value;
}
function show() {
//显示字典中的键值(key:value)
for (var key in this.dataStore) {
console.log(key + ' : ' + this.dataStore[key]);
}
}
function find(key) {
// 根据键(key)查找对应的值(value),返回值value
return this.dataStore[key];
}
function remove(key) {
// 根据键(key)删除对应的值(value)
delete this.dataStore[key];
}
function count() {
// 计算字典中的元素个数
var n = 0;
for (var key in Object.keys(this.dataStore)) {
++n;
}
return n;
}
function kSort() {
// 字典按值(value)排序,并输出排序后的结果
var dic = this.dataStore;
var res = Object.keys(dic).sort();
for (var key in res) {
console.log(res[key] + ' : ' + dic[res[key]]);
}
}
function vSort() {
// 字典按值(value)排序,并输出排序后的结果
var dic = this.dataStore;
var res = Object.keys(dic).sort(function (a, b) {
return dic[a] - dic[b];
});
for (var key in res) {
console.log(res[key] + ' : ' + dic[res[key]]);
}
}
function clear() {
// 清空字典内容
for (var key in this.dataStore) {
delete this.dataStore[key];
}
}
function Dictionary() {
this.dataStore = new Array(); // 定义一个数组，保存字典元素
this.add = add; // 添加字典内容(key:value)
this.show = show; // 显示字典中的键值
this.find = find; // 根据键(key)查找并返回对应的值(value)
this.remove = remove; // 删掉相对应的键值
this.count = count; // 计算字典中的元素的个数
this.kSort = kSort; // 按键(key)排序
this.vSort = vSort; // 按值(value)排序
this.clear = clear; // 清空字典内容
}
var dic = new Dictionary(); // 构造字典类
*/
</script>
</body>
</html>
typeof 判断数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断数据类型</title>
</head>
<body>
<p id="demo"></p>
<script>
var a1=123; // number
var a2="abc"; // string
var a3=['1','2']; // object
var a4={'k1':'v1','k2':'v2'}; // object
var a5=true; // boolean , 布尔值
var a6=""; // string , 空的字符串变量既有值也有类型。
var a7= undefined; // undefined , 没有值的变量，其值是 undefined。typeof 也返回 undefined
var a8=null; // object, 把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null, 通过设置值为 null 来清空对象：
document.getElementById("demo").innerHTML =
typeof a1 + "<br>" +
typeof a2 + "<br>" +
typeof a3 + "<br>" +
typeof a4 + "<br>" +
typeof a5 + "<br>" +
typeof a6 + "<br>" +
typeof a6 + "<br>" +
typeof a7 + "<br>" +
typeof a8 + "<br>";
</script>
</body>
</html>
