JavaScript内置对象

海浩發表於 2022-4-12 09:15:00

#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 。
案例：封装自己的数学对象
<div class="cnblogs_code">
<pre><script type="text/javascript">
 let myMath = {
 PI: 3.1415926535,
 max: function() {
 let max = arguments;
 for (var i = 1; i < arguments.length; i++) {
 if (arguments > max) {
 max = arguments
 }
 }
 return max;
 },
 min: function() {
 let min = arguments;
 for (var i = 1; i < arguments.length; i++) {
 if (arguments < min) {
 min = arguments
 }
 }
 return min;
 }
 }
 console.log(myMath.PI);
 console.log(myMath.max(1, 5, 9));
 console.log(myMath.min(1, 5, 9));
 </script></pre>
</div>
2.1Math 概述
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。
<div class="cnblogs_code">
<pre><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></pre>
</div>
2.2随机数方法 random()
1.Math.random()函数返回一个随机的小数
<div class="cnblogs_code">
<pre><script type="text/javascript">
 console.log(Math.random());
 </script></pre>
</div>
2.我们想要得到两个数之间的随机整数并且包含这两个整数
<div class="cnblogs_code">
<pre><script type="text/javascript">
 function getRandom(max, min) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 console.log(getRandom(1, 10));
 </script></pre>
</div>
案例：猜数字游戏
<div class="cnblogs_code">
<pre><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></pre>
</div>
#3.日期对象
1.Date对象
创建Date实例用来处理日期和时间，Date 对象基于1970年1月1日起的毫秒数
Date 是一个构造函数，必须使用new 来调用创建我们的日期对象
<div class="cnblogs_code">
<pre><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></pre>
</div>
3.1Date 概述
1.Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后在能用
2.Data 实例主要用来处理日期和时间的
3.2Date()方法的使用
1.获取当前时间必须实例化
<div class="cnblogs_code">
<pre>let date = new Date();
 console.log(date);</pre>
</div>
2.Date（）构造函数的参数
如果括号里有时间，就返回参数里面的时间，参数有两种写法，一种数字型一种字符串型
3.3 日期格式化
<img src="https://img2022.cnblogs.com/blog/2811223/202204/2811223-20220409165127390-710704305.png" alt="" width="718" height="301" loading="lazy">
<div class="cnblogs_code">
<pre><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></pre>
</div>
1.时分秒
 获取时分秒 
<div class="cnblogs_code">
<pre><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></pre>
</div>
3.4.获取日期的总的毫秒形式
所以我们可以通过我们的Date对象来获取总的毫秒数
三种方法 1. valueof（）2.getTime（）3.直接创建变量 new Date（）
<div class="cnblogs_code">
<pre><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></pre>
</div>
#4.数组对象
4.1数组对象的创建
创建数组对象的两种方式
1.字面量创建
<div class="cnblogs_code">
<div>
<div><script></div>
<div>    let arr = ;</div>
<div>    console.log(arr);</div>
<div>  </script></div>
</div>
</div>
2.new Array()
<div class="cnblogs_code">
<pre><script>
 //2.利用new Array()
 // let arr1 = new Array()// 创建了一个空数组
 // let arr1 = new Array(2) // 这个2表示数组的长度为2里面有2个空的数组元素
 let arr1 = new Array(2, 3); // 等价于这样写表示里面有2个数组元素是 2和3
 console.log(arr1);
</script></pre>
</div>
4.2检测是否为数组
1.instanceof 运算符它可以用来检测是否为数组
<div class="cnblogs_code">
<pre><script>
 function reverse(arr) {
 if (arr instanceof Array) {
 let newArr = [];
 for (let i = arr.length - 1; i >= 0; i--) {
 newArr = arr
 }
 return newArr;
 } else {
 return '这个参数必须是数组格式'
 }
 }
 console.log(reverse([1, 2, 3]));
 var arr = [];
 let obj = {};
 console.log(arr instanceof Array);
 console.log(obj instanceof Array);
</script></pre>
</div>
2. Array.isArray(参数)
<div class="cnblogs_code">
<pre><script>
 let arr = [];
 let obj = {};
 console.log(Array.isArray(arr));
 console.log(Array.isArray(obj));
</script></pre>
</div>
4.3.添加删除数组元素的方法
<img src="https://img2022.cnblogs.com/blog/2811223/202204/2811223-20220411095909702-230364929.png" alt="" width="832" height="226" loading="lazy">
<div class="cnblogs_code">
<pre><script>
 // 添加或删除数组的方法
 // 1.push() 在我们数组末尾添加一个或多个数组元素 push 推
 let arr = ;
 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></pre>
</div>
案例：筛选数组
<div class="cnblogs_code">
<pre><script>
let arr = ;
let arr1 = []
for (let i = 0; i < arr.length; i++) {
 if (arr < 2000) {
 arr1.push(arr)
 }
}
console.log(arr1);
</script></pre>
</div>
4.4.数组排序
<img src="https://img2022.cnblogs.com/blog/2811223/202204/2811223-20220411102503448-2004174854.png" alt="" width="868" height="124" loading="lazy">
<div class="cnblogs_code">
<pre><script>
 //数组排序
 // 1. 翻转数组
 let arr = ['pink', 'red', 'bule'];
 arr.reverse();
 console.log(arr);
 // 2.数组排序 (冒泡排序)
 let arr1 = ;
 arr1.sort((a, b) => {
 // return a - b; // 升序的顺序排列
 return b - a; // 降序的顺序排列
 });
 console.log(arr1);
