JavaScript 新增 7 个方法,很实用!

更新日期: 2024-02-20阅读: 369标签: 方法

Chrome 浏览器将在下一个版本(Chrome 122)支持 7 个全新的 JavaScript 方法,以增强 Set 对象的功能。

这些方法都是由 proposal-set-methods 提案提出的,目前该提案已经进入第三阶段,api 已经基本稳定。预计在 2024 年,这些方法将被纳入 ECMAScript 2024 规范中。这些方法包括:


下面先来看看 JavaScript 中的 Set 是什么,如何使用,又有何用处!


Set 基础

在 JavaScript 中,Set 是一种集合数据结构,它类似于数组,但成员的值都是唯一的,没有重复的值。Set 中的元素可以是任何类型,包括原始类型和对象引用。

Set 对象有多个方法可以操作集合。这些方法包括:

1、add(value): 添加某个值,并返回集合本身。如果该值已经存在,则不会再次添加。

let mySet = new Set();  
mySet.add(1); // 添加元素1
console.log(mySet.has(1)); // 输出:true
mySet.add(1); // 再次添加元素1,但不会添加
console.log(mySet.size); // 输出:1

2、delete(value): 删除某个值,并返回一个布尔值,表示是否成功删除。

let mySet = new Set();  
mySet.add(1); // 添加元素1
console.log(mySet.has(1)); // 输出:true
mySet.delete(1); // 删除元素1
console.log(mySet.has(1)); // 输出:false

3、has(value): 返回一个布尔值,表示某个值是否存在于集合中。

let mySet = new Set();  
mySet.add(1); // 添加元素1
console.log(mySet.has(1)); // 输出:true
console.log(mySet.has(2)); // 输出:false

4、clear(): 清除所有元素,并返回集合本身。

let mySet = new Set();  
mySet.add(1); // 添加元素1
mySet.clear(); // 清空集合
console.log(mySet.has(1)); // 输出:false

5、size: 返回集合中元素的数量。

let mySet = new Set();  
mySet.add(1); // 添加元素1
console.log(mySet.size); // 输出:1
mySet.add(2); // 添加元素2
console.log(mySet.size); // 输出:2

Set 有很多实用的场景:

去重:Set对象最直接的应用就是去重。由于Set中的元素是唯一的,因此可以用来去除数组中的重复元素。

let array = [1, 2, 3, 3, 2, 1];  
let set = new Set(array);
console.log(Array.from(set)); // 输出: [1, 2, 3]

集合运算:由于Set对象支持添加、删除和检查成员的方法,因此可以用来执行集合运算,如并集、交集和差集等。

const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const set1 = new Set(arr1);
const set2 = new Set(arr2);

// 求交集
const intersection = Array.from(set1).filter(item => set2.has(item)); // [3]

// 求并集
const union = Array.from(new Set([...arr1, ...arr2])); // [1, 2, 3, 4, 5]

// 求差集
const difference = Array.from(set1).filter(item => !set2.has(item)); // [1, 2]

存储不重复的数据:由于 Set 中的元素是唯一的,因此可以利用 Set 对象来存储不重复的数据,例如:

const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(1); // 添加重复元素,不会生效
console.log(mySet); // Set {1, 2, 3}

缓存:利用Set的唯一性,可以快速检查一个值是否已经被缓存。这通常用于函数的结果缓存,避免重复计算。例如:

let cache = new Set();  
function expensiveFunction(input) {
if (cache.has(input)) { // 如果结果已经在缓存中,直接返回结果,避免重复计算。
return cache.get(input); // 使用get方法从set中获取值。
} else { // 如果结果不在缓存中,计算结果并存入缓存。
let result = computeExpensiveFunction(input); // 假设computeExpensiveFunction是实际计算函数。
cache.add(input); // 将结果存入缓存。注意,这里使用add方法添加值到set中。
return result; // 返回计算结果。
}
}

代码优化:在某些情况下,使用Set代替数组可以提升代码的效率。例如,使用Set的has方法比使用数组的indexOf方法更快。


全新 Set 方法

上面提到,由于 Set 对象支持添加、删除和检查成员的方法,因此我们可以用来执行集合运算,如并集、交集和差集等。例如:

const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const set1 = new Set(arr1);
const set2 = new Set(arr2);

// 求交集
const intersection = Array.from(set1).filter(item => set2.has(item)); // [3]

// 求并集
const union = Array.from(new Set([...arr1, ...arr2])); // [1, 2, 3, 4, 5]

// 求差集
const difference = Array.from(set1).filter(item => !set2.has(item)); // [1, 2]

可以看到,为了执行集合运算,如交集、差集、并集等,通常需要借助其他方法,如 filter,这使得代码变得复杂且冗余。为了简化这一过程,proposal-set-methods 提案应运而生。该提案为 Set 对象新增了七个实用的方法,使得我们能够直接对集合进行各种计算。通过这些新方法,我们不再需要组合多个方法来完成集合运算,从而简化了代码并提高了可读性。

Set.prototype.intersection(other)

Set.prototype.union(other)

Set.prototype.difference(other)

Set.prototype.symmetricDifference(other)

Set.prototype.isSubsetOf(other)

Set.prototype.isSupersetOf(other)

Set.prototype.isDisjointFrom(other)

