首页
所有分类
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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
JS获取父节点方法
Aug 20 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
javascript实现节点（div）名称编辑
Dec 17 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 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
GoFrame(3) SQLite3(1) 分布式锁(3) commit(1) dockerfile(1) harbor(1) 短信验证码(1) pytz(1) Tablespace(1) procedure(1)
You might like
FCKeditor添加自定义按钮
2008/03/27 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
在javascript中实现函数数组的方法
2013/12/25 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
python的Template使用指南
2014/09/11 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Sanic框架配置操作分析
2018/07/17 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
一份Java笔试题
2012/02/21 面试题
岗位职责的构建方法
2014/02/01 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
校园广播稿范文
2015/08/19 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android