ES6之新的数据结构

Posted zppsakura

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6之新的数据结构相关的知识,希望对你有一定的参考价值。

Set

Set 类似于数组,是一种集合的数据结构,和 Array 之间最大的区别是:

  • Set中所有的成员都是唯一的。
    可以把Set想象成是一个: 既没有重复元素,也没有顺序概念的数组。

Set 本身是一个构造函数,用来生成 Set 数据结构

const s1 = new Set();
s1.add(5)
s1.add(2).add(1).add(3).add(2).add(4)
console.log(s1);

Set 函数可接受一个可循环的数据结构(如数组、类数组、含有 iterable 接口的其他数据结构)作为参数来初始化

const s2 = new Set([1, 2, 3, 4, 2, 3, 6])
console.log(s2)

对于对象,只对键值对中的键去重,值不去重,若重复,保留后放入的

const s4 = new Set([{ "age": 17, "age": 18, "value": '张三', "value2": '张三', "name": '李刚' }, 1, 2, 3])
console.log(s4)

1.set属性及操作方法

const s2 = new Set([1, 2, 3, 4, 2, 3, 6])
console.log('========属性及操作方法============================');
console.log(s2.size);   // set的长度
console.log(s2.add('123')); // 向set中添加一个值,返回set结构本身,所以可使用链式结构
console.log(s2.delete(3)); // 删除一个值,返回布尔值,表示是否删除成功
console.log(s2.has(6)); // set中是否包含某个值,返回布尔值
console.log(s2.has(3)); // set中是否包含某个值,返回布尔值
console.log(s2.clear()); // 清除所有成员,无返回值
console.log('====================================');

2.set循环的方式

const s3 = new Set(['a', 'b', 'c', 'd', '1', '2', 4, 5])
console.log('==========循环==========================');
console.log(s3);
console.log(s3.keys());  // 返回键名
console.log(s3.values()); // 返回键值
console.log(s3.entries()); // 返回所有键值对成员
console.log(s3.forEach(e => { // 遍历每一个成员
    console.log(e)
}));
console.log('====================================');

set结构没有键名,只有键值(键名和键值是一个值),所以key方法和value方法的行为完全一致,entries方法返回的同时包括键名和键值,所以每次输出一个数组,它的两个成员完全相等。

3. set应用
3.1. 数组去重

let array = [1, 2, 1, 3, 4, 4, 2, 7, 8]
console.log('=====数组去重===============================');
console.log([...new Set(array)]);
console.log('====================================');

3.2 实现并集,交集

let a = new Set([1, 2, 3])
let b = new Set([2, 3, 4])
console.log('======并集/交集/差集==============================');
console.log(new Set([...a, ...b]))
console.log(new Set([...a].filter(x => b.has(x))))
console.log(new Set([...a].filter(x => !b.has(x))))
console.log('====================================');

WeakSet 结构与 Set 类似,也是不重复的值的集合。但是,它与 Set 有两个区别。

  • WeakSet 的成员只能是对象,而不能是其他类型的值。
  • WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中。
let w = new WeakSet([1, 2, 3])
let w3 = new WeakSet([{ "age": 17 }])
var obj = {}
var sin = {}
console.log('========WeakSet============================');
// console.log(w);  // 报错
console.log(typeof w3);
console.log(w3.add({ "name": "张三" }));
console.log(w3.size);
// console.log(w3.keys()); // 报错
console.log(w3.add(obj))
console.log(w3.has(obj))
console.log(w3.has(sin))
console.log('====================================');

- WeakSet结构也提供了add( ) 方法,delete( ) 方法,has( )方法给开发者使用,作用与用法跟Set结构完全一致。
- WeakSet 结构不可遍历。因为它的成员都是对象的弱引用,随时被回收机制回收,成员消失。所以WeakSet 结构不会有keys( ),values( ),entries( ),forEach( )等方法和size属性。

Map

Map和set类似

Set,Map去重和数组去重的性能比较

Array.from()方法从一个类似数组或可以迭代的对象中创建一个新的数组实例

let arr1 = Array.from(new Array(100000), (x, index) => {
    return index
})

let arr2 = Array.from(new Array(50000), (x, index) => {
    return index + index
})

let start = new Date().getTime()
console.log('开始数组去重')

