前端入门之JavaScript对象(前端零基础入门)

前端入门之JavaScript对象(前端零基础入门)-图1

对象是JavaScript最基本是数据类型之一,是一种复合的数据类型;数组是JavaScript中唯一用来存储和操作有序数据集的数据结构。

创建对象的方法 1 使用内置对象创建

JavaScript可用的内置对象可以分为语言级对象(例如String、Object、Function等) 和 环境宿主级对象(例如window、document、body等)
通常使用内置对象创建对象是指通过语言级对象的构造方法创建一个新的对象。
语法格式:

var person= new Object();
person.f_name = "张";
person.l_name = "三";
person.age = 18;
2 直接定义并创建

直接定义并创建对象,采用“键/值对”集合形式。

person = {f_name:"张",l_name:"三",age:18}

对象属性以键/值对的形式表示为属性名:属性值,每个属性之间用,分割,“键/值对”集合放在{}内。

直接定义并创建对象的特点:

  • 简单格式化的数据交换
  • 符合人的读写习惯
  • 易于机器的分析和运行
3 使用对象构造创建

使用this关键字构造

//使用`this`关键字构造对象
function person(firstname,lastname,age)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
}
// 实例化对象
myBrother=new person("张","三",18);

可以通过为对象实例赋值,向已有对象添加新属性。
myBrother.color= "black";

常用内置对象 字符串对象(String)

字符串对象主要用于处理或格式化文本字符串以及确定和定位字符串中从子字符串。创建实例后才能引用改对象的实例和方法,属于动态对象。

创建String对象

创建字符串对象(String)的方法有两种:

  • 直接创建:var txt = "string";
  • 使用 new关键字来创建:var txt = new String("string");
    以上两种方法的效果是一样的。
String对象属性
属性描述
constructor返回对创建该对象的函数的引用
length返回字符串的长度
prototype允许用户向对象添加属性和方法

注意: 计算字符串长度时,空格占一个字符位,汉字占一个字符位。

String对象的方法
方法描述
charAt()返回在指定位置的字符
charCodeAt()返回在指定位置的字符的Unicode编码
concat()连接字符串
fromCharCode()从字符编码创建一个字符串
indexOf()检索字符串
LastIndexOf()从后向前检索字符串
match()找到一个或者多个正则表达式的匹配
replace()替换与正则表达式匹配的字符串
search()检索与正则表达式匹配的值
slice()提取字符串中的片段,并在新的字符串中返回被提取的部分
split()把字符串分割为字符串数组
substr()从起始索引号提取字符串中指定数目的字符
substring()提取字符串中两个指定的索引号之间的字符
substring()提取字符串中两个指定的索引号之间的字符
toLowerCase()把字符串转为小写
toUpperCase()把字符串转为大写
valueOf()返回某个字符串对象的原始值
日期对象(Date)

日期对象(Date)用于处理日期与时间。

创建Date对象

创建Date对象的方法有四种:

  • 返回当前日期和时间:var d= new Date();
  • 返回从 1970 年 1 月 1 日+ milliseconds 毫秒数的时间:var d= new Date(milliseconds);
  • 用字符串指定日期和时间:new Date("日期时间的字符串") ;
  • 用数值指定日期和时间:new Date(year, month, day, hours, minutes, seconds, milliseconds);
    在不指定的情况下,默认参数是0。
Date对象属性
属性描述
constructor返回对创建该对象的Date函数的引用
prototype允许用户向对象添加属性和方法
Date对象常用的方法

Date对象的方法可以分为三大类:setXxx()、getXxx()、toXxx()。

  • setXxx()方法用于设置时间和日期值
  • getXxx()用于获取时间和日期值
  • toXxx()用于将时间和日期转换称指定格式
