扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript内置对象介绍
  • 708

0
分享到

JavaScript内置对象介绍

2024-04-02 19:04:59 708人浏览 泡泡鱼
摘要

目录一、内置对象二、Math对象1、Math对象的使用2、生成指定范围的随机数三、日期对象1、Date()方法的使用2、日期对象的使用3、获取时间戳四、数组对象1、数组对象的创建2、

一、内置对象

内置对象就是指 js 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。内置对象最大的优点就是帮助我们快速开发。javascript 提供了多个内置对象：Math、 Date 、Array、String等

二、Math对象

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

1、Math对象的使用


       Math.abs(x)：返回x的绝对值
    
    Math.pow(x,y)：返回x的y次方
    
    Math.sqrt(x)：返回x的算术平方根
    
    Math.random()：返回伪随机数(0.0~1.0之间)
    
    Math.round(x)：返回x四舍五入后的最接近的整数
    
    Math.floor(x)：返回小于或等于x的最大整数。（向下取整）
    
    Math.ceil(x)：函数返回大于或等于x的最小整数(向上取整）
    
    Math.max()：返回参数中的最大值
    
    Math.min()：返回参数中的最小值

注意：上面的方法必须带括号

如下所示：


console.log('Math.abs(-2)='+Math.abs(-2));
        console.log('Math.ceil(1.7)='+Math.ceil(1.7));
        console.log('Math.floor(1.7)='+Math.floor(1.7));
        console.log('Math.pow(2,3)='+Math.pow(2,3));
        console.log('Math.sqrt(3)='+Math.sqrt(3));
        console.log('Math.round(3.4)='+Math.round(3.4));
        console.log('Math.round(3.6)='+Math.round(3.6));
        console.log('Math.max(1,2)='+Math.max(1,2));
        console.log('Math.min(1,2)='+Math.min(1,2));

打印结果为：

2、生成指定范围的随机数

封装一个生成1到10之间的随机数的函数：

代码如下：


function random(min,max){
    return Math.floor(Math.random()*(max-min+1))+min;
}
for(var i =1;i<=10;i++){
    console.log('第'+i+'次打印的结果为：'+random(1,10));
}

随机打印输出结果为：

其中,min和max是生成随机数的范围。

三、日期对象

  • Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
  • Date 实例用来处理日期和时间

1、Date()方法的使用

 获取当前时间必须实例化：


var now = new Date();
console.log(now);

 Date() 构造函数的参数：

  • 如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date(‘2019-5-1’) 或者 new Date(‘2019/5/1’)
  • 如果Date()不写参数，就返回当前时间
  • 如果Date()里面写参数，就返回括号里面输入的时间

例如：


       var date1 = new Date()
        console.log('date1='+date1);
        var date2 = new Date(2021,11,08,20,51);
        console.log('date2='+date2);
        date3 = new Date('2021-11-08 20:54')
        console.log('date3='+date3);

输出的结果为：

2、日期对象的使用

get方法的使用：

例如：


 var date1 = new Date()
        console.log('date1='+date1);
        console.log('今年是：'+date1.getFullYear()+'年');
        console.log('这个月是：'+date1.getMonth()+'月');
        console.log('今天是：'+date1.getDate()+'号');
        console.log('现在是：'+date1.getHours()+'时');
        console.log('现在是：'+date1.getMinutes()+'分');

显示结果为：

set方法的使用：

例如：


 var date1 = new Date()
        console.log(date1);
        date1.setFullYear(2020)
        console.log(date1);

打印的结果为：

3、获取时间戳

通过日期对象的valueof()或getTime()方法：


var date1 = new Date();
console.log(date1.valueOf()); 
console.log(date1.getTime());

使用“+”运算符转换为数值型：


var date2 = +new Date();
console.log(date2);

 使用HTML5新增的Date.now()方法：


console.log(Date.now());

四、数组对象

1、数组对象的创建

创建数组对象的两种方式：

  • 字面量方式
  • new Array()

2、检测是否为数组

instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

如下所示：


 var arr=[1,2,3,4];
        var obj = {};
        console.log(arr instanceof Array);
        console.log(obj instanceof Array);
        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));

3、添加删除数组元素的方法

注意：push()和unshift()方法的返回值是新数组的长度，而pop()和shift()方法返回的是移出的数组元素。

例如：
有一个数组[1500, 1200, 2000, 2100, 1800]，要求把数组中超过2000的删除，剩余的放到新数组里面，代码如下：


