Es6进阶

class里的get和set

  1. 在 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 = '';

代码解释:

  1. constructor 方法:这是类的构造函数,在创建 Person 类的实例时会调用它。这里接收一个参数 name,并把它赋值给实例的 _name 属性。
  2. get name() 方法:当访问 person.name 时,该方法会被调用,它返回 _name 属性值并转换为大写。
  3. set name(newName) 方法:当给 person.name 赋值时,此方法会被调用。它会先检查传入的 newName 是否为有效的字符串,若有效则更新 _name 属性,否则输出错误信息。

数值扩展

  1. 二进制和八进制
  2. 二进制表示方式是0bxxxx
  3. 八进制表示方式是0oxxxx
  4. 十六进制表示方式是0x
对象方法的扩展
  1. 简洁表示法
    在定义对象的属性和方法时,如果属性名和变量名相同,以及方法是函数表达式时,可以使用简洁表示法。
css 复制代码
javascript
let name = 'Alice';
let age = 30;
let person = {
    name, // 等同于 name: name
    age,
    sayHello() { // 等同于 sayHello: function() {... }
        console.log(`Hello, I'm ${this.name}`);
    }
};
  1. 对象方法的 name 属性

对象方法的 name 属性可以获取方法的实际名称,即使方法被赋值给其他变量。

j

css 复制代码
avascript
let obj = {
    getName() {
        return 'Bob';
    }
};
let func = obj.getName;
console.log(func.name); // 输出 "getName"
  1. super 关键字

在对象的方法中,super 可以调用对象原型上的方法。常用于对象继承场景。

css 复制代码
javascript
const parent = {
    say() {
        console.log('parent');
    }
};
const child = {
    __proto__: parent,
    say() {
        super.say();
        console.log('child');
    }
};
child.say(); 
// 先输出 "parent",再输出 "child"
  1. 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 }
  1. Object.is()

比较两个值是否相等,和 === 类似,但对 +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
  1. 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

  1. 基本定义和特点

async 函数是使用 async 关键字定义的函数,它总是返回一个 Promise 对象。如果 async 函数的返回值不是一个 Promise,那么 JavaScript 会自动将其包装成一个已解决(resolved)状态的 Promise。

css 复制代码
javascript
async function fetchData() {
    return '这是异步获取的数据';
}

const result = fetchData();
console.log(result); 
// 输出一个 Promise 对象,状态为 resolved,值为 '这是异步获取的数据'
  1. 与 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('异步操作完成');
}
  1. asyncExample();

在上述代码中,asyncExample 函数是一个 async 函数,await delay(2000) 会暂停函数的执行,直到 delay 返回的 Promise 被解决(即 2 秒后),然后继续执行后续的代码。

  1. 错误处理

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);
    }
}
  1. handleError();
    1. await 是 JavaScript 中用于处理异步操作的关键字,它只能在 async 函数内部使用。await 的作用是暂停 async 函数的执行,直到它等待的 Promise 对象被 fulfilled(成功)或 rejected(失败),然后继续执行 async 函数后续的代码。
    2. 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('数据获取完成');
}
  1. getData();

    1. 在上述代码中,getData 是一个 async 函数,await fetchData() 这行代码会暂停 getData 函数的执行,直到 fetchData 返回的 Promise 被 resolve。当 Promise 成功解决后,await 表达式会返回 Promise 的解决值(这里是字符串 '数据已获取'),并继续执行 async 函数后续的代码。

      处理拒绝状态的 Promise

    2. 当 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);
    }
}
  1. 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
  1. 获取对象的所有键:object.key(xxx)
  2. 获取对象的所有值:object.value(xxx)
  3. 获取对象的所有键值对:object.entries(xxx);为了创建Map
  4. 区别:
    意思就是用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]

正则表达式中,命名捕获分组

  1. 语法
    命名捕获分组使用 (?<组名>模式) 的形式,其中 <组名> 是你为捕获组取的名称,模式 是该分组要匹配的正则表达式内容。例如,想要匹配并命名捕获邮箱地址中的用户名部分,可以这样写:/(?\w+)@example.com/ ,这里 (?\w+) 就是一个命名捕获分组,username 是组名,\w+ 是匹配一个或多个单词字符的模式。
  2. 获取捕获结果
    在 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
  1. 替换操作中的应用
    在字符串替换操作中,命名捕获分组也很有用。比如在 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模式

  1. 在 JavaScript 正则表达式中,dotall模式也叫点号通配模式,是一种让 . 字符能够匹配包括换行符在内的所有字符的模式。在没有开启dotall模式时,. 只能匹配除换行符(如 \n、\r 等)之外的任意字符。
  2. 开启方式
    在正则表达式的修饰符中添加 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知识点
  1. 基础概念
    在正则表达式里,点号(.)是一个特殊字符,在没有开启dotall模式时,它能匹配除换行符(\n)、回车符(\r)、行分隔符(\u2028)、段分隔符(\u2029)以及四个字节的 UTF - 16 字符外的任意单个字符 。而 ES9(ES2018)引入了s修饰符(也称为dotall模式),添加该修饰符后,点号(.)的匹配规则会发生变化,可以匹配包括换行符在内的任意单个字符。
  2. 语法和使用示例
    语法:使用字面量定义正则表达式时,在末尾加上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。
  1. 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
  1. 与其他修饰符的区别
    和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
  1. 应用场景
    在处理包含换行符的文本,如 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();
  1. Object.keys()
    该方法用于返回一个数组,数组的成员是对象自身的(不包含继承的)所有可枚举属性的键名。例如:
