JavaScript内置对象(案例结合版)

简介: JavaScript内置对象-String对象/Number对象/Math对象/Date对象/案例-制作年历-(案例结合版)

1.内置对象

1.1 String对象

  • 回顾字符型数据的创建:利用一对单引号或双引号。
  • 字符型数据为什么能像对象一样使用呢?
    这是因为这些对象实际上是构造函数String的实例,即String对象。

String对象提供了一些用于对字符串进行处理的属性和方法。

注意:对字符串进行操作时,处理结果是通过方法的返回值直接返回的,并不会改变String对象本身保存的字符串内容。在这些方法的参数中,位置是一个索引值,从0开始计算,第一个字符的索引值是0,最后一个字符的索引值是字符串的长度减1。

<script>
  var str = 'HelloWorld';
  str.length;                // 获取字符串长度,返回结果:10
  str.charAt(5);             // 获取索引位置为5的字符,返回结果:W
  str.indexOf('o');          // 获取“o”在字符串中首次出现的位置,返回结果:4
  str.lastIndexOf('o');      // 获取“o”在字符串中最后出现的位置,返回结果:6
  str.substring(5);          // 截取从位置5开始到最后的内容,返回结果:World
  str.substring(5, 7);       // 截取从位置5开始到位置7范围内的内容,返回结果:Wo
  str.substr(5);             // 截取从位置5开始到最后的内容,返回结果:World
  str.substr(5, 2);          // 截取从位置5开始的后面2个字符,返回结果:Wo
  str.toLowerCase();         // 将字符串转换为小写,返回结果:helloworld
  str.toUpperCase();         // 将字符串转换为大写,返回结果:HELLOWORLD
  str.split('l');            // 使用“l”切割字符串,返回结果:["He", "", "oWor", "d"]
  str.split('l', 3);         // 限制最多切割3次,返回结果:["He", "", "oWor"]
  str.replace('World', 'JavaScript');    // 替换字符串,返回结果:"HelloJavaScript"
</script>

在实际开发中,许多功能的实现都离不开String对象提供的属性和方法。例如,在开发用户注册和登录功能时,要求用户名长度在3~10范围内,不允许出现敏感词admin,实现代码如下。

<script>
  var name = 'Administrator';
  if (name.length < 3 || name.length > 10) {
    alert('用户名长度必须在3~10之间。');
  }
  if (name.toLowerCase().indexOf('admin') !== -1) {
    alert('用户名中不能包含敏感词:admin。');
  }
</script>

上述代码通过判断length 属性来验证用户名长度;通过将用户名转换为小写后查找里面是否包含敏感词admin。实现时name先转换为小写后再进行查找,可以使用户名无论使用哪种大小写组合,都能检查出来。indexOf()方法在查找失败时会返回-1,因此判断该方法的返回值即可知道用户名中是否包含敏感词。


1.2 Number对象

Number对象用于处理整数、浮点数等数值,常用的属性和方法如下。

<script>
  var num = 12345.6789;
  num.toFixed();           // 四舍五入,不包括小数部分,返回结果:12346
  num.toFixed(1);          // 四舍五入,保留1位小数,返回结果:12345.7
  num.toFixed(6);          // 用0填充不足的小数位,返回结果:12345.678900
  Number.MAX_VALUE;        // 获取最大值,返回结果:1.7976931348623157e+308
  Number.MIN_VALUE;        // 获取最小正值,返回结果:5e-324
</script>

在上述示例中,MAX_VALUE 和 MIN_VALUE是直接通过构造函数Number进行访问的,而不是使用Number 的实例对象进行访问,这是因为这两个属性是 Number的静态成员。关于静态成员的概念和定义方式具体后面的小节中详解。


1.3 Math对象

Math对象用于对数值进行数学运算,与其他对象不同的是,该对象不是一个构造函数,不需要实例化就能使用。

<script>
  var num = 10.88;
  Math.ceil(num);           // 向上取整,返回结果:11
  Math.round(num);          // 四舍五入,返回结果:11
  Math.random();            // 获取随机数,返回结果:0.3938305016297685(每次结果不同)
  Math.abs(-25);            // 获取绝对值,返回结果:25
  Math.abs('-25');          // 获取绝对值,返回结果:25
  Math.max(5, 7, 9, 8);     // 获取最大值,返回结果:9
  Math.min(6, 2, 5, 3);     // 获取最小值,返回结果:2
</script>

利用Math.random()还可以获取指定范围内的随机数,公式为Math.random() * (n - m) + m,表示生成大于或等于m且小于n的随机值,示例代码如下。

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

上述代码的返回结果是浮点数,当需要获取整数结果时,,可以搭配Math.floor()来实现。下面通过代码演示如何获取13范围内的随机整数,返回结果可能是12或3.

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

1.4 Date对象

Date对象用于处理日期和时间。

示例1:根据Date对象获取时间日期。

<script>
  var date = new Date();    // 基于当前时间创建Date对象
  date.toString();          // 示例结果:Fri Oct 06 2017 11:53:04 GMT+0800 (中国标准时间)
  date.getFullYear();       // 示例结果:2017
  date.getMonth();          // 示例结果:9
  date.getDate();           // 示例结果:6
</script>

示例2:根据Date对象指定一个日期。

在上述代码中,toString()方法用来方便地查看对象保存的时间信息。

在使用Date对象时,还可以在创建的时候传入参数来指定一个日期,具体示例如下。

<script>
  // 方式1:分别传入年、月、日、时、分、秒(月的范围是0~11,即真实月份-1)
  var date1 = new Date(2017, 9, 1, 11, 53, 4);
  date1.toString();    // 返回结果:Sun Oct 01 2017 11:53:04 GMT+0800 (中国标准时间)
  // 方式2:通过字符串传入日期和时间
  var date2 = new Date('2017-10-01 11:53:04');
  date2.toString();    // 返回结果:Sun Oct 01 2017 11:53:04 GMT+0800 (中国标准时间)
</script>

示例3:处理设置的日期不合理的情况,如将月份设为-1表示去年12月,月份为12

表示明年1月。

在使用方式1时,最少需要指定年、月两个参数,后面的参数在省略时会自动使用默认值;使用方式2时,最少需要指定年份。另外,当传入的数值大于合理范围时,会自动转换成相邻数值(如方式1将月份设为-1表示去年12月,月份为12表示明年1月)。下面通过具体代码进行演示。

<script>
  new Date('2017');         // Sun Jan 01 2017 08:00:00 GMT+0800 (中国标准时间)
  new Date(2017, 9);        // Sun Oct 01 2017 00:00:00 GMT+0800 (中国标准时间)
  new Date(2017, -1);       // Thu Dec 01 2016 00:00:00 GMT+0800 (中国标准时间)
  new Date(2017, 12);       // Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)
  new Date(2017, 0, 0);     // Sat Dec 31 2016 00:00:00 GMT+0800 (中国标准时间)
</script>
相关文章
|
3月前
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
|
3月前
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
41 11
|
3月前
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
84 2
一个案例带你从零入门Three.js,深度好文!
|
3月前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
186 0
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(四):成绩案例
Vue.js 2 项目实战(四):成绩案例
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(三):综合案例-小黑记事本
Vue.js 2 项目实战(三):综合案例-小黑记事本
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(二):图书管理案例
Vue.js 2 项目实战(二):图书管理案例
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(一):图片切换案例
Vue.js 2 项目实战(一):图片切换案例
|
3月前
|
JavaScript 开发者
js之内置对象学习
js之内置对象学习
29 0