【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(八)

1,037 阅读7分钟

这是我参与 8 月更文挑战的第 23 天,活动详情查看: 8月更文挑战

感激相遇 你好 我是阿ken

作者:请叫我阿ken
链接:juejin.cn/user/109118…
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

🌊🌈关于前言:

文章部分内容及图片出自网络,如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容:

5.2_内置对象

为了方便程序开发,JavaScript 提供了很多常用的内置对象, 包括数学对象Math、日期对象Date、数组对象Array以及字符串对象String等。掌握常用内置对象的使用方法会给程序开发带来极大的便利。

5.2.1_通过查阅文档熟悉内置对象

前面讲解的对象都是开发人员自己编写的对象。为了方便程序开发,JavaScript 还提供了很多内置对象,使用内置对象可以完成很多常见的开发需求,例如,数学计算、日期处理,数组操作等。对于大部分开发者来说,不必花费时间研究这些内置对象的实现原理是什么,重要的是快速掌握内置对象的使用,从而快速地投入到开发工作中。

由于JavaScript提供的内置对象非常多,还存在着版本更新、浏览器兼容性等各方面的原因,因此学习内置对象最好的方法是查阅网络上的最新文档。

接下来我们以Mozilla开发者网络(MDN )为例,演示如何查阅JavaScript 中内置对象的使用:

  • 打开MDN网站,在网站的导航栏中找到“技术” —— "JavaScript,
  • 将页面向下滚动,可以在左侧边栏中找到“内置对象”项,将该项展开后,可以看到所有内置对象的目录链接,
  • 另外,如果不知道对象的名称,也可以在页面的搜索框中输入关键字进行搜索,找到某个关键字相关的对象或者方法。

在通过文档学习某个方法的使用时,基本上可以分为4个步骤,
例如查阅Math.max(),具体如下:

  1. 查阅方法的功能。页面上方有一 段文字:“Math max0函数返回一组数中的最大值。”。这段文字就是介绍方法的功能。
  2. 查看参数 的意义和类型。通过文档可知,max() 方法的参数是一组数值, 数量不限。在文档的语法中,使用“[ ]” 包裹的参数表示可选参数,可以省略。
  3. 查看返回值 的意义和类型。在文档中可以看到具体的说明。
  4. 通过示例代码进行测试。在文档中的大部分常用方法的页面中都提供了示例代码,通过示例代码可以学习如何使用这个方法。

5.2.2_[案例] 封装自己的数学对象

当内置对象不能满足需求的时候,我们还可以自己封装一个对象,来完成具体操作。接下来我们封装一个数学对象myMath,实现求出数组中的最大值,

具体代码如下:

var myMath = {

pI: 3.141592653589793,

max: function() (

var max = arguments[0];uments. length; 1++){

for (var 1- 1; i < arguments

if (arguments[i] > max)

max = arguments[i];

return max;

}

console.log (myMath.PI);

/输出结果:3.141592653589793

console. log (myMath.max(102030));

//输出结果: 30

上述代码中,第1行代码定义了一个myMah对象。第2行代码设置了PI的值。第3~ 11行代码定义了一个max方法,并利用arguments来接收输人的参数,返回数组的最大值。第13行代码调用myMahPI得出定义好的值。第14行代码调用myMath.max()方法得出数组中的最大值。

5.3_Math 对象

5.3.1_Math 对象的使用

Math 对象用来对数字进行与数学相关的运算,该对象不是构造函数,不需要实例化对象,可以直接使用其静态属性和静态方法。

Math 对象的常用属性和方法

成员作用
PI获取圆周率,结果为3.141592653589793
abs(x)获取x的绝对值,可传入普通数值或是用字符串表示的数值
max([value1[,value2,…]])获取所有参数中的最大值
min([value1[,value2,…]])获取所有参数中的最小值
pow(base, exponent)获取基数(base)的指数(exponent)次幂,即base^exponent
sqrt(x)获取x的平方根
ceil(x)获取大于或等于x的最小整数,即向上取整
floor(x)获取小于或等于x的最大感数,即向下取整
round(x)获取x的四舍五入后的整数值
random()获取大于或等于0.0且小于1.0的随机值

案例:

Math.PI;// 获取圆周率
Math.abs(-25);// 获取绝对值,返回结果:25
Math.abs('-25');// 获取绝对值,自动转换为数字,返回结果:25
Math.max(5, 7, 9, 8);// 获取最大值,返回结果:9
Math.min(6, 2, 5, 3);// 获取最小值,返回结果:2
Math.pow(2, 4);// 获取2的4次幂,返回结果:16
Math.sqrt(9);//获取9的平方根,返回结果为:3
Math.ceil(1.1);// 向上取整,返回结果: 2
Math.ceil(1.9);// 向上取整,返回结果:2
Math.floor(1.1);// 向下取整,返回结果:1
Math.floor(1.9);// 向下取整,返回结果:1
Math.round(1.1);// 四舍五入,返回结果: 1
Math.round(1.5);// 四舍五入,返回结果:2
Math.round(1.9);// 四舍五入,返回结果:2
Math.round(-1.5);// 四舍五入,返回结果:-1(取较大值)
Math.round(-1.6);// 四舍五入,返回结果:-2

5.3.2_生成指定范围的随机数

Math.random() 用来获取随机数,每次调用该方法返回的结果都不同。该方法返回的结果是一个很长的浮点数,如“0.925045617789475其范围是0~1(不包括1)。

由于 Math.random() 返回的这个随机数不太常用,我们可以借助一些数学公式来转换成任意范围内的随机数,公式为“Math.random() * (max - min) + min",表示生成大于或等于 min 且小于 max 的随机值。

示例代码如下:

Math.random() * (3 - 1) + 1;  // 1 ≤ 返回结果 < 3
Math.random() * (20 - 10) + 10; // 10 ≤ 返回结果 < 20
Math.random() * (99 - 88) + 88; // 88 ≤ 返回结果 < 99

上述代码的返回结果是浮点数,当需要获取整数结果时,可以搭配Math.floor()来实现。

案例:演示如何获取1 ~ 3范围内的随机整数,返回结果可能是1、2或3:

function getRandom (min, max) {
return Math.floor(Math.random()*(max - min + 1) + min);
}
console.log(getRandom(1, 3)); // 最小值1,最大值3

上述代码中,第2行用来生成min到max之间的随机整数,包含min和max。另外,还可以使用Math.floor (Math.random() * (max + 1)) 表示生成0到max之间的随机整数,使用Math.floor (Math.random() * (max + 1)+ 1)表示生成1到max之间的随机整数。

利用随机数,可以实现在数组中随机获取个元素, 示例代码如下:

var arr = ['apple', 'banana', 'orange', 'pear'];
//调用前面编写的getRandom()函数获取随机数
console.log( arr[getRandom(0, arr.length-1)] );

5.3.3_[案例] 猜数字游戏

案例: 演示 Math 对象的使用。使程序随机生成个 1 ~ 10 之间的数字、并让用户输人一个数字户输人的数字,判断这两个数的大小,如果用户输入的数字大于随机数,那么提示“你猜大了”,如果用户输入的数字小于随机数,则提示“你猜小了”,如果两个数字相等,就提示“恭喜你,猜对了”,结束程序。

案例:

function getRandom(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
} //定义了getRandom()函数,利用Math.random()方法求随机数。

var random = getRandom(1, 10);  //设置了随机数大小为1~10之间的数
while(true){  //死循环,利用第13行的break来跳出循环
var num = prompt('猜数字,范围在1~10之间。');
if(num > random){
alert('你猜大了');
}else if(num < random){
alert('你猜小了');
}else{
alert('恭喜你,猜对了');
break;//利用while循环语句中利用if...else if多分支语句来判断大于、小于、等于
}
}

今日入门学习暂时告一段落
Peace

🌊🌈往期回顾:

阿ken的HTML、CSS的入门指南(一)_HTML基础
阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性
阿ken的HTML、CSS的入门指南(三)_文本样式属性
阿ken的HTML、CSS的入门指南(四)_CSS3选择器
阿ken的HTML、CSS的入门指南(五)_CSS盒子模型
阿ken的HTML、CSS的入门指南(六)_CSS盒子模型
阿ken的HTML、CSS的入门指南(七)_CSS盒子模型
阿ken的HTML、CSS的入门指南(八)_CSS盒子模型
阿ken的HTML、CSS的入门指南(九)_浮动与定位
阿ken的HTML、CSS的入门指南(十)_浮动与定位
阿ken的HTML、CSS的入门指南(十一)_浮动与定位
阿ken的HTML、CSS的入门指南(十二)_表单的应用
阿ken的HTML、CSS的入门指南(十三)_表单的应用
阿ken的HTML、CSS的入门指南(十四)_表单的应用
阿ken的HTML、CSS的入门指南(十五)_表单的应用
阿ken的HTML、CSS的入门指南(十六)_多媒体技术
阿ken的HTML、CSS的入门指南(十七)_多媒体技术

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML(十八)
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML(十九)
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML(二十)

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(一)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(三)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(四)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(五)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(六)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(七)

🌊🌈关于后记:

感谢阅读,希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教

原创不易,「点赞」+「关注」 谢谢支持❤