var arr = [1500, 1200, 2000, 2100, 1800];
        var newArr=[];
        for(var i=0;i<arr.length;i++){
            if(arr[i]<2000){
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);

打印的结果为：

4、数组排序

方法功能描述
reverse()颠倒数组中元素的位置，该方法会改变原数组，返回新数组
sort()对数组的元素进行排序，该方法会改变原数组，返回新数组

例如：

颠倒数组：


var arr = [1500, 1200, 2000, 2100, 1800];
        console.log(arr);
        console.log(arr.reverse());

对数组进行排序：


var arr = [1500, 1200, 2000, 2100, 1800];
        console.log(arr);
        var newArr = arr.sort(function(a,b){
            return a-b;//升序
            return b-a;//降序
        })
        console.log(newArr);

打印的结果为：

5、 数组索引方法

方法名说明返回值
indexOf()数组中查找给定元素的第一个索引如果存在返回索引号，如果不存在，则返回-1
lastIndexOf()在数组中的最后一个的索引如果存在返回索引号，如果不存在则返回-1

例如：


var arr = [1500, 1200, 2000,1500, 2100, 1500,1800];
        console.log('arr.indexOf(1500)：'+arr.indexOf(1500));
        console.log('arr.lastIndexOf(1500):'+arr.lastIndexOf(1500));

打印的结果为：

数组去重案例：

有一个数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’]，要求去除数组中重复的元素。
案例分析：
目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。
核心算法：遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。

代码如下：


 var arr = ['c', 'a', 'z', 'a','x', 'a', 'x', 'c', 'b'];
        var newArr=[];
        for(var i =0;i<arr.length;i++){
            if(newArr.indexOf(arr[i]) === -1)
            {
                newArr.push(arr[i]);
            }    
        }
        console.log(newArr);

打印的结果为：

6、数组转换为字符串

