07JavaScript引用类型

引用类型

在JavaScript中，变量是某个对象的属性，函数是某个对象的方法

在浏览器环境里面，定义的全局变量就是window对象的属性

引用类型的分类

Date类型

创建一个Date类型的对象

var date1 = new Date()
var date2 = new Date
var date3 = Date()

Date提供now()方法，可以得到一个从 1970 年1月1日 00:00:00 至当前系统时间的毫秒数值。

Date类型初始化时间也可以指定日期，语法

var date = new Date(year, month [, day [, hours [, minutes [, seconds [, milliseconds]]]]])

• year 参数：表示年份的整数值。
• month 参数：表示月份的整数值。值范围为 0 ~ 11，表示从 1 月至 12 月。
• day 参数：表示一个月份中的第几天的整数值。值从 1 开始。
• hours 参数：表示一天中的小时数（24 小时制）。0 时表示午夜。
• minutes 参数：表示一个完整时间（如 01:10:00）中的分钟部分的整数值。默认值为 0。
• seconds 参数：表示一个完整时间（如 01:10:00）中的秒部分的整数值。默认值为 0。
• milliseconds 参数：表示一个完整时间的毫秒部分的整数值。默认值为 0。

此外关于Date类型提供的一些方法与设置方法

在Date类型提供的方法中，可以用来做时间戳的方法有两个：

• getTime()方法
• Date.now()方法

关于日期格式化方法：

输出当前年月日

console.log(
  date.getFullYear() +
    "年" +
    (date.getMonth() + 1) +
    "月" +
    date.getDate() +
    "日"
);

Math类型

JavaScript 语言中的 Math 类型，提供了一系列有关数学常数的属性和数学计算的方法。Math 类型与 JavaScript 语言中的其他引用类型不同的是，Math 并不是一个构造函数。换句话讲，我们无法通过 Math 类型创建一个对象。

Math类型的属性包括以下一些：

以上属性均为只读属性，不可更改。但是如果强制修改也不会报错。

这里指的不能修改指的是Math.PI不可修改，但是如果将其赋予一个变量，然后修改这个变量，那么值还是可以修改的。

var test1 = Math.PI;
console.log(test1 - 3); //输出 0.14159265358979312
Math.PI = Math.PI - 3;
console.log(Math.PI);  // 输出 3.141592653589793

Math类型的方法

在JavaScript中，生成随机数要用到的方法是random()

// 得到一个 0~100 之间的随机整数
console.log(Math.floor(Math.random() * 100));
// 得到一个1~100 之间的随机整数
console.log(Math.floor(Math.random() * 99 + 1));
// 利用随机数算百分率 -> 30% 70%
var precent = Math.random() * 100;
if (precent < 40) {
  console.log("30%");
} else {
  console.log("70%");
}

Array类型

检测数组

即检测一个变量是否为数组。

• instanceof 运算符
• Array.isArray()方法 支持 Array.isArray() 方法的浏览器有 IE9+、Firefox 4+、Safari 5+、Opera 10.5+ 和 Chrome。换句话讲，还有一些浏览器版本是不支持 Array.isArray() 方法的。
• Object.prototype.toString.call()方法 用于解决Array.isArray()在部分浏览器不支持的问题
• Array.prototype.isPrototypeOf()方法

var test = [1, 2, 3, 4, 5];
console.log("instanceof检测test变量是否为数组：", test instanceof Array);
console.log("Array.isArray()检测test变量是否为数组：", Array.isArray(test));
console.log(
  "Object.prototype.toString.call()检测test变量是否为数组：",
  Object.prototype.toString.call(test)
);
console.log(
  "Array.prototype.isPrototypeOf()检测test变量是否为数组：",
  Array.prototype.isPrototypeOf(test)
);

从图中我们可以看到，只有Object.prototype.toString.call()这种方式返回的是[object Array]，其余三种方法都返回的是布尔类型。

转换方法

