javascript基础加固5—-对象

2.1 什么是对象

JavaScript 的所有数据都可以被视为对象,而每个对象都有其 属性(properties)和 方法(methods)。

对象的 属性 是反映该对象某些特定的性质的,例如:字符串的长度、图像的长宽、文字框(Textbox)里的文字等;

对象的 方法 能对该对象做一些事情,例如,表单的“提交”(Submit),窗口的“滚动”(Scrolling)等。

比如当申请一个变量的时候:

var my_var="shiyanlou";

其实也就是创建了一个 字符串对象 ,这个对象拥有内建的属性 my_var.length = 9

同时,这个字符串对象还有数个内建的方法,比如 my_var.toUpperCase() 方法可以将字符转为大写;my_var.charAt(n) 方法可以返回第 n 个字符。

2.2 创建对象

JavaScript 提供了一些常用的内置对象(稍后介绍),但是有些情况下我们需要自定义地创建对象,以达到特殊的、丰富的功能。

比如我们创建一个“student”对象,并为其指定几个 属性 和 方法:

student = new Object();  // 创建对象“student”

student.name = "Tom";   // 对象属性 名字
student.age  = "19";    // 对象属性 年龄

student.study =function() {   // 对象方法 学习
    alert("studying");
};

student.eat =function() {     // 对象方法 吃
    alert("eating");
};

采用函数的方式新建对象:

function student(name,age) {

    this.name = name;
    this.age = age;

    this.study = function() {
        alert("studying");
    };

    this.eat = function() {
        alert("eating");
    }
}

然后通过 new 创建 student 对象的实例:

var student1 = new student(‘Tom‘,‘19‘);

var student2 = new student(‘Jack‘,‘20‘);

2.3 访问对象的属性和方法

对象的存在意义,就是为了方便地操作数据,我们可以很容易地访问对象的属性或调用对象的方法,通过符号“.”。

比如我们刚才新建的 student1 对象,可以这样使用:

<script>
var x = student1.name;  // 访问对象的属性
var y = student1.age;

document.write(x);
document.write(y);

student1.study();     // 调用对象的方法
</script>

当我们需要 反复访问 某对象的时候,可以使用 with 语句简化操作,而不需要反复地用“.”符号,比如:

with(student1) {
var x = name;
var y= age;
study();
eat();
}

2.4 常用内置对象

JavaScript 为我们提供了一些非常有用的常用内置对象,这样我们就不用每次自己编代码来实现一些常用功能。

现在我们举例介绍 String、Math、Array 三中常用对象及其属性和方法。

2.4.1 String 字符串对象

一开始就举例介绍过 String 对象,每当创建一个字符串变量的时候,也就相当于创建了一个 String 对象。

(1)String 的属性

该对象只有一个属性,即 length,表示字符串中的字符个数,包括所有的空格和符号:

var test_var = "I love You!";
document.write(test_var.length);

显示结果是“11”因为字符串长度将符号和空格也计算在内:

(2)String 的方法

String 对象共有 19 个内置方法,主要包括字符串在页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换等功能,下面是一些常用的:

  • charAt(n) :返回该字符串第 n 位的单个字符。(从 0 开始计数)
  • charCodeAt(n) :返回该字符串第 n 位的单个字符的 ASCII 码。
  • indexOf() :用法:string_1.indexOf(string_2,n); 从字符串 string_1 的第 n 位开始搜索,查找 string_2,返回查找到的位置,如果未找到,则返回 -1,其中 n 可以不填,默认从第 0 位开始查找。
  • lastIndexOf() :跟 indexOf() 相似,不过是从后边开始找。
  • split(‘分隔符‘) :将字符串按照指定的分隔符分离开,返回一个数组,例如:‘1&2&345&678‘.split(‘&‘);返回数组:1,2,345,678。
  • substring(n,m) :返回原字符串从 n 位置到 m 位置的子串。
  • substr(n,x) :返回原字符串从 n 位置开始,长度为 x 的子串。
  • toLowerCase() :返回把原字符串所有大写字母都变成小写的字符串。
  • toUpperCase() :返回把原字符串所有小写字母都变成大写的字符串。

2.4.2 Math 对象

“数学”对象,提供对数据的数学计算。

(1)Math 的属性

Math 的几个属性,是数学上几个常用的值:

  • E :返回常数 e (2.718281828...)。
  • LN2 :返回 2 的自然对数 (ln 2)。
  • LN10 :返回 10 的自然对数 (ln 10)。
  • LOG2E :返回以 2 为底的 e 的对数 (log2e)。
  • LOG10E :返回以 10 为底的 e 的对数 (log10e)。
  • PI :返回π(3.1415926535...)。
  • SQRT1_2 :返回 1/2 的平方根。
  • SQRT2 :返回 2 的平方根。
(2)Math 的方法

Math 的内置方法,是一些数学上常用的数学运算:

  • abs(x) :返回 x 的绝对值。
  • round(x) :返回 x 四舍五入后的值。
  • sqrt(x) :返回 x 的平方根。

  • ceil(x) :返回大于等于 x 的最小整数。
  • floor(x) :返回小于等于 x 的最大整数。

  • sin(x) :返回 x 的正弦。
  • cos(x) :返回 x 的余弦。
  • tan(x) :返回 x 的正切。
  • acos(x) :返回 x 的反余弦值(余弦值等于 x 的角度),用弧度表示。
  • asin(x) :返回 x 的反正弦值。
  • atan(x) :返回 x 的反正切值。

  • exp(x) :返回 e 的 x 次幂 (e^x)。
  • pow(n, m) :返回 n 的 m 次幂 (nm)。
  • log(x) :返回 x 的自然对数 (ln x)。

  • max(a, b) :返回 a, b 中较大的数。
  • min(a, b) :返回 a, b 中较小的数。
  • random() :返回大于 0 小于 1 的一个随机数。

