首页
所有分类
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入门教程(10) 认识其他对象
Jan 31 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
Element Dialog对话框的使用示例
Jul 26 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
五子棋(12) 底部导航(1) CompletableFuture(1) 计算器(5) 井字棋(1) FutureTask(3) Springboot-cli(1) format(1) 对齐打印(1) 异步回调(1)
You might like
Yii遍历行下每列数据的方法
2016/10/17 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
Javascript中的方法链（Method Chaining）介绍
2015/03/15 Javascript
Vue.use源码分析
2017/04/22 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
JavaScript编写的网页小游戏，很给力
2017/08/18 Javascript
vue跨域解决方法
2017/10/15 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
js实现时分秒倒计时
2019/12/03 Javascript
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python学生信息管理系统修改版
2018/03/13 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
python将回车作为输入内容的实例
2018/06/23 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
CSS3弹性盒模型开发笔记（二）
2016/04/26 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
HTML5标签使用方法详解
2015/11/27 HTML / CSS
德国化妆品和天然化妆品网上商店：kosmetikfuchs.de
2017/06/09 全球购物
Carolina Lemke Berlin澳大利亚官网：时尚太阳镜品牌
2019/09/17 全球购物
文明之星事迹材料
2014/05/09 职场文书
新人入职感言
2015/07/31 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
Python读取和写入Excel数据
2022/04/20 Python
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android