【JavaScript】（2）——内置对象

最新推荐文章于 2024-07-23 23:16:00 发布
最新推荐文章于 2024-07-23 23:16:00 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 我的成长路の计算机 ----------【Web前端】 JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helijie92902/article/details/50175991
版权

背景：什么是JavaScript的内置对象，有何作用，如何只用……下面来介绍一下，长长见识！



一、定义



    ECMA-262对内置对象的定义是：“ 由 ECMAScript实现提供的、不依赖宿主环境的对象，这些对象在 ECMAScript程序执行之前就已经存在了。” 意思就是说，开发人员不必显示地实例化内置对象，因为它们已经实例化了。

    ECMA-262只定义了两个内置对象： Global和 Math



二、Global



    Global(全局)对象是 ECMAScript中一个特别的对象，因为这个对象是不存在的。 在ECMAScript中不属于任何其他对象的属性和方法，都属于它的属性和方法。 所以， 事实上，并不存在全局变量和全局函数；所有在全局作用域定义的变量和函数，都是 Global对象的属性和方法。


    PS：因为 ECMAScript没有定义怎么调用 Global对象，所以， Global.属性或者 Global.方法()都是无效的。 (Web浏览器将 Global作为 window对象的一部分加以实现)


Global对象有一些内置的属性和方法：


1、URI编码方法


编码：    

    URI编码可以对链接进行编码，以便发送给浏览器。它们采用特殊的UTF-8编码替换所有无效字符，从而让浏览器能够接受和理解。


encodeURI()不会对本身属于 URI的特殊字符进行编码，例如冒号、正斜杠、问号和#号；而 encodeURIComponent()则会对它发现的任何非标准字符进行编码。


<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>var box = '@#&*何丽杰helijie';
alert(encodeURI(box));     //只编码了中文</strong></span>


 



<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>var box = '@#&*何丽杰helijie';
alert(encodeURIComponent(box)); //特殊字符和中文编码了</strong></span>




PS：因为 encodeURIComponent()编码比 encodeURI()编码来的更加彻底，一般来说encodeURIComponent()使用频率要高一些。



解码：通过 decodeURI()和 decodeURIComponent()来进行解码


<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>var box = '@#&*何丽杰helijie';
alert(decodeURI(encodeURI(box)));     //还原</strong></span>


 

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>var box = '@#&*何丽杰helijie';
alert(decodeURIComponent(encodeURIComponent(box)));    //还原
</strong></span>




PS： URI方法如上所述的四种，用于代替已经被 ECMA-262第3版废弃的escape()和unescape()方法。 URI方法能够编码所有的 Unicode字符，而原来的只能正确地编码 ASCII字符。所以建议不要再使用 escape()和 unescape()方法。



2、eval()方法


    eval()方法主要担当一个字符串解析器的作用，他只接受一个参数，而这个参数就是要执行的 JavaScript代码的字符串。


<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>eval('var box= 100'); //解析了字符串代码
alert(box);

eval('alert(100)'); //同上</strong></span>


 


<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>eval('function box() {return 123}'); //函数也可以
alert(box());</strong></span>


    eval()方法的功能非常强大，但也非常危险。因此使用的时候必须极为谨慎。特别是在用户输入数据的情况下，非常有可能导致程序的安全性，比如代码注入等等。



3、Global对象属性


    Global对象包含了一些属性： undefined、 NaN、 Object、 Array、 Function等等。


<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>alert(Array); //返回构造函数</strong></span>


4、window对象


    之前已经说明， Global没有办法直接访问， 而 Web浏览器可以使用 window对象来实现一全局访问。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>alert(Array); //返回构造函数</strong></span>



三、Math



    ECMAScript还为保存数学公式和信息提供了一个对象，即 Math对象。与我们在JavaScript直接编写计算功能相比， Math对象提供的计算功能执行起来要快得多。


1、Math对象的属性


    Math对象包含的属性大都是数学计算中可能会用到的一些特殊值。Math的属性：



例： 
<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>alert(Math.E); </strong></span>



2、min()和 max()方法


    Math.min()用于确定一组数值中的最小值。 Math.max()用于确定一组数值中的最大值。


<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>alert(Math.min(2,4,3,6,3,8,0,1,3)); //0，最小值</strong></span>

 
<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>alert(Math.max(4,7,8,3,1,9,6,0,3,2)); //9，最大值</strong></span>


3、舍入方法


    Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；
    Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；
    Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数；


<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>alert(Math.ceil(25.9)); //26
alert(Math.ceil(25.5)); //26
alert(Math.ceil(25.1)); //26</strong></span>

 
<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>alert(Math.floor(25.9)); //25
alert(Math.floor(25.5)); //25
alert(Math.floor(25.1)); //25</strong></span>

 
<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>alert(Math.round(25.9)); //26
alert(Math.round(25.5)); //26
alert(Math.round(25.1)); //25</strong></span>



