JavaScript 构造函数及内置构造函数的详解
在JavaScript中，构造函数是一种特殊的函数，用于初始化对象。当使用new关键字调用构造函数时，它会创建一个新的对象实例，并将构造函数内部的this关键字绑定到这个新对象上。构造函数通常用于定义对象的属性和方法，以及创建对象的实例。
1. 构造函数的定义和调用
- 构造函数通常以大写字母开头，以便与普通函数区分。
- 它们可以包含属性和方法，这些属性和方法通过this关键字添加到新创建的对象上。
- 调用构造函数时，需要使用new关键字，这样可以确保this正确地指向新创建的对象实例。
- 构造函数内部无需写return，返回值即为新创建的对象。
function Person(name, age) {
this.name = name;
this.age = age;
}
var person1 = new Person('Alice', 25);2. 实例成员&静态成员
- 实例成员：通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。
- 静态成员：构造函数的属性和方法被称为静态成员
function Person(name, age) {
this.name = name; // 实例成员
this.age = age; // 实例成员
}
// 静态成员
Person.species = 'Homo sapiens';
// 注意：
// 1.name和age是每个通过Person构造函数创建的对象实例所独有的实例成员。
// 2.species是Person构造函数本身的静态成员，它与任何特定的Person实例无关。当创建Person的实例时，可以像下面这样访问实例成员：
var alice = new Person('Alice', 30);
console.log(alice.name); // 输出: Alice
console.log(alice.age); // 输出: 30而静态成员可以通过构造函数本身来访问：
console.log(Person.species); // 输出: Homo sapiens3. 内置构造函数
JavaScript内置构造函数是语言提供的一组预先定义的函数，用于创建和管理不同类型的对象。这些构造函数不仅提供了创建对象的快捷方式，还定义了对象的默认行为和属性。内置构造函数包括但不限于Object、Array、String、Number、Boolean、Date、RegExp等。
4. 内置构造函数的常用方法
4.1 Object构造函数
- Object.keys(obj)：静态方法获取对象中所有属性。
- Object.values(obj)：静态方法获取对象中所有属性值。
const obj = { name: 'Alice', age: 30 };
console.log(Object.keys(obj)); // ["name", "age"]
console.log(Object.values(obj)); // ["Alice", 30]- Object.assign(target, ...sources)：用于合并对象。
let obj1 = { name: 'zs', age: 20 }
let obj2 = { height: 180, weight: 80 }
// let obj3 = {}
// 作用：将 第2个参数、第3个参数，第.....个参数中的属性，合并到第1个参数中
// 语法一：
// Object.assign(obj3, obj1, obj2)
// console.log(obj3)
// 语法二：
// let obj = Object.assign({}, obj1, obj2)
// console.log(obj)
// 使用它，实现对象的拷贝
let obj = Object.assign({}, obj1)
// 拷贝之后，两个对象独立。（修改一个对象，另一个不受影响）
obj.name = 'lisi'
console.log(obj) // { name: 'lisi', age: 20 }
console.log(obj1) // { name: 'zs', age: 20 }4.2 Array构造函数
- forEach(): 迭代数组中的每个元素。
let nums = [1, 2, 3];
nums.forEach(function(item, index, arr) {
console.log(item * 2); // 分别输出 2, 4, 6
});- filter(): 创建过滤后的新数组
let nums = [1, 2, 3, 4, 5];
let evens = nums.filter(num => num % 2 === 0);
console.log(evens); // 输出 [2, 4]- map(): 创建映射后的新数组
let doubles = [1, 2, 3].map(x => x * 2);
console.log(doubles); // 输出 [2, 4, 6]- join(): 将数组转换为字符串
let words = ['Hello', 'world'];
let str = words.join(' ');
console.log(str); // 输出 "Hello world"- find(): 找到第一个匹配的元素
let array = [1, 2, 3, 4, 5];
let found = array.find(element => element > 3);
console.log(found); // 输出 4- every(): 检查所有元素是否符合条件
let bool = [2, 4, 6].every(n => n % 2 === 0);
console.log(bool); // 输出 true- some(): 是否存在至少一个元素符合条件
bool = [2, 4, 6, 7].some(n => n % 2 !== 0);
console.log(bool); // 输出 true- concat(): 合并多个数组
let array1 = [1, 2];
let array2 = [3, 4];
let combined = array1.concat(array2);
console.log(combined); // 输出 [1, 2, 3, 4]- sort(): 对数组排序
let arr = [3, 1, 4, 1, 5, 9];
arr.sort();
console.log(arr); // 输出 [1, 1, 3, 4, 5, 9]- splice(): 修改数组
// 语法：arr.splice(位置, 删除的数量, 新增的元素, 新增的元素, ........)
let list = ['a', 'b', 'c', 'd'];
list.splice(1, 2, 'x'); // 删除从第1索引开始的2个元素，插入'x'
console.log(list); // 输出 ['a', 'x', 'd']- reverse(): 反转数组顺序
let reversed = ['one', 'two', 'three'].reverse();
console.log(reversed); // 输出 ['three', 'two', 'one']- findIndex(): 查找符合条件元素的索引
let index = [1, 2, 3, 4].findIndex(value => value > 2);
console.log(index); // 输出 2- reduce是一个累加器，可以求和、查找最大值、最小值、计算产品、转换数据结构等
// 示例一：计算数组中所有数值的总和
const arr= [1, 2, 3, 4, 5];
const sum = arr.reduce((total, curr) => total+ curr, 0);
console.log(sum); // 输出: 15
// 示例二：将数组转换为一个对象，统计每个元素出现的次数
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const fruitCounts = fruits.reduce((total, curr) => {
total[curr] = (total[curr] || 0) + 1;
return total;
}, {});
console.log(fruitCounts); // 输出: { apple: 3, banana: 2, orange: 1 }4.3 String构造函数
-
length：获取字符串长度，反映字符串中字符的数量。
let str = "Hello World";
console.log(str.length); // 输出 11- split：将字符串按照指定的分隔符切分为数组。
let str = "apple,banana,grape";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "grape"]- substring：从原字符串中抽取部分字符串形成新的字符串，不改变原始字符串。
let str = "Hello World";
console.log(str.substring(1, 5)); // 输出 "ello"- includes：判断字符串中是否包含某个字符，包括则返回true，不包含则返回false。
console.log('hello'.includes('h')) // true
console.log('hello'.includes('ell')) // true
console.log('hello'.includes('ho')) // false
console.log('hello'.includes('h', 2)) // false 从2的位置往后数，看字符串中是否包含h- startsWith：检查字符串是否以指定的子字符串开始，返回布尔值。
console.log('hello'.startsWith('h')) // true
console.log('hello'.startsWith('he')) // true
console.log('hello'.startsWith('hello')) // true
console.log('hello'.startsWith('e')) // false
console.log('hello'.startsWith('e', 1)) // true。从位置1开始算起，看这段字符串的开头是否是e- endsWith：检查字符串是否以指定子字符串结尾，返回布尔值。
console.log('hello'.endsWith('llo')) // true
console.log('hello'.endsWith('ll', 4)) // true，4个长度，意思是先截取4个字符hell，然后看这4个字符的结尾是否是ll- toUpperCase：将字符串中所有字符转为大写。
let str = "hello world";
console.log(str.toUpperCase()); // 输出 "HELLO WORLD"- toLowerCase：将字符串中所有字符转为小写。
let str = "HELLO WORLD";
console.log(str.toLowerCase()); // 输出 "hello world"- trim()：去除字符串两边的空白，常用于输入框校验
console.log(' hello ') // hello
console.log(' hello '.trim()) // hello- search：在字符串中搜索字符。如果有这个字符，则返回第1个找到的位置；没有找到返回-1
console.log('hello'.search('e')) // 1
console.log('hello'.search('l')) // 2
console.log('hello'.search('a')) // -1- indexOf：返回第一个与给定字符串相匹配的子字符串的位置；如果没有找到，则返回 -1。
let str = "hello world hello again";
console.log(str.indexOf("hello")); // 输出 0- replace：替换字符串中的一部分，可使用正则表达式作为模式。
let str = "hello world hello again";
console.log(str.replace(/hello/g, "hi")); // 输出 "hi world hi again"4.4 Number构造函数
- toFixed：用于设置保留小数位的长度。
const number = 123.456;
console.log(number.toFixed(2)); // "123.46" 最后一位符合四舍五入