首页
所有分类
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 相关文章推荐
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
javascript（基于jQuery）实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
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) Python(3) PIL(1) 死锁(3) 信号同步(1) 裁剪图片(1) 鲲鹏(1) Flask(2) reduce()(1) 进度条(1)
You might like
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
php目录拷贝实现方法
2015/07/10 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
php curl常用的5个经典例子
2017/01/20 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
js的三种继承方式详解
2017/01/21 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
原生js调用json方法总结
2018/02/22 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python3实现暴力穷举博客园密码
2016/06/19 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
Python二维码生成识别实例详解
2019/07/16 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
幼师专业毕业生自荐信
2013/09/29 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
营销经理工作检讨书
2014/11/03 职场文书
七一晚会主持词
2015/06/29 职场文书
护理心得体会范文
2016/01/22 职场文书