十四届蓝桥杯省赛Web大学组真题（2）-前端-CSS教程

十四届蓝桥杯省赛Web大学组真题（2）

3. 收集帛书碎片 (考点 ES6+新特性）

https://www.lanqiao.***/problems/5135/learning/?subject_code=4&group_code=2&match_num=14&match_flow=1&origin=cup

实现目标：

请在 collect-puzzle.js 文件中补全函数 collectPuzzle 中的代码，返回包含不同帛书碎片的数组，最终拼出完整的战国帛书，需要注意：

同一个人收集的帛书碎片可能是有重复的。
同一组内不同的人收集的帛书碎片也可能是有重复的。
工具函数需要统计所有人获取的不同帛书碎片，而不是帛书碎片数量。

题目解读：

如图所示，数据是给定的，我们需要做的是在collect-puzzle.js 文件中补全函数 collectPuzzle

来到题目，这里涉及知识点有ES6中...扩展运算符，Set数据结构

前置知识：

...扩展运算符

https://blog.csdn.***/xiaoxiaoluckylucky/article/details/88722561?ops_request_misc=&request_id=&biz_id=102&utm_term=ES%E4%B8%AD...%E8%A1%A8%E7%A4%BA%E4%BB%80%E4%B9%88&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-88722561.142^v96^pc_search_result_base2&spm=1018.2226.3001.4187

可以参考这篇文章，大概内容说的是

1.对象数组的浅拷贝

// 对象
let obj1 = {name:'hzj',age:18}
let obj2 = {...obj1}
console.log(obj2);
//{name: 'hzj', age: 18}

// 数组
let arr1 =[1,2,3]
let arr2 =[...arr1]
console.log(arr2);
//[1, 2, 3]

2.对象数组的合并

let obj3 = {name:'hzj',age:18}
let obj4 = {sex:'男'}
let obj5 = {...obj3,...obj4}
console.log(obj5);
//{name: 'hzj', age: 18, sex: '男'}

let arr3 =[1,2,3]
let arr4 =[4,5,6]
let arr6 =[...arr3,...arr4]
console.log(arr6);
//[1, 2, 3, 4, 5, 6]

Set

https://blog.csdn.***/qq_37148353/article/details/119878954

ES6提供了新的数据结构——Set。它类似于数组，但是成员的值都是唯一的，没有重复。Set本身是一个构造函数，用来生成Set数据结构。

使用场景：用于数组去重、用于字符串去重、实现并集、交集、和差集

let arr3 = [1,2,2,3,3,4]

let list = new Set(arr3)

console.log(list);

//Set(4) {size: 4, 1, 2, 3, 4}

有了这些前置知识，回到题目中，

打印一下...puzzles我们可以看到数据的结构[['四时运转', '灾变', '四时运转', '天象'],['四时运转', '月令禁忌', '天象'] , ['月令禁忌', '天象', '四时运转', '天象']]是这样的，那么我们是不是可以用for循环遍历他呢。

let list = new Set([])
    for (var i = 0; i < puzzles.length; i++) {
        for (var j = 0; j < puzzles[i].length; j++) {
            list.add(puzzles[i][j])
        }
    }
    return [...list]

代码解读：

声明一个Set数据结构，向Set中循环遍历添加数据，达到去重效果，在返回浅拷贝set的数组。

职场和发展