JavaScript对象

JavaScript对象

JS是一种基于对象的语言。对象是一种特殊的数据类型,由变量和函数共同构成。其中变量称为对象的属性,函数称为对象的方法

Array对象

数组是一个有序的数据集合。在JS中,定义数组是不需要自定数组的数据类型,而且可以讲不同类型的数据放到一个数组当中。

数组对象的创建

语法:

new Array();
new Array(size);
new Array(element0,element1,element2,elment3...);

示例:
简写试创建数组对象:

var food=[“兰州拉面”,“潍坊火烧”,“北京烤鸭”]

数组对象属性

属 性描 述
constructor指向创建该数组实例的构造函数
length数组的长度
prototype为对象添加属性和方法

数组对象的常用方法

方 法描 述
concat()用于连接两个或两个以上的数组
join()用于把数组的所有元素放入一个字符串当中,并用指定的分隔符隔开
push()向数组末尾放入一个或多个元素,并返回新的长度
pop()删除并返回最后一个元素
shift()删除并返回第一个元素
reverse()颠倒元素顺序
slice()从已有的数组中返回选择的元素
sort()对元素进行排序
splice()添加或删除元素,返回被删的元素
unshift向开头添加元素,并返回新的长度

concat()方法

示例:

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var combinedArray = array1.concat(array2);
console.log(combinedArray);  // 输出:[1, 2, 3, 4, 5, 6]

join()方法

示例:

var array = ['apple', 'banana', 'cherry'];

var string = array.join();  // 没有指定分隔符,默认使用逗号作为分隔符
console.log(string);  // 输出:"apple,banana,cherry"

var stringWithSeparator = array.join('-');  // 使用 '-' 作为分隔符
console.log(stringWithSeparator);  // 输出:"apple-banana-cherry"

push()方法

示例:

var array = [1, 2, 3];

array.push(4);  // 添加数字 4 到数组末尾
console.log(array);  // 输出:[1, 2, 3, 4]

var newLength = array.push(5, 6, 7);  // 添加三个元素到数组末尾
console.log(newLength);  // 输出:7(因为数组现在有7个元素)
console.log(array);  // 输出:[1, 2, 3, 4, 5, 6, 7]

slice()方法

示例:

var array = ['a', 'b', 'c', 'd', 'e', 'f'];

var slice1 = array.slice(2); // 从第三个开始
console.log(slice1); // 输出:[ 'c', 'd', 'e', 'f' ]

var slice2 = array.slice(2, 4); // 从索引2开始到索引4(不包括索引4)
console.log(slice2); // 输出:[ 'c', 'd' ]

var slice3 = array.slice(-2); // 从倒数第三个元素开始索引到数组结束
console.log(slice3); // 输出:[ 'e', 'f' ]

splice()方法

示例:
在JavaScript中,数组的splice()方法用于添加/删除数组中的元素。它接受两个参数:要开始更改数组的索引(起始为0)和要添加/删除的元素数量。

  1. 删除元素:
var arr = ["apple", "banana", "cherry", "dates"];
arr.splice(2, 1); // 删除索引为2的元素
console.log(arr); // ["apple", "banana", "dates"]

在这个例子中,我们从数组arr中删除了索引为2的元素。

  1. 添加元素:
var arr = ["apple", "banana", "cherry", "dates"]);
arr.splice(2, 0, "lemon", "mango"); // 在索引为2的位置插入"lemon""mango"
console.log(arr); // ["apple", "banana", "lemon", "mango", "cherry", "dates"]

在这个例子中,我们在索引为2的位置插入了两个新元素。

  1. 替换元素:
var arr = ["apple", "banana", "cherry", "dates"]);
arr.splice(2, 2, "lemon"); // 从索引为2开始,删除两个元素并替换为"lemon"
console.log(arr); // ["apple", "banana", "lemon"]

在这个例子中,我们从索引为2开始,删除了两个元素并替换为一个新元素。

二维数组

  1. 简写创建
