class里的get和set
- 在 ES6 中,class 里的 get 和 set 是用于定义访问器属性的关键字。get 方法可在访问对象属性时调用,set 方法则在设置对象属性时调用。下面通过一个简单示例来介绍它们的用法:
css
javascript
class Person {
constructor(name) {
this._name = name;
}
// 使用 get 方法获取属性值
get name() {
return this._name.toUpperCase();
}
// 使用 set 方法设置属性值
set name(newName) {
if (typeof newName === 'string' && newName.length > 0) {
this._name = newName;
} else {
console.log('请输入有效的姓名');
}
}
}
css
const person = new Person('John');
// 调用 get 方法
console.log(person.name);
// 调用 set 方法
person.name = 'Alice';
console.log(person.name);
// 尝试设置无效姓名
person.name = '';
代码解释:
- constructor 方法:这是类的构造函数,在创建 Person 类的实例时会调用它。这里接收一个参数 name,并把它赋值给实例的 _name 属性。
- get name() 方法:当访问 person.name 时,该方法会被调用,它返回 _name 属性值并转换为大写。
- set name(newName) 方法:当给 person.name 赋值时,此方法会被调用。它会先检查传入的 newName 是否为有效的字符串,若有效则更新 _name 属性,否则输出错误信息。
数值扩展
- 二进制和八进制
- 二进制表示方式是0bxxxx
- 八进制表示方式是0oxxxx
- 十六进制表示方式是0x
对象方法的扩展
- 简洁表示法
在定义对象的属性和方法时,如果属性名和变量名相同,以及方法是函数表达式时,可以使用简洁表示法。
css
javascript
let name = 'Alice';
let age = 30;
let person = {
name, // 等同于 name: name
age,
sayHello() { // 等同于 sayHello: function() {... }
console.log(`Hello, I'm ${this.name}`);
}
};
- 对象方法的 name 属性
对象方法的 name 属性可以获取方法的实际名称,即使方法被赋值给其他变量。
j
css
avascript
let obj = {
getName() {
return 'Bob';
}
};
let func = obj.getName;
console.log(func.name); // 输出 "getName"
- super 关键字
在对象的方法中,super 可以调用对象原型上的方法。常用于对象继承场景。
css
javascript
const parent = {
say() {
console.log('parent');
}
};
const child = {
__proto__: parent,
say() {
super.say();
console.log('child');
}
};
child.say();
// 先输出 "parent",再输出 "child"
- Object.assign()
用于对象的合并,将源对象的所有可枚举属性复制到目标对象。
● 目标对象与源对象有同名属性:当使用 Object.assign() 合并对象时,如果目标对象和源对象存在相同的属性名,源对象的属性值会覆盖目标对象的属性值。例如:
css
javascript
let target = { a: 1, b: 2 };
let source = { b: 4, c: 5 };
let result = Object.assign(target, source);
console.log(result);
// 输出:{ a: 1, b: 4, c: 5 },target对象的b属性值被source对象的b属性值覆盖
● 多个源对象有同名属性:如果有多个源对象,且它们之间存在同名属性,排在后面的源对象的属性值会覆盖前面源对象的属性值。例如:
j
css
avascript
let source1 = { x: 10, y: 20 };
let source2 = { y: 30, z: 40 };
let target = {};
let result = Object.assign(target, source1, source2);
console.log(result);
// 输出:{ x: 10, y: 30, z: 40 },source2的y属性值覆盖了source1的y属性值
● 属性值为对象时的浅拷贝覆盖:Object.assign() 执行的是浅拷贝。当属性值是对象时,源对象中的对象会直接覆盖目标对象中同名的对象属性(实际上是复制引用),后续对这个对象属性内部属性的修改,会同时影响到目标对象和源对象中该属性指向的对象。例如:
css
javascript
let target = { info: { name: 'Alice', age: 25 } };
let source = { info: { age: 26 } };
let result = Object.assign(target, source);
console.log(result.info);
// 输出:{ age: 26 } ,target的info对象被source的info对象覆盖(浅拷贝)
javascript
let target = { a: 1 };
let source1 = { b: 2 };
let source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target);
// 输出 { a: 1, b: 2, c: 3 }
比较两个值是否相等,和 === 类似,但对 +0 与 -0 、NaN 与 NaN 的判断结果不同。
css
javascript
console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true
console.log(+0 === -0); // true
- Object.keys()、Object.values()、Object.entries()
● Object.keys():返回一个包含对象自身所有可枚举属性名的数组。
● Object.values():返回一个包含对象自身所有可枚举属性值的数组。
● Object.entries():返回一个包含对象自身所有可枚举属性的键值对数组。
css
javascript
let obj = { a: 1, b: 2 };
console.log(Object.keys(obj)); // ["a", "b"]
console.log(Object.values(obj)); // [1, 2]
console.log(Object.entries(obj)); // [["a", 1], ["b", 2]]
asyna
- 基本定义和特点
async 函数是使用 async 关键字定义的函数,它总是返回一个 Promise 对象。如果 async 函数的返回值不是一个 Promise,那么 JavaScript 会自动将其包装成一个已解决(resolved)状态的 Promise。
css
javascript
async function fetchData() {
return '这是异步获取的数据';
}
const result = fetchData();
console.log(result);
// 输出一个 Promise 对象,状态为 resolved,值为 '这是异步获取的数据'
- 与 await 关键字结合使用
await 关键字只能在 async 函数内部使用,它用于暂停 async 函数的执行,直到等待的 Promise 对象被解决(resolved)或被拒绝(rejected)。
css
javascript
function delay(ms) {
return new Promise((resolve) => {
setTimeout(() => {
resolve('延迟结束');
}, ms);
});
}
async function asyncExample() {
console.log('开始执行异步操作');
const data = await delay(2000);
console.log(data);
console.log('异步操作完成');
}
- asyncExample();
在上述代码中,asyncExample 函数是一个 async 函数,await delay(2000) 会暂停函数的执行,直到 delay 返回的 Promise 被解决(即 2 秒后),然后继续执行后续的代码。
- 错误处理
async 函数中的错误可以使用 try...catch 语句来捕获。当 await 一个被拒绝的 Promise 时,try...catch 可以捕获到这个错误。
css
javascript
function errorPromise() {
return new Promise((_, reject) => {
reject('发生错误');
});
}
async function handleError() {
try {
await errorPromise();
} catch (error) {
console.log('捕获到错误:', error);
}
}
- handleError();
- await 是 JavaScript 中用于处理异步操作的关键字,它只能在 async 函数内部使用。await 的作用是暂停 async 函数的执行,直到它等待的 Promise 对象被 fulfilled(成功)或 rejected(失败),然后继续执行 async 函数后续的代码。
- await 语法的详细介绍:
基本语法:
await 表达式的一般形式为:await promise,其中 promise 是一个 Promise 对象(或者是一个可以被隐式转换为 Promise 的值)。
css
javascript
// 定义一个返回 Promise 的函数
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('数据已获取');
}, 1000);
});
}
// 定义 async 函数
async function getData() {
console.log('开始获取数据');
// 使用 await 等待 Promise 解决
const result = await fetchData();
console.log(result);
console.log('数据获取完成');
}
-
getData();
-
在上述代码中,getData 是一个 async 函数,await fetchData() 这行代码会暂停 getData 函数的执行,直到 fetchData 返回的 Promise 被 resolve。当 Promise 成功解决后,await 表达式会返回 Promise 的解决值(这里是字符串 '数据已获取'),并继续执行 async 函数后续的代码。
处理拒绝状态的 Promise
-
当 await 一个被 rejected 的 Promise 时,async 函数会抛出一个错误。可以使用 try...catch 语句来捕获这个错误。
-
css
javascript
function errorPromise() {
return new Promise((_, reject) => {
reject('发生错误');
});
}
async function handleError() {
try {
await errorPromise();
} catch (error) {
console.log('捕获到错误:', error);
}
}
-
multiSteps();
multiSteps 函数中依次使用 await 等待 step1 和 step2 返回的 Promise,确保每个步骤按顺序执行。
对象方法的扩展
● 直接在对象字面量中添加方法:可以在定义对象时,直接在对象字面量中添加方法。这种方式简单直观,适用于简单的对象定义。
css
javascript
let person = {
name: 'Alice',
age: 30,
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.sayHello(); // 输出: Hello, my name is Alice
● 使用Object.assign()方法:Object.assign() 方法用于将一个或多个源对象的属性和方法复制到目标对象。如果源对象中有方法,这些方法也会被复制到目标对象上。
css
javascript
let source = {
method1: function() {
console.log('This is method1');
}
};
let target = {};
Object.assign(target, source);
target.method1(); // 输出: This is method1
● 通过原型链扩展:在 JavaScript 中,每个对象都有一个原型对象。可以通过修改原型对象来为所有基于该原型的对象扩展方法,这样创建的新对象都会继承这些方法。
css
javascript
function Animal() {}
Animal.prototype.speak = function() {
console.log('The animal makes a sound');
};
let dog = new Animal();
dog.speak(); // 输出: The animal makes a sound
● 利用 ES6 的类和继承:ES6 引入了类的概念,通过继承可以创建一个新类,该类不仅拥有自己定义的方法,还能继承父类的方法,也可以重写父类方法或添加新方法来扩展功能。
css
javascript
class Vehicle {
constructor(make, model) {
this.make = make;
this.model = model;
}
start() {
console.log(`The ${this.make} ${this.model} starts`);
}
}
class Car extends Vehicle {
constructor(make, model, numDoors) {
super(make, model);
this.numDoors = numDoors;
}
// 扩展新方法
displayInfo() {
console.log(`This ${this.make} ${this.model} has ${this.numDoors} doors`);
}
}
let myCar = new Car('Toyota', 'Corolla', 4);
myCar.start(); // 输出: The Toyota Corolla starts
myCar.displayInfo(); // 输出: This Toyota Corolla has 4 doors
● 使用Object.defineProperty()和Object.defineProperties():Object.defineProperty() 方法可以在一个对象上定义一个新属性,或修改一个现有属性,并返回此对象。Object.defineProperties() 则可以一次性定义多个属性。可以利用它们为对象定义带有 getter 和 setter 函数的属性,从而实现对属性访问和设置的自定义逻辑,这也间接扩展了对象的功能。
css
javascript
let obj = {};
Object.defineProperty(obj, 'count', {
value: 0,
writable: true,
enumerable: true,
configurable: true
});
Object.defineProperty(obj, 'increment', {
value: function() {
this.count++;
},
writable: true,
enumerable: true,
configurable: true
});
- obj.increment();
console.log(obj.count); // 输出: 1
- 获取对象的所有键:object.key(xxx)
- 获取对象的所有值:object.value(xxx)
- 获取对象的所有键值对:object.entries(xxx);为了创建Map
- 区别:
意思就是用entries可以快速地以数组的形式拿到所有键值对,来创建map
getOwnPropertyDescriptors()用来获取对象属性的描述对象
扩展运算符和rest
在 JavaScript 里,扩展运算符(Spread Operator)和剩余参数(Rest Parameters)是 ES6 引入的两个实用特性,它们都采用三个点 ... 来表示,不过功能有所不同。下面为你分别介绍。
扩展运算符
扩展运算符能够把数组或者对象展开成多个元素。
展开数组
css
javascript
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // 输出: [1, 2, 3, 4, 5, 6]
展开对象
css
javascript
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // 输出: { a: 1, b: 2, c: 3, d: 4 }
函数调用时展开数组
css
javascript
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
const result = sum(...numbers);
console.log(result); // 输出: 6
剩余参数
剩余参数会把多个独立的参数聚合成一个数组。
函数定义中使用剩余参数
j
css
avascript
function sumAll(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
const total = sumAll(1, 2, 3, 4, 5);
console.log(total); // 输出: 15
解构赋值中使用剩余参数
css
javascript
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 输出: 1
console.log(rest); // 输出: [2, 3, 4, 5]
正则表达式中,命名捕获分组
- 语法
命名捕获分组使用 (?<组名>模式) 的形式,其中 <组名> 是你为捕获组取的名称,模式 是该分组要匹配的正则表达式内容。例如,想要匹配并命名捕获邮箱地址中的用户名部分,可以这样写:/(?\w+)@example.com/ ,这里 (?\w+) 就是一个命名捕获分组,username 是组名,\w+ 是匹配一个或多个单词字符的模式。 - 获取捕获结果
在 JavaScript 中,可以通过正则表达式的 exec 或字符串的 match 等方法获取命名捕获分组的结果,得到的匹配结果对象中会包含一个 groups 属性,该属性是一个对象,其属性名就是命名捕获分组的名称,属性值则是对应的捕获内容。示例如下:
css
javascript
const str = "[email protected]";
const regex = /(?<username>\w+)@example\.com/;
const match = str.match(regex);
console.log(match.groups.username); // 输出: test
- 替换操作中的应用
在字符串替换操作中,命名捕获分组也很有用。比如在 JavaScript 中使用 replace 方法时,可以通过 $<组名> 的形式引用命名捕获分组的内容。示例:
css
javascript
let str = "hello world";
let newStr = str.replace(/(?<word1>\w+)\s(?<word2>\w+)/, "$<word2> $<word1>");
console.log(newStr); // 输出: world hello
优势
● 可读性强:相比传统的数字编号捕获组(如 1 、2 等),命名捕获分组通过有意义的名称,使代码意图更加清晰,尤其在复杂的正则表达式中,便于理解和维护。
● 易于维护:当正则表达式结构发生变化时,数字编号捕获组的顺序可能改变,导致引用错误;而命名捕获分组通过名称引用,不受顺序变化的影响,降低了维护成本。
正向反向断言
● 肯定反向断言:语法是(?<=pattern),表示只有在pattern(模式)之后的内容才会被匹配。比如要匹配 "100 元" 中的数字,使用(?<=\d)元,这里(?<=\d)就是肯定反向断言,它要求 "元" 字前面必须是数字,才能匹配成功。
● 否定反向断言:语法是(?<!pattern),表示只有不在pattern(模式)之后的内容才会被匹配。例如(?<!\d)元,意味着 "元" 字前面不是数字时才匹配,像 "单元" 能匹配,而 "100 元" 不匹配。
● 正向肯定断言
语法为(?=pattern) ,表示只有当pattern(模式)在当前位置之后出现时,才会匹配成功。例如,想要匹配后面跟着com的atguigu,可以使用正则表达式atguigu(?=com) ,像atguigucom中的atguigu能被匹配到,但atguiguedu中的atguigu则不会被匹配。它常用于从文本中筛选出符合特定后置条件的内容。
● 正向否定断言
语法是(?!pattern) ,意思是只有当pattern(模式)不在当前位置之后出现时,才会匹配成功。比如,要匹配后面不是com的atguigu,可写为atguigu(?!com) ,那么atguiguedu中的atguigu能匹配,而atguigucom中的atguigu就匹配不上。正向否定断言有助于排除特定后置条件的文本匹配 。
dotall模式
- 在 JavaScript 正则表达式中,dotall模式也叫点号通配模式,是一种让 . 字符能够匹配包括换行符在内的所有字符的模式。在没有开启dotall模式时,. 只能匹配除换行符(如 \n、\r 等)之外的任意字符。
- 开启方式
在正则表达式的修饰符中添加 s 即可开启 dotall 模式。例如:
css
javascript
const str = "Hello\nWorld";
// 未开启dotall模式
const reg1 = /.+/;
const result1 = reg1.exec(str);
console.log(result1[0]);
// 输出: Hello
// 开启dotall模式
const reg2 = /.+/s;
const result2 = reg2.exec(str);
console.log(result2[0]);
// 输出: Hello\nWorld
应用场景
● 处理多行文本:在解析 HTML、XML 等格式的多行文本内容时,开启dotall模式可以更方便地匹配跨越多行的内容。比如匹配一段 HTML 中的所有内容,不管其中是否包含换行符。
● 文本搜索与替换:当需要在包含换行的大段文本中查找和替换特定模式时,dotall模式能确保正则表达式按预期工作,避免因换行符而导致匹配不完整的情况。
正则表达式中的dotall知识点
- 基础概念
在正则表达式里,点号(.)是一个特殊字符,在没有开启dotall模式时,它能匹配除换行符(\n)、回车符(\r)、行分隔符(\u2028)、段分隔符(\u2029)以及四个字节的 UTF - 16 字符外的任意单个字符 。而 ES9(ES2018)引入了s修饰符(也称为dotall模式),添加该修饰符后,点号(.)的匹配规则会发生变化,可以匹配包括换行符在内的任意单个字符。 - 语法和使用示例
语法:使用字面量定义正则表达式时,在末尾加上s修饰符,如/pattern/s;使用RegExp构造函数时,第二个参数传入s,如new RegExp('pattern','s')。
css
示例:
javascript
// 未开启dotall模式
let str = "foo\nbar";
let regex1 = /foo.bar/;
console.log(regex1.test(str)); // false
// 开启dotall模式
let regex2 = /foo.bar/s;
console.log(regex2.test(str)); // true
//在上述代码中,字符串str包含换行符\n,regex1未开启dotall模式,所以foo和bar之间的换行符无法被.匹配,返回false;而regex2使用s修饰符开启了dotall模式,.能匹配换行符,因此返回true。
- dotall属性
正则表达式实例有一个只读的dotall属性,用于表明该正则表达式是否使用了s修饰符。如果使用了s修饰符,dotall的值为true,否则为false。示例如下:
css
javascript
let regex3 = /abc/s;
let regex4 = /abc/;
console.log(regex3.dotall); // true
console.log(regex4.dotall); // false
- 与其他修饰符的区别
和m(多行)修饰符:m修饰符用于指定多行输入字符串应被视为多个行,影响的是和 的匹配行为,即和 的匹配行为,即和 的匹配行为,即和会匹配每一行的开头和结尾,而不是整个字符串的开头和结尾;而s修饰符只影响.的匹配行为,使其能匹配任意字符。例如:
css
javascript
let multilineStr = "java\npython";
let regexM = /^java/m;
let regexS = /java.s/;
console.log(regexM.test(multilineStr)); // true
console.log(regexS.test(multilineStr)); // false
和u(Unicode)修饰符:u修饰符用于正确处理大于\uFFFF的 Unicode 字符,当匹配多字节的 emoji 字符等时需要用到;s修饰符主要用于改变.的匹配规则。例如:
css
javascript
let emojiStr = "😀abc";
let regexU = /^.$/u;
let regexSU = /^.$/us;
console.log(regexU.test(emojiStr)); // true
console.log(regexSU.test(emojiStr)); // true
// 若字符串包含换行符,二者表现不同
let emojiStrWithLineBreak = "😀\nabc";
let regexU2 = /^.$/u;
let regexSU2 = /^.$/us;
console.log(regexU2.test(emojiStrWithLineBreak)); // false
console.log(regexSU2.test(emojiStrWithLineBreak)); // true
- 应用场景
在处理包含换行符的文本,如 HTML、XML 等格式的字符串,需要匹配跨越多行的内容时,dotall模式非常有用。例如,提取 HTML 标签内包含换行的文本内容:
css
javascript
let htmlStr = `
● 电影名称
上映日期: 2024-01-01
`;
let reg = /
● .*?(.*?)<\/a>.*?
(.*?)<\/p>/gs; let result; let data = []; while (result = reg.exec(htmlStr)) { data.push({ title: result[1], time: result[2] }); } console.log(data);
在 JavaScript 中,除了g(全局匹配)和s(dotAll 模式)修饰符外,正则表达式还可以使用以下修饰符:
● i(忽略大小写):使正则表达式在匹配时忽略字符的大小写。比如,正则表达式/hello/i可以匹配字符串中的Hello、hELLo 等各种大小写形式的 "hello"。示例代码如下:
css
javascript
let str = "Hello, World!";
let regex = /hello/i;
console.log(regex.test(str));
// 输出: true
● m(多行匹配):改变和$的匹配行为。默认情况下,^匹配字符串的开头,$匹配字符串的结尾;添加m修饰符后,和$会匹配每一行的开头和结尾。例如,对于字符串"Line1\nLine2",正则表达式/^Line/m能匹配到"Line1"和"Line2"。示例如下:
css
javascript
let multiLineStr = "Line1\nLine2";
let regexM = /^Line/m;
console.log(regexM.test(multiLineStr));
// 输出: true
● u(Unicode 模式):用于正确处理大于\uFFFF的 Unicode 字符。在未使用u修饰符时,JavaScript 正则表达式会将大于\uFFFF的 Unicode 字符拆分为两个代理项对来处理;使用u修饰符后,会将其视为一个完整字符。比如,对于包含表情符号(属于高 Unicode 字符)的字符串,使用u修饰符才能准确匹配。示例如下:
css
javascript
let emojiStr = "😀";
let regexWithoutU = /^.$/;
let regexWithU = /^.$/u;
console.log(regexWithoutU.test(emojiStr));
// 输出: false
console.log(regexWithU.test(emojiStr));
// 输出: true
● y(粘性匹配):让正则表达式从lastIndex属性指定的位置开始匹配,并且要求必须在该位置找到匹配项,否则匹配失败。每次成功匹配后,lastIndex会更新到匹配内容的末尾。示例如下:
css
javascript
let str = "abcabc";
let regex = /abc/y;
regex.lastIndex = 3;
console.log(regex.exec(str));
// 输出: ["abc"]
regex.lastIndex = 1;
console.log(regex.exec(str));
// 输出: null
方法简写
在 ES6 及以后版本中,定义对象方法时,若方法名为键,方法体为值,可以使用更简洁的写法。比如:
css
Javascript
const person = {
name: 'Alice',
// 传统写法:sayHello: function() {... }
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.sayHello();
- Object.keys()
该方法用于返回一个数组,数组的成员是对象自身的(不包含继承的)所有可枚举属性的键名。例如:
css
javascript
const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
console.log(keys);
// 输出: ["a", "b", "c"]
- Object.values()
作用是返回一个数组,成员是对象自身的(不包含继承的)所有可枚举属性的键值。示例如下:
css
javascript
const obj = { x: 'apple', y: 'banana' };
const values = Object.values(obj);
console.log(values);
// 输出: ["apple", "banana"]
- Object.entries()
此方法返回一个数组,成员是对象自身的(不包含继承的)所有可枚举属性的键值对数组。例如:
css
javascript
const user = { id: 1, name: 'Bob' };
const entries = Object.entries(user);
console.log(entries);
// 输出: [[1, "Bob"]]
- Object.assign()
用于对象的合并,将一个或多个源对象的所有可枚举属性,复制到目标对象上。如果目标对象和源对象存在相同的属性名,源对象的属性会覆盖目标对象的属性。它实行的是浅拷贝,即如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。例如:
css
javascript
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target);
// 输出: { a: 1, b: 2, c: 3 }
- Object.is()
用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致,但有两点不同:一是+0不等于-0 ,二是NaN等于自身。比如:
scala
javascript
console.log(Object.is(+0, -0));
// 输出: false
console.log(Object.is(NaN, NaN));
// 输出: true
- Object.getOwnPropertyDescriptors()
返回指定对象所有自身属性(非继承属性)的描述对象。每个描述对象包含了属性的value(值)、writable(是否可写)、enumerable(是否可枚举)、configurable(是否可配置)等信息。例如:
scala
javascript
const myObject = {
prop: 42
};
const descriptors = Object.getOwnPropertyDescriptors(myObject);
console.log(descriptors);
// 输出: { prop: { value: 42, writable: true, enumerable: true, configurable: true } }
- Object.setPrototypeOf() 与 Object.getPrototypeOf()
● Object.setPrototypeOf()方法用来设置一个对象的原型对象(prototype),返回参数对象本身。例如:Object.setPrototypeOf(obj, proto);
,这会将proto对象设为obj对象的原型。
● Object.getPrototypeOf()方法用于读取一个对象的原型对象。比如const prototype = Object.getPrototypeOf(someObject);,
可以获取someObject的原型。 - Object.fromEntries()
是Object.entries()的逆操作,用于将一个键值对数组转为对象。该方法特别适合将Map结构转为对象。例如:
scala
javascript
const entriesArray = [['name', 'Eve'], ['age', 25]];
const newObject = Object.fromEntries(entriesArray);
console.log(newObject);
// 输出: { name: 'Eve', age: 25 }
map与set区别
Map和Set都是 ES6 中引入的新的数据结构,它们都用于存储数据,但在使用场景、数据结构和操作方法等方面存在一些区别,具体如下:
- 数据结构
● Map是一种键值对的集合,它允许你使用任何类型的值作为键,并将其与另一个值(可以是任何类型)进行关联。
● Set是一个值的集合,其中每个值都是唯一的,不允许有重复的值。 - 常用操作方法
● Map:
○ set(key, value):添加键值对。
○ get(key):获取指定键的值。
○ has(key):检查是否包含指定键。
○ delete(key):删除指定键值对。
● Set:
○ add(value):添加值。
○ has(value):检查是否包含指定值。
○ delete(value):删除指定值。
○ clear():清空Set。 - 遍历方式
● Map:
○ keys():返回键的迭代器。
○ values():返回值的迭代器。
○ entries():返回键值对的迭代器,形式为[key, value]。
● Set:
○ keys()和values():行为相同,都返回值的迭代器,因为Set中的值就是键。
○ entries():返回一个迭代器,其包含的元素为[value, value]形式的数组。 - 使用场景
● Map:当需要存储和查找键值对数据,且键可以是任意类型时,使用Map。例如,存储用户信息,键可以是用户 ID(可以是数字、字符串或对象等),值可以是包含用户详细信息的对象。
● Set:当需要存储一组唯一的值,并且不关心键值对关系,只关注值的唯一性时,使用Set。例如,统计一个数组中不重复的元素,或者用于管理一组具有唯一性的权限、角色等。
字符串方法的扩展
● trimStart():去除字符串开头的空格。
scala
javascript
const str = ' Hello, World!';
console.log(str.trimStart()); // 输出: 'Hello, World!'
● trimEnd():去除字符串结尾的空格。javascript
scala
const str = 'Hello, World! ';
console.log(str.trimEnd()); // 输出: 'Hello, World!'
● matchAll():返回一个包含所有匹配结果的迭代器,可用于全局匹配。
scala
javascript
const str = 'abcabc';
const regex = /abc/g;
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match);
}