• toString() 方法：将一个数组转换为字符串，数组中的元素之间使用逗号（,）进行分隔。
• valueOf() 方法：得到当前对象的原始值。如果是 Array 的话，则得到数组对象本身。

进出栈方法

• push() 方法：该方法将一个或多个数据内容添加到指定数组的末尾，并返回该数组的新长度。
• pop() 方法：该方法将从指定数组的末尾删除一个数据内容，并返回被删除的数据内容。该方法会改变数组的长度。

栈操作的是列表的末尾。

var arr = [100, true, "这是一个字符串"];
//push会将数据放到列表的末尾
var count = arr.push(200);
console.log("添加新元素之后的数组长度为: " + count, arr);
//pop会将列表的最后一项删除
var result = arr.pop();
console.log("数组删除的元素为: " + result, arr);

队列方法

队列即向列表头添加或删除数据。我们使用的方法是

• unshift(x)向列表头添加x
• shift()删除列表第一项

var test = [1, 2, 3, 4];
var count = test.unshift(0);
console.log(test); // 打印[ 0, 1, 2, 3, 4 ]
var result = test.shift();
console.log(test); // 打印[ 1, 2, 3, 4 ]

排序方法

• reverse() 方法：该方法将数组中元素的位置进行颠倒，并将颠倒后的数组返回。
• sort() 方法：该方法按照升序排列方式将数组中的元素进行重新排序，并将重新排序的数组返回。

值得注意的是：sort()方法对于数字并不是按照大小排序的，而是按照第一个数字的大小排序的。例如：

var arr = [1, 21, 10, 5, 2];
console.log(arr.sort()); //结果为 [ 1, 10, 2, 21, 5 ]

如果我们要按照大小排序，则应传入回调函数array.sort([compareFunction])

var arr = [1, 21, 10, 5, 2]
var result = arr.sort(function(a, b){
	if (a < b) {
		return -1
	} else if (a > b) {
		return 1
	} else {
		return 0
	}
})
console.log(result)

连接方法

Aarray 提供了 concat() 方法用来合并两个或者多个数组。该方法不会改变原有数组，返回合并后的新数组。其语法结构如下所示：

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

• value1…valueN 参数：与原有数组合并的数组或值。

如下示例代码展示了使用 concat() 方法合并两个数组的用法：

var arr = [1, 2, 3, 4, 5]
var result = arr.concat([6, 7, 8, 9, 10])

console.log(result, arr)

操作方法

• slice() 方法：该方法可以根据开始位置和结束位置从某个数组中截取指定的数据内容，并将其返回。 var new_arr = arr.slice([begin[, end]])
  • begin 参数：可选项，表示截取开始的位置（从 0 开始）。
  • end 参数：可选项，表示截取结束的位置。截取的数据内容不包含 end 位置的数据内容。

  此方法并不会影响原来的数组。 var arr = ["ant", "bison", "camel", "duck", "elephant"]; var result = arr.slice(1, 3); console.log(result, arr); //结果为 [ 'bison', 'camel' ] [ 'ant', 'bison', 'camel', 'duck', 'elephant' ] 如果不写end参数，则截取开始到结束的所有元素。

• splice() 方法：该方法可以实现对某个数组的新增、修改以及删除等操作。

新增、修改及删除操作

var arr = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• start 参数：表示修改数组的开始位置（从 0 开始）。
• deleteCount 参数：可选项，表示要删除数组中元素的个数。
• item1，item2，… 参数：可选项，表示从 start 指定的位置添加的元素。
• 返回值：由删除的元素组成的数组。如果只删除一个元素，则返回一个只有一个元素的数组。如果没有删除元素，则返回一个空数组。