方法描述
Date()返回当日的日期和时间
getDate()根据本地时从Date对象返回一个月中的某一天(1 ~ 31)
getDay()根据本地时从Date对象返回一周中的某一天(1 ~ 6)
getFullYear()根据本地时从 Date 对象以四位数字返回年份
getHours()根据本地时返回 Date 对象的小时 (0 ~ 23)
toString()把 Date 对象转换为字符串
toTimeString()把 Date 对象的时间部分转换为字符串
逻辑对象(Boolean)

Boolean对象用于将不是Boolean类型的值转换为Boolean类型值。Boolean对象代表两个值:true 和 false。

创建Boolean对象
  • 创建 Boolean 对象:var myBoolean = new Boolean()

如果创建的 Boolean 对象的初始值为:0、-0、null、""、false、undefined、NaN,那么对象的值为false,否则为true。

Boolean对象属性
属性描述
constructor返回对创建该对象的Boolean函数的引用
prototype允许用户向对象添加属性和方法
Boolean对象的方法
方法描述
toString()把布尔值转换为字符串,并返回结果
ValueOf()返回Boolean对象的原始值

注: 在需要把Boolean对象转换成字符串的情况下,JavaScript会自动调用toString() 方法。

算数对象(Math)

Math对象的作用是执行常见的算数任务。Math对象提供了大量的数学常量和数学函数

创建Math对象
  • 创建Math对象:var x = Math.[{property|method}];

在使用Math对象时,不能使用new关键字来创建对象实例,而是直接使用 对象名.成员 的格式来访问其属性和方法。property属性 和 method方法是必选项

Math对象属性

Math对象属性是数学中常用的常量

属性描述
E返回算数常量e,即自然对数的底数 (约等于2.718)
LN2返回2的自然对数 (约等于0.693)
LN10返回10的自然对数 (约等于2.302)
LOG2E返回以2为底的e的对数 (约等于1.414)
LOG10E返回以10为底的e的对数 (约等于0.434)
Math对象的方法

Math对象的方法是数学中常用的函数。

方法描述
abs(x)返回数的绝对值
acos(x)返回数的反余弦值
asin(x)返回数的正余弦值
atan(x)以介于(-PI/2,PI/2)弧度之间的数值来返回数的反正切值
atan2(y,x)返回X轴到点(x,y)的角度介于(-PI/2,PI/2)弧度之间
cos(x)返回数的余弦
ceil(x)对数进行上舍人
floor(x)对数进行下舍人
exp(x)返回e的指数
log(x)返回数的自然对数(e为底)
max(x,y...,n)返回参数中的最大值
min(x,y...,n)返回参数中的最小值
pow(x,y)返回x的y次幂
random()返回0~1的随机数
round(x)把数四舍五入为最接近的整数
sin(x)返回数的正弦值
sqrt(x)返回数的平方根
tan(x)返回数的正切值
数值对象(Number)

Number对象是原始数值的包装对象,代表数值数据类型和提供数值的对象,如果一个参数值不能转换为一个数字将返回NaN 非数字值 。

创建Number对象
  • 创建Number对象:var num = new Number(value);

创建Number对象时,value为可选项,是Number对象num 的数字值,如果忽略则返回值为0。 创建对象时可以不使用new关键字, Number(value) 函数会直接作为转换函数,会把value参数转化成一个数字值,然后返回转换后的值。

Number对象属性
属性描述
constructor返回对创建此对象Number函数的引用
MAX_VALUE可表示最小的数
MIN_VALUE可表示最小的数
NaN非数字值
NEGATIVE_INFINITY负无穷大,溢出时返回该值
POSITIVE_INFINITY正无穷大,溢出时返回该值
prototype允许用户向对象添加属性和方法
Number对象的方法

Number对象的方法主要用于数据类型的转换。

方法描述
toString()把数字转换成字符串,,使用指定的基数
toFixed(x)把数字转换成字符串,结果的小数点后有指定位数的数字
toExponential(x)把对象的值转换为指数计数法
toPrecision(x)把数字格式化为指定的长度
valueOf(x)返回一个Number对象的基本数字值
数组对象(Array)

