首页
所有分类
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 定义新对象方法
Feb 20 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
JS简单数组排序操作示例【sort方法】
May 17 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
项目打包(2) 监听(2) re模块(2) vue-cli3.x(1) sched(1) watch(1) 事件调度器(1) vue-router-link(1) TimePickerView(1) scss(1)
You might like
PHP 文件缓存的性能测试
2010/04/25 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
基于OpenCart 开发支付宝，财付通，微信支付参数错误问题
2015/10/01 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
JS Timing
2007/04/21 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
JavaScript进阶（四）原型与原型链用法实例分析
2020/05/09 Javascript
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
详解python和matlab的优势与区别
2019/06/28 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
ziaja齐叶雅官方海外旗舰店：来自波兰的天然护肤品牌
2017/01/02 全球购物
优秀党员获奖感言
2014/02/18 职场文书
内勤主管岗位职责
2014/04/03 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
学校对教师的评语
2014/04/28 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
处级干部考察材料
2014/12/24 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python