下面就来分别看一下这些方法。

注意:这些方法是支持链式调用的。

intersection

intersection 方法用于求两个 Set 对象的交集,返回一个新的 Set 对象,包含两个 Set 对象中都存在的元素。

const mobile = new Set(['javascript','java','swift', 'dart']);
const backend = new Set(['php','python','javascript','java']);
const frontend = new Set(['javascript','dart']);

mobile.intersection(backend);
// Set { javascript, java }
mobile.intersection(backend).intersection(frontend);
// Set { javascript }

union

union 方法用于求两个 Set 对象的并集,返回一个新的 Set 对象,包含两个 Set 对象中所有的元素。

const creation = new Set(['coding', 'writing', 'painting']);
const joy = new Set(['crying', 'laughing', 'coding']);

creation.union(joy);
// Set {'coding','crying','writing','laughing','painting'}

difference

difference 方法用于求两个 Set 对象的差集,返回一个新的 Set 对象,包含存在于当前 Set 对象中,但不存在于参数 Set 对象中的元素。

const joy = new Set(['crying', 'laughing','coding']);
const pain = new Set(['crying','screaming','coding']);

joy.difference(pain);
// Set {'laughing'}

symmetricDifference

symmetricDifference 方法用于求两个 Set 对象的对称差集,返回一个新的 Set 对象,包含存在于任意一个 Set 对象中,但不存在于两个 Set 对象中的元素。例如:

const joy = new Set(['crying',"laughing",'coding']);
const pain = new Set(['crying','screaming','coding']);

joy.symmetricDifference(pain);
// Set {'laughing', 'screaming'}

isSubsetOf

isSubsetOf 方法用于判断当前 Set 对象是否为另一个 Set 对象的子集,返回一个布尔值。例如:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);

set1.isSubsetOf(set2); // false
set2.isSubsetOf(set1); // false

const set3 = new Set([2, 3]);

set3.isSubsetOf(set1); // true
set3.isSubsetOf(set2); // true

isSupersetOf

isSupersetOf 方法用于判断当前 Set 对象是否为另一个 Set 对象的超集,返回一个布尔值。例如:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);

console.log(set1.isSupersetOf(set2)); // false
console.log(set2.isSupersetOf(set1)); // false

const set3 = new Set([2, 3]);

set1.isSupersetOf(set3); // true
set2.isSupersetOf(set3); // true

isDisjointFrom

isDisjointFrom 方法用于判断当前 Set 对象和另一个 Set 对象是否没有交集,返回一个布尔值。

const set1 = new Set([1, 2, 3]);
const set2 = new Set([4, 5, 6]);

set1.isDisjointFrom(set2); // true

const set3 = new Set([3, 4, 5]);

set1.isDisjointFrom(set3); // false
set2.isDisjointFrom(set3); // false


小结

有了这些方法,再也不用编写复杂的代码去实现这些方法,也不用借助第三方库(例如 lodash)来实现集合计算了。

来源:前端充电宝,作者:CUGGZ 

链接: https://www.fly63.com/article/detial/12649

html/css解决inline-block内联元素间隙的多种方法总汇

inline-blcok元素中间的空白符引起的间隙,处理方法总结包括:改变书写结构、使用font-size:0、使用margin负值、使用letter-spacing或word-spacing、丢失结束标签、W3C推荐 导航方法(兼容IE6等)、YUI的inline-block间隙处理等...

JS实现碰撞检测的方法分析

本文实例讲述了JS实现碰撞检测的方法。分享给大家供大家参考,具体如下:一个简单的碰撞检测例子,检测div1是否和div2发生碰撞,当div1碰到div2时,改变div2的颜色

css实现左右两边竖条的多种方法总结

css实现边竖条的多种方式:border、使用伪元素、外 box-shadow、内 box-shadow、drop-shadow、渐变 linearGradient、轮廓 outline、滚动条

js中math方法_整理js中常用的math方法总结

记录下与Math有关的常用方法,如:求最大值、最小值等,或者是保留几位数啥的。本文主要介绍了JavaScript中Math对象的方法,具有一定的参考价值,下面跟着小编一起来看下吧

js中split,splice,slice方法之间的差异_splice()、slice()、split()函数的区分

Split是切割字符串的一种方法,该方法主要用于把一个字符串分割成字符串数组。splice()方法向/从数组中添加/删除元素,然后返回被删除的元素组成的数组。slice()方法主要用于截取数组,并返回截取到的新数组。

JS获取当前时间戳的方法

第一种:获取的时间戳是把毫秒改成000显示,因为这种方式只精确到秒,第二种和第三种是获取了当前毫秒的时间戳。

js 实现二级联动

在web开发中我们经常会遇到页面的一个二级联动技术,二级联动字面解释就是说我在选择一级select不同的option,下面的二级option的属性值在进行相应的变化。

常用原生JS方法总结(兼容性写法)

经常会用到原生JS来写前端。。。但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的,一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了

js 操作剪贴板

是通过 js 操作 textarea input 输入框,只能操作输入框,不能操作其它元素。所有的 复制/剪切/粘贴 都是要在选中输入框中的文本之后,才进行操作的。

js async的常用方法

async函数是Generator 函数的语法糖,async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。async函数对Generator 函数的改进点有以下几点:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!