详细谈谈javascript的对象

javascript中有很多对象内容，挑几个感觉用的比较多的讲解。

在网上学习一些和看javascript的学习手册。

如果要这个手册的可以留言，看到了我就发给你。恩，接下来总结一下我自己对象进阶之路。

1.对象：

(1)javascript中的所有事件都是对象：字符串、数组、函数.....

(2)每个对象带有属性和方法。

(3)JS允许自定义对象。

2.自定义对象 ：

(1)定义并创建对象实例。

(2)使用函数来定义对象，然后创建新的对象实例。

例（针对2-（1））：

方法1：

<script>

people=new Object();

people.name="颜小媛";

people.age="18";

document.write("name:"+people.name+",age:"+people.age);

</script>

结果：界面打印出name:颜小媛，age：18

方法2：

<script>

people=new Object();

people={

name:"颜小媛"，

age:18

}

document.write("name:"+people.name+",age:"+people.age);

</script>

结果：界面打印出name:颜小媛，age：18

例（针对2-（2））：

<script>

function people(name,age){

this.name=name;

this.age=age;

}

son=new people("颜小媛"，18);

document.write("name:"+son.name+",age:"+son.age);

</script>

结果：界面打印出name:颜小媛，age:18

string字符串对象

1.string对象：

string对象用于处理已有的字符串；字符串可以使用单引号或双引号【扩：混合使用避免冲突。】。

2.一些属性的演示：

（1）在字符串中查找字符串：indexOf()

例（针对2-（1））：

<script>

var str="hello world";

document.write("字符串："+str.length+"<br/>");

document.write(“world的位置：”+str.indexOf("world")+"<br/>");

document.write(“llllll的位置”str.indexOf("llllll"));

</script>

结果：界面打印出字符串：11

world的位置：6

lllllll的位置：-1

（2）内容匹配：match()

例（针对2-（2））：

<script>

var str="hello world";

document.write(str.match("world"));

document.write(str.match("lllllll"));

</script>

结果：界面打印出 world null

（3）替换内容：replace（）

例(针对2-（3）)：

<script>

var str="hello world";

document.write(str.replace("world","123"));

</script>

结果：界面打印出hello 123

（4）字符串大写转换：toUpperCase() / toLowerCase()

例（针对2-(4)）:

<script>

var str="hello world";

document.write(str.toUpperCase());

</script>

结果：界面打印出HELLO WORLD

(5)字符串转为数组：split()

例（针对2-(5)）:

<script>

var str1="hello,jjj,lll,kkk";

var s=str1.split(",");//以逗号作为分隔符

document.write(s[1]);

</script>

结果：界面打印jjj

----------------------------------------------------

Date日期对象

1.Date对象：

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

2.获得当日的日期。

3.一些常用的方法：

（1）getFullYear():获取年份。

（2）getTime():获取毫秒。

（3）setFullYear():设置具体的日期。

（4）getDay():获取星期。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例（针对3）：

<script>

var date = new  Date();

document.write(date+"<br/>");

document.write(date.getFullYear()+"<br/>");

document.write(date.getTime()+"<br/>");

document.write(date.getDay()+"<br/>");

date.setFullYear(2010,1,1);

document.write(date);

</script>

结果：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

4.时钟实例：

<html>
     <head>
                   <script >
                               function startTime(){    
                                               var today=new Date();
                                               var h=today.getHours();
                                               var m=today.getMinutes();
                                               var s=today.getSeconds();
                                               m=checkTime(m);
                                               s=checkTime(s);
                                               document.getElementById('txt').innerHTML=h+":"+m+":"+s;
                                               t=setTimeout('startTime()',500);//等同于t=setTimeout(function(){starTime;},500)
                               }

function checkTime(i)  {
                                              if (i<10) {

i="0" + i;

}
                                                      return i
                                      }
                   </script>
           </head>

<body onload="startTime()">
                   <div id="txt"></div>
            </body>
</html>

结果：动态的显示时间

Array对象：

1.Array对象：

使用单独的变量来存储一系列的值。

2.数组的创建：

例：var myArray=["kkk","ddd","ddddd"];

3.数组的访问：

通过指定数组名以及索引号码，你可以访问某个特定的元素。

【注意：[0]是数组第一个元素，以此类推。】

4.数组常用的方法：

（1）concat():合并数组。

（2）sort():排序。

（3）push():末尾追加元素。

（4）reverse():数组元素翻转。

例（针对4-（1））：

<script>

var a=["aa","bb"];

var b=["cc","dd"];

var c=a.concat(b);

document.write(c);

</script>

结果：界面打印出 aa bb cc dd

例（针对4-（2））：

<script>

var a=["a","c","d","t","b","e"];

document.write(a.sort());

</script>

结果：界面打印出a b c e d t