Array对象是JavaScript中最常用的内置对象。通过调用Array对象的各种方法可以很方便的对数组进行排序、删除和合并等操作。

创建Array对象

创建Array对象有一下三种方法:

  • 常规方式:var 数组名 = new Array();
  • 简洁方式:var 数组名 = new Array(n);,n 代表初始数组元素的值。
  • 字面方式:var 数组名 = [元素1,元素2,元素3,...];

注意: 数组元素的下标从0开始。

Array对象属性
属性描述
constructor返回创建该对象的原型函数
length返回字符串的长度
prototype允许用户向对象添加属性和方法
  • length属性可以计算数组的长度,即数组元素的个数。向数组添加新元素时,属性会自动更新。
  • 向数组对象中添加属性和方法,语法结构为:Array.prototype.添加的元素/方法名= value。
Array对象的方法

Array对象常用的方法有25种,常用的方法有:连接方法concat()、分隔方法join()、追加方法concat()、倒转方法concat()、切片方法concat()。

方法描述
* concat(array1,array2...)连接两个或者更多的数组,返回连接后的新数组
* join("分隔符")把数组的所有元素放入一个字符串,分隔符 参数省略则默认为,
* pop()删除并返回数组的最后一个元素,数组长度减一。 如果数组为空,L,则不会改变数组而是返回undefined
* push()向数组的末尾添加一个或多个元素,返回新的长度
* reverse()会反转数组元素的顺序 ,不会产生新数组
* shift()删除并返回数组的第一个元素,数组长度减一。 如果数组为空,L,则不会改变数组而是返回undefined
* slice(start,end)选取索引从start 到end部分作为新数组返回,start是必选项,end默认是lenght-1。
* sort(sortby)对数组元素进行排序
* toString()把数组转换成字符串并返回结果
copyWithin()从数组的指定位置复制元素到数组的另一个指定位置中
every()检测数值元素的每个元素是否都符合条件
fill()使用一个固定值来填充数组
filter()检测数值元素,返回符合条件的所有元素
find()查找指定条件的数组元素并返回其值
findIndex()查找指定条件的数组元素并返回其索引
forEach()数组每个元素都执行一次回调函数
IndexOf()搜索数组中的元素并返回他所在的位置
lastIndexOf()返回一个指定的字符串最后出现的位置,在一个字符串中的指定位置从后往前搜索
map()通过每个元素处理数组的每个元素,返回处理结果
reduce()将数组元素从左到右计算成一个值
reduceRight()将数组元素从右到左计算成一个值
some()检测数组中是否有符合条件的元素
splice()在数组中添加或者删除元素
unshift()向数组的开头添加一个或更多元素,并返回新的长度
valueOf()返回数组对象的原始值
对象访问语句 for…in循环语句

for…in循环语句用来遍历对象所有可遍历的属性,包括继承的属性。如果只想遍历对象自身的属性,可以使用hasOwnProperty()方法,在循环语句块判断一下是否为自身的属性。每次会把属性作为字符串保存到变量中。

语法格式:

for(variable in object){
	statement
}
  • variable :可以是变量名、声明变量的var语句。
  • object :可以是对象名字、计算结果为对象的表达式。
  • statement :构建循环主体的语句块。
with语句

with语句作用是在操作同一个对象的多个属性时,提供一些书写的方便。with语句块内部使用的变量必须是当前对象存在的属性,否则创造的变量会成为当前作用域的全局变量。
语法格式:

with object{
	statement
}
  • object :可以是对象名字、计算结果为对象的表达式。
  • statement :操作对象属性的语句块。
转载请说明出处 内容投诉内容投诉
南趣百科 » 前端入门之JavaScript对象(前端零基础入门)

南趣百科分享生活经验知识,是您实用的生活科普指南。

查看演示 官网购买