JavaScript内置对象
#1.内置对象
1.JavaScript 中的对象分为3中：自定义对象、内置对象、浏览器对象
2.前面两种对象是js 基础内容，属于 ECMAScript；第三个浏览器对象属于我们的js独有的，我们js API讲解
3.内置对象就是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
4.内置对象最大的优点就是帮助我们快速开发
5.JavaScript提供了多个内置对象：Math、Date、Array、Strting等
#2.Math对象
1.Math是一个内置对象，它具有数学常数和函数的属性和方法。不是一个函数对象
2.与其他全局对象不同的是，Math不是一个构造函数，Math的所有属性和方法都是静态的，不需要是用 new 。
案例：封装自己的数学对象
<script type="text/javascript"> let myMath = { PI: 3.1415926535, max: function() { let max = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i] } } return max; }, min: function() { let 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>
2.1Math 概述
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。
<script type="text/javascript">
//1.绝对值方法
console.log(Math.ads(1)); // 1
console.log(Math.ads(-1)); // 1
console.log(Math.ads('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
console.log(Math.ads('pink')); // NaN
//2.三个取整方法
//(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() 四舍五入
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.9)); // 2
</script>
2.2随机数方法 random()
1.Math.random()函数返回一个随机的小数
<script type="text/javascript">
console.log(Math.random());
</script>
2.我们想要得到两个数之间的随机整数 并且包含这两个整数
<script type="text/javascript">
function getRandom(max, min) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
</script>
案例：猜数字游戏
<script type="text/javascript">
function getRandom(max, min) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let random = getRandom(1, 10);
while(true) { // 这是一个死循环
let num = prompt('请输入1~10之间的一个数');
if (num > random) {
alert('猜大了')
} else if(num < random) {
alert('猜小了')
}else{
alert('对了')
break;
}
}
</script>
#3.日期对象
1.Date对象
创建Date实例用来处理日期和时间，Date 对象基于1970年1月1日起的毫秒数
Date 是一个构造函数，必须使用new 来调用创建我们的日期对象
<script type="text/javascript">
//1.使用date 如果没有参数 返回当前系统的当前时间
let date = new Date();
console.log(date);
//2.参数常用的写法 数字型 2022, 10 , 01 或者是 字符串型 '2022-10-1 8:8:8'
let date1 = new Date(2022, 10, 1);
console.log(date1);
let date2 = new Date('2022-10-1 8:8:8')
console.log(date2);
</script>
3.1Date 概述
1.Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后在能用
2.Data 实例主要用来处理日期和时间的
3.2Date()方法的使用
1.获取当前时间必须实例化
let date = new Date(); console.log(date);
2.Date（）构造函数的参数
如果括号里有时间，就返回参数里面的时间，参数有两种写法，一种数字型一种字符串型
3.3 日期格式化
<script type="text/javascript">
// 格式化日期 年月日
let date = new Date();
console.log(date.getFullYear()); //返回当前日期的年份
console.log(date.getMonth() + 1); //返回当前日期的月份 返回的月份要小一个月 记着月份加1
console.log(date.getDate()); //返回的是 几号
console.log(date.getDay()); // 返回今天是周几 注意 周日返回的是0
</script>
1.时分秒
获取时分秒
<script type="text/javascript"> let date = new Date(); console.log(date.getHours()); // 获取当前小时 console.log(date.getMinutes()); // 获取当前时间的分钟 console.log(date.getSeconds()); // 获取当前时间的秒数 // 要求封装一个函数返回当前的时分秒 格式：08:08:08 function getTime() { let time = new Date(); let h = time.getHours(); h = h < 10 ? '0' + h : h let m = time.getMinutes(); m = m < 10 ? '0' + m : m let s = time.getSeconds(); s = s < 10 ? '0' + s : s return h + ':' + m + ':' + s; } console.log(getTime()); </script>
3.4.获取日期的总的毫秒形式
所以我们可以通过我们的Date对象来获取总的毫秒数
三种方法 1. valueof（）2.getTime（）3.直接创建变量 new Date（）
<script type="text/javascript">
//获取date总毫秒数 不是当前毫秒数 而是距离1970年1月1号过了多少毫秒
let date = new Date();
console.log(date.valueOf()); // 方法一 就是我们现在的时间距离1970.1.1的总毫秒数
console.log(date.getTime()); // 方法二
// 2. 简单的写法 (是我们最常用的写法)
let date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
console.log(date1);
</script>
#4.数组对象
4.1数组对象的创建
创建数组对象的两种方式
1.字面量创建
<script>
let arr = [1, 2, 3];
console.log(arr[0]);
</script>
2.new Array()
<script>
//2.利用new Array()
// let arr1 = new Array() // 创建了一个空数组
// let arr1 = new Array(2) // 这个2表示数组的长度为2里面有2个空的数组元素
let arr1 = new Array(2, 3); // 等价于[2,3] 这样写表示 里面有2个数组元素 是 2和3
console.log(arr1);
</script>
4.2检测是否为数组
1.instanceof 运算符 它可以用来检测是否为数组
<script>
function reverse(arr) {
if (arr instanceof Array) {
let newArr = [];
for (let 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]));
var arr = [];
let obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
</script>
2. Array.isArray(参数)
<script> let arr = []; let obj = {}; console.log(Array.isArray(arr)); console.log(Array.isArray(obj)); </script>
4.3.添加删除数组元素的方法
<script>
// 添加或删除数组的方法
// 1.push() 在我们数组末尾 添加一个或多个数组元素 push 推
let arr = [1, 2, 3];
arr.push(4, 'pink');
console.log(arr);
// (1) push() 是可以给数组追加新的元素
// (2) push() 参数直接写数组元素就可以了
// (3) push() 完毕之后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 2.unshift 在我们数组开头 添加一个或多个数组元素
arr.unshift('red', 'purple');
console.log(arr);
// (1) unshift() 是可以给数组前面追加新的元素
// (2) unshift() 参数直接写数组元素就可以了
// (3) unshift() 完毕之后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 删除数组元素
// 3.pop() 它可以删除数组最后的一个元素
arr.pop();
console.log(arr);
// (1) pop() 是可以删除数组最后的一个元素 记住一次只能删除一个元素
// (2) pop() 没有参数
// (3) pop() 完毕之后，返回的结果是 删除的那个元素，删除谁就返回谁
// (4) 原数组也会发生变化
// 4.shift() 它可以删除数组的第一个元素
arr.shift();
console.log(arr);
// (1) shift() 是可以删除数组的第一个元素 记住一次只能删除一个元素
// (2) shift() 没有参数
// (3) shift() 完毕之后，返回的结果是 删除的那个元素，删除谁就返回谁
// (4) 原数组也会发生变化
</script>
案例：筛选数组
<script> let arr = [1500, , 1200, 2000, 2100, 1800]; let arr1 = [] for (let i = 0; i < arr.length; i++) { if (arr[i] < 2000) { arr1.push(arr[i]) } } console.log(arr1); </script>
4.4.数组排序
<script>
//数组排序
// 1. 翻转数组
let arr = ['pink', 'red', 'bule'];
arr.reverse();
console.log(arr);
// 2.数组排序 (冒泡排序)
let arr1 = [3, 2, 4, 5, 6];
arr1.sort((a, b) => {
// return a - b; // 升序的顺序排列
return b - a; // 降序的顺序排列
});
console.log(arr1);
</script>
4.5.数组索引方法
indexOf() 方法
从前向后查找
<script>
// 返回数组元素的索引方法
// indexOf(数组元素) 作用就是返回该数组元素的索引号
// let arr = ['red', 'green', 'blue', 'pink'];
// 他只返回第一个满足条件的索引号
// let arr = ['red', 'green', 'blue', 'pink', 'blue'];
// 他如果在该数组当中找不到元素,则返回 -1
// let arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue'))
</script>
lastIndexOf() 方法
从后向前查找
<script>
// lastIndexOf(数组元素) 作用就是返回该数组元素的索引号
let arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.lastIndexOf('blue'))
// 他如果在该数组当中找不到元素,则返回 -1
let arr = ['red', 'green', 'pink'];
console.log(arr.lastIndexOf('blue'))
</script>
案例：数组去重
<script>
function unique(arr) {
let arr1 = [];
for (let i = 0; i < arr.length; i++) {
if (arr1.indexOf(arr[i]) === -1) {
arr1.push(arr)
}
}
return arr1;
}
let demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
console.log(demo)
</script>
4.6 数组转换为字符串
<script>
// split()
// 把一个字符串分割成字符串数组
var a = "How are you doing today?";
var b = a.split(" ");
console.log(b);
// join()
// 把数组中的所有元素转换为一个字符串：
var c = ["Banana", "Orange", "Apple", "Mango"];
var d = c.join();
console.log(d);
</script>
#5.字符串对象
5.1基本包装类型
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型:String、Number和Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
5.2 字符串的不可变
因为我们字符串的不可变所以不要大量的拼接字符串
5.3 根据字符返回位置
字符串所有的方法都不会修改字符串本身
两个方法用法一样，只不过一个是从前向后查找，一个是从后向前查找
<script>
// 字符串对象,根据 字符串返回位置 str.indexOf('要查找的字符,[起始位置]')
let str = '改革春风吹满地,春风来了';
console.log(str.indexOf('春'))
console.log(str.indexOf('春', 3)) // 从索引3的位置开始往后查找
</script>
案例：返回字符串位置
<script>
let str = "abcoefoxyozzopp";
let index = str.indexOf('o');
let num = 0;
console.log(index);
while (index != -1) {
console.log(index);
num++;
index = str.indexOf('o', index + 1)
}
console.log("o出现的次数是:" + num);
</script>
5.4 根据位置返回字符
方法一 charAt(index) 根据位置返回字符串
<script>
// 1. charAt(index) 根据位置返回字符串
let str = 'andy'
console.log(str.charAt(3));
// 遍历所有的字符
for (let i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
</script>
方法二 charCodeAt(index) 返回相应索引号的字符ASCII值 目的：判断用户按下了那个键
<script> let str = 'andy' console.log(str.charCodeAt(0)); </script>
方法三 str[index] H5新增的
<script> let str = 'andy' console.log(str[0]); </script>
案例：返回字符串位置
<script> let str = "abcoefoxyozzopp"; let a = {}; for (let i = 0; i < str.length; i++) { let chars = str.charAt(i) if (a[chars]) { a[chars]++; } else { a[chars] = 1; } } console.log(a); let max = 0; let ch = ''; for (let k in a) { if (a[k] > max) { max = a[k] ch = k } } console.log(max); console.log('最多字符的是' + ch); </script>
5.5字符串操作方法
方法1：concat
<script>
// 1.concat('字符串1','字符串2'······)
let str = 'andy'
console.log(str.concat('red'));
</script>
方法2：substr
<script>
// 2. substr('截取的起始位置','截取几个字符')
let str1 = '改革春风吹满地'
console.log(str1.substr(2, 2)); // 第一个2是索引号2，第二个2是截取长度的2
</script>
方法3 replace
1 <script> 2 // 3.替换字符 replace('被替换的字符','替换为的字符') 他只会替换第一个字符 3 let str = 'andy' 4 console.log(str.replace('a', 'b')); 5 </script>
方法4 split
<script>
// 2. 字符串转换为数组 split('分割字符')
let str = 'red, pink, blue';
console.log(str.split(','));
</script>
扩展方法
toUpperCase() 转换大写
toLowerCase() 转换小写
浙公网安备 33010602011771号