【扩展】

<script>

var a=["5","2","3","4","1"];

document.write(a.sort(function(a,b){return b-a;}))

</script>

结果：界面打印出54321.（ps：因为b-a是倒序排列）。

例（针对4-（3））:

<script>

var a=["a","b"];

a.push(c);

document.write(a);

</script>

结果：打印出abc

例（针对4-（4））：

<script>

var a=["c","b","a"];

document.write(a.reverse());

</script>

结果：打印出abc

Math对象：

1.Match对象：

执行常见的算数任务。

2.常见方法：

（1）round():四舍五入。

（2）random():返回0~1之间的随机数。

（3）max():返回最高值。

（4）min():返回最小值。

（5）abs():返回绝对值。

例（针对2-（1））：

document.write(Math.round(2.5));

结果：界面打印出3

例（针对2-（2））：

document.write(Math.randow());

结果:界面随机打印出0~1的一个数。

document.write(Math.randow()*10);

结果：界面随机打印出1~10的一个数。

document.write(parseInt(Math.randow()));

结果：界面随机打印出0~1的一个数，并且这个数是整数。

例（针对2-（3））：

document.write(Math.max(10,20,3,90));

结果：界面打印出最大值90.

例（针对2-（4））：

document.write(Math.min(12,0,2,3,4));

结果：界面打印出最小值0.

例（针对2-（5））：

document.write(Math.abs(-10));

结果：界面打印出10.

赞 (0)