function distinct(a, b) {
    // 数组去重

    // 方法一
    // Array.filter() + indexOf
    // 这个方法的思路是,将两个数组拼接为一个数组,然后使用 ES6 中的 Array.filter() 遍历数组,并结合 indexOf 来排除重复项

    // let arr = a.concat(b);
    // return arr.filter((item, index) => {
    //     return arr.indexOf(item) === index
    // })


    // 方法二
    // 双重 for 循环
    // 外层循环遍历元素,内层循环检查是否重复
    // 当有重复值的时候,可以使用 push(),也可以使用 splice()

    // let arr = a.concat(b);
    // for (let i = 0, len = arr.length; i < len; i++) {
    //     for (let j = i + 1; j < len; j++) {
    //         if (arr[i] == arr[j]) {
    //             arr.splice(j, 1);
    //             // splice 会改变数组长度,所以要将数组长度 len 和下标 j 减一
    //             len--;
    //             j--;
    //         }
    //     }
    // }
    // return arr


    // 方法三 
    // for...of + includes()
    // 双重for循环的升级版,外层用 for...of 语句替换 for 循环,把内层循环改为 includes()
    // 先创建一个空数组,当 includes() 返回 false 的时候,就将该元素 push 到空数组中 
    // 类似的,还可以用 indexOf() 来替代 includes()

    // let arr = a.concat(b)
    // let result = []
    // for (let i of arr) {
    //     !result.includes(i) && result.push(i)
    // }
    // return result

    // 方法三和方法一类似,因此时长也接近


    // 方法四
    // Array.sort()
    // 比较相邻元素是否相等,从而排除重复项

    // let arr = a.concat(b)
    // arr = arr.sort()
    // let result = []
    // for (let i = 0; i < arr.length; i++) {
    //     arr[i] !== arr[i - 1] && result.push(arr[i])
    // }
    // return result


    // 方法五 Set
    // new Set() set的成员具有唯一性

    // return Array.from(new Set([...a, ...b]))


    // 方法六 Map
    // 如果res中没有某个键,就设置这个键的值为1

    // const arr = a.concat(b)
    // const res = new Map();
    // return arr.filter(item => !res.has(item) && res.set(item, 1))

}

console.log('去重后的长度', distinct(arr1, arr2).length)

let end = new Date().getTime()
console.log('耗时', end - start)

通过对比,set,map去重性能更好

Map,Set和数组的对比

let map = new Map()
let set = new Set();
let array = []

// 增
map.set('t', 1);
set.add({ t: 1 });
array.push({ t: 1 })
console.info('map-set-array', map, set, array);

// 删
map.delete('t');
set.forEach(item => item.t ? set.delete(item) : '');
let index = array.findIndex(item => item.t);
array.splice(index, 1);
console.info('map-set-array-empty', map, set, array);

// 改
map.set('t', 2);
set.forEach(item => item.t ? item.t = 2 : '');
array.forEach(item => item.t ? item.t = 2 : '');
console.info('map-set-array-modify', map, set, array);

// 查
let map_exist = map.has('t');   // 时间复杂度O(1)
let set_exist = set.has({ t: 1 });
let array_exist = array.find(item => item.t); // O(n)
console.info('map-set-array', map_exist, map_exist, array_exist);

通过对比,map的API更加简单,Array需要遍历才能进行查,改,删的操作,set在进行删,改操作时也需要遍历。因此优先使用map

Map、Set和Object对比

let item = { t: 1 };
let map = new Map();
let set = new Set();
let obj = {};

// 增
map.set('t', 1);
map.set(3, 2);
set.add(item);
obj['t'] = 1;
obj[3] = 2;
console.info('map-set-obj', obj, map, set);

// 删
map.delete('t');
set.delete(item);
delete obj['t'];
console.info('map-set-obj-empty', obj, map, set);

// 改
map.set('t', 2);
item.t = 2;
obj['t'] = 2;
console.info('map-set-obj-modify', obj, map, set);

// 查 
console.info({
    map_exist: map.has('t'),
    set_exist: set.has(item),
    obj_exist: 't' in obj
})

通过对比可以发现:

  • 能使用map的优先使用,不使用数组
  • 考虑数据的唯一性,考虑使用set,不使用Object

以上是关于ES6之新的数据结构的主要内容,如果未能解决你的问题,请参考以下文章

ECMAScript 6 入门之新的数据类型Symbol

单例模式之新的想法

JDK8 新特性之新的日期&时间API,一篇讲清楚!

创技术之新 趣链科技区块链性能测试平台Hyperbench迈步开源

技术管理之新晋总监生存指南

uniGUI之新窗口(19)