JavaScript (八) 内置对象

内置对象( native object )是 ECMAScript 标准中定义的对象（标准内置对象）。内置对象独立与浏览器在任何 ECMAScript实现 中都可以使用

继承链

内置构造函数( 类 )	描述	`__proto__`(原型)
Object 类型	Js中所有的对象都是`Object`类型的实例，它们都会从`Object.prototype`继承属性和方法(如：`toString()`)	`Function.prototype`
Function 类型	Js中所有的函数都是`Function`类型的实例，它们都会从`Function.prototype`继承属性和方法(如：`apply()`、`call()`等)	`Function.prototype`
Array 类型	Js中所有的数组都是`Array`类型的实例，它们都会从`Array.prototype`继承属性和方法(如：`length`、`push()`、`concat()`等)	`Function.prototype`

对象的创建

创建一个Array类型的对象（即创建一个数组）

/* 语法 */
var 数组名 = new Array(元素1,元素2...元素N);
/* 例 */
var arr = new Array(1, 2, 3);

创建一个Function类型的对象（即创建一个函数）

/* 语法 */
var 函数名 = new Function(语句字符串);
/* 例 */
var fun = new Function('console.log("hello")');

创建一个Object类型的对象（即创建一个对象）

/* 语法 */
var 对象名 = new Object(表达式); //参数默认值为null即空值
/* 例1 */
var obj = new Object({name: Timeic}); //创建一个Object类型的对象
/* 通过Object类来创建其他类型的对象 */
var arr = new Object([1, 2, 3]); //创建Array类型对象
var fun = new Object(function(){console.log('hello')}); //创建Function类型对象
var num = new Object(666); //创建一个Number类型对象
var str = new Object('hello'); //创建一个String类型对象
var bool = new Object(true); //创建一个Boolean类型对象

在 JavaScript 中字面量的创建方式只是实例化的一种简化语法

如：var obj = {} 等同于 var obj = new Object()

如果不赋值只实例化则会创建一个匿名的( 临时的 )实例对象

如：({name: 'Timeic'}).name or [1, 2, 3].length

包装类型

在 Js 中有三种包装类型对象，分别是Number、String、Boolean

类	`__proto__`(原型)
Number 类型	`Function.prototype`
String 类型	`Function.prototype`
Boolean 类型	`Function.prototype`

例：

1
2
3

var num = new Number(666); //创建一个Number类型的对象
var str = new String('hello'); //创建一个String类型的对象
var bool = new Boolean(true); //创建一个Boolean类型的对象

Number、String、Boolean分别对应三种基本数据类型，即数值型、字符串、布尔型。这三种基本数据类型可以像对象一样访问属性或调用方法，当访问某个属性时 js 引擎会自动创建一个对应的匿名的( 临时的 )包装类型对象，从该对象中获取属性和方法

如：'abc'.length or true.toString()

Date 对象

Date 对象用于处理日期与时间，通过new Date()来创建一个Date类型的实例对象，创建的Date实例对象会显示实例化时的日期和时间

例：

1
2
3

//创建Date类型的实例对象
var d = new Date()
console.log(d) //Sat May 20 2022 17:40:41 GMT+0800 (中国标准时间)

方法：

方法	描述
getFullYear()	返回一个指定的Date对象的完整年份（四位数年份）
getMonth()	返回一个指定的Date对象为第几月
getDate()	返回一个指定的Date对象为一个月中的哪一日（`1`-`31`）
getDay()	返回一个指定的Date对象为一周中的第几天，（`0`-`6`），0 表示星期天
getHours()	返回一个指定的Date对象的小时（`0`–`23`）
getMinutes()	返回一个指定的Date对象的分钟（`0`–`59`）
getSeconds()	返回一个指定的Date对象的秒（`0`–`59`）
getMilliseconds()	返回一个指定的Date对象的秒（`0`–`999`）

Math 对象

Math 对象用于执行数学任务，Math对象不需要创建实例，直接使用即可

静态属性（常量）：

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）
LN2	返回 2 的自然对数（约等于0.693）
LN10	返回 10 的自然对数（约等于2.302）
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）
PI	返回圆周率（约等于3.14159）

静态方法：

