JavaScript学习笔记之对象

时间：2023-03-09 15:33:31
JavaScript学习笔记之对象

在 JavaScript 中一切皆对象，包括数字、字符串、函数等等，此外，JavaScript 还允许自定义对象

1、自定义对象

（1）定义对象

JavaScript 是面向对象的语言，但 JavaScript 不使用类，因此也不会通过类来创建对象

JavaScript 除了可以使用内置对象，还允许通过函数来定义对象

function person(firstName,lastName)
{
    this.firstName = firstName;
    this.lastName = lastName;
    this.setName = setName;
    function setName(firstName,lastName)
    {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

（2）创建对象

var obj = new person("Bill","Gates");

（3）访问属性和方法

obj.setName("Steve","Jobs")
document.write(obj.firstName + " " + obj.lastName + "<br />");

// Steve Jobs

（4）添加属性

obj.age = 50;
document.write(obj.age + "<br />");

// 50

（5）遍历属性

for (x in obj)
{
    document.write(x + " ");
}

// firstName lastName setName age

以下是 JavaScript 中常用的内建对象

2、Array

Array 对象用于在单个变量中存储多个值

可以使用以下语句创建 Array 对象：

var myArray = new Array();
var myArray = new Array(size);
// 参数 size 是期望的元素个数
var myArray = new Array(element0, element1, ..., elementn);
// 参数 element0 ..., elementn 是初始元素列表

（1）属性

  • constructor：对创建对象的函数的引用
var test = new Array();

if (test.constructor==Array) {document.write("This is an Array");}
if (test.constructor==Boolean) {document.write("This is a Boolean");}
if (test.constructor==Date) {document.write("This is a Date");}
// This is an Array

document.write(test.constructor);
// function Array() { [native code] }
  • length：数组中元素的数目

（2）方法

添加或删除元素

  • concat(array1, ...... ,arrayX)：连接数组，并返回结果

  • pop()：删除并返回数组的最后一个元素
  • push(element1, .... ,elementX)：向数组的末尾添加一个或更多元素，并返回新的长度
  • shift()：删除并返回数组的第一个元素，直接修改原有对象

  • unshift(element1, .... ,elementX)：向数组的开头添加一个或更多元素，并返回新的长度，直接修改原有对象

  • splice(index,howmany,element1,.....,elementX)：添加/删除元素，返回被删除的元素，index 指定初始位置，howmany 指定数量，element1,.....,elementX 指定向数组添加的新元素

var arr = new Array("A","B","C","D","E","F");
arr.splice(1,4,"T");
document.write(arr);

// A,T,F

工具

  • slice(start,end)：类似于 Python 中的切片操作，用于创建副本，在原数组上进行操作
var arr = new Array("1","2","3","4","5");
document.write(arr.slice(1,4));

// 2,3,4
  • reverse()：数组反转
var arr = new Array("5","4","3","2","1");
arr.reverse();
document.write(arr);

// 1,2,3,4,5
  • sort(sortby)：数组排序，在原数组上进行操作，sortby 是用于指定排序规则的函数，它接受两个参数，返回一个用于说明两个参数相对顺序的数字，默认是按字符编码进行排序
function sortNumber(a, b){return a - b;}
var arr = new Array("5","1","4","2","3");
arr.sort(sortNumber);
document.write(arr);

// 1,2,3,4,5
  • join(separator)：把数组所有元素放入一个字符串，并通过 separator 指定分隔符进行分隔，默认为逗号
var arr = new Array("A","B","C");
document.write(arr.join());

// A,B,C

转换成字符串

  • toString()：把数组转换为字符串，并返回结果
  • toLocaleString()：根据本地时间格式把数组转换为字符串，并返回结果

其它

  • toSource()：返回 Array 对象的源代码
  • valueOf()：返回 Array 对象的原始值

3、Boolean

Boolean 对象用于表示两个 "true" 或 "false"

可以使用以下语句创建 Boolean 对象：

new Boolean(value); //构造函数
Boolean(value);     //转换函数

（1）属性

  • constructor：对创建对象的函数的引用

（2）方法

转换成字符串

  • toString()：把逻辑值转换为字符串，并返回结果

其它

  • toSource()：返回 Boolean 对象的源代码
  • valueOf()：返回 Boolean 对象的原始值

4、Date

Date 对象用于处理日期和时间

可以使用以下语句创建 Date 对象：

var myDate = new Date()
// Date 对象会自动把当前日期和时间作为初始值

（1）属性

  • constructor：对创建对象的函数的引用

（2）方法

  • Date()：返回当前的日期和时间
document.write(Date())

// Fri Feb 15 2019 23:00:00 GMT+0800 (中国标准时间)

返回时间

  • getFullYear()：返回 Date 对象的年份（4 位数字）
  • getMonth()：返回 Date 对象的月份（0 ~ 11）
  • getDate()：返回 Date 对象的日期（1 ~ 31）
  • getDay()：返回 Date 对象的星期（0 ~ 6）
  • getHours()：返回 Date 对象的小时（0 ~ 23）
  • getMinutes()：返回 Date 对象的分钟（0 ~ 59）
  • getSeconds()：返回 Date 对象的秒数（0 ~ 59）
  • getMilliseconds()：返回 Date 对象的毫秒（0 ~ 999）

根据世界时返回时间

  • getUTCFullYear()：根据世界时返回 Date 对象的年份（4 位数字）
  • getUTCMonth()：根据世界时返回 Date 对象的月份（0 ~ 11）
  • getUTCDate()：根据世界时返回 Date 对象的日期（1 ~ 31）
  • getUTCDay()：根据世界时返回 Date 对象的星期（0 ~ 6）
  • getUTCHours()：根据世界时返回 Date 对象的小时（0 ~ 23）
  • getUTCMinutes()：根据世界时返回 Date 对象的分钟（0 ~ 59）
  • getUTCSeconds()：根据世界时返回 Date 对象的秒数（0 ~ 59）
  • getUTCMilliseconds()：根据世界时返回 Date 对象的毫秒（0 ~ 999）

设置时间

  • setFullYear(year,month,day)：设置 Date 对象的年份（4 位数字）
  • setMonth(month,day)：设置 Date 对象的月份（0 ~ 11）
  • setDate(day)：设置 Date 对象的日期（1 ~ 31）
  • setHours(hour,min,sec,millisec)：设置 Date 对象的小时（0 ~ 23）
  • setMinutes(min,sec,millisec)：设置 Date 对象的分钟（0 ~ 59）
  • setSeconds(sec,millisec)：设置 Date 对象的秒数（0 ~ 59）
  • setMilliseconds(millisec)：设置 Date 对象的毫秒（0 ~ 999）

根据世界时设置时间

  • setUTCFullYear(year,month,day)：根据世界时设置 Date 对象的年份（4 位数字）
  • setUTCMonth(month,day)：根据世界时设置 Date 对象的月份（0 ~ 11）
  • setUTCDate(day)：根据世界时设置 Date 对象的日期（1 ~ 31）
  • setUTCHours(hour,min,sec,millisec)：根据世界时设置 Date 对象的小时（0 ~ 23）
  • setUTCMinutes(min,sec,millisec)：根据世界时设置 Date 对象的分钟（0 ~ 59）
  • setUTCSeconds(sec,millisec)：根据世界时设置 Date 对象的秒数（0 ~ 59）
  • setUTCMilliseconds(millisec)：根据世界时设置 Date 对象的毫秒（0 ~ 999）

返回毫秒数与分钟差

  • getTime()：返回 1970 年 1 月 1 日至今的毫秒数
  • UTC()：根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数
  • parse()：返回 1970 年 1 月 1 日午夜到指定日期的毫秒数
  • getTimezoneOffset()：返回本地时间与格林威治标准时间的分钟差

转换成字符串

  • toString()：把 Date 对象转换为字符串
var d = new Date()
document.write (d.toString())

// Fri Feb 15 2019 23:00:00 GMT+0800 (中国标准时间)
  • toTimeString()：把 Date 对象的时间部分转换为字符串
  • toDateString()：把 Date 对象的日期部分转换为字符串
  • toUTCString()：根据世界时把 Date 对象转换为字符串
var d = new Date()
document.write (d.toUTCString())

// Fri, 15 Feb 2019 15:00:00 GMT
  • toLocaleString()：根据本地时间格式把 Date 对象转换为字符串
var d = new Date()
document.write (d.toUTCString())

// 2019/2/15 下午11:00:00
  • toLocaleTimeString()：根据本地时间格式把 Date 对象的时间部分转换为字符串
  • toLocaleDateString()：根据本地时间格式把 Date 对象的日期部分转换为字符串

其它

  • toSource()：返回 Date 对象的源代码
  • valueOf()：返回 Date 对象的原始值

5、Math

Math 对象用于执行数学任务

注意，Math 对象没有构造函数，它的属性和方法不是某个具体对象的方法

（1）属性

  • PI：圆周率
document.write(Math.PI);

// 3.141592653589793
  • E：自然对数的底数
document.write(Math.E);

// 2.718281828459045
  • LN2：以 e 为底的 2 的对数
document.write(Math.LN2);

// 0.6931471805599453
  • LN10：以 e 为底的 10 的对数
document.write(Math.LN10);

// 2.302585092994046
  • LOG2E：以 2 为底的 e 的对数
document.write(Math.LOG2E);

// 1.4426950408889634
  • LOG10E：以 10 为底的 e 的对数
document.write(Math.LOG10E);

// 0.4342944819032518
  • SQRT2：2 的平方根
document.write(Math.SQRT2);

// 1.4142135623730951
  • SQRT1_2：2 的平方根的倒数
document.write(Math.SQRT1_2);

// 0.7071067811865476

(2）方法

一般

  • abs(x)：绝对值
  • ceil(x)：上取整
  • floor(x)：下取整
  • round(x)：四舍五入取整
  • max(x,y)：最大值
  • min(x,y)：最小值
  • random()：随机数

指数、对数、幂函数

  • exp(x)：指数值
  • log(x)：对数值
  • pow(x,y)：幂值
  • sqrt(x)：平方根

三角函数

  • sin(x)：正弦值
  • cos(x)：余弦值
  • tan(x)：正切值
  • asin(x)：反正弦值
  • acos(x)：反余弦值
  • atan(x)：反正切值

其它

  • toSource()：返回 Date 对象的源代码
  • valueOf()：返回 Date 对象的原始值

6、Number

在 JavaScript 中只有一种数字类型，它将所有数字储存为 64 位的浮点数

整数（不适用小数或指数计数法）的精度为 15 位，小数的精度为 17 位

若数字的前缀为 0，则 JavaScript 将其解释为八进制数；若前缀为 0x，则解释为十六进制数

可以使用以下语句创建 Number 对象：

new Number(value);  //构造函数
Number(value);      //转换函数

（1）属性

  • constructor：对创建对象的函数的引用

  • MAX_VALUE：可表示的最大的数

document.write(Number.MAX_VALUE);

// 1.7976931348623157e+308
  • MIN_VALUE ：可表示的最小的数
document.write(Number.MIN_VALUE);

// 5e-324
  • POSITIVE_INFINITY：特殊值，表示正无穷大
var x = Number.MAX_VALUE * 2;
if (x == Number.POSITIVE_INFINITY) { document.write(x); }

// Infinity
  • NEGATIVE_INFINITY：特殊值，表示负无穷大
var x = -Number.MAX_VALUE * 2;
if (x == Number.NEGATIVE_INFINITY) { document.write(x); }

// -Infinity
  • NaN：特殊值，表示非数字值，NaN 与所有值都不相等，包括它自己，但是可以用 isNaN 判断
var x = Number.NaN;
if (isNaN(x)) { document.write(x); }

// NaN

（2）方法

转换成不同格式的数字

  • toFixed(num)：将 Number 对象四舍五入为指定小数位数的数字，num 用于指定小数位数，默认为 0，范围为 0 ~ 20
var number = new Number(12.34);
document.write(number.toFixed(1))

// 12.3
  • toExponential(num)：将 Number 对象转换为使用指数计数法的数字，num 用于指定小数位数，默认为使用尽可能多的数字，范围为 0 ~ 20
var number = new Number(123.4);
document.write(number.toExponential(1))

// 1.2e+2
  • toPrecision(num)：可在对象的值超出指定位数时将其转换为指数计数法，num 用于指定指数计数法的最小位数，默认为调用方法 toString()，范围为 1 ~ 21

转换成字符串

  • toString(radix)：将数字转换为字符串，radix 用于指定数字基数，默认为 10，范围为 2 ~ 36
var number = new Number(1234);
document.write(number.toString(2))

// 10011010010
  • toLocaleString()：将数字转换为本地格式的字符串，根据本地规范进行格式化

其它

  • valueOf()：返回 Number 对象的基本数字值，通常在需要时后台将进行自动调用

7、String

String 对象用于处理文本

JavaScript 中的字符串是不可变的类型，String 类定义的方法都不能改变字符串的内容，它们返回全新的字符串，而非修改原始的字符串

可以使用以下语句创建 String 对象：

new String(value);  //构造函数
String(value);      //转换函数

（1）属性

  • constructor：对创建对象的函数的引用
  • length：返回字符串的字符数目

（2）方法

格式控制

  • big()：大号字符串
  • small()：小号字符串
  • bold()：粗体字符串
  • italics()：斜体字符串
  • blink()：闪动字符串
  • strike()：删除线
  • sub()：下标
  • sup()：上标
  • fontcolor(color)：字体颜色
  • fontsize(size)：字体大小
  • fixed()：打字机文本
  • anchor(anchorname)：创建锚
var str = "Hello world";
document.write(str.anchor("myAnchor"));
  • link(url)：将字符串显示为链接
var str = "Hello world";
document.write(str.link("URL"));

大小写

  • toLowerCase()：把字符串转换为小写

  • toUpperCase()：把字符串转换为大写

  • toLocaleLowerCase()：按照本地方式把字符串转换为小写

  • toLocaleUpperCase()：按照本地方式把字符串转换为大写

字符

  • charAt()：返回指定位置的字符
  • charCodeAt()：返回指定位置的字符的 Unicode 编码
  • fromCharCode(Unicode1, ... ,UnicodeX)：从字符编码创建一个字符串
document.write(String.fromCharCode(72,69,76,76,79))

// HELLO

工具

  • indexOf(searchvalue,fromindex)：检索字符串，searchvalue 定义需要检索的字符串值，fromindex 定义在字符串中开始检索的位置，默认为 0
  • lastIndexOf(searchvalue,fromindex)：从后向前检索字符串，searchvalue 定义需要检索的字符串值，fromindex 定义在字符串中开始检索的位置，默认为 length - 1
  • search(regexp/substr)：根据正则表达式/子字符串检索字符串，返回匹配的位置
  • match(regexp/substr)：根据正则表达式/子字符串检索字符串，返回指定的值
  • replace(regexp/substr,replacement)：根据正则表达式/子字符串的匹配结果替换字符串
  • localeCompare(target)：根据本地排序规则与 target 字符串进行比较
  • split(separator,howmany)：把字符串分割为字符串数组，separator 指定分隔符，howmany 指定返回数组的最大长度
  • slice(start,end)：类似于 Python 中的切片操作，用于创建副本
  • substr(start,length)：返回从 start 下标开始的长度为 length 的子字符串
  • substring(start,stop)：返回从 start 下标开始至 stop 下标结束的子字符串

转换成字符串

  • toString()：返回字符串

其它

  • toSource()：返回 String 对象的源代码
  • valueOf()：返回 String 对象的原始值

8、RegExp

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具

可以使用以下语句创建 RegExp 对象：

new RegExp(pattern, attributes);

pattern 是一个字符串，用于指定正则表达式的模式

attributes 是一个可选的字符串，用于指定正则表达式的标志

  • 若为 "g"，则指定全局匹配
  • 若为 "i"，则指定区分大小写
  • 若为 "m"，则指定多行匹配

（1）属性

  • global：是否具有标志 g
  • ignoreCase：是否具有标志 i
  • multiline：是否具有标志 m
  • lastIndex：开始下一次匹配的字符位置
  • source：正则表达式的源文本

（2）方法

  • compile()：编译正则表达式
  • exec(string)：检索字符串中的正则表达式的匹配，返回找到的值，并确定其位置
var str = "abcdcbabcdcba";
var patt1 = new RegExp("a");
var result = patt1.exec(str);
document.write(result);

// a
  • test(string)：检测一个字符串是否匹配某个模式，返回 true 或 false
var str = "abcdcbabcdcba";
var patt1 = new RegExp("a");
var result = patt1.test(str);
document.write(result);

// true

9、Function

全局属性和函数可用于所有内建的 JavaScript 对象

（1）全局属性

  • Infinity：正无穷大
  • NaN：特殊值，非数字值
  • undefined：未定义的值
  • Packages：根 JavaPackage 对象
  • java：java.* 包层级的一个 JavaPackage

（2）全局函数

编码解码

  • decodeURI(URIstring)：解码某个编码的 URI

  • decodeURIComponent(URIstring)：解码一个编码的 URI 组件
  • encodeURI(URIstring)：把字符串编码为 URI
  • encodeURIComponent(URIstring)：把字符串编码为 URI 组件

  • escape(string)：对字符串进行编码

document.write(escape("Hello World!"));

// Hello%20World%21
  • unescape(string)：对由 escape() 编码的字符串进行解码

数值检查

  • isFinite()：检查某个值是否为有穷大
  • isNaN()：检查某个值是否为数字

对象转换

  • Number(object)：把对象的值转换为数字
  • String(object)：把对象的值转换为字符串
  • parseInt(string, radix)：解析字符串，并返回整数
  • parseFloat(string)：解析字符串，并返回浮点数

其它

  • eval(string)：将 string 作为脚本执行
  • getClass(object)：返回一个 JavaObject 的 JavaClass

10、Event

事件通常与函数配合使用，通过事件驱动函数执行，以下属性可插入 HTML 标签来定义事件动作

鼠标

  • onclick：鼠标点击
  • ondblclick：鼠标双击
  • onmousedown：鼠标按键被按下
  • onmouseup：鼠标按键被松开
  • onmousemove：鼠标被移动
  • onmouseout：鼠标从某元素移开
  • onmouseover：鼠标移到某元素上

键盘

  • onkeydown：键盘按键被按下
  • onkeyup：键盘的键被松
  • onkeypress：键盘按键被按下或按住

加载

  • onload：加载文档或图像
  • onunload：退出页面
  • onerror：加载文档或图像时发生错误
  • onabort：加载图像时被中断

其它

  • onfocus：获得焦点
  • onblur：失去焦点
  • onselect：文本被选定
  • onsubmit：提交按钮被点击
  • onchange：用户改变域的内容
  • onreset：重置按钮被点击
  • onresize：窗口或框架被调整尺寸

参考资料：

http://www.w3school.com.cn/js/index.asp

http://www.w3school.com.cn/jsref/index.asp

相关文章