JavaScript—内置对象
内置对象是什么
- JavaScript中的对象分为三种：自定义对象，内置对象和浏览器对象。
- 前面两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于JS独有的。
- 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。
- 内置对象最大的优点就是帮助我们快速开发。
- JavaScript提供了多个内置对象：Math、Date、Array、string等。
根据文档查询指定的API的使用方法
学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
MDN查询
学习对象中的方法
- 查阅该方法
- 查看里面的参数和类型
- 查看返回值的类型和意义
- 通过例子测试
使用Math对象的常用方法
Math数学对象不是与个构造函数，所以我们不需要new来调用而是直接使用里面的属性和方法即可。
Math对象
console.log(Math.PI);
console.log(Math.E);
console.log(Math.max(0, 1, 2));
console.log(Math.max(0, 1, '字符串')); // NaN
console.log(Math.max()); //-Infinity封装自己的数学对象
var myMath = {
PI: 3.1415926,
max: function () {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
},
min: function () {
var min = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] < min) {
mix = arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(0, 1, 2));
console.log(myMath.min(0, 1, 2));绝对值方法
console.log(Math.abs(-1));
console.log(Math.abs('-1')); //隐式转换，会把字符串型的-1转换为数字型
console.log(Math.abs('exaple')); // NaN三种取整方法
console.log(Math.floor(1.4)); // 向下取整
console.log(Math.ceil(1.4)); // 向上取整
console.log(Math.round(1.4)); // 四舍五入。负数中.5为特殊情况，取在数轴上大的数取的随机数
console.log(Math.random()); //随机数区间为[0,1)
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min; // 得到一个两数之间的随机整数，包括两个数在内
}
console.log(getRandom(0, 1));猜数字
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min; // 得到一个两数之间的随机整数，包括两个数在内
}
var random = getRandom(1, 10);
while (true) {
var num = prompt('猜一个1-10之间的整数')
if (num > random) {
alert('猜大了');
}
else if (num < random) {
alert('猜小了');
}
else {
alert('猜对了');
break;
}
}Date的常用方法
- Date()日期对象是一个构造函数必须用new来调用我们的日期对象
- Date对象与Math对象不一样，Date对象是一个构造函数，所以需要实例化后才能用。
- Date势力用于处理日期和时间。
Date
var arr = new Array(); // 创建一个数组对象
var obj = Object(); // 创建一个对象实例
var date = new Date();
console.log(date); // 使用Date，没有参数返回当前系统时间
// 参数常用写法：数字型：1949，10，1或者字符串类型：'1949-10-1 15:0:0'
var date0 = new Date(1949, 10, 1);
console.log(date0); // 输出会大一个月
var date1 = new Date('1949-10-1 15:0:0');
console.log(date1);| 方法名 | 说明 | 代码 |
|
getFullYear()
|
获取当前年份 |
dObj.getFullYear()
|
|
getMonth()
|
获取当前月份 |
dObj.getMonth()
|
|
getDate()
|
获取当天日期 |
dObj.getDate()
|
|
getDay()
|
获取当前星期 |
dObj.getDay()
|
|
getHours()
|
获取当前小时 |
dObj.getHours()
|
|
getMinutes()
|
获取当前分钟 |
dObj.getMinutes()
|
|
getSeconds()
|
获取当前秒钟 |
dObj.getSeconds()
|
格式化时分秒
var date = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
function getTime() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTime());获取Date总的毫秒数，不是当前时间的毫秒数，是距离1970年1月1日的毫秒数。通过valueOf()，getTime()获取
获取Date总的毫秒数
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
var date0 = +new Date();
console.log(date0);
console.log(Date.now()); // html5新增倒计时
function conutDown(time) {
var nowTime = +new Date(); // 总时间的毫秒数
var inputTime = +new Date(time);
var times = (inputTime - nowTime) / 1000;
var d = parseInt(times / 60 / 60 / 24);
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(conutDown('2023-6-12 15:00:00'));Array的常用方法
翻转数组
function reserse(arr) {
if (arr instanceof Array) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
}
console.log(reserse([0, 1, 2]));检测是否为数组
var arr = [];
var num = 1;
console.log(arr instanceof Array); // instanceof检测
console.log(num instanceof Array); // instanceof检测
console.log(Array.isArray(arr)); // Array.isArray(参数)检测。注意：ie9以上版本支持
console.log(Array.isArray(num)); // Array.isArray(参数)检测。注意：ie9以上版本支持数组追加元素
var arr = [0, 1, 2];
arr.push(3, 'end'); // 在数组尾部追加新元素
arr.unshift('begin'); // 在数组头部追加元素
console.log(arr);| 方法名 | 说明 | 返回值 |
| push（参数1..…） | 未尾添加一个或多个元素，注意修改原数组 | 并返回新的长度 |
| pop() | 删除数组最后一个元素，把数组长度减1无参数、修改原数组 | 返回它删除的元素的值返回它删除的元素的值 |
| unshift（参数1..） | 向数组的开头添加一个或更多元素，注意修改原数组 | 并返回新的长度 |
| shift（） | 删除数组的第一个元素，数组长度减1无参数、修改原数组 | 并返回第一个元素的值 |
删除数组元素
var arr = ['a', '0', '1', 'b'];
arr.pop(); // 删除最后一个元素
arr.shift(); // 删除第一个元素
console.log(arr);筛选数组
var arr = ['1000', '2000', '3000', '4000'];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 3000) {
newArr.push(arr[i])
}
}
console.log(newArr);数组排序
var arr = [10, 70, 40, 70, 20, 0, 20, 80, 3];
arr.sort(function (a, b) {
return a - b; // 升序排列，ab换位则降序
});
console.log(arr);| 方法名 | 说明 | 返回值 |
| indexOf() | 数组中查找给定元素的第一个索引（重复元素） | 如果存在返回索引号如果不存在，则返回-1。 |
| lastindexOf() | 在数组中的最后一个的索引（重复元素） | 如果存在返回索引号如果不存在，则返回-1。 |
h获取数组元素索引
var arr = ['a', 'b', 'c', 'a'];
console.log(arr.indexOf('a')); //返回数组元素的索引号
console.log(arr.lastIndexOf('a'));数组去重
var arr0 = ['a', 'a', 'a', 'a', 'a', 'a', 'a', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'c', 'c', 'c', 'c'];
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique(arr0);
console.log(demo);| 方法名 | 说明 | 返回值 |
| tostring() | 把数组转换成字符串，逗号分隔每一项 | 返回一个字符串 |
| join(分隔符) | 方法用于把数组中的所有元素转换为一个字符串。 | 返回一个字符串 |
数组转为字符串
var arr = ['a', 'b', 'c'];
console.log(arr.toString()); // 数组转为字符串
console.log(arr.join('-')); // 数组转为字符串且可以选择分隔符String的常用方法
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String、Number和Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
基本包装类型
就是把简单数据类型包装成为了复杂数据类型。
- 把简单数据类型包装成复杂数据类型
- 把临时变量的值赋给str
- 销毁临时变量
基本包装类型
var str = 'abcd';
console.log(str.length);
var temp = new String('abcd'); // 把简单数据类型包装成复杂数据类型
str = temp; // 把临时变量的值赋给str
temp = null; // 销毁临时变量字符串不可变性
指的是里面的值不可变，即使看上去改变了内容，其实是地址变了，内存中开辟了一个内存空间。因此不要大量拼接字符
| 方法名 | 说明 |
| indexOf('要查找的字符'，开始的位置) | 返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是index索引号 |
| lastindexOf() | 从后往前找，只找第一个匹配的 |
根据字符返回位置
var str = '王侯将相宁有种乎,有死而已。';
console.log(str.indexOf('有'));
console.log(str.indexOf('有', 6));字符出现的位置与次数
var num = 0;
var str = 'https://i.cnblogs.com/posts/edit;postId=17472028';
var index = str.indexOf('s');
while (index != -1) {
console.log(index);
index = str.indexOf('s', index + 1);
num++;
}
console.log('s出现次数为' + num);根据位置返回字符
| 方法名 | 说明 | 使用 |
| charAt（index） | 返回指定位置的字符（index字符串的索引号） | str.charAt（0） |
| charCodeAt（index） | 获取指定位置处字符的ASCI码（index索引号） | str.charCodeAt（0） |
| str[index] | 获取指定位置处字符 | HTML5，IE8+支持和charAt（）等效 |
根据位置返回字符
var str = 'abcd';
console.log(str.charAt(1)); // 输出索引号为1的字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i)); // 遍历数组所有字符
}
console.log(str.charCodeAt(0)); // 返回索引为0的字符对应的ACSII码值统计各字符出现次数
var str = 'https://i.cnblogs.com/posts/edit;postId=17472028';
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
if (o[chars]) {
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o);
// 遍历对象
var max = 0;
var ch = '';
for (var k in o) {
if (o[k] > max) {
max = o[k];
ch = k;
}
}
console.log('出现最多的字符是' + ch + '次数是' + max);字符串操作方法
| 方法名 | 说明 |
| concat（str1，str2，str3..） | concat（）方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 |
| substr（start，length） | 从start位置开始（索引号），length取的个数（重点） |
| slice（start，end） | 从start位置开始，截取到end位置，end取不到（两个都是索引号） |
| substring(start,enf) | 从start位置开始，截取到end位置，end取不到，基本和slice相同但是不接受负值 |
替换字符串与转换为数组
var str = 'ab';
console.log(str.concat('cd'));
var str0 = 'efgh';
console.log(str0.substr(1, 2));
var str1 = 'iikl';
console.log(str1.replace('i', 'j')); // 只会替换第一个
while (str1.indexOf('i') !== -1) {
str1 = str1.replace('i', '*');
}
console.log(str1);
var str2 = 'aa,bb,cc';
console.log(str2.split(',')); // 字符转换为数组
var str3 = 'aa|bb|cc';
console.log(str3.split('|')); // 字符转换为数组（修改分隔符）