方法	描述
abs(x)	返回数的绝对值
ceil(x)	对数进行上舍入
floor(x)	对数进行下舍入
max(x, y)	返回 x 和 y 中的最高值
min(x, y)	返回 x 和 y 中的最低值
pow(x, y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把数四舍五入为最接近的整数
sqrt(x)	返回数的平方根

String 对象

String 类型对象是一个包含一组字符序列的对象

语法：

1 2	var str = new String(字符串); //创建一个String类型对象 String(s); //将参数 s 的值转换成字符串数据类型

例：

1
2
3

var str = new String('hello');
console.log(str[4]); //输出：'o'
console.log('hello'.replace('h', 'H')) //输出：'Hello'

属性：

[下标] 根据索引返回指定位置的一个字符
length 获取字符串长度

方法：

方法	描述
charAt()	根据索引，返回在指定位置的字符
charCodeAt()	根据索引返回指定位置字符的 Unicode 编码（十进制）
String.formCharCode()	根据Unicode编码创建一个字符串
concat()	连接多个字符串
indexOf()	检索一个字符串中是否含有指定内容，如果有则返回其首次出现的位置(索引)，没有则返回 -1
lastIndexOf()	检索一个字符串中是否含有指定内容，如果有则返回其最后出现的位置(索引)，没有则返回 -1
slice()	截取字符串中指定的内容并返回
substring()	返回一个字符串在开始索引到结束索引之间的内容
split()	将字符串拆分成数组并返回
toUpperCase()	将字符串转换为大写形式并返回
toLowerCase()	将字符串转换为小写形式并返回
search()	搜索与正则表达式相匹配的值，并返回该值所在位置(索引)
match()	查找一个或多个正则表达式的匹配，并返回一个结果数组
replace()	将字符串中指定内容替换为新的内容，并返回替换后内容
replaceAll()	将字符串中指定内容替换为新的内容，并返回替换后内容( 会替换所有匹配到的子字符串 )
trim()	去除字符串两端的空格，并返回去除后内容
includes()	检查一个字符串是否包指定的内容，如果包含返回 true，反之 false

Array 对象

方法：

方法	描述
Array.from()	可以从可迭代或类数组对象创建一个新的浅拷贝的数组
Array.of()	通过可变数量的参数创建一个新的 `Array` 实例( 替代 `new Array` )，而不考虑参数的数量或类型
array.copyWithin()	浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度
array.find()	查找第一个符合条件的数组成员
array.findIndex()	查找第一个符合条件的数组成员的位置( index )
array.findLast()	逆向查找第一个符合条件的数组成员
array.findLastIndex()	逆向查找第一个符合条件的数组成员的位置( index )
array.includes()	检查一个数组是否包含一个指定的值，如果包含返回 true，反之 false
array.flat()	将多维数组转为一维数组并返回
array.at()	返回指定位置上的数组成员，允许负数( 如：-1 倒数第一个成员 )
array.toReversed()	颠倒数组中元素的顺序，并返回颠倒后的数组( 不改变原数组 )
array.toSorted()	对数组的元素进行排序，并返回排列后的数组( 不改变原数组 )
array.toSpliced()	删除或替换数组中指定的元素，并将删除或替换后的数组返回( 不改变原数组 )

高阶函数：

array.forEach()

描述：按顺序为数组中的每个元素调用一次指定的函数

语法：

数组.forEach(回调函数, 回调函数中this的值)
//回调函数的语法
function(当前元素值, 当前元素索引, 当前数组){
  // xxx
}
/*
	当前元素值：当前迭代的数组元素值
	当前元素索引：当前迭代的数组元素索引值
	当前数组：调用当前方法的数组
*/

例：

/* 例2 */
var out = [];
[1, 2, 3].forEach(function(elem) {
  this.push(elem * elem);
}, out);
console.log(out); // [1, 4, 9]

PS：forEach() 方法用于循环遍历数组，该方法不返回任何值，同时该方法不能中断执行，它总是将数组元素遍历完才结束，如果想在循环时根据条件中断执行建议使用 for 循环

array.map()

描述：按顺序为数组中的每个元素调用一次指定的函数，并将每一次调用的函数返回值组合成一个数组作为 map() 方法的返回值

语法：同 array.forEach() 方法

例：

/* 例1 */
var numbers = [1, 2, 3];
var newArr = numbers.map(function (n) {
  return n + 1;
});
console.log(newArr) // [2, 3, 4]
/* 例2 */
var arr = ['a', 'b', 'c'];
var newArr = [1, 2].map(function (e) {
  return this[e];
}, arr)
console.log(newArr) // ['b', 'c']

PS：map() 方法用于对数组中每个元素进行处理并返回一个新数组

array.filter()

描述：将满足条件的元素组合成一个新数组返回

语法：同 array.forEach() 方法

例：

/* 例1: 将大于3的元素，作为一个新数组返回 */
var newArr = [1, 2, 3, 4, 5].filter(function (elem) {
  return (elem > 3);
})
console.log(newArr) // [4, 5]
/* 例2: 将所有奇数元素，作为一个新数组返回 */
var newArr = [1, 2, 3, 4, 5].filter(function (elem, index, arr) {
  return index % 2 === 0;
});
console.log(newArr) // [1, 3, 5]

PS：filter() 方法用于过滤数组中的元素

array.some() 与 array.every()

描述：这两个方法用于判断数组元素是否符合某种条件。返回一个布尔值

语法：同 array.forEach() 方法

例：

/* 例1 */
var arr = [1, 2, 3, 4, 5];
var value = arr.some(function (elem) {
  return elem >= 3;
});
console.log(value) // true
/* 例2 */
var arr = [1, 2, 3, 4, 5];
var value = arr.every(function (elem, index, arr) {
  return elem >= 3;
});
console.log(value) // true

some()方法是只要有一个元素的返回值是true，则some()方法的返回值就是true，否则返回false
every()方法是所有元素的返回值都是true，every()方法才返回true，否则返回false

array.reduce() 与 array.reduceRight()

描述：按顺序为数组中的每个元素调用一次指定的函数，每一次执行 reduce方法都会将上一次计算结果( 函数返回值 )作为参数传入，最后将其结果汇总为单个返回值

语法：

数组.reduce(回调函数, 回调函数中上一次返回值的初始值) // 从数组第一个元素到数组最后一个元素
数组.reduceRight(回调函数, 回调函数中上一次元素值的初始值) // 从数组最后一个元素到数组第一个元素
//回调函数的语法
function(上一次返回值, 当前元素值, 当前元素索引, 当前数组){ return xxx }
/*
	上一次返回值：上一次执行回调函数的返回值，默认初始值为数组的第一个元素值
	当前元素值：当前迭代的数组元素值，默认从数组的第二个元素( 索引为1 )开始
	当前元素索引：当前迭代的数组元素索引值
	当前数组：调用reduce方法的数组
*/

例：

/* 例1 */
var arr = [1, 2, 3, 4, 5];
var newArr = arr.reduce(function (prev, cur) {
    console.log(prev, cur);
	// 1 2
	// 3 3
	// 6 4
	// 10 5
    return prev + cur
})
console.log(newArr); // 15

Object 对象

Object.create()

描述：以指定对象为原型创建新的对象，同时可以为新的对象指定新的属性，并对属性进行描述

语法：

1	Object.create(对象, { 属性名: 属性描述符对象... }) //返回创建的新对象

例：

/* 创建一个干净的对象 */
var obj = Object.create(null)
/* 创建一个对象，并添加相应属性，同时对属性进行描述 */
var obj2 = Object.create(Object.prototype, {
    name: {
        value: 'Timeic',
        writable: false, //属性不允许被赋值(=)
        configurable: false, //属性不允许从所在对象中删除(delete)
        enumerable: false //属性不允许被枚举(for in)
    },
    age: {
        value: 19,
        writable: true, //属性允许被赋值(=)
        configurable: true, //属性允许从所在对象中删除(delete)
        enumerable: true //属性允许被枚举(for in)
    }
})
console.log(obj2);

属性描述符

属性描述符是 JavaScript 提供的一种内部数据结构，用于描述对象的属性值，及控制其行为( 例如该属性是否可写、是否可配置、是否可修改以及是否可枚举等 )

分类：

数据描述符
存取描述符

数据描述符（数据属性）

键	值
`value`	该属性对应的值，默认值 undefined
`writable`	值为 `true` 时，该属性的值( value )才能够被改变，默认值为 false
`configurable`	值为 `true` 时，该属性描述符的 configurable、enumerable 的值才能修改，同时该属性也能够从所属对象中删除，默认值为 false
`enumerable`	值为 `true` 时，该属性才会出现在对象的枚举(for in)属性中，默认值为 false

存取描述符（访问器属性）

键	值
`get`	值为一个函数。没有该函数，则默认值为undefined。当获取或访问当前属性时，会调用此方法
`set`	值为一个函数。没有该函数，则默认值为undefined。当设置当前属性值时，会调用此方法
`configurable`	值为 `true` 时，该属性描述符的 configurable、enumerable 的值才能修改，同时该属性也能够从所属对象中删除，默认值为 false
`enumerable`	值为 `true` 时，该属性才会出现在对象的枚举(for in)属性中，默认值为 false

Object.getOwnPropertyDescriptor()

描述：获取属性描述符

语法：

1	Object.getOwnPropertyDescriptor(对象, 属性)

例：

var obj = {}
obj.text = 'string';
Object.getOwnPropertyDescriptor(obj, 'text');
/* 返回一个属性描述符对象
{
	value: 'string',
	writable: true,
	configurable: true,
	enumerable: true
}
*/

Object.defineProperty()

描述：定义指定对象的属性描述符

语法：

Object.defineProperty(对象, 属性, 属性描述符对象)
/*
第1个参数为目标对象
第2个参数为目标对象的属性名（一个字符串）
第3个参数为属性描述符对象
*/

例：

/* 修改一个值 */
var obj = {
	name: "猪八戒"
}
Object.defineProperty(obj, "name", { value: "孙悟空" });
console.log(obj); // { name: '孙悟空' }
/* 新增一个值 */
Object.defineProperty(obj, "age", { value: 28 });
console.log(obj.age); // 28

Tips：使用对象字面量（{ 属性名: 属性值 }）或 对象.属性名 = 值 的方式添加的属性可修改，可删除，可枚举（即属性描述符的enumerable、configurable、writable 的值为 true）

Object.defineProperties()

描述：定义指定对象的多个属性描述符

语法：

1	Object.defineProperties(对象, { 属性名: 属性描述符对象... })

getter & setter方法

getter 将对象属性绑定到获取该属性时将被调用的函数

语法：

{
    get 属性名(){
        //函数体
    }
}
//get为获取属性，其后为要获取的属性名，当获取该属性时，则调用getter方法

setter 将对象属性绑定到设置该属性值时将被调用的函数

语法：

{
    set 属性名(值){
        //函数体
    }
}
//set为设置属性，其后为要设置的属性名，当设置该属性值时，则调用setter方法
//setter方法包含一个参数，作为该属性被设置时的新值

例：

var obj = {
	firstName: '张', 
	lastName: '三',
	get fullName(){
		return this.firstName + ' ' + this.lastName
	},
	set fullName(data){
		var names = data.split(' ');
		this.firstName = names[0];
		this.lastName = names[1]
	}
}
console.log(obj);
obj.fullName = '老 六';
console.log(obj.fullName);

Object.getOwnPropertyNames()

描述：获取指定对象所有的属性名( 包括不可枚举属性 )集合( 数组 )

语法：

1	Object.keys(对象)

Object.keys()

描述：获取指定对象所有可枚举的属性名集合( 数组 )

语法：

1	Object.keys(对象)

Object.values()

描述：获取指定对象所有可枚举的属性值集合( 数组 )

语法：

1	Object.values(对象)

Object.entries()

描述：获取指定对象所有可枚举属性的名值对集合( 数组 )

语法：

1	Object.entries(对象)

Object.assign()

描述：将一个或多个源对象中所有可枚举的自有属性复制到目标对象（Shallow Copy 拷贝）

语法：

1	Object.assign(目标对象, ...源对象)

Object.preventExtensions()

描述：不可扩展对象（不能再添加新的属性或方法）

例：

var obj = {};
Object.preventExtensions(obj); //将 obj 设置成不可扩展对象
obj.name = "Tom"; //新增：静默失败
console.log(obj); // 空 Object 对象 {}
//使用 Object.defineProperty() 或 Object.defineProperties() 新增属性时会报错
//TypeError: Cannot define property name, object is not extensible
Object.defineProperty(obj, "name", {
  value: "Tom"
});

/* 使用 Object.isExtensible() 方法可以判断对象是否可扩展 */
//返回 true表示可扩展 false表示不可扩展
console.log(Object.isExtensible(obj));

Object.seal()

描述：密封的对象。一旦将对象进行了密封，则不能为该对象新增属性或方法、同时该对象已有属性的描述符的 configurable 的值将变为 false

例：

var person = {name: 'Tom'};
Object.seal(person); //将 person 设置成密封的对象
person.age = 12; //静默失败
//下面修改了已有属性的描述符的 configurable、enumerable 的值
//抛出类型错误 TypeError: Cannot redefine property
Object.defineProperty(person, "name", {
  value: "Bob",
  writable: false,
  configurable: true, //不可修改
  enumerable: true //不可修改
});

/* 使用 Object.isSealed() 方法可以判断对象是否被密封 */
//返回 true 表示被密封了，false 表示没有被密封
console.log(Object.isExtensible(person));

Object.freeze()

描述：冻结的对象。一旦将对象进行了冻结，那么该对象不能做任何修改（不可新增属性或方法，已有属性的描述符的 configurable、writable 的值将变为 false）

例：

var obj = {
  name: "Tom",
};
Object.freeze(obj); //将 obj 设置成冻结的对象
obj.age = 18; //新增：静默失败
obj.name = "Bob"; //修改：静默失败
delete obj.name; //删除：静默失败
console.log(obj); //{ name: 'Tom' }
//使用 Object.defineProperty() 或 Object.defineProperties() 新增属性或修改已属性时都会报错
//TypeError: Cannot redefine property
Object.defineProperty(obj, "name", {
  value: "Bob"
});
//TypeError: Cannot define property age, object is not extensible
Object.defineProperty(obj, "age", {
  value: 18
});

/* 使用 Object.isFrozen() 方法可以判断对象是否被冻结 */
//返回 true 表示被冻结了，false 表示没有被冻结
console.log(Object.isExtensible(person))