首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript学习笔记之JS对象

Posted in Javascript onJanuary 22, 2015

默认对象

日期对象Date，

格式：日期对象名称=new Date([日期参数])

日期参数：

1.省略(最常用)；

2.英文-数值格式：月 日，公元年 [时：分：秒]

如：today=new Date("October 1,2008 12:00:00")

3.数值格式：公元年，月，日，[时，分，秒]

如：today=new Date(2008,10,1)

日期对象的方法：

格式：日期对象名称.方法([参数])

使用例子：

<body>

    <script type="text/javascript">

       var date = new Date();//JS中默认提供的对象

    document.writeln("现在时刻： " + ( date.getYear() + 1900 ) + "年"

                + (date.getMonth() + 1) + "月" + date.getDate() 

                + "日" + ", 星期" + date.getDay() + ", 时间: "//星期天会是0，需要进一步处理，这里先不处理

                + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());

    </script>

</body>

输出：

现在时刻： 2014年4月21日, 星期1, 时间: 14:7:53
 
数组对象

数组对象的作用是：使用单独的变量名来存储一系列的值。

JavaScript的数组有两点特殊性：

1.数组长度不定，可以自动扩容；

2.数组中存放的数据类型可以不统一，即可以混存不同的数据类型。

建立数组对象的多种格式：

new Array();

返回的数组为空，length 字段为 0。

new Array(size);

参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。该构造函数将返回具有指定个数、元素为 undefined 的数组。

new Array(element0, element1, ..., elementn);

该构造函数将用参数指定的值初始化数组，数组的 length 字段会被设置为参数的个数。

数组对象名称=[元素1[，元素2，...]]

(注意这里使用的是方括号)。

当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

还可以创建二维数组。

Array对象的方法可以参见：http://www.w3school.com.cn/jsref/jsref_obj_array.asp

数组对象使用实例：

<!DOCTYPE html>

<html>

  <head>

    <title>arrayTest.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <script type="text/javascript">

    //var fruits = new Array("Apple", "Banana", "Pear");

    var fruits = ["苹果","香蕉","梨"];//推荐使用

    //可以动态添加元素

    fruits.push("西瓜");

    fruits.push("橙子");

    for(var i = 0; i < fruits.length; ++i)

    {

        document.writeln("fruit[" + i + "] = " + fruits[i] + "<br/>");

    }

    //数组的一些方法测试

    with(document)

    {

        write("<ul>");

        write("<li>" + fruits.join()+ "</li>");//默认使用逗号来分隔

        write("<li>" + fruits.join(";")+ "</li>");

        write("<li>" + fruits.toString()+ "</li>");

        write("<li>" + fruits.reverse().join()+ "</li>");

        write("<li>" + fruits.valueOf()+ "</li>");

        //说明上面的reverse实际上是改变了数组本身

        write("</ul>");

    }

    //二维数组

    var people = new Array(3);

    people[0] = new Array(1, "zhangsan", "lisi");

    people[1] = new Array(2, "Jack", "Lucy");

    people[2] = new Array(3, "Xiaoming", "Xiaohong");

    //注意数据类型可以混合使用

    //遍历二维数组

    for(var i = 0 ; i < people.length ; ++i)

    {

        for(var j= 0 ; j < people[i].length ; ++j)

        {

            document.write("people["+ i +"]["+ j +"] = " + people[i][j] + "<br/>");

        }

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

    }

    </script>

  </body>

</html>

字符串对象

建立字符串对象：

格式：字符串对象名称=new String(字符串常量)

格式：字符串变量名称="字符串常量"

一个验证Email的例子：

<!DOCTYPE html>

<html>

  <head>

    <title>emailConfirm.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <script type="text/javascript">

        function isEmail()

        {

            var emailValue = document.getElementsByName("email")[0].value;

            if(-1 == emailValue.indexOf("@"))

            {

                alert("请填写正确的Email地址");

            }

            else

            {

                alert("Ok");

            }

        }

    </script>

  </head>

  <body>

      <form>

        email: <input type="text" name="email"><br/>

        <input type="button" value="check" onclick="isEmail()">

    </form>

  </body>

</html>

自定义对象

前面讲函数的时候讲过一个例子，现在这里再讲一下这个例子：

<!DOCTYPE html>

<html>

  <head>

    <title>objectTest.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <script type="text/javascript">

    //定义对象的一种方式：通过构造函数

        function member(name, gender)

        {

            //属性

            this.name = name;

            this.gender = gender;

            //方法

            this.display = display;//指定member对象的display方法

        }

        function display()

        {

            var str = this.name + " : " + this.gender;

            //这个display方法被谁使用了，此处的this就指向那个对象

            document.writeln(str + "<br/>");

        }

        //生成对象

        var m1 = new member("zhangsan", "male");

        var m2 = new member("lisi", "male");

        var m3 = new member("wangwu", "male");

        var m4 = new member("wangfang", "female");

        with(document)

        {

            write("输出属性","<br/>");

            write(m1.name + ":" + m1.gender + "<br/>");

            write(m2.name + ":" + m2.gender + "<br/>");

            write(m3.name + ":" + m3.gender + "<br/>");

            write(m4.name + ":" + m4.gender + "<br/>");

        }

        document.write("调用方法","<br/>");

        m1.display();

        m2.display();

        m3.display();

        m4.display();

    </script>

  </body>

</html>

小伙伴们是否对javascript中对象的概念和用法有了新的认识了呢，希望大家能够喜欢本文及本系列文章。

JavaScript学习笔记之JS对象

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
js打造数组转json函数
Jan 14 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 Javascript
JavaScript学习笔记之JS函数
Jan 22 #Javascript
JavaScript学习笔记之基础语法
Jan 22 #Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 #Javascript
Angularjs基础知识及示例汇总
Jan 22 #Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 #Javascript
使用jquery操作session方法分享
Jan 22 #Javascript
jQuery实现“扫码阅读”功能
Jan 21 #Javascript
调幅(1) FM(4) LW(1) GWEN(1) SW(1) KDKA(1) 中波(3) ad hoc(1) SWL(1) 调频(4)
You might like
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
浅谈PHP进程管理
2019/03/08 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
javascript json 新手入门文档
2009/12/03 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
Python 序列的方法总结
2016/10/18 Python
Python 的类、继承和多态详解
2017/07/16 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
Lancome兰蔻官方旗舰店：来自法国的世界知名美妆品牌
2018/06/14 全球购物
大四学年自我鉴定
2013/11/13 职场文书
物理教师自荐信范文
2013/12/28 职场文书
优秀医生事迹材料
2014/02/12 职场文书
旷课检讨书1000字
2014/02/14 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
博士论文答辩开场白
2015/06/01 职场文书
春节随笔
2015/08/15 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
公文写作：工伤事故分析报告怎么写？
2019/11/05 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
如何利用React实现图片识别App
2022/02/18 Javascript