2.4.3 Array 数组对象

数组对象是对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置(从 0 开始计数)。

数组下标表示方法是用方括号括起来,比如:

myArray[2]="hello"

注意:JavaScript只有一维数组,要使用多维数组,请用这种虚拟法:

var myArray = new Array(new Array(), new Array(), new Array(), ...);

其实这是一个一维数组,里边的每一个元素又是一个数组。调用这个“二维数组”的元素时:

myArray[2][3] = ...;
(1)Array 的属性

length :返回数组的长度,即数组里有多少个元素。它等于数组里最后一个元素的下标加一。

因此,想添加一个元素,只需要:

myArray[myArray.length] = ...;

####(2)Array 的方法

- join("指定分隔符") :返回一个字符串,把数组元素串起来,元素间用指定分隔符隔开。

- toString() :把数组转为字符串,并返回结果。

- reverse() :使数组元素倒序。

- slice(n,m) :返回子数组,从数组第 n 个元素到第 m 个元素。

- sort(SortFunction) :按照指定的 SortFunction 将数组的元素排序。

- concat(Array\_1,Array\_2) :用于连接两个或多个数组。

原文地址:https://www.cnblogs.com/hackerbird/p/8794610.html

时间: 2024-10-29 00:08:39

javascript基础加固5—-对象的相关文章

JavaScript基础知识----document对象

对象属性document.title                 //设置文档标题等价于HTML的<title>标签document.bgColor               //设置页面背景色document.fgColor               //设置前景色(文本颜色)document.linkColor             //未点击过的链接颜色document.alinkColor            //激活链接(焦点在此链接上)的颜色document.vlink

JavaScript基础20——element对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>element对象</title> 6 <script type="text/javascript"> 7 // element对象 8 /* 9 获取属性:getAttribute(name) 10 设置属性:setAttribute(name

JavaScript基础知识(对象、函数与对象)

17.对象 属性:描述对象的信息  方法:描述对象的行为  封装:只关心输入和输出(不管过程如何实现) ü 对象的分类: 内置对象(原生对象): 就是JavaScript语言预定义的对象(如String/Number). 宿主对象: 一般由浏览器环境提供实现,主要分为 BOM 和 DOM. 自定义对象: 就是由开发人员自主创建的对象. ü 对象的创建: ? 初始化器方式 var 对象名 = {         属性名 : 属性值 ,         方法名 : function( ){方法体} 

JavaScript -基础- 函数与对象

一.JavaScript三对象 1.分类方式一 1)ECMAScript JavaScript的ECMA规范 JS本身的对象 2)Dom 操作HTML相关 3)BOM游览器对象 游览器窗口对象,全局的对象,直接应用 操作浏览器的对象 2.分类方式二 二.ECMA对象 var s="hello" var s2=new String("hello") 三.function对象 1.function创建方式一 此方式为推荐方式 function func1(){ aler

JavaScript -基础- 函数与对象(二)

一.typeof与判断对象类型instanceof 1.typeof typeof只能判断基础数据类型,无法判断引用数据类型 <script> var s="hello" var i=8; alert(typeof(s))                       //输出string alert(typeof(i))                        //输出number var s2=new String("hello2") alert

javascript基础之数组对象

一.定义数组的方法: 定义了一个空数组: var myArray =new Array(); 指定有n个空元素的数组: var myArray=new Array(n); 定义数组并赋值: var myArray =[1,2,3]; 数组元素的使用: 数组名[下标]=值; 二.数组属性:length用法 数组对象.length; //返回数组长度 三.数组方法: concat();连接两个或更多的数组,并返回结果. var myArray=[1,2]; document.write(myArra

javascript基础加固3—-语法2

2.1 JavaScript 语句 2.1.1 if/else 语句 JavaScript 中的 if/else 判断选择,你会发现,就像 C 语言.语法格式是这样的: if (条件 1) { 当条件 1 为 true 时执行的代码; } else if (条件 2) { 当条件 2 为 true 时执行的代码; } else { 当条件 1 和 条件 2 都不为 true 时执行的代码; } 2.1.2 switch/case 语句 在做大量的选择判断的时候,如果依然使用 if/else 结构

javascript基础加固2—-语法1

2.1 变量 2.1.1 什么是变量 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储数据的存储器,每个变量都有其独有的名字,每个变量都占有一段内存. 在程序当中,直接使用数据值或直接使用数据值的内存地址都不够方便,所以我们用变量的名字来表示对应的数据. 每个变量都有它的变量名,变量类型,变量的作用域. 2.1.2 JavaScript 中的变量 JavaScript 中的变量规则和其它如 C.Java 等语言类似,建议的变量命名规则: 1.由字母.数字.下划线组成,区分大小写 2.以字

javascript基础加固6—-DOM

本节 JavaScript 的 DOM 操作,内容主要包括: 通过 ID.名字.标签名 选取元素: 通过 getAttribute 和 setAttribute 获取和设置元素属性: 通过 parentNode 获取父元素.createElement 动态地创建节点.appendChild 和removeChild 动态地添加或者删除节点. 基本概念 2.1.1 什么是 DOM DOM 是 文档对象模型(Document Object Model)的简称,它的基本思想是把结构化文档(比如 HTM