1. 增加元素 如果将 deleteCount 参数的值设置为 0 的话，则表示 splice() 方法向某个数组的 start 位置新增元素。如下示例代码所示 var arr = [3, 4, 5]; var result = arr.splice(1, 0, "1", "2"); console.log(result, arr); //返回结果为 [] [ 3, '1', '2', 4, 5 ] 我们可以看到由于我们并没有删除 arr 数组中任何一个元素，所以 splice() 方法返回的结果为空数组。并且 splice() 方法会改变原有数组。
2. 删除元素 如果省略 item1、item2 … 等参数的话，则表示 splice() 方法从某个数组的 start 位置开始删除 deleteCount 个元素。 var arr = [3, 4, 5]; var result = arr.splice(1, 2); console.log(result, arr); // 返回结果 [ 4, 5 ] [ 3 ] 我们可以看到当省略 item1、item2 … 等参数时，splice() 方法返回的结果为被删除的元素所组成的数组。 如果 deleteCount 参数的值大于 array.length-start 值的话，则将 start 位置之后的所有元素删除（包含 start 位置）
3. 修改元素 果 start 参数、deleteCount 参数和 item1、item2 … 等参数全部传递的话，则表示 splice() 方法将某个数组从 start 位置开始的 deleteCount 个元素替换为 item1、item2 … 等新的元素。 var arr = [3, 4, 5]; var result = arr.splice(1, 1, "2"); console.log(result, arr); //返回结果[ 4 ] [ 3, '2', 5 ]

位置方法

ECMA-262 第 5 版本为 Array 新增了两个有关位置的方法。这两个方法都接收 2 个参数：一个是要查找的元素，一个是开始查找的位置。如下所示：

• indexOf() 方法：在某个数组中查找指定元素的第一个索引值。如果存在则返回索引值，如果不存在则返回 -1。
• lastIndexOf() 方法：在某个数组中查找指定元素的最后一个索引值。如果存在则返回索引值，如果不存在则返回 -1。

迭代方法

ECMA-262 第 5 版本为 Array 新增了 5 个迭代数组的方法，也就是遍历数组中元素的方法。如下所示：

• forEach() 方法：遍历数组中每一个元素时，会执行一个给定的函数。该方法没有返回值。
• every() 方法：遍历数组中每一个元素，判断每一个元素是否满足给定函数的条件。如果满足则返回 true，否则返回 false。
• filter() 方法：遍历数组中每一个元素，将满足给定函数条件的每一个元素组成一个新数组，并返回。
• map() 方法：遍历数组中每一个元素，在给定函数中对每一个元素进行处理，并创建一个新数组进行返回。
• some() 方法：遍历数组中每一个元素，如果有一个元素满足给定函数的条件，则返回 true，否则返回 false。

上述 5 个迭代方法都是接收 2 个参数，一个是给定的函数，一个是调用给定函数时的 this 值（可选项）。而给定的函数还接收 3 个参数，如下所示：

• currentValue 参数：当前遍历数组所得到的元素。
• index 参数：当前遍历数组得到的元素所在的索引值。
• array 参数：正在遍历的数组。

var arr = ['ant', 'bison', 'camel', 'duck', 'elephant']

arr.forEach(function(currentValue, index, array){
	console.log('当前元素的索引值为 ' + index + ', 元素为 ' + currentValue)
})

归并方法

ECMA-262 第 5 版本为 Array 新增了 2 个归并方法。所谓的归并，就是指遍历数组中每一个元素，并调用给定的函数，将最终的结果进行返回。

• reduce() 方法：从左至右地遍历数组中每一个元素，调用给定的函数，并将最终的结果返回。
• reduceRight() 方法：从右至左地遍历数组中每一个元素，调用给定的函数，并将最终的结果返回。

上述 2 个归并方法都是接收 2 个参数，一个是给定的函数，一个是第一次调用给定函数传递的给定函数的第一个参数值（可选项）。而给定的函数接收 4 个参数，如下所示：

• accumulator 参数：上一次调用给定函数得到的结果。
• currentValue 参数：当前遍历数组所得到的元素。
• index 参数：当前遍历数组得到的元素所在的索引值。
• array 参数：正在遍历的数组。

var arr = [0, 1, 2, 3, 4, 5]

var result = arr.reduce(function(accumulator, currentValue, currentIndex, array){
	return accumulator + currentValue
})

console.log(result)