var moves=[ ["科幻"."《2012》",80],["爱情"."《何以笙箫默》",60],["喜剧"."《超能陆战队》",100] ];
  1. 声明并初始化二维数组:
var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

这将创建一个3x3的二维数组。

  1. 使用Array.of方法创建二维数组:
let arr = Array.of(Array.of(1, 2, 3), Array.of(4, 5, 6), Array.of(7, 8, 9));
  1. 通过new Array()构造函数创建二维数组:
let arr = new Array(3); // 创建一个数组,包含3个undefined元素
for (let i = 0; i < arr.length; i++) {
  arr[i] = new Array(3); // 在每个索引处创建另一个包含3个undefined元素的数组
}
// 使用for循环方法填充值
for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < arr[i].length; j++) {
    arr[i][j] = i + j; // 对于每个(i, j),将值设置为i + j
  }
}
console.log(arr); // 输出:[[0, 1, 2], [1, 2, 3], [2, 3, 4]]

这将创建一个3x3的二维数组,并用每个索引的和填充它。

String对象

创建方式

在JavaScript中,字符串的创建有两种主要方式:

1. 通过直接赋值(字面量方式):

var str = "Hello, World!";

2. 通过使用new关键字和String构造函数:

var str = new String("Hello, World!");

以上两种方式创建的字符串在JavaScript中都是完全相同的。

然而,需要注意的是,使用new String()来创建字符串的方式在实际开发中并不常用,因为这种方式创建的字符串实际上是一个String对象,而不是一个原始的字符串类型。在大多数情况下,直接使用字符串字面量或者String()函数更为方便和高效

字符串对象的常用方法

在这里插入图片描述

indexOf()方法

用于返回某个特定的字符串或字符另一个字符串首次出现的位置。如果未找到该字符串或字符,则返回-1。

下面是一个使用indexOf()方法的例子:

var str = "Hello, World!";
var index = str.indexOf("World");
console.log(index); // 输出: 7

在这个例子中,我们有一个字符串"Hello, World!"。我们使用indexOf()方法查找子字符串"World"在该字符串中首次出现的位置。"World"首次出现在位置7(在计算机编程中,位置从0开始计数)。因此,indexOf()方法返回7。

如果子字符串未在原字符串中找到,indexOf()将返回-1。例如:

var str = "Hello, World!";
var index = str.indexOf("Moon");
console.log(index); // 输出: -1

在这个例子中,子字符串"Moon"未在原字符串中找到,所以indexOf()返回-1。

lastIndexOf()方法

用于返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

以下是一个使用lastIndexOf()方法的例子:

var str = "Hello, World!";
var index = str.lastIndexOf("o");
console.log(index); // 输出: 8

在这个例子中,我们有一个字符串"Hello, World!"。我们使用lastIndexOf()方法查找子字符串"o"在该字符串中最后出现的位置。子字符串"o"最后出现在位置8。因此,lastIndexOf()方法返回8。

如果子字符串未在原字符串中找到,lastIndexOf()将返回-1。例如:

var str = "Hello, World!";
var index = str.lastIndexOf("Moon");
console.log(index); // 输出: -1

在这个例子中,子字符串"Moon"未在原字符串中找到,所以lastIndexOf()返回-1。

slice()方法

用于提取字符串的一部分,返回一个新字符串,而不会改变原来的字符串。

slice()方法接收两个参数:

start:从零开始,表示要提取的第一个字符的位置。
end:可选参数,表示停止提取的位置(即不包括该位置处的字符)。如果省略该参数,则一直提取到字符串的末尾。如果该参数为负数,则表示从字符串的末尾开始计数。

下面是一个使用slice()方法的例子:

var str = "Hello, World!";
var slicedStr = str.slice(7, 12);
console.log(slicedStr); // 输出: "World"

在这个例子中,我们有一个字符串"Hello, World!“。我们使用slice()方法从位置7开始提取字符串,并在位置12结束(不包括位置12处的字符)。所以,提取的新字符串是"World”。

substring()方法

用于从一个字符串中提取两个指定的索引号之间的字符。

substring()方法接收两个参数:

indexStart:必需参数,指定要提取的第一个字符的索引。
indexEnd:可选参数,指定停止提取的位置(即不包括该位置处的字符)。如果省略该参数,则提取到字符串的末尾。

下面是一个使用substring()方法的例子:

var str = "Hello, World!";
var subStr = str.substring(0, 5);
console.log(subStr); // 输出: "Hello"

在这个例子中,我们有一个字符串"Hello, World!“。我们使用substring()方法从索引0开始提取字符串,并在索引5结束(不包括索引5处的字符)。所以,提取的新字符串是"Hello”。

split()方法

用于将一个字符串分割成字符串数组。

split()方法接收一个参数,即用作分隔符的字符串。该方法将使用这个参数作为分隔符,将原始字符串分割成多个子字符串,并将这些子字符串存储在一个数组中。

以下是一个使用split()方法的示例:

var str = "apple,banana,orange";
var fruits = str.split(",");
console.log(fruits); // ["apple", "banana", "orange"]

在这个例子中,我们有一个包含多个水果名称的字符串"apple,banana,orange"。我们使用split()方法,以逗号为分隔符将这个字符串分割成一个数组[“apple”, “banana”, “orange”]。

你还可以使用split()方法的第二个参数,来指定分割的次数。例如:

var str = "apple,banana,orange";
var fruits = str.split(",", 2);
console.log(fruits); // ["apple", "banana"]

在这个例子中,我们使用split()方法将原始字符串按照逗号分割,但只分割两次(即最多只产生两个子字符串)。结果是一个包含两个元素的数组[“apple”, “banana”]。

转义字符

在这里插入图片描述

Dated对象

创建

语法:

new Date();
new Date(millisenconds);
new Date(yyyy,MM, dd);
new Date(yyyy, MM, dd, hh, mm, ss);new Date(MM/dd/yyyy hh:mm:ss);new Date("month dd, yyyy");
new Date("month dd, yyyy hh;mm:ss");

注释:

  1. 使用无参构造函数创建日期对象时,将返回一个系统当前时间的日期对象;
  2. 参数 millisenconds 表示从GMT时间1970年1月1日凌晨到目标日期和时间之间
    的毫秒数;
  3. 参数yyyy表示4位数的年份,例如,2015;
  4. 参数MM表示月份,取值范围为0(1月)~11(12月);
  5. 参数dd表示日,取值范围为1~31;
  6. 参数hh表示小时,取值范围为0~23;
  7. 参数 mm表示分钟,取值范围为0~59;参数ss表示秒,取值范围为0~59;
  8. 参数 month表示月份,是月份的英文全称或英文简写,例如Fri、Mar等。

Date对象的常用方法

在这里插入图片描述

setFullYear()方法

用于设置 Date 对象的年份

这个方法接受一个参数,即四位数的年份。例如,2023年可以表示为2023。

以下是如何在代码中使用 setFullYear() 方法的示例:

var date = new Date(); // 获取当前日期和时间
console.log(date.getFullYear()); // 输出当前年份

date.setFullYear(2025); // 设置年份为2025年

console.log(date.getFullYear()); // 输出已设置为2025年的年份

在这个示例中,首先创建了一个新的 Date 对象(默认设置为当前日期和时间)。然后,使用 getFullYear() 方法获取当前年份并打印出来。接下来,使用 setFullYear() 方法将年份设置为 2025,然后再次使用 getFullYear() 方法来验证年份已被成功设置为 2025 并打印出来。

setHours()方法

用于设置 Date 对象的小时数

这个方法接受一个参数,即小时数,范围是0(午夜)到23(晚上11点)。

以下是如何在代码中使用 setHours() 方法的示例:

var date = new Date(); // 获取当前日期和时间
console.log(date.getHours()); // 输出当前小时数

date.setHours(14); // 设置小时数为14点

console.log(date.getHours()); // 输出已设置为14点的小时数

在这个示例中,首先创建了一个新的 Date 对象(默认设置为当前日期和时间)。然后,使用 getHours() 方法获取当前小时数并打印出来。接下来,使用 setHours() 方法将小时数设置为 14 点,然后再次使用 getHours() 方法来验证小时数已被成功设置为 14 点并打印出来。