方法名说明返回值
toString(）把数组转换成字符串，逗号分隔每一项返回一个字符串
join('分隔符‘)方法用于把数组中的所有元素转换成一个字符串。返回一个字符串

例如：


var arr = ['a', 'b', 'c'];
console.log(arr);
console.log(arr.toString()); // 输出结果：a,b,c
// 使用join()
console.log(arr.join());  // 输出结果：a,b,c
console.log(arr.join(''));  // 输出结果：abc
console.log(arr.join('-'));  // 输出结果：a-b-c

五、字符串对象

1、根据字符返回位置

方法名说明
indexOf()返回指定内容在原字符串的位置， 如果找不到，则返回-1，开始的位置是index索引号
lastIndexOf()从后往前找，只找第一个匹配的

例如：要求在一组字符串中，找到所有指定元素出现的位置以及次数。字符串为 ’ Hello World, Hello JavaScript '。

代码如下：


var str = 'Hello World, Hello JavaScript';
console.log(str);
var index = str.indexOf('o');
var num = 0;
while (index != -1) {
  console.log(index);    // 依次输出：4、7、17
  index = str.indexOf('o', index + 1);
  num++;
}
console.log('o出现的次数是：' + num);  // o出现的次数是：3

打印的结果为：

2、 根据位置返回字符

例如：


var str = 'Apple';
console.log(str.charAt(3));           // 输出结果：1
console.log(str.charCodeAt(0));   // 输出结果：65（字符A的ASCII码为65）
console.log(str[0]);           // 输出结果：A

例如： 使用charAt()方法通过程序来统计字符串中出现最多的字符和次数


var str = 'Apple';
// 第1步，统计每个字符的出现次数
var o = {};
for (var i = 0; i < str.length; i++) {
  var chars = str.charAt(i); // 利用chars保存字符串中的每一个字符
  if (o[chars]) {                // 利用对象的属性来方便查找元素
    o[chars]++;
  } else {  o[chars] = 1; }
}
console.log(o);

打印结果为：

3、 字符串操作方法


var str = 'HelloWorld';
str.concat('!');  // 在字符串末尾拼接字符，结果：HelloWorld!
str.slice(1, 3);   // 截取从位置1开始包括到位置3的范围内的内容，结果：el
str.substring(5);      // 截取从位置5开始到最后的内容，结果：World
str.substring(5, 7);  // 截取从位置5开始到位置7范围内的内容，结果：Wo
str.substr(5);           // 截取从位置5开始到字符串结尾的内容，结果：World
str.toLowerCase();  // 将字符串转换为小写，结果：helloworld
str.toUpperCase();  // 将字符串转换为大写，结果：HELLOWORLD
str.split('l');   // 使用“l”切割字符串，结果：["He", "", "oWor", "d"]
str.replace('World', '!'); // 替换字符串，结果："Hello!"

4、split()方法

split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
例如：


var str = 'a,b,c,d';
console.log(str);
console.log(str.split(','));   // 返回的是一个数组 [a, b, c, d]

到此这篇关于JavaScript内置对象介绍的文章就介绍到这了,更多相关JavaScript内置对象内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JavaScript内置对象介绍

本文链接: https://lsjlt.com/news/159220.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript内置对象介绍
    目录一、内置对象二、Math对象1、Math对象的使用2、生成指定范围的随机数三、日期对象1、Date()方法的使用2、日期对象的使用3、获取时间戳四、数组对象1、数组对象的创建2、...
    99+
    2024-04-02
  • JavaScript中的内置对象介绍
    一、对象的概念 对象是一种特殊的数据类型（object）。拥有一系列的属性和方法。分为内置对象和自定义对象。 二、String对象 String对象用来支持对于字符串的处理。 1、属...
    99+
    2024-04-02
  • JavaScript内置对象Math与String详细介绍
    目录Math对象Math获取随机数String对象Math对象 js内置数学对象 不是一个构造函数 所以不需要使用new来调用 而是直接使用里面的属性和方法即可 Math.PI 圆周...
    99+
    2024-04-02
  • javascript中内置对象Math的介绍及用法案例
    目录前言Math概述Math中常用函数的用法1.绝对值方法2.三个取整方法3.求最大值/最小值4.随机数结语前言 今天总结一下javascript 内置对象Math中的函数用法，顺带...
    99+
    2024-04-02
  • JavaScript对象不变性介绍
    目录1. 基本概念2. Object.freeze()3. Object.seal()4. const关键字？5. 总结1. 基本概念 对象不变性在任何编程语言中都是一个重要的概念。...
    99+
    2024-04-02
  • JavaScript（内置对象）
    目录 一，JavaScript内置对象二，Array对象2.1，常用属性和方法2.2，基本方法 三，Date对象3.1，常用方法3.2，小案例 四，Math对象 一，JavaScr...
    99+
    2023-09-07
    javascript 开发语言 ecmascript
  • javascript Number 与 Math对象的介绍
    目录一、javascript 中 Number二、Javascript中Math对象一、javascript 中 Number javascript 中，数值类型属于原始类型。 除了...
    99+
    2024-04-02
  • JavaScript可迭代对象详细介绍
    目录1、迭代器2、迭代器接口与可迭代对象3、自定义可迭代对象3.1、可迭代的Range对象3.2、使用Generator函数作为迭代器接口3.3、可迭代的List3.3、可迭代的迭代...
    99+
    2024-04-02
  • JavaScript对象和内置对象的区别
    这篇文章主要讲解了“JavaScript对象和内置对象的区别”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript对象和内置对象的区别”吧！一、...
    99+
    2024-04-02
  • JavaScript原始值与包装对象介绍
    这篇文章主要介绍“JavaScript原始值与包装对象介绍”，在日常操作中，相信很多人在JavaScript原始值与包装对象介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2024-04-02
  • JavaScript对象合并实现步骤介绍
    JavaScript 中有多种方法可以合并对象。 1、使用 Object.assign() 方法： 它可以将一个或多个对象的属性复制到目标对象中。例如： const obj1 = {...
    99+
    2023-01-31
    JavaScript对象合并 JS对象合并
  • Python面向对象里常见的内置成员介绍
    好嘞，今天我们继续剖析下Python里的类。[[441842]]先前我们定义类的时候，使用到了构造函数，在Python里的构造函数书写比较特殊，他是一个特殊的函数__init__，其实在类里，除了构造函数还有很多其他格式为__XXX__的函...
    99+
    2023-05-14
    开发 Python 函数
  • Flask  request 对象介绍
    目录1、request请求对象1.1request请求对象的使用前言： 一个完整的 HTTP 请求，包括客户端向服务端发送的 Request 请求和服务器端发送的 Response ...
    99+
    2024-04-02
  • JavaScript中的Array对象排序方法介绍
    这篇文章主要介绍“JavaScript中的Array对象排序方法介绍”，在日常操作中，相信很多人在JavaScript中的Array对象排序方法介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方...
    99+
    2024-04-02
  • javascript内置对象有哪些
    javascript中的内置对象有：1.值属性；2.函数属性；3.基本对象；4.错误对象；5.数字和日期对象；6.字符串；7.可索引的集合对象；8.使用键的集合对象；9.结构化数据；10.控制抽象对象；11.反射;javascript中的...
    99+
    2024-04-02
  • Java对象的内存布局详细介绍
    目录一、对象头1)、Mark Word2)、类型指针3)、数组长度(只有数组对象才有)二、实例数据三、对齐填充四、使用JOL工具分析对象内存布局在HotSpot虚拟机中，对象在内存中...
    99+
    2023-02-13
    Java对象内存布局 Java内存布局 Java对象内存
  • .NET 6全新配置对象ConfigurationManager介绍
    介绍 本节为大家带来.NET 6新增的ConfigurationManager,很多人好奇为啥要讲这个，读取加载配置信息都随手就来了，我们往下看一下。 翻译：这添加了 ASP.NE...
    99+
    2024-04-02
  • Python 面向对象介绍
    一、类的实例化：调用类产生对象的过程称为类的实例化，实例化的结果是一个对象，或称为一个实例 1 class People: 2 def __init__(self,name,age,sex): 3 self.na...
    99+
    2023-01-30
    面向对象 Python
  • 关于JavaScript 的对象的介绍是怎样的
    本篇文章为大家展示了关于JavaScript 的对象的介绍是怎样的，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。1. 对象方法 & this方法只是保存函数...
    99+
    2024-04-02
  • JavaScript的内置对象怎么用
    这篇“JavaScript的内置对象怎么用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“J...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作