</script></pre>
</div>
4.5.数组索引方法
<img src="https://img2022.cnblogs.com/blog/2811223/202204/2811223-20220411145125611-1243775206.png" alt="" width="841" height="121" loading="lazy">
 
 
 indexOf() 方法
从前向后查找
<div class="cnblogs_code">
<pre><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></pre>
</div>
lastIndexOf() 方法
从后向前查找
<div class="cnblogs_code">
<pre><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></pre>
</div>
案例：数组去重
<div class="cnblogs_code">
<pre><script>
function unique(arr) {
 let arr1 = [];
 for (let i = 0; i < arr.length; i++) {
 if (arr1.indexOf(arr) === -1) {
 arr1.push(arr)
 }
 }
 return arr1;
}
let demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
console.log(demo)
</script></pre>
</div>
4.6 数组转换为字符串
<img src="https://img2022.cnblogs.com/blog/2811223/202204/2811223-20220411152623926-1636490415.png" alt="" width="877" height="126" loading="lazy">
<div class="cnblogs_code">
<pre> <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></pre>
</div>
#5.字符串对象
5.1基本包装类型
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型:String、Number和Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
5.2 字符串的不可变
因为我们字符串的不可变所以不要大量的拼接字符串
5.3 根据字符返回位置
字符串所有的方法都不会修改字符串本身
<img src="https://img2022.cnblogs.com/blog/2811223/202204/2811223-20220411154728059-236782666.png" alt="" width="827" height="145" loading="lazy">
 
 
 两个方法用法一样，只不过一个是从前向后查找，一个是从后向前查找
<div class="cnblogs_code">
<pre><script>
 // 字符串对象,根据字符串返回位置 str.indexOf('要查找的字符,[起始位置]')
 let str = '改革春风吹满地,春风来了';
 console.log(str.indexOf('春'))
 console.log(str.indexOf('春', 3)) // 从索引3的位置开始往后查找
</script></pre>
</div>
案例：返回字符串位置
<div class="cnblogs_code">
<div>
<div><script></div>
<div>    let str = "abcoefoxyozzopp";</div>
<div>    let index = str.indexOf('o');</div>
<div>    let num = 0;</div>
<div>    console.log(index);</div>
<div>    while (index != -1) {</div>
<div>      console.log(index);</div>
<div>      num++;</div>
<div>      index = str.indexOf('o', index + 1)</div>
<div>    }</div>
<div>    console.log("o出现的次数是:" + num);</div>
<div>  </script></div>
</div>
</div>
5.4 根据位置返回字符
<img src="https://img2022.cnblogs.com/blog/2811223/202204/2811223-20220411160952907-101700368.png" alt="" width="903" height="170" loading="lazy">
 
 
 方法一 charAt(index) 根据位置返回字符串 
<div class="cnblogs_code">
<pre><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></pre>
</div>
方法二 charCodeAt(index) 返回相应索引号的字符ASCII值目的：判断用户按下了那个键
<div class="cnblogs_code">
<pre><script>
 let str = 'andy'
 console.log(str.charCodeAt(0));
</script></pre>
</div>
方法三 str  H5新增的
<div class="cnblogs_code">
<pre><script>
 let str = 'andy'
 console.log(str[0]);
</script></pre>
</div>
案例：返回字符串位置
<div class="cnblogs_code">
<pre><script>
let str = "abcoefoxyozzopp";
let a = {};
for (let i = 0; i < str.length; i++) {
 let chars = str.charAt(i)
 if (a) {
 a++;
 } else {
 a = 1;
 }
}
console.log(a);
let max = 0;
let ch = '';
for (let k in a) {
 if (a > max) {
 max = a
 ch = k
 }
}
console.log(max);
console.log('最多字符的是' + ch);
</script></pre>
</div>
 5.5字符串操作方法
<img src="https://img2022.cnblogs.com/blog/2811223/202204/2811223-20220412085019459-186459549.png" alt="" width="875" height="236" loading="lazy">
 

 方法1：concat
<div class="cnblogs_code">
<pre><script>
 // 1.concat('字符串1','字符串2'······)
 let str = 'andy'
 console.log(str.concat('red'));
</script></pre>
</div>
方法2：substr
<div class="cnblogs_code">
<pre><script>
 // 2. substr('截取的起始位置','截取几个字符')
 let str1 = '改革春风吹满地'
 console.log(str1.substr(2, 2)); // 第一个2是索引号2，第二个2是截取长度的2
</script></pre>
</div>
方法3 replace
<div class="cnblogs_code">
<pre>1 <script>
2 // 3.替换字符 replace('被替换的字符','替换为的字符') 他只会替换第一个字符
3 let str = 'andy'
4 console.log(str.replace('a', 'b'));
5 </script></pre>
</div>
方法4 split
<div class="cnblogs_code">
<pre><script>
 // 2. 字符串转换为数组 split('分割字符')
 let str = 'red, pink, blue';
 console.log(str.split(','));
</script></pre>
</div>
扩展方法
 toUpperCase()  转换大写
toLowerCase()   转换小写 
来源：https://www.cnblogs.com/zzm666/p/16123150.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript内置对象