Math对象

Math对象没有创建的方法,可以直接使用Math对象

Math对象的属性

在这里插入图片描述

Math对象的方法

在这里插入图片描述

RedExp正则表达式对象

正则表达式是一种字符串匹配的模式,通过单个字符串来描述和匹配一系列符合某个句法的规则
主要是用于检查是否符合所规定的规则,然后返回true or false

示例:

var pattern = /^\d-\d{3}-\d{3}x\d{3}$/;
var text = "我的电话号码是123-456-7890x123";
if (pattern.test(text)) {
    console.log("电话号码匹配成功");
} else {
    console.log("电话号码匹配失败");
}

在这里插入图片描述

自定义对象

1. 直接创建方式:

创建语法:

var 对象变量名 = new Object();		
对象变量名. property1 = value1;
对象变量名. methodName=fuctionName | fuction(){};
   //1.直接先创建空对象,然后不断丰富
	var student = new Object();
	student.name = "小王";
	student.age = 20;
	student.doHomework=function(){
		console.log(this.name+"正在学习......");
	}
			
	student.doHomework();

2. 对象初始化器方式:

创建语法:

var 对象变量名 = {
   property1 : value1,
   property2 : value2,
   …,
   propertyN : valueN,
   methodName1 : function([参数列表]){
          //函数体
   },
   …,
   methodNameN : function([参数列表]){
          //函数体
   }
}
//2.初始化器:定义对象变量方法 
    var volunteer = {
	    name : "小王",
	    age : 20,
 
	    getName : function(){
                    //this不能省略
		    return this.name;
	    },
	    doHomework : function(name){
		    console.log(name+"正在学习");
	    }
    }//该定义方法中{}里面用,隔开
			
    console.log(volunteer.name+":"+volunteer.age);
    volunteer.doHomework(xiaoming);//调用方法

3. prototype原型方式:

在声明一个新的函数后,该函数(在JavaScript中,函数也是对象)就会拥有一个prototype的属性,通过该属性可以为对象添加新的属性和方法。

创建语法:

function 对象构造器( ){

}

对象构造器.prototype.属性名=属性值;

对象构造器.prototype.函数名 = function([参数列表]){

      //函数体

}
 //3.prototype原型式
function Boy(){
			
}
Boy.prototype.age=12;
Boy.prototype.name="小明";
Boy.prototype.introduction=function(){
	console.log(this.name+"的年龄为"+this.age);
}
		
var boy=new Boy();//创建对象
boy.introduction();

4. 构造函数方式:

创建语法:

function 构造函数([参数列表]){

    this.属性 = 属性值;

      //其他属性

    this.属性N = 属性值N;

    this.函数1 = method1;

      //其他方法	
}

(注:采用构造函数方式创建对象,则this不能省略,这也是普通函数的区别)

  //4.构造函数式
function Girl(age){
	this.name="小红";
	this.age= age;
	this.introduction=function(){
		console.log(this.name+"的年龄为"+this.age);
	}
}

var girl= new Girl(8);
girl.introduction();

5. 混合的构造函数/原型方式:(结合了3、4两种方法而衍生的新方法)

   构造函数方式便于动态为属性赋值,但是这种方式将方法也定义在了构造方法体中,使得代码比较杂乱;而原型方式不便于为属性动态赋值,但是这种方式定义的属性和方法实现了分离;所以取长补短——构造函数定义属性,原型方式定义方法。

创建语法:

function 对象构造器([参数列表]){

}

对象构造器.prototype.函数名 = function([参数列表]){

       //函数体

}
function Kid(name,age){
	this.name=name;
	this.age= age;
}
Kid.prototype.introduction=function(){
	console.log(this.name+"的年纪为"+this.age);
}

var kid1=new Kid("小明",12);
kid1.introduction();
var kid2=new Kid("小王",12);
kid2.introduction();

以上是常用的5种JS中自定义对象的方法。

  • 13
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值