4、random()方法


    Math.random()方法返回介于0到1之间一个随机数， 不包括0和1。 如果想大于这个范围的话，可以套用一下公式：值 =Math.floor(Math.random()* 总数 + 第一个值)


<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>alert(Math.floor(Math.random()*10+1)); //随机产生1-10之间的任意数</strong></span>

 
<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>for(var i=0;i<10;i++){
   document.write(Math.floor(Math.random()*10+5)); //5-14之间的任意数
   document.write('<br/>');
}
</strong></span>


    为了更加方便的传递想要范围，可以写成函数：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>function selectFrom(lower,upper){
     var sum=upper-lower+1; //总数-第一个数+1
     return Math.floor(Math.random()*sum+lower);
}

for(var i=0;i<10;i++){
    document.write(selectFrom(5,10)); //直接传递范围即可
    document.write('<br/>');
}</strong></span>



5、其他方法




四、学习心得



    偶得一寓言故事——纪昌学箭


    纪昌向飞卫学射箭，飞卫没有传授具体的射箭技巧，却要求他必须学会盯住目标而眼睛不能眨动，纪昌花了两年，练到即使椎子向眼角刺来也不眨一下眼睛的功夫。

    飞卫又进一步要求纪昌练眼力，标准要达到将体积较小的东西能够清晰地放大，就像在近处看到一样。纪昌苦练三年，终于能将最小的虱子看成车轮一样大，纪昌张开弓，轻而易举地一箭便将虱子射穿。飞卫得知结果后，对这个徒弟极为满意。
　　学习射箭必须先练眼力，基础的动作扎实了，应用就可以千变万化；学习也是一样，基本的内容一定要好好掌握，那么后续就可以鸿图大展了。学习有如修塔，如果只想往上砌砖，而忘记打牢基础，总有一天塔会倒塌……