相关推荐

  • 浅谈JavaScript中面向对象的的深拷贝和浅拷贝

    理解深拷贝和浅拷贝之前需要弄懂一些基础概念,内存中存储的变量类型分为值类型和引用类型. 1.值类型赋值的存储特点, 将变量内的数据全部拷贝一份, 存储给新的变量. 例如:var num = 123 :var num1=num; 表示变量中存储的数字是 123.然后将数据拷贝一份,就是将 123 拷贝一份. 那么内存中有 2 个 数组;将拷贝数据赋值给 num2,其特点是在内存中有两个数据副本.这可以理解为浅拷贝. 2.引用类型的赋值. var o={name:'张三'}: var obj=o;

  • js中遍历Map对象的简单实例

    实例如下: console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性:" + key + ",值:"+ jsonData[key]); } 打印输出: 属性:fileNumber, 值:文件编号 属性:fileName, 值:文件名称 以上这篇j

  • js中遍历Map对象的方法

    js中遍历Map对象的方法 console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性:" + key + ",值:"+ jsonData[key]); } 打印输出: 属性:fileNumber, 值:文件编号 属性:fileName, 值:文件

  • JS遍历页面所有对象属性及实现方法

    for...in循环的Javascript示例: <html> <head> <title>一个使用到for...in循环的Javascript示例</title> </head> <body> <script type="text/javascript"> // 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent. var myObject =

  • JavaScript中的对象继承关系

    我们今天就来看一下继承中的类继承以及类继承和原型继承的混用,所谓类继承,就是使用call或者apply方法来进行冒充继承: function Desk(size,height){ this.size=size; this.height=height; } function MJDesk(size,height){ Desk.call(this,size,height);//这种就叫类继承. } var mj = new MJDesk(10,123); 像上面这种就是我们要使用的类继承,用这种继承

  • 浅谈js中对象的使用

    简单记录javascript中对象的使用 一.创建对象 //创建一个空对象 var o={}; //创建一个含有两个属性的对象,x.y var o2={x:12,y:'12',name:'JS'}; //此对象中的author属性的值还是一个对象 var o3={x:12,author:{name:'JS',age:23,address:'china'}}; //创建一个空对象和{}一样 var o4=new Object(); //给对象增加name属性 o4.name='JS' 上面使用了两

  • 图文详解JavaScript的原型对象及原型链

    图文详解JavaScript的原型对象及原型链

    对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张所谓很经典的图,上面画了各种线条,一会连接这个一会连接那个,说实话我自己看得就非常头晕,更谈不上完全理解了.所以我自己也想尝试一下,看看能不能把原型中的重要知识点拆分出来,用最简单的图表形式说清楚. 我们知道原型是一个对象,其他对象可以通过它实现属性继承.但是尼玛除了prototype,又有一个__

  • Js遍历键值对形式对象或Map形式的方法

    最近在项目中使用ajax返回的是一个map对象,怎么遍历这个map对象?去网上查了好多,真正有用很少,终于让我想起自己以前一个需要遍历key=Value形式的对象,想了想这种方式,应该也对于map适用吧.所以试了下,成功了!记录下来以备后用. 在JS中如何遍历key=value键值对,对象的数据(也可以是map形式). for ( var key in changes) { //通过遍历对象属性的方法,遍历键值对,获得key,然后通过 对象[key]获得对应的值 name = key; valu

  • 详细谈谈javascript的对象

    详细谈谈javascript的对象

    javascript中有很多对象内容,挑几个感觉用的比较多的讲解. 在网上学习一些和看javascript的学习手册. 如果要这个手册的可以留言,看到了我就发给你.恩,接下来总结一下我自己对象进阶之路. 1.对象: (1)javascript中的所有事件都是对象:字符串.数组.函数..... (2)每个对象带有属性和方法. (3)JS允许自定义对象. 2.自定义对象 : (1)定义并创建对象实例. (2)使用函数来定义对象,然后创建新的对象实例. 例(针对2-(1)): 方法1: <script

  • 详细谈谈JavaScript中循环之间的差异

    目录 前言 可枚举的属性 可迭代对象 在 forEach 与 map 方法 链式调用 性能 结论 前言 在 JavaScript 中使用循环时,需要正确定义两个关键内容:可枚举属性(enumerable properties)和可迭代对象(iterable objects). 可枚举的属性 可枚举对象的一个定义特征是,当我们通过赋值运算符将属性赋值给对象时,我们将内部可枚举标志(enumerable)设置为 true.这是默认值. 但是,我们可以通过将其设置为 false 来更改此行为. 经验法

  • JavaScript event对象整理及详细介绍

    Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置:(在DOM标准中,这两个属性值都不考虑

  • JavaScript  event对象整理及详细介绍

    Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置:(在DOM标准中,这两个属性值都不考虑

  • 谈谈JavaScript中的垃圾回收机制

    JavaScript 具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存. 在编写 JavaScript 程序时,开发人员不用再关心内存使用问题,所需内存的分配以及无用内存的回收完全实现了自动管理. 这种垃圾收集机制的原理其实很简单:找出那些不再继续使用的变量,然后释放其占用的内存.为此,垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间), 周期性地执行这一操作. 具体到浏览器中的实现,则通常有两个策略,分别为标记清除和引用计数. 一.标记清除 JavaScri

  • JavaScript浏览器对象之一Window对象详解

    JavaScript浏览器对象之一Window对象详解

    JavaScript提供了一组以window为核心的对象,实现了对浏览器窗口的访问控制.JavaScript中定义了6种重要的对象: window对象 表示浏览器中打开的窗口: document对象 表示浏览器中加载页面的文档对象: location对象包含了浏览器当前的URL信息: navigation对象 包含了浏览器本身的信息: screen对象 包含了客户端屏幕及渲染能力的信息: history对象 包含了浏览器访问网页的历史信息. 除了window对象之外,其他的5个对象都是windo

  • JavaScript原生对象常用方法总结(推荐)

    下面都是我学习W3C School教程中有关JavaScript写的学习笔记,每个方法我都亲身测试过,每个方法的用途和参数列表,我都是在经过我亲身实践后加上了我自己的一点理解,解释的还算比较详细.现记录下来,以便查阅: javascript之Array类: 创建js数组两种方式: var arr = [];  或 var arr = new Array(); ()里可以指定长度,也可以不指定,指不指定都无所谓, 因为js里的数组长度是可变的 concat(arr1,arr2,arr3......

  • javascript入门·对象属性方法大总结

    今天是我们js入门系列演示的最后一节了(暂时我是这样计划的),但是请朋友们记住,前面的实例你都很熟悉了的话也不代表我们就懂了JS,甚至连入门我们都不得不承认我们只是站在门槛上,还没有进去呢,那你可能要问,为什么要匆匆结束呢?答案很简单,我们的最终目标是AJAX/Atlas,在以后的入门教程中我们还会接触大量的JS的东西,而我这个懒人繁冗的注释一定不会让你失望的,所以更多JS我们以后继续学习,下面我们必须把JS最重要的东西--<对象>的方法和属性都熟悉下,因为这可是非常重要的,而这篇Post你大

  • JavaScript 复制对象与Object.assign方法无法实现深复制

    JavaScript 复制对象与Object.assign方法无法实现深复制

    在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String.Symbol(ES6 新增),而复杂数据类型包括Object,而所有其他引用类型(Array.Date.RegExp.Function.基本包装类型(Boolean.String.Number).Math等)都是Object类型的实例对象,因此都可以继承Object原型对象的一些属性和方法. 而对于基本数据类型来说,复制一个变量值,

  • javascript History对象原理解析

    这篇文章主要介绍了javascript History对象原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 length history.length属性保存着历史记录的URL数量.初始时,该值为1.由于IE10+浏览器在初始时返回2,存在兼容性问题,所以该值并不常用 跳转方法 go().back()和forward() 如果移动的位置超出了访问历史的边界,以上三个方法并不报错,而是静默失败 [注意]使用历史记录时,页面通常从浏览器缓存之

随机推荐