13、内置对象
1.内置对象
JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
前面两种对象是JS 基础内容，属于 ECMAScript；第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），可以帮助我们快速开发
- JavaScript 提供了多个内置对象：Math、 Date 、Array、String等，可以通过查文档学习
- Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
- MDN:https://developer.mozilla.org/zh-CN/
2. Math对象
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。
Math 对象不需要new来调用 ，直接使用里面的属性和方法即可
Math 中的成员可以实现数学相关的运算（求绝对值，取整、最大值等）
| 属性、方法名 | 功能 |
|---|---|
| Math.PI | 圆周率 |
| Math.floor() | 向下取整 |
| Math.ceil() | 向上取整 |
| Math.round() | 四舍五入版 就近取整 注意 -3.5 结果是 -3 |
| Math.abs() | 绝对值 |
| Math.max()/Math.min() | 求最大和最小值 |
| Math.random() | 获取范围在[0,1)内的随机值 |
注意：上面的方法使用时必须带括号
// 利用对象封装自己的数学对象 里面有 PI 最大值和最小值
var myMath = {
PI: 3.14,
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) {
min = arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(1, 5, 9));
console.log(myMath.min(1, 5, 9));
// 绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1'));
// 隐式转换 会把字符串型 -1 转换为数字型
console.log(Math.abs('pink')); // NaN
// 三个取整方法
// (1) Math.floor() 地板 向下取整 往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
// (2) Math.ceil() ceil 天花板 向上取整 往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// (3) Math.round() 四舍五入 （.5 特殊 它往大了取）
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // 这个结果是 -1
// 获取指定范围内的随机整数
// random()注意后面不跟参数 返回一个随机的小数 0 =< x < 1
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// (1)得到两个数之间的随机整数 并且包含这2个整数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
// (2)随机点名
var arr = ['liming', 'zhangsan', 'qinrui'];
console.log(arr[getRandom(0, arr.length - 1)]);
// 猜数字游戏
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 50);
for (var i = 1; i <= 10; i++) {
var num = prompt('请输入数字');
if (num > random) {
alert('你猜大了');
} else if (num < random) {
alert('你猜小了');
} else {
alert('你好帅哦，猜对了');
break; // 退出整个循环结束程序
}
}
3.Date日期对象
Date 对象和 Math 对象不一样，Date是一个构造函数，必须使用new实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间
// new实例化创建对象
var arr = new Array(); // 创建一个数组对象
var obj = new Object(); // 创建了一个对象实例
3.1 使用Date实例化日期对象
- 如果没有参数 返回当前系统的当前时间
var now = new Date();
- 获取指定时间的日期对象
- 参数常用的写法: (1)数字型 2021, 10, 01 (2)字符串型 ‘2021-10-1 8:8:8’
var date1 = new Date(2022, 10, 1);
console.log(date1); // 注意返回的是 11月 不是 10月
var date2 = new Date('2022-10-1 8:8:8');
console.log(date2);
3.2 使用Date实例的方法和属性
// 格式化日期 年月日
var date3 = new Date();
console.log(date3.getFullYear()); // 返回当前日期的年
console.log(date3.getMonth() + 1); // 月份(0-11)
console.log(date3.getDate()); // 返回的是几号
console.log(date3.getDay()); // 返回周几，周日返回的是 0
// 2021年 9月 7日 星期二
var date4 = new Date();
var year = date4.getFullYear();
var month = date4.getMonth() + 1;
var dates = date4.getDate();
var arr2 = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date4.getDay();
console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr2[day]);
// 格式化日期 时分秒
var date5 = new Date();
console.log(date.getHours()); // 时
console.log(date.getMinutes()); // 分
console.log(date.getSeconds()); // 秒
// 要求封装一个函数返回当前的时分秒 格式 08:08:08
function getTimer() {
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(getTimer());
3.3 通过Date实例获取总毫米数
-
总毫秒数的含义
现在距离1970年1月1号（世界标准时间）过了多少毫秒数
-
获取总毫秒数
// 实例化Date对象 var now = new Date(); // 1. 用于获取对象的原始值 console.log(date.valueOf()) console.log(date.getTime()) // 2. 简单写可以这么做(最常用的写法) var now = + new Date(); // 3. HTML5中提供的方法，有兼容性问题 var now = Date.now(); -
倒计时写法
// 倒计时写法 function countDown(time) { var nowTime = +new Date(); var inputTime = +new Date(time); var newTime = (inputTime - nowTime) / 1000; var d = parseInt(newTime / 60 / 60 / 24); d = d < 10 ? '0' + d : d; var h = parseInt(newTime / 60 / 60 % 24); h = h < 10 ? '0' + h : h; var m = parseInt(newTime / 60 % 60); m = m < 10 ? '0' + m : m; var s = parseInt(newTime % 60); s = s < 10 ? '0' + s : s; return d + '天' + h + '时' + m + '分' + s + '秒'; } console.log(countDown('2021-10-1 18:00:00'));
4. 数组对象
4.1 创建数组的两种方式
（1）字面量方式
-
示例代码如下：
var arr = [1,"test",true];
（2）new Array()
-
参数传递规则如下：
如果只传入一个参数，则参数规定了数组的长度
如果传入了多个参数，则参数称为数组的元素
示例代码如下：
var arr1 = new Array(); // 创建了一个空的数组 var arr1 = new Array(2); // 这个2表示数组的长度为2，里面有2个空的数组元素 var arr1 = new Array(2, 3); // 等价于 [2,3]，这样写表示里面有2个数组元素2和3
4.2 检测是否为数组
-
instanceof 运算符 可以判断一个对象是否是某个构造函数的实例
var arr = [1, 23]; var obj = {}; console.log(arr instanceof Array); // true console.log(obj instanceof Array); // false -
Array.isArray()用于判断一个对象是否为数组， H5新增的方法
var arr = [1, 23]; var obj = {}; console.log(Array.isArray(arr)); // true console.log(Array.isArray(obj)); // false -
翻转数组案例
function reverse(arr3) { // if (arr2 instanceof Array){ if (Array.isArray(arr3)) { var newarr = []; for (var i = arr3.length - 1; i >= 0; i--) { newarr[newarr.length] = arr3[i]; } return newarr; } else { return 'error 这个参数要求必须是数组格[1,2,3]' } } console.log(reverse([1, 2, 3])); console.log(reverse(1, 2, 3));
4.3 添加删除数组元素的方法
-
数组中有进行增加、删除元素的方法，部分方法如下表
注意：push、unshift为增加元素方法；pop、shift为删除元素的方法
// 1. push() 在数组的末尾添加一个或者多个数组元素 var arr4 = [1, 2, 3]; arr.push(4, 'pink'); // push() 参数直接写 数组元素 console.log(arr4.push(4, 'pink')); // 5 push完之后返回的结果是 新数组的长度 console.log(arr4); // 原数组会发生变化 // 2. unshift 在数组的开头添加一个或者多个数组元素 console.log(arr4.unshift('red', 'purple')); // 7 console.log(arr4); // 3. pop() 删除数组的最后一个元素 console.log(arr4.pop()); // pop没有参数，返回删除的元素 console.log(arr4); // 4. shift() 它可以删除数组的第一个元素 console.log(arr4.shift()); console.log(arr4);//案例：把数组[1500, 1200, 2000, 2100, 1800]中超过2000的删除，剩余的放到新数组里面 var arr5 = [1500, 1200, 2000, 2100, 1800]; var newArr = []; for (var i = 0; i < arr5.length; i++) { if (arr5[i] < 2000) { // newArr[newArr.length] = arr5[i]; newArr.push(arr5[i]); } } console.log(newArr);
4.4 数组排序
-
数组中有对数组本身排序的方法，部分方法如下表
注意：sort方法需要传入参数来设置升序、降序排序
- 如果传入“function(a,b){ return a-b;}”，则为升序
- 如果传入“function(a,b){ return b-a;}”，则为降序
// 1. 翻转数组
var arr6 = ['pink', 'red', 'blue'];
arr6.reverse();
console.log(arr6);
// 2. 数组排序（冒泡排序）
var arr7 = [1, 3, 4, 5, 6, 88, 7, 54];
arr7.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
})
console.log(arr7);
4.5 数组索引方法
-
数组中有获取数组指定元素索引值的方法，部分方法如下表
// indexOf(数组元素):返回第一个满足条件的索引号 从前面开始查找 找不到返回 -1
var arr8 = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr8.indexOf('blue')); // 2
// lastIndexOf(数组元素) :返回该数组元素的索引号 从后面开始查找 找不到返回 -1
console.log(arr8.lastIndexOf('blue')); // 4
// 数组去重：遍历旧数组，将数组元素存入新数组，如若重复就不在存入
function unique(arr) {
var newarr1 = [];
for (var i = 0; i < arr.length; i++) {
if (newarr1.indexOf(arr[i]) === -1) {
newarr1.push(arr[i]);
}
}
return newarr1;
}
var demo = unique(['blue', 'green', 'blue'])
console.log(demo);
4.6 数组转换为字符串
-
数组中有把数组转化为字符串的方法，部分方法如下表
注意：join方法如果不传入参数，则按照 “ , ”拼接元素
// 1. toString() 将我们的数组转换为字符串 var arr = [1, 2, 3]; console.log(arr.toString()); // 1,2,3 // 2. join(分隔符) var arr1 = ['green', 'blue', 'pink']; console.log(arr1.join()); // green,blue,pink console.log(arr1.join('-')); // green-blue-pink console.log(arr1.join('&')); // green&blue&pink
数组中还有其他操作方法，可以通过查文档学习
5. 字符串对象
字符串具有不可变性，重新赋值是重新开辟了空间去存储，因此不可大量拼接字符串，会有效率问题
5.1 基本包装类型
为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。
按道理基本数据类型是没有属性和方法的，基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。其执行过程如下 ：
var str = 'andy';
console.log(str.length);
// 步骤：
// (1) 把简单数据类型包装为复杂数据类型
var temp = new String('andy');
// (2) 把临时变量的值 给 str
str = temp;
// (3) 销毁这个临时变量
temp = null;
5.2 根据字符返回位置
字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法：
// 字符串对象根据字符返回位置
// str.indexOf('要查找的字符', [起始的位置])
var str1 = '改革春风吹满地，春天来了';
console.log(str1.indexOf('春'));
console.log(str1.indexOf('春', 3));
// 从索引号是 3的位置开始往后查找
// 案例：查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
var str2 = 'abcoefoxyozzopp';
var index = str2.indexOf('o');
var num = 0;
while (index != -1) {
console.log(index);
num++;
index = str2.indexOf('o', index + 1);
}
console.log('出现的次数是' + num);
5.3 根据位置返回字符
字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：
在上述方法中，charCodeAt方法返回的是指定位置上字符对应的ASCII码，ASCII码对照表如下：
// 根据位置返回字符
// 1. charAt(index) 根据位置返回字符
var str3 = 'andy';
console.log(str3.charAt(3));
// 遍历所有的字符
for (var i = 0; i < str3.length; i++) {
console.log(str3.charAt(i));
}
// 2. charCodeAt(index) 根据位置返回相应索引号的字符ASCII值
// 目的: 后期开发可以用来判断用户按下了哪个键
console.log(str3.charCodeAt(0)); // 97
// 3. str[index] H5 新增的
console.log(str3[0]); // a
// 判断对象里是否有该属性 对象['属性名']
var o = {
age: 18,
}
if (o['sex']) {
console.log('有');
} else {
console.log('无');
}
//判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,统计其次数
// 1. 利用 charAt(） 遍历这个字符串
// 2. 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
// 3. 遍历对象，得到最大值和该字符
// 注意：在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象总，对应的属性值是该字符出现的次数
var str4 = 'abcoefoxyozzopp';
var o = {};
for (var i = 0; i < str4.length; i++) {
var chars = str4.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(max);
console.log(ch);
5.4 字符串操作方法
(1) 字符串通过基本包装类型可以调用部分方法来操作字符串
以下是部分操作方法：
// concat('字符串1','字符串2'....)
var str5 = 'andy';
console.log(str5.concat('red'));
// substr('截取的起始位置', '截取几个字符');
var str6 = '改革春风吹满地';
console.log(str6.substr(2, 2));
(2) replace() 方法用于在字符串中用一些字符替换另一些字符
其使用格式如下：
字符串.replace(被替换的字符串， 要替换为的字符串)；
var str7 = 'andyandy';
console.log(str7.replace('a', 'b'));
// 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 *
var str8 = 'abcoefoxyozzopp';
while (str8.indexOf('o') !== -1) {
str8.replace('o', '*');
}
console.log(str8);
(3) split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。 前面学过 join 把数组转换为字符串
其使用格式如下：
字符串.split("分割字符")
var str9 = 'red, pink, blue';
console.log(str2.split(','));
var str10 = 'red&pink&blue';
console.log(str3.split('&'));
ascript
字符串.replace(被替换的字符串， 要替换为的字符串)；
var str7 = ‘andyandy’;
console.log(str7.replace(‘a’, ‘b’));
```javascript
// 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 *
var str8 = 'abcoefoxyozzopp';
while (str8.indexOf('o') !== -1) {
str8.replace('o', '*');
}
console.log(str8);
(3) split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。 前面学过 join 把数组转换为字符串
其使用格式如下：
字符串.split("分割字符")
var str9 = 'red, pink, blue';
console.log(str2.split(','));
var str10 = 'red&pink&blue';
console.log(str3.split('&'));
扫一扫
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
