一、JavaScript内置对象(Math、Date、Array)
https://developer.mozilla.org/
1. JS内置对象简介
- JS对象分类:自定义对象、内置对象、浏览器对象
- 内置对象:就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或者是最基本而必要的功能(方法和属性);
- 优点:帮助我们快速开发;
2. Math对象
- Math对象不是构造函数,具有数学常数和函数的属性和方法;
属性 作用
Math.PI 圆周率
Math.floor() 强制舍位
Math.ceil() 强制进位
Math.round() 四舍五入(.5特殊 往大了取)
Math.abs() 绝对值
Math.Max()/Math.min() 最大值/最小值
Math.random() 随机数
// 得到一个两数之间的随机整数,包括两个数在内
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值
}
3. Date对象(构造函数)
- Date()是一个构造函数,需要通过new操作符来调用日期对象;
- 使用Date()没有参数,返回当前系统的当前时间;
- 参数写法:数字型(2022,04,20),字符串型(‘2022-04-20 06:28:50’)
方法名 说明
getFullYear() 获取当年
getMonth() 获取月(0-11)
getDate() 获取当前日期
getDay() 获取星期几(日0-六6)
getHours() 获取当前小时
getMinutes() 获取当前分钟
getSeconds() 获取当前秒
获取日期
获取日期
var date = new Date()
var day_c = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var year = date.getFullYear()
var month = date.getMonth() + 1 //0-11,需要+1
var dates = date.getDate()
var day = date.getDay()
console.log(`${year}年${month}月${dates}日${day_c[day]}`)
获取时间
获取时间
var time = new Date()
function getTime(){
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号过了多少毫秒
// 1. 通过valueOf()、getTime()
var date = new Date();
console.log(date.valueOf())
console.log(date.getTime())
// 2. 简单的写法(最常用)
var date1 = +new Date(); //+new Date()返回的就是总毫秒数
console.log(date1);
// 3. H5新增
console.log(Date.now());
倒计时
‼️‼️面试题⚠️⚠️
//倒计时
var date = new Date()
function timeDown(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(timeDown('2022-06-01T00:00:00')); // 苹果浏览器可以识别
console.log(countDown('2022-12-04 12:00:00')); // 谷歌浏览器可以识别
4. 数组的内置函数
数组判断与反转
//反转数组
//检测是否为数组
//(1)instanceof 运算符,用来检测是否为数组(instanceof运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上)
//(2)Array.isArray(参数);H5新增方法
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 '需要输入一个数组'
}
}
console.log(reverse([3,2,1,4]))
添加和删除数组元素⭐️
方法名 | 说明 | 返回值 |
---|---|---|
push(参数1…) | 未尾添加一个或多个元素,注意修改原数组 | 返回新的长度 |
pop() | 删除数组最后一个元素,把数组长度减1 无参数、修改原数组 | 返回它删除的元素值 |
unshift(参数1…) | 向数组的开头添加一个或更多元素,注意修改原数组 | 返回新的长度 |
shift() | 删除数组的第一个元素,数组长度减 1 无参数、修改原数组 | 返回第一个元素的值 |
// 添加删除数组元素方法
// 1. push() 在我们数组的末尾 添加一个或者多个数组元素 push 推
var arr = [1, 2, 3];
// arr.push(4, 'pink');
console.log(arr.push(4, 'pink'));
console.log(arr);
// (1) push 是可以给数组追加新的元素
// (2) push() 参数直接写 数组元素就可以了
// (3) push完毕之后,返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
console.log(arr.unshift('red', 'purple'));
console.log(arr);
// (1) unshift是可以给数组前面追加新的元素
// (2) unshift() 参数直接写 数组元素就可以了
// (3) unshift完毕之后,返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 3. pop() 它可以删除数组的最后一个元素
console.log(arr.pop());
console.log(arr);
// (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
// (2) pop() 没有参数
// (3) pop完毕之后,返回的结果是 删除的那个元素
// (4) 原数组也会发生变化
// 4. shift() 它可以删除数组的第一个元素
console.log(arr.shift());
console.log(arr);
// (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
// (2) shift() 没有参数
// (3) shift完毕之后,返回的结果是 删除的那个元素
// (4) 原数组也会发生变化
数组筛选
var arr = [1000,5000,2500,3000,1500,1999]
var newArr = []
for(i = 0; i <= arr.length-1; i++){
if(arr[i] < 3000){
newArr.push(arr[i]);
}
}
console.log(newArr)
数组排序
方法名 说明 返回值
reverse() 颠倒数组中元素的顺序,无参数 修改原数组,返回新数组
sort() 对数组元素进行排序 修改原数组,返回新数组
//反转数组
var arr = [1000,5000,2500,3000,1500,1999]
var newArr = []
for(i = 0; i <= arr.length-1; i++){
if(arr[i] < 3000){
newArr.push(arr[i]);
}
}
console.log(newArr)
sort():默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的
//数组排序(冒泡排序)
var arr1 = [1,39,54,72,9]
arr1.sort(function(a,b){
return a-b; //升序
return b-a; //降序
})
console.log(arr1)
数组索引‼️‼️‼️indexOf||lastIndexOf()⭐️
方法名 | 说明 | 返回值 |
---|---|---|
indexOf | 数组中查找给定元素的第一个索引 | 如果存在返回索引号 如果不存在,则返回-1 |
lastindexOf | 数组中的最后一个的索引 | 如果存在返回索引号 如果不存在,则返回-1 |
//数组去重
var arr = ['blue', 'red', 'yellow', 'purple', 'red', 'black', 'blue', 'black']
function unique(arr){
var new_arr = []
for(var i = arr.length-1 ; i >=0 ; i--){ //遍历旧数组
if(new_arr.indexOf(arr[i]) === -1){ //indexOf=-1,即不存在,就push进新数组
new_arr.push(arr[i]);
}
}
return new_arr
}
console.log(unique(arr))
var str = '中国改革春风吹满地,中国人民真争气'
console.log(str.indexOf('中',3)) // arr.indexOf(要查找的字符[, 起始位置])
数组转换字符串
方法名 说明 返回值
toString() 把数组转换成字符串,逗号分隔每一行 返回一个字符串
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
数组的其他内置方法
方法名 | 说明 | 返回值 |
---|---|---|
concat() | 连接两个或多个数组,不影响原数组 | 返回一个新的数组 |
slice()⭐️ | 数组截取slice[begin, end),不影响原数组 | 返回被截取项目的新数组 |
splice()⭐️ | 数组删除splice(第几个开始,要删除个数),影响原数组 | 返回被删除项目的新数组 |
JavaScript中splice的使用方法详解⭐️⭐️
splice作用:删除/插入/替换元素
第一个参数传入开始处理的下标,
删除:第二个参数传入你要删除几个元素(如果没有传就删除后面所有的元素)
插入:第二个参数传入0,并且后面跟上要插入的元素
替换:第二个参数,表示我们要替换几个元素,后面是用于替换前面的元素
- 删除功能,第一个参数为第一项位置,第二个参数为要删除几个,第二个参数传入你要删除几个元素(如果没有传就删除后面所有的元素)
用法:
array.splice(index,num)
,返回值为删除内容,array为结果值。
- 插入功能,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项)。
用法:
array.splice(index,0,insertValue)
,返回值为空数组,array值为最终结果值。
- 替换功能,第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项)。
用法:
array.splice(index,num,insertValue)
,返回值为删除内容,array为结果值。