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的元素。

2. 添加元素：

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的位置插入了两个新元素。

3. 替换元素：

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] ];

2. 声明并初始化二维数组：

var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

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

3. 使用Array.of方法创建二维数组：

let arr = Array.of(Array.of(1, 2, 3), Array.of(4, 5, 6), Array.of(7, 8, 9));

4. 通过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中自定义对象的方法。