JavaScript 内置的常用对象
1. Object:代表一个普通的 JavaScript 对象。
常用(静态)方法:
Object.keys(obj)--获取对象的键Object.values(obj)--获取对象的值Object.entries(obj)--获取对象的键和值Object.assign(target, source)--浅拷贝 和合并对象
const obj={
name:'熊二',
age:3
}
// ==>键(属性名) 返回数组
const arr1=Object.keys(obj)
console.log(arr1)//输出 ['name', 'age']
//==值(属性值) 返回数组
const arr2=Object.values(obj)
console.log(arr2) //输出 ['熊二', 3]
// ==>键 和值 返回2个数组
const arr3=Object.entries(obj)
console.log(arr3)//输出 [Array(['name', '熊二']), Array( ['age', 3])]
//Object.assign(target,...sources)
//==>1.浅拷贝
const target={
name:'熊二',
age:3
}
const obj1={name:'ll',age:1}
//浅拷贝
Object.assign(target,obj1)
console.log(Object.assign(target,obj1))//输出 {name: 'll', age: 1}
Object.assign(target,...sources) 浅拷贝
- [目标对象,源对象] Object.assign(target,...sources) -->...sources多个对象
- 实质:对象的浅拷贝(地址)==拷贝存放在栈中的指向堆中对象的 地址,拷贝对象之后是两个不同的对象,不会相互影响
- 注意点:返回值---目标{对象}
- 目标对象和源对象属性名相同时,源对象属性值会覆盖目标对象属性值
///Object.assign(target,...sources)
//===>2.合并对象
const obj2={x:1}
const obj3={y:2}
const obj4={x:3,z:3}
//合并对象
Object.assign(obj2,obj3,obj4)
console.log( Object.assign(obj2,obj3,obj4))//{x: 3, y: 2, z: 3}
Object.assign(target,...sources) 合并对象
- [目标对象,源对象] Object.assign(target,...sources) -->...sources多个对象
- 注意点:返回值---目标{对象}
- 目标对象和源对象属性名相同时,源对象属性值会覆盖目标对象属性值
2. Array:代表一个数组对象。
常用方法:
-
arr.reduce()将数组的每个元素累加,返回最终值。 -
arr.map()ES6循环遍历数组的每一项 -
arr.forEach()ES5及以下,循环遍历数组每一项 -
arr.keys()arr.values()遍历数组的属性名/值 -
arr.flat()arr.flatMap()扁平化数组 -
arr.sort((a,b)=>a-b/b-a)对数组进行冒泡排序 -
arr.reverse()对数组进行倒序 -
arr.join('')用指定的分隔符将数组的每一项凭借为字符串 -
arr.toString()arr.toLcaleString()将数组转化为字符串 -
arr.slice()按照条件查找出元素 -
arr.splice()对数组进行增删改 -
arr.fill()用特定的值填充数组中的元素(用或多个) -
arr.filter()过滤功能 -
arr.find()返回匹配的(第1个元素)值 -
arr.findIndex()返回匹配的(第1个元素)值的位置索引 -
arr.indexOf()检测当前值在数组中第1次出现的位置索引 -
arr.lastIndexOf()最后一次 -
arr.pop()删除数组的最够一项 -
arr.shift()删除数组的第一项 -
arr.unshift()向数组头部(首位)添加新元素 -
arr.push()向数组末尾添加新元素 -
arr.concat()连接2个或多个数组 -
arr.every()判断数组的每一项是否都满足条件,返回布尔值 -
arr.some()判断数组是否有满足条件的项,返回布尔值 -
arr.includes()判读数组是否包含一个指定的值以下简单常用方法举例:
arr.reduce()
是JavaScript数组的一个高阶函数,它可用于将数组的每个元素累加到一个累加器变量中,并返回最终值。
reduce()方法接受一个回调函数作为其第一个参数。该回调函数将被传递四个参数:累加器、当前元素、当前索引和整个数组。回调函数必须返回一个值,表示新的累加器值。
以下是 arr.reduce()的使用示例:
简版语法:
arr.reduce(callbackFn(previousValue, currentValue){},initialValue )
arr.reduce(回调函数(上一次值, 当前值){}, 初始值)
** 注意**:
如果有初始值,那么previousValue第一次执行的时候,就是写的初始值
如果没有初始值,initValue就是数组的第一个元素 arr[0], cur就依次取第二个元素
//有初始值
const arr=[1,2,3]
//1.不传初始值,表示从第一个数组元素开始
const sum=arr.reduce(function(previousValue,currentValue){
return previousValue+currentValue
//上一次的值 当前值 返回值
// 1 2 3 (第1次循环)
// 3 3 6 (第2次循环)
},0)
console.log(sum)//输出 6
//可以简写
//没有初始值
const res1 = arr.reduce((pre, cur)=>{
return pre + cur
//上一次的值 当前值 返回值
// 0 1 1 (第1次循环)
// 1 2 3 (第2次循环)
// 3 3 6 (第3次循环)
},0)
console.log(res1)//输出 6
在上面的代码中,reduce()方法将数组的每个元素添加到累加器变量中,并返回了最终结果。初始累加器的值为0(由第二个参数提供)。
请注意,如果数组为空,则必须提供初始值或 reduce() 方法会抛出 TypeError。
arr.filter()
const arr=[2,1,3,5,7,80]
//保留3
const arrNew=arr.filter(el=> el === 3)
console.log(arrNew)//[3]
//过滤掉3
const arrNew0=arr.filter(el=>el !==3 )
console.log(arrNew0)//[2, 1, 5, 7, 80]
//过滤大于3的元素,保留小于度等于3的数组元素
const arrNew1=arr.filter(el=>el <=3 )
console.log(arrNew1)//[2, 1, 3]
arr.map() arr.forEach()
arr.map() 和 arr.forEach() 都是 JavaScript 数组的方法,但它们有不同的用途。
arr.map()循环遍历数组的每一个元素,并返回一个新数组,其中包含该函数的返回值。原始数组不会被改变。arr.forEach()循环遍历数组的每一个元素,它不会返回任何内容。- 需要从数组中创建一个新数组,那么使用
arr.map();遍历数组并执行某些操作,使用arr.forEach()。
const arr=[1,2,3,4]
// const arrNew=arr.map(el=>{
// return el+2
// })
const arrNew=arr.map(el=>el+2)
console.log(arrNew)//输出 [3, 4, 5, 6]
arr.forEach(el=>{
// console.log(el + 'forEach')
console.log(`${el} forEach`)
})
//输出
//1 forEac
//2 forEac
//3 forEac
//4 forEac
arr.sort()-->冒泡排序
用双层for循环实现冒泡排序
const arr=[10,2,13,4,5]
for (let i=0;i<arr.length-1;i++){
for(let j=0;j<arr.length-1-i; j++){
//判断
if(arr[j] > arr[j+1]){//降序
//方法1
// let temp=arr[j]
// arr[j]=arr[j+1]
// arr[j+1]=temp
//方法2
;[arr[j],arr[j+1]]=[arr[j+1],arr[j]]
}
}
}
console.log(arr)//输出 [2, 4, 5, 10, 13]
用arr.sort方法,
const arr=[10,2,13,4,5]
const res=arr.sort((a,b)=>a-b)//降序
console.log(res)//输出 [2, 4, 5, 10, 13]
const res2=arr.sort((a,b)=>b-a)//升序
console.log(res2)//输出 [13, 10, 5, 4, 2]
arr.splice()对数组进行增删改操作
arr.splice(start,delete,value)
start--对数组操作的起始索引位置
delete--表示从起始索引位置开始,要删除的元素个数
value--要添加到数组里面的元素
const arr=[2,3,5,6]
// 增---在索引为1的后面新增88
arr.splice(1,0,88)
console.log(arr)// [2, 88, 3, 5, 6]
//删 --删除索引为3的数组元素
arr1=[2,3,5,6]
arr1.splice(3,1)
console.log(arr1) //[2, 3, 5]
//改--将所有为0的数组元素改为100
arr2=[2,3,5,6]
arr2.splice(0,1,100)
console.log(arr2)//[100, 3, 5, 6]
arr.some()和arr.every()
arr.some()
arr.some() 检测数组中是否有满足条件的项,只要有一个满足,就返回true 、 否则false
- 语法: arr.some(cbFn)
- 参数:
cbFn 函数 ==> 注意,这个回调函数,一般需要return 返回
cbFn的参数
第一个参数 : item 当前元素
第二个参数 : index 索引 (可选) - 返回值: 布尔值 true 或false
const arr=[1,2,5,7]
const res=arr.every(function(item,index){
return item > 5
})
console.log(res) // true
arr.every()
检测是否所有数组元素都满足条件,是则返回true,否则返回false
- 语法: arr.some(cbFn)
- 参数:
cbFn 函数 ==> 注意,这个回调函数,一般需要return 返回
cbFn的参数
第一个参数 : item 当前元素
第二个参数 : index 索引 (可选) - 返回值: 布尔值 true 或false
onst arr=[1,2,3,4]
const res=arr.every(function(item,index){
return item > 0
})
console.log(res)// true
const res1=arr.every(function(item,index){
return item > 3
})
console.log(res1) // false
arr.includes(); arr.find(); arr.findIndex(); arr.indexOf(); a rr.lastIndexOf()
共同点:都可以用来判断数组是否包含某个元素,
不同点: 返回的值不同
arr.includes()
判断数组中是否包含 某个元素,如果有, true, 否则false
const arr=[1,2,3]
const res=arr.includes(2)
console.log(res) // true
const res1=arr.includes(99)
console.log(res1) // false
arr.find()
判断数组中是否包含 某个元素,如果有, 返回对应满足条件的元素, 否则返回undefined
-
语法: arr.find(cbFn)
-
参数: cbFn 函数 ==> 注意,这个回调函数,一般需要写上return
cbFn的参数
第一个参数 : item 当前元素
第二个参数 : index 索引 (可选) -
返回值: 数组中第一个满足条件的元素 /找不到返回 undefined
const arr=[1,2,3,'blue']
const res1=arr.find(function(item,index){
return item ==='blue'
})
console.log(res1)// blue
const res2= arr.find(function(item,index){
return item===999
})
console.log(res2)//undefined
arr.findIndex()
查找数组中满足条件的项,找到,则返回第一个满足条件的元素的索引位置, 否则返回-1
-
语法: arr.findIndex(cbFn)
-
参数: cbFn 函数 ==> 注意,这个回调函数,一般需要写上return
cbFn的参数
第一个参数 : item 当前元素
第二个参数 : index 索引 (可选) -
返回值: 数组中第一个满足条件的元素的索引号 /找不到返回 -1
const arr=[1,2,3,'blue',3,{name:'熊大' ,age:3},{name:'熊二' ,age:3}]
const res=arr.findIndex(function(item,index){
return item.age === 3
})
console.log(res)//返回 5
const res1=arr.findIndex(function(item){
return item=== 100
})
console.log(res1)//-1
arr.indexOf()和 arr.lastIndexOf()
查找数组中满足条件的项,找到,则返回第一个/最后一个满足条件的元素的索引位置, 否则返回-1
arr.indexOf()用于查找元素在数组中第一次出现的索引位置。该方法接受一个参数,表示要查找的元素值,如果找到则返回该元素在数组中首次出现的索引位置,否则返回 -1。
const arr = [1, 2, 3, 88, 8, 2, 1];
const index1 = arr.indexOf(3); // 返回2,因为3在数组中的第一个位置是2
const index2 = arr.indexOf(7); // 返回-1,因为数组中没有7
const index3=arr.lastIndexOf(1) // 返回6,因为3在数组中的第一个位置是6
const index4 = arr.indexOf(100); // 返回-1,因为数组中没有100
arr.lastIndexOf()用于查找元素在数组中最后一次出现的索引位置。该方法接受一个参数,表示要查找的元素值,如果找到则返回该元素在数组中最后次出现的索引位置,否则返回 -1。
3. String:代表一个字符串对象。
常用方法:
-
string.length字符串长度 -
string.includes()查找字符串是否包含某一个字符,返回布尔值 -
string.satrtWidth()判断是否以某一个字符串开头,返回布尔值 -
string.indexOf(substring, fromIndex)查找字符串是第一次出现某一字符的索引,找到返回索引位置,找不到返回-1 -
string.lastIndexOf(substring, fromIndex)查找字符串是最后一次出现某一字符的索引,找到返回索引位置,找不到返回-1 -
string.substring(startIndex, endIndex)从字符串中把某一个子串截取出来 -
string.trim()去除字符串两边的空格 -
string.split(separator, limit)用特定的分隔符把每一个字符串都转换为数组 -
string.toUpperCase()将字符串转为大写 -
string.toLowerCase()将字符串转为小写
4. Number:代表一个数值对象。
常用方法:
number.toFixed(digits)输出转字符串,保留小数位数number.toPrecision(precision)输出转字符串,保留有效位数Number.parseInt(string)输出整数,Number.parseFloat(string)输出浮点数
1.number.toFixed(digits) :该方法将一个数值四舍五入后转为字符串。接收一个整数参数 digits,表示要保留的小数位数,如果该参数省略则默认为 0,输出整数字符串,
const num=3.14159265
console.log(num.toFixed(3))//输出 字符串"3.145 "--->传参,表示保留的小数点个数
console.log(num.toFixed())//输出 字符串 "3" --->不传参,表示只保留整数
number.toPrecision(precision):该方法将一个数值转换为字符串,并保留指定有效数字的位数。示要保留的有效数字个数,如果该参数省略或为 0,则返回完整的数值字符串。例如:
const num=3.14159265
console.log(num.toPrecision(3))//输出 字符串"3.14" 表示保留3位有效数值,输出为字符串
console.log(num.toPrecision())//输出 字符串"3.14159265" 表示输出完整数值字符串
3. Number.parseInt(string) :该方法将一个字符串解析成整数,并返回解析后的结果。接收一个字符串参数 string,其中可能包含一个带符号或无符号的十进制整数(可采用八进制或十六进制写法),并会去除前导空格及非数字字符,如果无法解析,则返回 NaN。
console.log(Number.parseInt("100")); // 输出整数 100
console.log(Number.parseInt("001", 8)); // 输出整数 1 (解析八进制数字字符串)
console.log(Number.parseInt("0100", 16)));// 输出整数 156(解析十六进制数字字符串)
console.log(Number.parseInt("啦啦啦")); // 输出 NaN
4. Number.parseFloat(string) :该方法将一个字符串解析成浮点数,并返回解析后的结果。接收一个参数 string 表示要解析的字符串,并会去除前导空格及未被识别为数字的字符,从上第一个非0数字开始算到另一个非0数字结束,如果无法解析,则返回 NaN。
console.log(Number.parseFloat("123")); // 输出浮点数 123
console.log(Number.parseFloat("0.10b+100")); // 输出浮点数 0.1
console.log(Number.parseFloat("a0.10b+100")); // NaN
console.log(Number.parseFloat("啦啦")); // 输出 NaN
5. Boolean:代表一个布尔值对象。
6. Date:代表一个日期时间对象。
常用方法:
-
Date.now()时间戳 -
date.getTime()时间戳, -
+new Date()时间戳 -
date.getFullYear()返回 Date 对象的年份字段 -
date.getMonth()返回 Date 对象的月份字段 (要 +1) -
date.getHours()返回 Date 对象的小时字段 -
date.getMinutes()返回 Date 对象的分钟字段 -
date.getSeconds()返回 Date 对象的秒字段 -
date.getDate()返回一个月中的某一天 -
date.getDay( )返回一周中的某一天
| 方法 | 作用 | 说明 |
|---|---|---|
| getFullYear() | 获得年份 | 获取四位年份 |
| getMonth() | 获得月份 | 取值为 0 ~ 11 |
| getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
| getDay() | 获取星期 | 取值为 0 ~ 6 |
| getHours() | 获取小时 | 取值为 0 ~ 23 |
| getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
| getSeconds() | 获取秒 | 取值为 0 ~ 59 |
日期对象 Date
Date是JavaScript内置对象,用来表示日期和时间的对象,可以得到当前系统的日期和时间
日期对象使用必须先实例化-->创建一个日期对象并获取时间
用new关键字进行实例化,如下所示:
//1.得到当前时间
const date=new Date()
console.log(date)//输出 Sun May 21 2023 19:45:00 GMT+0800 (中国标准时间)
//2.得到指定的日期和时间
const date1=new Date('2028-12-30 20:0:0')
console.log(date1)//输出 Sat Dec 30 2028 20:00:00 GMT+0800 (中国标准时间)
日期对象方法的使用
const date =new Date('2028-12-30 20:08:38')//实例化日期对象
console.log(date.getFullYear())// 2028 年份
console.log(date.getMonth()+1)// 12 月份从0-11,所有获取的时候要+1
console.log(date.getDate());// 30 日
console.log(date.getDay())// 6 星期
console.log(date.getHours())//20 小时
console.log(date.getMinutes())// 8 分
console.log(date.getSeconds())// 38 秒
// 模板字符串串联起来
console.log(`未来时间 :${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日
${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}秒 -星期:${date.getDay()}`)
// 未来时间 :2028年12月30日20时8分38秒 -星期:6
时间戳:
- 是指1970年01月01日00时00分00秒起至现在的总毫秒数(数字型),它是一种特殊的计量时间的方式
//1.实例化+getTime
const date=new Date()//当前时间
console.log(date.getTime())// 输出 1684674957438
//2. +new Date() 推荐使用--推荐使用
//当前时间戳
console.log(+new Date())//输出 1684675166497
//将来时间戳
console.log(+new Date(`2028-12-30`))//输出 1861747200000
//3.Date.now() 得到当前日期的时间戳
console.log(Date.now())//输出 1684675233966
实际应用
- 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
- 剩余时间毫秒数转换为年月日时分秒就是倒计时时间
function getTime(){
const end=+new Date(`2023-6-30 05:00:08`)//1.获取将来时间戳
const now= Date.now() //2.现在时间戳
const time=(end-now) /1000 //3.得到剩余时间戳(毫秒),并转化为秒
console.log(time)
//把剩余时间戳转化为时分秒
let d=parseInt(time /60 /60 /24)
let h=parseInt(time/60 /60 %24)
let m=parseInt(time/60 %60)
let s=parseInt(time%60)
//二位数表示,个位数的前面补0
d= d<10 ? '0'+d : d
h=h <10 ?'0'+ h : h
m=m<10 ? '0'+m : m //补0
console.log(h,m,s)
document.write(`到计时:${d}天${h}时${m}分${s}秒`)
}
getTime()
//输出 到计时:39天05时34分48秒
7. Math:代表一个数学工具对象。
常用方法:
Math.abs(x)-绝对值Math.max(x1, x2, ...)-最大值Math.min(x1, x2, ...)-最小值Math.ceil(x)-向上取整Math.floor(x)-向下取整Math.round(x)-四舍五入Math.random()-随机数Math.PI圆周率
//圆周率
document.write(Math.PI); //输出 3.141592653589793
//最大值
document.write(Math.max(1, 4, 100)); //100
//最小值
console.log(Math.min(1, 4, 100)); //1
//绝对值
console.log(Math.abs(-100)); //100
//向上取整--往大取
console.log(Math.ceil(1.8)); //2
console.log(Math.ceil(-1.8)); //-1
//向下取整--往小取
console.log(Math.floor(1.8)); //1
console.log(Math.floor(-1.8)); //-2
//四舍五入取整
console.log(Math.round(1.8)); //2
console.log(Math.round(-1.8)); //-2 理解:四舍五入与正负号无关,只单纯取整
console.log(Math.round(-1.4)); //-1
console.log(Math.round(1.5)); //2
console.log(Math.round(1.4)); //1
Math.random()-随机数
Math.random() 随机数, 返回一个0 - 1之间,并且包括0不包括1的随机小数 [0, 1)
如何生成0-10的随机整数呢?(不包含10)
Math.floor(Math.random() * (10))
如何生成0-10的随机整数呢?(包含10)
Math.floor(Math.random() * (10 + 1))
如何生成N-M之间的随机整数(不包含M)
Math.floor(Math.random() * (M - N + 1))
Math.floor(Math.random() * (差值 + 1))
如何生成N-M之间的随机整数(包含M)
Math.floor(Math.random() * (M - N + 1)) + N
Math.floor(Math.random() * (差值 + 1)) + 最小值
数组随机数
const arr=['啦啦',2,'互联网',5]
//随机数得到的是数组下标
const random=Math.floor(Math.random()*arr.length )
document.write(arr[random])//输出 2 -->随机获取,每刷新一次都可能不一样
创建对象的方式
- 对象:对象是属性和方法的集合
- 属性:事物的特征, 常用名词 眼睛,耳朵
- 方法:事物的行为, 可以谈恋爱,跑步
1.使用字面量
//创建对象
//创建对象
const obj = {
name: "海绵宝宝",//对象的属性
age: 100,//对象的属性
sayHi() {//对象的方法
console.log("我是对象方法");
},
};
//查看创建的对象
console.log(obj);//输出 {name: '海绵宝宝', age: 100, sayHi: ƒ}
//查看对象属性
console.log(obj.name) //输出 海绵宝宝
//查看对象方法
obj.sayHi() //对应的对象方法执行,
2. 利用Object关键字(工厂方法)
//创建对象
const obj = new Object({sex:'男',money:'100万'});
//也可以在下面创建对象的属性和方法
obj.age=8
obj.sayHi=function(){
console.log('Hi~~~')
}
console.log(obj)//输出 {sex: '男', money: '100万', age: 8, sayHi: ƒ}
3. 利用构造函数创建对象
function 构造函数名(形参1,形参2,形参3) { // 构造函数的形参与对象的普通属性是一般一致的
this.属性名1 = 形参1;
this.属性名2 = 形参2; // 属性的值,一般是通过同名的形参来赋值的
this.属性名3 = 形参3;
this.方法名 = function(){
};
}
// new实例对象
const obj = new 构造函数名(实参1,实参2,实参3)
function Fn(name, age) {
this.name = name;
this.age = age;
this.sayHi = () => {
console.log("Hi~~~");
};
}
//new构造函数,创建实例对象
const obj=new Fn('熊二',3)
cosnt obj1=new Fn('熊大',3)
...
//查看
console.log(obj)//输出 Fn {name: '熊二', age: 3, sayHi: ƒ}
console.log(obj1)//输出 Fn {name: '熊大', age: 3, sayHi: ƒ}
注意:
- 箭头函数不能创建
构造函数 - 构造函数名字
首字母要大写 - 构造函数里 属性和方法前面必须添加
this - 构造函数不需要 return 就可以返回结果
- 我们调用构造函数 必须使用
new
1. 构造函数,相当于是一个模板,通过这个构造函数,可以创建出一系列具有相同属性和方法的对象
2. 实例化:通过构造函数,创建对象的过程叫做实例化 ==> new一个对象的过程
3. 实例:具体的实际的例子,实际的那个对象 实例/实例对象
创建函数的方式
1.函数声明
//创建-形参
function fn1(a, b) {
return a + b;//函数体
}
//调用-实参
fn1(4, 5);
上述代码中,fn1是函数名,a和b是形参,{}里面的是函数体,函数创建成功之后,还需要调用fn1(),其中可以传入实际的参数,4和5就是实参
2.函数表达式
//创建-形参
const fn2 = function (a, b) {
return a + b;//函数体
};
//调用-实参
fn2(5, 6);
上述代码中,fn2是函数名,a和b是形参,{}里面的是函数体,函数创建成功之后,还需要调用fn2(),其中可以传入实际的参数,5和6就是实参,
3.函数对象方式
3.函数对象方式
//创建-形参
const fn3 = new Function("a", "b", "函数体" );
//调用-实参
fn3(7, 8);
上述代码中,fn3是函数名,使用 new Function 可以动态创建一个函数。它接受一些字符串参数,第一个参数是函数的参数列表,后面的参数是函数体。
以下是创建函数的过程:
- 定义函数参数列表:
"a", "b"--形参。 - 编写要在函数中运行的代码,这些代码存储在字符串中,例如:"console.log(a + b);"
- 使用
new Function构造函数来创建一个新函数:const fn3 = new Function("a", "b", "console.log(a + b);"); - 然后就可以调用该函数了:
fn3(1, 2);将输出3,传入的1和2是实参。