学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN或W3C来查询MDN(查阅文档):
https://developer.mozilla.org/zh-CN/
属性、方法名 | 功能 |
---|---|
Math.PI | 圆周率 |
Math.floor() | 向下取整(往小了取整) |
Math.ceil() | 向上取整(往大了取整) |
Math.round() | 四舍五入版 就近取整 注意 -3.5 结果是 -3 |
Math.abs() | 绝对值 (注意:有隐式转换 会把字符串型-1 转换为数字型) 但是:console.log(Math.abs('pink')); // NaN |
Math.max()/Math.min() | 求最大和最小值 |
Math.random() | 获取范围在[0,1)内的随机值 |
// Math对象 不是构造函数(可以直接使用里面的属性和方法)
console.log(Math.PI); // 一个属性 圆周率
console.log(Math.max(1,99,3)); // 99
console.log(Math.max(1,99,3,'pink')); // NaN
console.log(Math.max()); // -Infinity
// Math.max()返回值:给定数值中最大的数。如果任一参数不能转换为数值,则返回 NaN。如果没有提供参数,返回 -Infinity。
// 案例:利用对象封装自己的数学对象 里面有PI 最大值和最小值
var myMath = {
PI: 3.141592653,
max: function() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max; // max
}, // “,”不要忘了
min: function() {
var min = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] < min) {
min = arguments[i];
}
}
return min; // min
}
}
console.log(myMath.PI); // 3.141592653
console.log(myMath.max(1,5,9)); // 9
// 1.绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // 1 注意:隐式转换 会把字符串型-1 转换为数字型 !!!!!
// console.log(Math.abs('pink')); // NaN
// 2.三个取整方法
// 1) Math.floor() 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 特殊,它往大了取 如-1.5
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(-1.5)); // -1 !!!!!!!
console.log(Math.round(-1.9)); // -2
其他见
Math - JavaScript | MDNMath 是一个内置对象,它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math
Math.random()
函数返回一个浮点数,伪随机数在范围 [0 , 1) ,然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。返回值:一个浮点型伪随机数字,在0
(包括 0)和1
(不包括)之间。
// 1. random() 方法中不跟参数 ,返回一个随机小数,[0,1)
console.log(Math.random()); // 0.850641947562953
// 2.得到一个两数之间的随机整数 并且 包含这两个数 [min,max]
// Math.floor(Math.random() * (max - min + 1)) + min;
function getRandom(min,max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1,4));
// 3.随机点名
var arr = ['张三','李四','王五','老六'];
console.log(arr[getRandom(0,arr.length - 1)]);
1)得到一个两数之间的随机数 / 随机整数
min
(有可能等于),并且小于(不等于)max
。 公式: [min,max)function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
min
(如果 min
不是整数,则不小于 min
的向上取整数),且小于(不等于)max
。 [floor(min),max)function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //不含最大值,含最小值
}
// 1.猜数字游戏 程序随机生成了一个1~10之间的数字,并让用户输入一个数字.
// 如果大于该数字,就提示 数字大了,继续猜
// 如果小于该数字,就提示 数字小了,继续猜
// 如果等于该数字,就提示 猜对了,结束程序
// 随机生成了一个1~10之间的数字,我们需要用到 Math.random()方法
// 需要一直猜到正确为止,所有需要一直循环
// while循环更简单
// 核心算法:使用if else if 多分支语句来判断大于、小于、等于
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 对象和 Math 对象不一样,Date是一个构造函数,所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间
使用Date实例化日期对象
获取当前时间必须实例化(和Math的区别)
获取指定时间的日期对象
// Date() 日期对象 是一个构造函数 必须使用new 来创建日期对象
var arr = new Array(); // 创建了一个数组对象
var obj = new Object(); // 创建了一个对象实例
// 1.使用Date 如果没有参数 返回当前系统的当前时间
var date = new Date(); // 实例化
console.log(date); // Date Wed Mar 29 2023 19:36:05 GMT+0800 (中国标准时间)
// 2.参数常用的写法 数字型 2023,3,29 或者是字符串 '2023-3-29 19:32:8'
var date1 = new Date(2023,3,29);
console.log(date1); // Date Sat Apr 29 2023 00:00:00 GMT+0800 (中国标准时间)
var date2 = new Date('2023-3-29 19:32:8');
console.log(date2); // Date Wed Mar 29 2023 19:32:08 GMT+0800 (中国标准时间)
使用Date实例的方法和属性
getMonth()方法获取到的月份 + 1 = 当月
// 格式化日期 年月日
var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2023
console.log(date.getMonth()); // 月份 返回的月份小一个月 0~11 记得把月份加一哦!!如下 >>> 2
console.log(date.getMonth() + 1); // 3
console.log(date.getDate()); // 返回的是几号 29
console.log(date.getDay()); // 3 返回的是(纯数字)星期几 注:周日0~周六6
// 写一个 2023年 3月 29日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; // 必须第一个是星期日0
var day = date.getDay();
console.log('今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]); // 今天是:2023年3月29日 星期三
// 格式化日期 时分秒
var date = new Date();
console.log(date.getHours()); // 时 19
console.log(date.getMinutes()); // 分 58
console.log(date.getSeconds()); // 秒 7
// 要求封装一个函数返回当前的时分秒 格式:19:58:08
function getTime() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
//即: 条件表达式 ? 表达式1 : 表达式2;如果条件表达式为 true ,则返回表达式1的值,如果条件表达式为 false,则返回表达式2的值
var m = time.getMinutes();
m = m < 10 ? '0' + m : m; // 若没有该语句的话,返回 20:0:53,有的话:20:00:53
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s; // 20:06:34
}
console.log(getTime());
4.4 获取Date日期总的毫秒数(时间戳)
基于1970年1月1日(世界标准世界)起的毫秒数
// 获取Date日期总的毫秒数 不是当前时间的毫秒数 而是我们现在时间距离1970年1月1日过了多少毫秒数
// 1.通过 valueOf() getTime()
var date = new Date();
console.log(date.valueOf()); // 1680091888892
console.log(date.getTime()); // 1680091888892
// 2.简单的写法
var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
console.log(date1); // 1680091995966
// 3.H5新增的 获得总的毫秒数
console.log(Date.now()); // 1680091995966
倒计时案例 :
1. 输入的时间减去现在的时间就是剩余的时间,即倒计时。
2.用时间戳来做,用户输入时间总的毫秒数减去现在时间的总的毫秒数,
得到的就是剩余时间的毫秒数
3.把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换时分秒)
转换公式如下:
d = parseInt(总秒数/60/60/24) // 计算天数
h = parseInt(总秒数/60/60%24) // 计算小时
m = parseInt(总秒数/60%60); // 计算分钟
s = parseInt(总秒数%60); // 计算当前秒数
function countDown(time) {
var nowTime = +new Date(); // 返回的是 当前时间总的毫秒数
var inputTime = +new Date(time); // 返回的是 用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // time是 剩余时间的秒数 (秒数=毫秒数/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(countDown('2023-3-29 20:26:24')); // 00天00时0-4分0-38秒
字面量方式 var arr = [1,"test",true];
实例化数组对象 new Array() var arr = new Array();
注意:上面代码中arr创建出的是一个空数组,如果需要使用构造函数Array创建非空数组,可以在创建数组时传入参数
如果只传入一个参数(数字),则参数规定了数组的长度。
如果传入了多个参数,则参数称为数组的元素。
// 创建数组的两种方式
// 1.利用数组字面量
var arr = [1,2,3];
console.log(arr[0]); // 1
// 2. 利用new Array()
// var arr1 = new Array(); // 创建了一个空的数组
var arr1 = new Array(2); // 这个2 表示数组的长度为2 里面有两个空的数组元素
console.log(arr1); // Array [ <2 empty slots> ]
var arr2 = new Array(2,3); // 等价于 [2,3] 这样写表示里面有2个数组元素 是2和3
console.log(arr2);
1). instanceof 运算符
instanceof 可以判断一个对象是否是某个构造函数的实例
2). Array.isArray(参数)
Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法
// 检测是否为数组
// 1) instanceof 运算符(可理解为 是否) 它可以用来检测是否为数组
var arr1 = [];
var obj = {};
console.log(arr1 instanceof Array); // true
console.log(obj instanceof Array); // false
// 2) Array.isArray(参数)
console.log(Array.isArray(arr1)); // true
console.log(Array.isArray(obj)); // false
// 翻转数组改良版
function reverse(arr) {
if (arr instanceof Array) {
var newArr = [];
for (var i = arr.length - 1;i >= 0;i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
} else {
return '这个参数必须是数组格式[1,2,3]';
}
}
console.log(reverse(1,2,3)); // 这个参数必须是数组格式[1,2,3]
console.log(reverse([1,2,3])); // Array(3) [ 3, 2, 1 ]
数组中有进行增加、删除元素的方法,部分方法如下表
注:添加有参数且可添加一个或多个元素,返回新数组的长度;
删除无参数且只能删除一个元素,返回删除的那个元素的值
// 添加删除数组元素方法
// 1.push() ——末尾添加
var arr1 = [1,2,3];
// arr1.push(4,'pink');
console.log(arr1.push(4,'pink')); // 5
console.log(arr1); // Array(5) [ 1, 2, 3, 4, "pink" ]
// (1) push() 参数直接写 数组元素就可以了
// (2) push完毕后,返回的是 新数组的长度
// (3) 原数组也会发生变化
// 2.unshift() ——开头添加
console.log(arr1.unshift('red','green')); // 7
console.log(arr1); // Array(7) [ "red", "green", 1, 2, 3, 4, "pink" ]
// 3.pop() ——末尾删除最后一个
console.log(arr1.pop()); // pink
console.log(arr1); // Array(6) [ "red", "green", 1, 2, 3, 4 ]
// (1) pop 可以删除数组的最后一个元素,一次只能删除一个
// (2) pop()没有参数
// (3) pop完毕后,返回结果是 删除的那个元素
// (4) 原数组会发生变化
// 4. shift() ——开头删除第一个
console.log(arr1.shift()); // red
console.log(arr1); // Array(5) [ "green", 1, 2, 3, 4 ]
数组中有对数组本身排序的方法,部分方法如下表
方法名 | 说明 | 是否修改原数组 |
---|---|---|
reverse() | 颠倒数组中元素的顺序,无参数 | 该方法会改变原来的数组 返回新数组 |
sort() | 对数组的元素进行排序 | 该方法会改变原来的数组 返回新数组 |
注意:sort方法需要传入参数(函数)来设置升序、降序排序
如果传入“function(a,b) { return a-b;}”,则为升序
如果传入“function(a,b) { return b-a;}”,则为降序
// 踩坑 数组sort()排序(冒泡排序) return a - b 则升序
// 写法固定 参考如下
var arr1 = [13,4,77,1,7];
arr1.sort(function(a,b){
return a-b; // 升序的顺序排列
// return b-a; // 降序的顺序排列
});
console.log(arr1);
数组中有获取数组指定元素索引值的方法,部分方法如下表
var arr = [1, 2, 3, 4];
var arr2 = arr;
var str = arr.toString(); // 将数组转换为字符串
console.log(str); // 1,2,3,4
var str2 = arr2.join('\');//按照键入字符将数组转换为字符串
console.log(str2); // 1\2\3\4
其他方法:
var arr = [1, 2, 3, 4];
var arr2 = [5, 6, 7, 8];
var arr3 = arr.concat(arr2);
console.log(arr3); // [1,2,3,4,5,6,7,8]
// slice(begin,end) 是一种左闭右开区间 [1,3)
// 从索引1出开始截取,到索引3之前
var arr4 = arr.slice(1, 3);
console.log(arr4); // [2,3]
var arr5 = arr2.splice(0, 3);
console.log(arr5); // [5,6,7]
console.log(arr2); // [8] splice()会影响原数组
// 有一个数组['c','a','z','a','x','a','x','c','b']要求去除数组中重复元素
function unique(arr) {
var newArrr = [];
for (var i = 0;i < arr.length;i++) {
if (newArrr.indexOf(arr[i]) == -1) {
newArrr.push(arr[i]);
}
}
return newArrr;
}
var demo = unique(['c','a','z','a','x','a','x','c','b']);
console.log(demo); // Array(5) [ "c", "a", "z", "x", "b" ]
为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型
,这样基本数据类型就有了属性和方法。
// 下面代码有什么问题?
var str = 'andy';
console.log(str.length); // 4
按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为 js 会把基本数据类型包装为复杂数据类型,其执行过程如下 :
// 1. 生成临时变量,把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;
指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。
当重新给字符串变量赋值的时候,变量之前保存的字符串不会被修改,依然在内存中重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变。
由于字符串的不可变,在 大量拼接字符串 的时候会有效率问题
字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串
字符串通过基本包装类型可以调用部分方法来操作字符串,以下是返回指定字符的位置的方法:
var str = "anndy";
console.log(str.indexOf("d")); // 3
//指定从索引号为4的地方开始查找字符"d"
console.log(str.indexOf("d", 4)); // -1
console.log(str.lastIndexOf("n")); // 2
字符串通过基本包装类型可以调用部分方法来操作字符串,以下是根据位置返回指定位置上的字符:
// 根据位置返回字符
// 1. charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3)); // y
// 遍历所有的字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
} // a n d y (每行一个)
// 2. charCodeAt(index)
//返回相应索引号的字符ASCII值 目的: 判断用户按下了那个键
console.log(str.charCodeAt(0)); // 97
// 3. str[index] H5 新增的
console.log(str[0]); // a
1.查找字符串"abcoefoxyozzopp"中所有o出现的位置及次数
2.判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数
// 1. 查找字符串"abcoefoxyozzopp"中所有o出现的位置及次数
// 核心算法:先查找第一个o出现的位置
// 然后 只要indexOf 返回的结果不是-1,就继续往后查找
// 因为indexof 只能查找第一个,所以后面的查找,一定是当前索引加1,从而继续查找
var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
while (index !== -1) {
console.log(index);
num++;
index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是:' + num); // o出现的次数是:4
// 3
// 6
// 9
// 12
// 2.判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数
// 核心算法:利用 charAt() 遍历这个字符串
// 把每个字符都存储给对象, 如果对象没有该属性,就为1,如果存在了就 +1
// 遍历对象,得到最大值和该字符 注意:在遍历的过程中,把字符串中的每个字符作为对象的属性存储在对象中,对应的属性值是该字符出现的次数
var str = "abcoefoxyozzopp";
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i); // chars 是 字符串的每一个字符
if (o[chars]) {
// o[chars] 得到的是属性值
o[chars]++; // 是属性值+1
} else {
o[chars] = 1;
}
}
console.log(o); // Object { a: 1, b: 1, c: 1, o: 4, e: 1, f: 1, x: 1, y: 1, z: 2, p: 2 }
// 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); // 4
console.log("最多的字符是" + ch); // 最多的字符是o
// 字符串操作方法
// 1. concat('字符串1','字符串2'....)
var str = 'andy';
console.log(str.concat('red')); // andyred
// 2. substr('截取的起始位置', '截取几个字符');
var str1 = '改革春风吹满地';
// 第一个2 是索引号的2 从第几个开始 第二个2 是取几个字符
console.log(str1.substr(2, 2)); // 春风
replace()方法
replace() 方法用于在字符串中用一些字符替换另一些字符,其使用格式如下:
字符串.replace(被替换的字符串, 要替换为的字符串);
split()方法
split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。
其使用格式如下:
字符串.split("分割字符")
// 1. 替换字符 replace('被替换的字符', '替换为的字符') 它只会替换第一个字符
var str = "andyandy";
console.log(str.replace("a", "b")); // bndyandy
// 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 *
var str1 = "abcoefoxyozzopp";
while (str1.indexOf("o") !== -1) {
str1 = str1.replace("o", "*");
}
console.log(str1); // abc*ef*xy*zz*pp
// 2. 字符转换为数组 split('分隔符')
// 前面我们学过 join 把数组转换为字符串
var str2 = "red, pink, blue";
console.log(str2.split(",")); //["red","pink","blue"]
var str3 = "red&pink&blue";
console.log(str3.split("&")); // ["red","pink","blue"]