css 复制代码
javascript
const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
console.log(keys); 
// 输出: ["a", "b", "c"]
  1. Object.values()
    作用是返回一个数组,成员是对象自身的(不包含继承的)所有可枚举属性的键值。示例如下:
css 复制代码
javascript
const obj = { x: 'apple', y: 'banana' };
const values = Object.values(obj);
console.log(values); 
// 输出: ["apple", "banana"]
  1. Object.entries()
    此方法返回一个数组,成员是对象自身的(不包含继承的)所有可枚举属性的键值对数组。例如:
css 复制代码
javascript
const user = { id: 1, name: 'Bob' };
const entries = Object.entries(user);
console.log(entries); 
// 输出: [[1, "Bob"]]
  1. 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 }
  1. Object.is()
    用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致,但有两点不同:一是+0不等于-0 ,二是NaN等于自身。比如:
scala 复制代码
javascript
console.log(Object.is(+0, -0)); 
// 输出: false
console.log(Object.is(NaN, NaN)); 
// 输出: true
  1. 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 } }
  1. Object.setPrototypeOf() 与 Object.getPrototypeOf()
    ● Object.setPrototypeOf()方法用来设置一个对象的原型对象(prototype),返回参数对象本身。例如:Object.setPrototypeOf(obj, proto);,这会将proto对象设为obj对象的原型。
    ● Object.getPrototypeOf()方法用于读取一个对象的原型对象。比如const prototype = Object.getPrototypeOf(someObject);,可以获取someObject的原型。
  2. 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 中引入的新的数据结构,它们都用于存储数据,但在使用场景、数据结构和操作方法等方面存在一些区别,具体如下:

  1. 数据结构
    ● Map是一种键值对的集合,它允许你使用任何类型的值作为键,并将其与另一个值(可以是任何类型)进行关联。
    ● Set是一个值的集合,其中每个值都是唯一的,不允许有重复的值。
  2. 常用操作方法
    ● Map:
    ○ set(key, value):添加键值对。
    ○ get(key):获取指定键的值。
    ○ has(key):检查是否包含指定键。
    ○ delete(key):删除指定键值对。
    ● Set:
    ○ add(value):添加值。
    ○ has(value):检查是否包含指定值。
    ○ delete(value):删除指定值。
    ○ clear():清空Set。
  3. 遍历方式
    ● Map:
    ○ keys():返回键的迭代器。
    ○ values():返回值的迭代器。
    ○ entries():返回键值对的迭代器,形式为[key, value]。
    ● Set:
    ○ keys()和values():行为相同,都返回值的迭代器,因为Set中的值就是键。
    ○ entries():返回一个迭代器,其包含的元素为[value, value]形式的数组。
  4. 使用场景
    ● 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);
}
相关推荐
最新资讯动态3 分钟前
想让鸿蒙应用快的“飞起”,来HarmonyOS开发者官网“最佳实践-性能专区”
前端
雾岛LYC听风10 分钟前
3. 轴指令(omron 机器自动化控制器)——>MC_GearInPos
前端·数据库·自动化
weixin_4435669810 分钟前
39-Ajax工作原理
前端·ajax
WebInfra18 分钟前
Rspack 1.3 发布:内存大幅优化,生态加速发展
前端·javascript·github
ak啊21 分钟前
Webpack 构建阶段:模块解析流程
前端·webpack·源码
学习OK呀31 分钟前
后端上手学习react基础知识
前端
星火飞码iFlyCode32 分钟前
大模型提效之服务端日常开发
前端
zoahxmy092933 分钟前
Canvas 实现单指拖动、双指拖动和双指缩放
前端·javascript
花花鱼33 分钟前
vue3 动态组件 实例的说明,及相关的代码的优化
前端·javascript·vue.js
Riesenzahn35 分钟前
CSS的伪类和伪对象有什么不同?
前端·javascript