Reka
关注
专栏目录
JavaScript——内置对象（Math，Date）
流楚丶格念的博客
07-19 4374
文章目录内置对象通过MDN/W3C来查询验证变量是不是对象的方法Math对象案例：随机生成颜色RGBDate对象案例 内置对象 JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象 JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean… 对象只是带有属性和方法的特殊数据类型。 内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。 通过MDN/W3C来查询 学习一个内置对象的使用，只要学会其常用的成员的使用（通过查
JavaScript——内置对象（String，Array）
流楚丶格念的博客
07-19 4210
文章目录Array对象案例基本包装类型String对象案例 Array对象 创建数组对象的两种方式 字面量方式 new Array() // 1. 使用构造函数创建数组对象 // 创建了一个空数组 var arr = new Array(); // 创建了一个数组，里面存放了3个字符串 var arr = new Array('zs', 'ls', 'ww'); // 创建了一个数组，里面存放了4个数字 var arr = new Array(1, 2, 3, 4); // 2. 使用字面量创
JavaScript 中的内置对象
06-06 490
JavaScript 中的内置对象 所有编程语言都具有内部（或内置的）对象来创建 语言的基本功能。内部对象是 您编写自定义代码所用语言的基础， 该代码基于您的想象实现自定义功能。JavaScript 有许多 将其定义为语言的内部对象。本文介绍了一些 最常用的对象，并简要介绍了它们 有哪些功能以及如何使用这些功能。   javascript--内置对
利用indexOf（）函数统计数组arr（['a','b','d','d','c','d','d']）中元素d出现的次数，并同时返回其对应的所有下标
热门推荐
萍萍萍呐
04-16 1万+
<script> var arr=['a','b','d','d','c','d','d']; var search='d'; var res=[];//存放下标 var i=arr.indexOf(search); while (i!==-1){ res.push(i); i=(i<=6?arr.index...
JavaScript——内置对象
岳泽以
04-09 337
内置对象 JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象 前面两种对象是JS基础内存，属于ECMAScript，第三种浏览器对象属于我们JS独有的。 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。 内置对象最大的优点就是帮助我们快速开发 JavaScript提供了多个内置对象：Math、Date、Array、String等 查询MDN文档 学习一个内置对象的使用，只要学会其常用成员的使用即可。 我们
JavaScript(12)——内置对象
最新发布
m0_74386799的博客
07-23 244
JavaScript内部提供的对象，包含各种属性和方法给开发者调用。
JS基础——内置对象2
m0_48454458的博客
08-15 117
是否为数组的2个方法：①arr instanceof Array ②Array.isArray(arr)添加数组：获取知识，就找，B站UP，Ｕ——unshift前面添加，Ｐ——push后面添加。删除数组：想到大炮，SP，S——先点S型的绳子，P——才能放出炮弹P。...
JavaScript（4）——内置对象、面向对象
weixin_52120405的博客
03-22 1391
1.内置对象 1）global对象 在JS中没有global对象，Web浏览器将Global作为window对象的一部分加以实现。 方法： a.encodeURIComponent():对unicode进行编码处理 b.decodeURIComponent():对unicode编码进行解码处理 c.eval(''):具有字符串解析器的作用（慎用！因为它的性能较差，且比较危险） 2）Mat...
Web基础——JavaScript的内置对象
威威的博客
01-05 2848
1.String 对象 1. 定义方式1： String str=new String("abckdddd"); 定义方式2：var str="我爱你爱你"; 2. 属性：length: 字符串的长度 3. 方法： charAt() 返回在指定位置的字符。 例子：var v="abcd"; var a=v.charAt(2); concat() 连接字符串。 例子：var v="ab"
JavaScript——对象
巧克力布丁的博客
03-18 4306
文章目录一. 对象1. 什么是对象2. 为什么需要对象二. 创建对象的三种方式1. 利用字面量创建对象2. 利用 new Object 创建对象3. 利用构造函数创建对象4. 构造函数和对象三. new 关键字四. 遍历对象属性五. 内置对象1. 概述2. 查文档3. Math 对象3.1 Math 概述3.2 随机数方法 random()4. 日期对象4.1 Date 概述4.2 Date()方法的使用4.3 日期格式化4.4 获取日期的总的毫秒形式5. 数组对象5.1 数组对象的创建5.2 检测是否为数
JavaScript常用的对象——Math对象详谈
01-08
JavaScript中的Math对象是内置对象之一，它包含了众多用于数学计算的方法和属性，使得开发者在处理数学问题时能够方便地进行各种运算。Math对象不同于其他如Array、Function或Object，它不能通过构造函数来实例化，...
前端学习之JavaScript——内置对象
Jane_xxxxxy的博客
08-11 803
1. 内置对象 JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法） 内置对象最大的优点就是帮助我们快速开发 JavaScript 提供了多个内置对象：Math、 Date 、Array、String等 2. 查文档 2.1 MDN 学习一个内置对象的使用，只要
【CSS+DIV】（3）——网上购物网站
Reka's blog ^_^
01-02 4189
背景：CSS学习已经完成了，这部分内容比较好玩，后面还分析制作了各种小例子，UI的内容做的十分绚丽多彩，如果加上后台内容就会更加完美了。目前网络上的购物网站已经越来越多了，淘宝、京东、当当等大型购物网站以及经营各种小生意的网站层出不穷。张罗网上的商店甚至成了很多人的工作。本文以网上的花店为例，介绍如何构建小型的网上商店。进一步熟练CSS构建网站的方法。 一、设计分析
【JavaScript】（10）——实例：移动端视频播放器
Reka's blog ^_^
04-04 3683
背景：手机的出现大大的方便了我们的生活，视频播放功能的出现更是方便了我们清晰动态地了解生活中的种种。这个效果是怎么做出来的呢？我们接手的项目中也有这个小视频的功能，当时被安排的时候有一点小兴奋，因为当时感觉这个功能应该挺难的，但是真正接手的时候就感觉这个简直太简单了，哎！又被纸老虎吓到了。下面介绍一下这个功能是怎么做出来的吧。也让你们看看这个纸老虎的“音容笑貌”！ 一、video标签
【JQuery】知识点总结（上）
Reka's blog ^_^
01-10 2528
背景：
【JavaScript】（8）——实例：图片切换效果
Reka's blog ^_^
03-14 2475
背景：不知道怎么回事，最近做的项目都是在和UI打交道，各种图片，各种表格，各种按钮的组合、拼接；写各种JS方法让他们无缝组合，自由切换；对CSS+HTML中的多种属性都熟悉了一下，盒子模型，背景图片等等。刚刚接手的时候既兴奋又激动，但是实际忙起来，既眼花又头疼。不过还好持续的时间不算太长，熟练了，适应了，就好了。 一、问题出世     项目中要实现checkbox功能，但是用的
【JavaScript】（9）——实例：滑动效果的弹出框
Reka's blog ^_^
03-27 2426
背景：用户的需求千奇百怪，为了满足用户对界面的需求，我这只小菜鸟也是“拼了小命”了。弹出框，大家都很熟悉吧，但是在弹出框中加上滑动效果，这个就是有点小难了，为了这个效果我也是搜寻了很多地方呀，最后的最后终于将这个效果做出来了，而且还不错，现在分享一下，更多的怕自己忘记。 一、加载按钮 1、材料准备 按钮图片两张，其他图片内容可以自己加载，Notepad++ 2、
【JavaScript】（6）——JavaScript与XPath、JSON交互
Reka's blog ^_^
12-12 2231
背景：
【CSS+DIV】（1）——滤镜的应用
Reka's blog ^_^
12-23 2020
背景：牛腩中接触过CSS，当时对这个CSS情有独钟，因为它可以美化界面，而我就喜欢和界面这种看得见效果的东西打交道，现在又重新学习，而且内容还那么多，超级开心，废话少说，动手吧！ 一、CSS滤镜     CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。     CSS滤镜的标识符是“filter”
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值