target
- 内置对象是啥
- 根据文档查询指定 API 的使用方法-查文档
- 使用Math 对象的常用方法
- 使用Date 对象的常用方法
- 使用Array 对象的常用方法
- 使用String 对象的常用方法
内置对象
对象分类：自定义对象、内置对象、浏览器对象
内置对象：js 自带的对象，还提供了一些常用的功能（属性和方法）
查阅MDN文档
通过 MDN/ W3C
这不就和 菜鸟的功能一样嘛
Math 对象
不是构造函数，不需要new 来调用 ，而是直接使用里面的属性和方法
var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根
console.log(Math.max(1,99,2)); //99
math-案例：封装自己的数学对象
要求：
利用对象封装自己的数学对象，里面有PI、最大值和最小值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//利用对象封装自己的数学对象
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) {
min = arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(1, 5, 9));
console.log(myMath.min(1, 5, 9));
</script>
</head>
<body>
</body>
</html>
Math.abs---绝对值
console.log(Math.abs(-1));//1
console.log(Math.abs('-1'));//隐式转换，会把字符串的 -1 转换为数字型
console.log(Math.abs('hello'));//NaN
三个取整方法
Math.floor()---------向下取整，往小取值
console.log(Math.floor(1.1));//1
Math.ceil()----------向上取整，往大了去
console.log(Math.ceil(1.1));//2
Math.round()---------四舍五入取整，就近取整--其他数组都是四舍五入，但是 .5往大了取
console.log(Math.round(1.1));//1
console.log(Math.round(1.7));//2
console.log(Math.round(-1.1));//-1
//注意
console.log(Math.round(-1.5));//-1
Math随机数方法
random()
返回介于 0（包含） ~ 1（不包含） 之间的一个随机数：[左闭右开)
Math.random();
// 1.这个方法里面不含参数
// 2.
//在本例中，我们将取得介于 1 到 10 之间的一个随机数：
Math.floor((Math.random()*10)+1);
//以下函数返回 min（包含）～ max（不包含）之间的数字：
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}
//以下函数返回 min（包含）～ max（包含）之间的数字：
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
math-随机点名
getRandom—得到的是整数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
var arr = ['123', '234', '345', '45', '667'];
console.log(arr[getRandom(0, 4)]);
</script>
</head>
<body>
</body>
</html>
math-猜数字游戏
程序随机生成一个1-10 的数组，并让用户输入一个数字
大-----提示大，继续猜
小-----提示小，继续猜
相等------猜对了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 猜数字游戏
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; // 退出整个循环
}
}
</script>
</head>
<body>
</body>
</html>
DATE日期对象
用来处理日期和时间
是一个构造函数，必须使用 new 来调用对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1.使用date 如果没有参数，返回系统的现在时间
var date = new Date();
console.log(date);
//2. 参数常用的写法 数字型 2022，03，16 或者是字符串型 '2019-10-1 8:5:7'
var date1 = new Date(2019, 10, 1);
console.log(date1);
var date2 = new Date('2019-10-1 8:5:7');
console.log(date2);
</script>
</head>
<body>
</body>
</html>
date–日期格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//格式化日期
var date = new Date();
console.log(date.getFullYear()); //返回当前日期的年
console.log(date.getMonth() + 1); // 月份 返回的月份小 1 月，记得月份加1
console.log(date.getDate()); //返回的是 几号
console.log(date.getDay()); //周一返回的是1 周六返回的是 6 但是 周日返回的是0
// 写一个今天的日子，符合国人的说话习惯
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
console.log('今天是' + year + '年' + month + '月' + dates +
'日 ' + arr[day]);
</script>
</head>
<body>
</body>
</html>
date—格式化日期时分秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 格式化日期：时分秒
var date = new Date();
console.log(date.getHours);//时
console.log(date.getMinutes);//分
console.log(date.getSeconds);//秒
// 要求封装一个函数返回当前的 时分秒，格式： 00:00:00
function getTimes() {
var time = new Date();
var h = time.getHours();
h = h > 10 ? h : '0' + h;
var m = time.getMinutes();
var s = time.getSeconds();
// 记得定义返回值
return h + ':' + m + ':' + s
}
console.log(getTimes());
</script>
</head>
<body>
</body>
</html>
date----总的毫秒数-时间戳
从1970.1.1 到现在过了多少毫秒数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//获得 Date总的毫秒数--时间戳
//1.通过 valueOf() getTimr()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
//2.简单的写法------最常用的写法
var date1 = + new Date(); // + newDate() 返回的就是总毫秒数
console.log(date1);
//3.H5 新增的 获得总的毫秒数
console.log(Date.now());
</script>
</head>
<body>
</body>
</html>
date-倒计时
- 核心算法：输入的时间减去现在的时间就是剩余的时间，但是不能直接相减
- 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数
- 把剩余时间总的毫秒数转换为 天、时、分、秒
d = parseInt(总秒数 / 60 / 60 / 24); //计算天数
h = parseInt(总秒数 / 60 / 60 % 24); //计算小时
m = parseInt(总秒数 / 60 / 60 / 24); //计算分钟
s = parseInt(总秒数 / 60 / 60 / 24); //计算当前秒数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function countTime(time) {
var nowTime = +new Date();//返回的是当前时间总的毫秒数
var inputTime = +new Date(time)//返回的时用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000;// time 时剩余时间总的毫秒数 1000毫秒=1秒
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 / 24); //计算分钟
m = m < 10 ? '0' + m : m;
var s = parseInt(times / 60 / 60 / 24); //计算当前秒数
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countTime('2024-3-1 17:17:17'));
</script>
</head>
<body>
</body>
</html>
数组 Array()
创建数组的两个方法
- 字面量---- var arr = [];
- 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
Array—检查是否为数组
两个方法
// 1.instanceof 运算符 ，可以用来检测是否为数组
var arr=[ ];
var obj = { } ;
console.log(arr instanceof Array); //true
console.log(obj instanceof Array); //false
// 2.Array.isArray(参数); H5新增的方法，ie9以上版本支持
console.log(Array.isArray(arr));//true
console.log(Array.isArray(obj)); //false
Array----添加、删除数组元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//添加删除数组元素
// 1.push() 在我们数组的末尾，添加一个或者多个数组元素
var arr = [1, 2, 3];
arr.push(4,'hxb');
console.log(arr);
// (1) push 可以给数组追加新的元素
// (2) push() 参数直接写 数组元素就可以了
// (3) push完毕后，返回的是新数组长度
// (4) 原数组也会发生变化
//2. unshift 在数组的开头，添加一个或者一组数组元素
arr.unshift('red');
console.log(arr);
// (1) unshift 可以给数组前面追加新的元素
// (2) unshift() 参数直接写 数组元素就可以了
// (3) unshift完毕后，返回的是新数组长度
// (4) 原数组也会发生变化
//删除数组元素
// pop() 删除数组的最后一个元素
console.log(arr.pop());
console.log(arr);
// (1) pop可以删除数组的最后一个元素,,只能删除一个
// (2) pop() 没有参数
// (3) pop完毕后，返回的是删除的那个元素
// (4) 原数组也会发生变化
//shift() 删除数组的第一个元素
console.log(arr.shift);
console.log(arr);
// (1) shift可以删除数组的最后一个元素,,只能删除一个
// (2) shift() 没有参数
// (3) shift完毕后，返回的是删除的那个元素
// (4) 原数组也会发生变化
</script>
</head>
<body>
</body>
</html>
Array----筛选数组
要求：有一个包含工资的数组[1233,2345,1234,456,2421,1346,567,7897,6800],要求把超过2000的删除，剩余的放到新数组里面去
var arr = [1233,2345,1234,456,2421,1346,567,7897,6800];
for(var i = 0; i < arr.length ;i++){
if(arr[i]>2000){
//newArr[newArr.length] = arr[i];
newArr.push(arr[i]);
}
}
console.log(new.Arr);
Array-----数组排序
- 翻转数组
- 数组排序-----冒泡排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1.翻转数组
var arr = ['pink','red','blue'];
arr.reverse();
console.log(arr);
//2.数组排序---冒泡排序
var arr1 = [13,23,45,3,4,2,87];
arr1.sort(function(a,b){
return a-b;// 升序的顺序排列
// return b-a; 按照降序的顺序排序
});
console.log(arr1);
</script>
</head>
<body>
</body>
</html>
Array—获取数组元素索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//返回数组元素索引号的方法--------
// indexOf(数组元素) 作用就是返回该数组元素的索引号
//如果有两个的话，只返回第一个满足条件的索引号
//如果找不到的话，就返回 -1
var arr = ['blue', 'red', 'hxb', 'hhhw'];
console.log(arr.indexOf('hxb')); //2
//lastIndexOf() 从后往前找，找到了就返回这个索引
//找不到返回 -1
console.log(arr.lastIndexOf('hxb'));
</script>
</head>
<body>
</body>
</html>
Array----数组去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//数组去重
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(['2', '3', '4', '2', '6', '4']);
console.log(demo);
</script>
</head>
<body>
</body>
</html>
Array----数组转换为字符串
//数组转换为字符串
//1.toString()
var arr = [1,2,3];
console.log(arr.toString());
//2.join(分隔符）
var arr1 = ['green','blue','pink'];
console.log(arr1.join());//green，blue,pink 默认用逗号隔开
console.log(arr1.join('-')); //green-blue-pink
- concat() ----连接两个或者多个数组，不影响原数组—返回一个新数组
- slice()------数组截取 slice(begin.end)----返回被截取项目的新数组
- splice()--------数组删除splice (第几个开始，要删除个数)------返回被删除项目的新数组，，，，，注意：会影响原数组
字符串对象
- 基本包装类型，三种–字符串、number、布尔
- 字符串
var str = 'andy'
console.log(str.length);
// 对象才有 属性和方法，复杂数据类型才有 属性和方法
// 简答数据类型为什么会有length 属性呢
// 基本包装数据类型： 就是把简单数据类型，包装成了复杂数据类型
//1.把简单数据类型包装成复杂数据类型
var temp = new String('andy');
//2.把临时变量的值给 str
str = temp;
//3.销毁这个数据变量
temp = null;
- 字符串不可变：---- 是说，里面的值不可变，虽然看上去的值改变了，单实际上是重新开辟了一个内存空间，然后指向这个空间的地址，原来的内容不会销毁，还依然存在着，占用内存
String根据字符返回位置
由于字符串的内容不变，所以操作完成返回的是一个新的字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//字符串对象，根据字符返回的位置 str.indexOf('要查找的字符'，[起始的位置])
var str = '改革春风吹满地，春天来了啊';
console.log(str.indexOf('春'));//2
console.log(str.indexOf('春', 3));//从索引号为3 开始查找，，结果是 8
</script>
</head>
<body>
</body>
</html>
String-返回字符的位置
查找字符串"abcoeffoxyozzopp"中的所有o出现的位置和次数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//查找
//核心算法： 先查找第一个O 出现的位置
//只要 indexOf 返回的结果不是 -1 就继续往后查找
//因为 indexOf 只能查找到第一个，所以后面的查找，一定是当前索引+1，从而继续查找
var str = 'coeffoxyozzopp';
var index = str.indexOf('o');
// console.log(index);
while (index !== -1) {
console.log(index);
index = str.indexOf('o', index + 1);
}
</script>
</head>
<body>
</body>
</html>
String根据位置返回字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//根据位置返回字符
//1. charAt(index) 根据位置返回字符
var str = 'abdy';
console.log(str.charAt(3));
//遍历所有字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
//2. charCodeAt(index) ---返回相应的索引号的字符的ASCII值，目的是，判断用户按下了那个键
//这个在游戏开发的时候有很大的作用，根据用户按下的键值---给出相应的反馈
console.log(str.charCodeAt(0));//97 --API的时候会用到
//3.str[index] H5新增的
console.log(str[0]);//a
</script>
</head>
<body>
</body>
</html>
String—统计及出现最大的字符和次数
先判断对象有没有这个属性
// 有一个对象 来判断是否有该属性 对象['']
var o = {
age: 18
}
if (o['sex']) {
console.log('有这个属性');
}
else {
console.log('没有');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str = 'abcoefoxzzopp'
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i); //chars 是 字符串的每一个字符
if (o[chars]) { //o[chars] 得到的是属性值----
// 这里是判断o里面是否有这个对象，有的话累加，没有的话，赋值为1，这样就能统计次数了
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o);
//2. 遍历对象
var max = 0;
var ch = '';
for (var k in o) {
// k 得到的是属性名
// o[k]得到的是属性值
if (o[k] > max) {
max = o[k];
ch = k;
}
}
console.log(max);
console.log('最多的字符是' + ch);
</script>
</head>
<body>
</body>
</html>
String-----拼接以及截取字符串
//1. concat('字符串1','字符串2'...)
// 这个就类似于 + 拼接字符串
var str = 'andy';
console.log(str.concat('red'));// andyred
//截取字符串
// substr('截取的起始位置','截取几个字符')；
var str1 = '改革春风吹满地'；
console.log(str1.substr(2,2));//春风----第一个2 是索引号的2，从第几个开始，第二个2是说 取几个字符
String—替换字符串，把字符串转成数组
- 替换字符串-----replace
var str = 'andyandy';
console.log(str.replace('a','b'));//badyandy---只替换第一个字符
// 有一个字符串，把所有的o 转换为*
var str1 = 'abcodfdkdodfhjkkdjfooosdjhjs';
while(str1.indexOf('o') !==-1){
str1 = str1.replace('o','*');
}
console.log(str1);
- 转换为数组
//2.字符串转化为数组 split('分隔符') 前面学过 join 把数组转换为字符串
var str2 = 'red,pink,blue';
console.log(str2.split(','));//输出一个数组，，这个括号里面的内容取决于字符串是用啥分割开的
String—转换大小写
大写----toUpperCase()
小写----toLowerCase()
4391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
