14届蓝桥杯省赛真题

参考：https://blog.meta-code.top/2023/04/10/2023-91/

1 电影院排座位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.seat {
  background-color: #444451;
  height: 40px;
  width: 45px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}

/* TODO：待补充代码 */
.seat-area{
  padding-top: 50px;
  display: flex;
  flex-wrap: wrap;
}

.seat:nth-child(4n+3){
  margin-left: 30px;
}

.seat:nth-child(8n+1){
  margin-left: 0;
}

/* 这谁知道啊 */
.seat:nth-child(n+40){
  margin-bottom: 0;
}

或者：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.seat {
  background-color: #444451;
  height: 40px;
  width: 45px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* TODO：待补充代码 */
.seat-area{
  padding-top: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.seat:nth-child(4n+3){
  margin-left: 20px;
}
  • gap适用于flex和grid
  • 底下不能有padding，会导致判题错误

2 图片水印生成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function createWatermark(text, color, deg, opacity, count) {
  const container = document.createElement("div");
  container.className = "watermark";
  let html = ``
  while (count--) html += `<span>${text}</span>`
  container.innerHTML = html
  Array.from(container.children).forEach(element => {
    element.style.color = color
    element.style.opacity = opacity
    // 不能用这个！！！
    // element.style.rotate = `${deg}deg`
    element.style.transform=`rotate(${deg}deg)`
  });

  return container;
}
  • 再看看CSS动画

3 收集帛书碎片

1
2
3
4
5
6
7
8
9
10
11
12
function collectPuzzle(...puzzles) {
  // TODO: 在这里写入具体的实现逻辑
  let set = new Set()
  for (items of puzzles) {
    for (item of items) 
     set.add(item)
  }
  console.log(set);
  return Array.from(set)
}

// return [... new Set(puzzles.flat())]
  • 看看js各对象的方法，记API

4 自适应页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
@media (max-width: 800px) {
  nav.menu {
    height: 54px;
    margin-bottom: 25px;
  }
  .collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: inherit;
    border-top: 1px #959595 solid;
  }
  .collapse li {
    display: block;
  }
  .collapse li ul{
    position: relative;
  }
  label.menu-btn {
    display: inline-block;
    color: #999;
    cursor: pointer;
    line-height: 54px;
    margin-left: 32px;
  }
  label.menu-btn:hover {
    color: #fff;
  }

  input.menu-btn:checked ~ .collapse {
    display: block;
  }

  /* 容易权重不够 */
  div.row {
    grid-template-columns: 1fr;
  }

  /* 挤到右边了 */
  #tutorials .row img {
    margin-left: 0;
  }
}

或者：

@media (max-width: 800px) {
  .collapse {
    display: none;
    border-top: 1px #959595 solid;
  }
  .menu-btn.icon-menu {
    display: block;
    line-height: 54px;
    margin-left: 32px;
  }
  #menu-btn:checked ~ ul {
    display: flex;
    width: 100%;
    background-color: #252525;
    position: absolute;
    flex-direction: column;
  }
  .menu li {
    display: flex;
    flex-direction: column;
  }
  .dropdown li:hover a{
    color: rgb(2, 107, 107) !important;
  }
  .dropdown ul {
    position: relative;
  }
  div.row {
    grid-template-columns: 1fr;
  }
  #tutorials div.row img {
    margin: 0px;
  }
  p.box {
    margin-bottom: 15px;
  }
  nav.menu {
    margin-bottom: 25px;
  }
}

5 外卖给好评

1
2
3
4
5
6
7
8
9
<li>
  送餐速度：<el-rate v-model="speed" @change="onchange" show-score></el-rate>
</li>
<li>
  外卖口味：<el-rate v-model="flavour" @change="onchange" show-score></el-rate>
</li>
<li>
  外卖包装：<el-rate v-model="pack" @change="onchange" show-score></el-rate>
</li>
1
2
3
4
5
6
7
8
9
10
11
methods: {
  onchange() {
    if (this.speed && this.flavour && this.pack) {
      this.$emit('change', {
        speed: this.speed,
        flavour: this.flavour,
        pack:this.pack
      })
    }
  }
}

6 视频弹幕

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function renderBullet(bulletConfig, videoEle, isCreate = false) {
  const spanEle = document.createElement("SPAN");
  spanEle.classList.add(`bullet${index}`);
  videoEle.appendChild(spanEle)
  spanEle.innerText = bulletConfig.value
  // isCreate = bulletConfig.isHide
  spanEle.style.top = `${getEleStyle(videoEle).height*Math.random()}px`
  spanEle.style.left = `${getEleStyle(videoEle).width}px`
  if (isCreate) {
    spanEle.classList.add("create-bullet");
  }
  // TODO：控制弹幕的显示颜色和移动，每隔 bulletConfig.time 时间，弹幕移动的距离  bulletConfig.speed
  let tag=setInterval(() => {
    let pos=spanEle.style.left

    // parseint解析到非数字自动停止
    pos = parseInt(pos) - bulletConfig.speed
    spanEle.style.left = `${pos}px`
    
    if (getEleStyle(spanEle).right < getEleStyle(videoEle).left) {
      videoEle.removeChild(spanEle)
      clearTimeout(tag)
    }
  }, bulletConfig.time);
}
document.querySelector("#sendBulletBtn").addEventListener("click", (e) => {
  // TODO:点击发送按钮，输入框中的文字出现在弹幕中
  // console.log([e.target]);
  let config = {
    isHide: false,
    speed: 5,
    time: 50,
    value: e.target.previousElementSibling.value
  }
  renderBullet(config, videoEle,true)
});

7 年度明星项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 保存翻译文件数据的变量
let translation = {};
let allData = {}
// 记录当前语言
let currLang = "zh-cn";
let index = 0

// TODO: 请在此补充代码实现项目数据文件和翻译数据文件的请求功能
let xhr = new XMLHttpRequest()
xhr.open('get', './js/all-data.json')
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    allData = JSON.parse(xhr.responseText)
    // console.log(allData);
    for (let i = index; i < index + 15; i++) {
      $(".list > ul").append(createProjectItem({ ...allData[i], 'description': allData[i][currLang === 'en' ? 'descriptionEN' : 'descriptionCN'] }))
      // console.log(allData[i]);
    }
    index += 15
  }
}
xhr.send()


let xhr2 = new XMLHttpRequest()
xhr2.open('get', './js/translation.json', true)
xhr2.onreadystatechange = () => {
  if (xhr2.readyState === 4 && xhr2.status === 200) {
    translation = JSON.parse(xhr2.responseText)
  }
}
xhr2.send()

// TODO: 请修改以下代码实现项目数据展示的功能
document.querySelector('.load-more').addEventListener('click', () => {
  for (let i = index; i < index + 15; i++) {
    $(".list > ul").append(createProjectItem({ ...allData[i], 'description': allData[i][currLang === 'en' ? 'descriptionEN' : 'descriptionCN'] }))
  }
  index += 15
  if (index == 60) {
    document.querySelector('.load-more').style.display = 'none'
  }
})

// 用户点击切换语言的回调
$(".lang").click(() => {
  document.querySelectorAll('li.item p').forEach((item, idx) => {
    // console.log(item.innerText, idx)
    item.innerText = allData[idx][currLang === 'en' ? 'descriptionEN' : 'descriptionCN']
  })
});

  • ajax使用

    • 相当于只做了配置，默认是异步的
    1
    2
    3
    4
    5
    6
    7
    8
    const xhr = new XMLHttpRequest()
    xhr.open('get', './js/all-data.json')
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        allData = JSON.parse(xhr.responseText)
      }
    }
    xhr.send()

8 全球新冠疫情数据统计

1
2
3
4
5
6
7
8
9
10
11
12
13
<select v-model="selectedCountry" @change="changeSelected">

data() {
	return { covidData: [],  selectedCountry: "",  selectedItem: {}, };
},
    
methods:{
    changeSelected() {
      this.selectedItem = Array.from(this.covidData).find(
        (element) => element.Country === this.selectedCountry
      ) 
    },
}
  • methods有**s**
  • method和mounted中使用data的数据要加上this前缀
  • computed一直不成功，使用v-model加上@change代替

9 Markdown文档解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
class Parser {
  constructor() {
    this.heading = /^(#{1,6}\s+)/;
    this.blockQuote = /^(\>\s+)/;
    this.unorderedList = /^((\*|-){1}\s+)/;
    this.image = /\!\[(.*?)\]\((.*?)\)/g;
    this.strongText = /\*{2}(.*?)\*{2}/g;
    this.codeLine = /\`{1}(.*?)\`{1}/g;
    // TODO: 补充分割符正则
    this.hr = /-{3,}/;
    this.quote = />\s+/;
    this.li = /[\*-]\s+/
    this.img = /!\[([^\]]+)\]\(([^\)]+)\)/
    this.blod = /([^*]*)\*{2}([^*]+)\*{2}([^*]*)/
    this.code = /([^\`]*)\`([^*]+)\`([^\`]*)/
  }

  // 获取单行内容
  parseLineText(lineText) {
    this.lineText = lineText;
  }

  // 是否是空行
  isEmptyLine() {
    return this.lineText === "";
  }

  // 是否为符合标题规范
  isHeading() {
    return this.heading.test(this.lineText);
  }

  // 解析标题
  parseHeading() {
    const temp = this.lineText.split(" ");
    const headingLevel = temp[0].length;
    const title = temp[1].trim();
    return `<h${headingLevel}>${title}</h${headingLevel}>`;
  }

  isHr() {
    return this.hr.test(this.lineText)
  }
  parseHr() {
    return `<hr>`
  }

  isQuote() {
    return this.quote.test(this.lineText)
  }
  parseQuote() {
    const temp = this.lineText.split(" ");
    const title = temp[1].trim();
    return `<p>${title}</p>`
  }

  isLi() {
    return this.li.test(this.lineText)
  }
  parseLi() {
    const temp = this.lineText.split(" ");
    const title = temp[1].trim();
    return `<li>${title}</li>`
  }

  isImg() {
    return this.img.test(this.lineText)
  }
  parseImg() {
    return this.lineText.replace(this.img, `<img src="$2" alt="$1">`)
  }

  isBlod() {
    return this.blod.test(this.lineText)
  }
  parseBlod() {
    return this.lineText.replace(this.blod, `$1<b>$2</b>$3`)
  }

  isCode() {
    return this.code.test(this.lineText)
  }
  parseCode() {
    return this.lineText.replace(this.code, `$1<code>$2</code>$3`)
  }
}
if (this.parser.isHr()) {
    hasParsed.push(this.parser.parseHr())
    currentLine++;
    continue;
  }
  if (this.parser.isQuote()) {
    let html = `<blockquote>`
    while (1) {
      html += this.parser.parseQuote()
      currentLine++;
      this.parser.parseLineText(this.getLineText(currentLine));
      if (!this.parser.isQuote()) {
        html += `</blockquote>`
        break
      }
    }
    hasParsed.push(html)
    continue
  }
  if (this.parser.isLi()) {
    let html = `<ul>`
    while (1) {
      html += this.parser.parseLi()
      currentLine++;
      this.parser.parseLineText(this.getLineText(currentLine));
      if (!this.parser.isLi()) {
        html += `</ul>`
        break
      }
    }
    hasParsed.push(html)
    continue
  }
  if (this.parser.isImg()) {
    hasParsed.push(this.parser.parseImg())
    currentLine++;
    continue
  }
  while (1) {
    if (this.parser.isBlod()) {
      this.parser.parseLineText(this.parser.parseBlod())
    }
    if (this.parser.isCode()) {
      this.parser.parseLineText(this.parser.parseCode())
    }
    if (!this.parser.isBlod() && !this.parser.isCode()) {
      hasParsed.push(this.parser.lineText)
      break
    }
  }

  currentLine++;
  • replace（reg, str），可以替换，可以填充捕获组，可以使用函数：
    • func(match, p1, p2, ..., pn, offset, input, groups) 带参数调用：
      1. match —— 匹配项，
      2. p1, p2, ..., pn —— 捕获组的内容（如有），
      3. offset —— 匹配项的位置，
      4. input —— 源字符串，
      5. groups —— 具有命名的捕获组的对象。

10 组课神器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
async function ajax({ url, method = "get", data }) {
  let result;
  // const local = localStorage.getItem('data')
  // return local ? JSON.stringify(local) : (await axios(url)).data.data
  // async函数总是返回一个Promise对象，无论其内部返回值是什么。
  // 当你在async函数中使用return语句返回一个值时，这个值会被自动包装在一个解决（resolved）状态的Promise中
  if (method === 'get') {
    if (localStorage.getItem('data')) {
      result = JSON.parse(localStorage.getItem('data'))
    } else {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('get', './js/data.json')
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              result = JSON.parse(xhr.responseText)
              resolve(result.data)
            } else {
              reject(new Error(`${xhr.status}`))
            }
          }
        }
        xhr.send()
      })
    }
  } else if (method = 'post') {
    localStorage.setItem('data', JSON.stringify(data))
  }
  return result
}

非递归：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
function treeMenusRender(data, grade = 0) {
  let treeTemplate = "";
  // TODO：根据传入的 treeData 的数据生成树型组件的模板字符串
  for (let first of data) {
    treeTemplate += `<div class="tree-node" data-index="${first.id}" data-grade="1">
                      <div class="tree-node-content" style="margin-left: 0px">
                        <div class="tree-node-content-left">
                          <img src="./images/dragger.svg" alt="" class="point-svg" />
                          <span class="tree-node-label">${first.label}</span>
                          <img class="config-svg" src="./images/config.svg" alt="" />
                        </div>
                      </div>
                      <div class="tree-node-children">`
    for (const second of first.children) {
      treeTemplate += `            
            <div class="tree-node" data-index="${second.id}" data-grade="2">
              <div class="tree-node-content" style="margin-left: 15px">
                <div class="tree-node-content-left">
                  <img src="./images/dragger.svg" alt="" class="point-svg" />
                  <span class="tree-node-label">${second.label}</span>
                  <img class="config-svg" src="./images/config.svg" alt="" />
                </div>
              </div>
              <div class="tree-node-children">`
      for (const third of second.children) {
        treeTemplate += `<div class="tree-node" data-index="${third.id}" data-grade="3">
                  <div class="tree-node-content" style="margin-left: 30px">
                    <div class="tree-node-content-left">
                      <img
                        src="./images/dragger.svg"
                        alt=""
                        class="point-svg"
                      />
                      <span class="tree-node-tag">${third.tag}</span>
                      <span class="tree-node-label">${third.label}</span>
                    </div>
                    <div class="tree-node-content-right">
                      <div class="students-count">
                        <span class="number"> 0人完成</span>
                        <span class="line">|</span>
                        <span class="number">0人提交报告</span>
                      </div>
                      <div class="config">
                        <img
                          class="config-svg"
                          src="./images/config.svg"
                          alt=""
                        />
                        <button class="doc-link">编辑文档</button>
                      </div>
                    </div>
                  </div>
                </div>`
      }
      // 完成了data-index="1002"的封口
      treeTemplate += `</div></div>`
    }
    treeTemplate += `</div></div>`

  }
  return treeTemplate;
}

递归：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function treeMenusRender(data, grade = 0) {
    let treeTemplate = "";
    // TODO：根据传入的 treeData 的数据生成树型组件的模板字符串
    grade++;
    return data.reduce((pre, cur) => {
        let isContantChild = !!cur.children;
        return (treeTemplate += `
        <div class="tree-node" data-grade=${grade} data-index="${cur.id}">
          <div class="tree-node-content" style="margin-left:${(grade - 1) * 15}px">
            <div class="tree-node-content-left">
              <img class="point-svg" src="./images/dragger.svg" alt="点击拖动" />
              ${cur.tag ? `<span class="tree-node-tag">${cur.tag}</span>` : ""}
              <span class="tree-node-label">${cur.label}</span>
              ${isContantChild ? `<img class="config-svg" src="./images/config.svg" alt="设置" />`: ""}
            </div>
          ${!isContantChild ? `<div class="tree-node-content-right">
                <div class="students-count">
                  <span class="number"> 0人完成</span>
                  <span class="line">|</span>
                  <span class="number">0人提交报告</span>
                </div>
                <div class="config">
                  <img
                    class="config-svg"
                    src="./images/config.svg"
                    alt=""
                  />
                  <button class="doc-link">编辑文档</button>
                </div>
              </div>`
                : ""}
          </div>
          ${isContantChild ?
            `<div class="tree-node-children"> ${isContantChild && treeMenusRender(cur.children, grade)} </div>`
            : "" }
      </div>
      `);
    }, "");
}


// 作者: 百里飞洋 Barry - Flynn
// 链接: https://blog.meta-code.top/2023/04/10/2023-91/#10-%E7%BB%84%E8%AF%BE%E7%A5%9E%E5%99%A8%EF%BC%8825-%E5%88%86%EF%BC%89
// 来源: 百里飞洋
// 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

非递归

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
function treeDataRefresh(
  { dragGrade, dragElementId },
  { dropGrade, dropElementId }
) {
  if (dragElementId === dropElementId) return;
  // TODO：根据 `dragElementId, dropElementId` 重新生成拖拽完成后的树型组件的数据 `treeData`
  // 同级
  const searchThird = (target) => {
    for (const first of treeData) {
      for (const second of first.children) {
        for (const third of second.children) {
          if (third.id == target) {
            second.children.splice(second.children.indexOf(third), 1)
            return third
          }
        }
      }
    }
  }
  const searchSecond = (target) => {
    for (const first of treeData) {
      for (const second of first.children) {
        if (second.id == target) {
          first.children.splice(first.children.indexOf(second), 1)
          return second
        }
      }
    }
  }
  if (dragGrade === dropGrade) {
    // 都是第三级   // 绷不住了，什么屎山，好大一坨   // 但确实完成了逻辑
    if (dragGrade == 3) {
      const drag = searchThird(dragElementId)
      for (const first of treeData) {
        for (const second of first.children) {
          for (const third of second.children) {
            if (third.id == dropElementId) {
              second.children.splice(second.children.indexOf(third) + 1, 0, drag)
            }
          }
        }
      }
      // 第二级
    } else if (dragGrade == 2) {
      const drag = searchSecond(dragElementId)
      for (const first of treeData) {
        for (const second of first.children) {
          if (second.id == dropElementId) {
            first.children.splice(first.children.indexOf(second) + 1, 0, drag)
          }
        }
      }
    } else if (dragGrade == 1) {
      const searchID = (target) => {
        for (const first of treeData) {
          if (first.id == target) {
            treeData.splice(treeData.indexOf(first), 1)
            return first
          }
        }
      }
      const drag = searchID(dragElementId)
      for (const first of treeData) {
        if (first.id == dropElementId) {
          treeData.splice(treeData.indexOf(first) + 1, 0, drag)
        }
      }
    }
  } else if (dragGrade - dropGrade == 1) {
    // 不同级 再来依托吧
    // 3 和 2
    if (dragGrade == 3) {
      const drag = searchThird(dragElementId)
      for (const first of treeData) {
        for (const second of first.children) {
          if (second.id == dropElementId) {
            second.children.unshift(drag)
          }
        }
      }
    } else if (dragGrade == 2) {
      // 2 和 1
      const drag = searchSecond(dragElementId)
      for (const first of treeData) {
        if (first.id == dropElementId) {
          first.children.unshift(drag)
        }
      }
    }
  }
  // md，一遍就过了，没有bug
  // （就算有bug也不会改了）
}

递归

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
function treeDataRefresh(
    { dragGrade, dragElementId },
    { dropGrade, dropElementId }
) {
    if (dragElementId === dropElementId) return;
    // TODO：根据 `dragElementId, dropElementId` 重新生成拖拽完成后的树型组件的数据 `treeData`
    // 此处需要实现根据拖拽的元素 id（dragElementId）和放置的目标元素 id（dropElementId）重新生成树型组件的数据 treeData
    // 从树形数据中获取并删除被拖拽的元素
    const getAndDeleteDragLabelObj = (dragElement, data) => {
        let result;
        // 拖拽的元素的层级与放置的目标元素的层级差值应该是 1
        if (dragGrade - dropGrade > 1 || dragGrade - dropGrade < 0) return result;
		
        // dfs
        const innerFn = (dragElementId, data) => {
            data.forEach((treeObj, index, array) => {
                if (treeObj.id === Number(dragElementId)) {
                    array.splice(index, 1);
                    result = treeObj;
                } else {
                    // 如果当前节点有子节点，则继续递归查找拖拽的元素
                    treeObj.children && innerFn(dragElementId, treeObj.children);
                }
            });
        };

        innerFn(dragElementId, data);
        return result;
    };
    // 将被拖拽的元素插入到放置的目标元素下面
    const setDragLabelObjToTreeData = (dragLabelObj, dropElementId, data) => {
        for (let i = 0; i < data.length; i++) {
            const treeObj = data[i];
            if (treeObj.id === Number(dropElementId)) {
                if (dragGrade - dropGrade === 1) {
                    // 如果拖拽的元素的层级与放置的目标元素的层级差值是 1，则将拖拽的元素设置为放置元素的子元素
                    treeObj.children
                        ? treeObj.children.unshift(dragLabelObj)
                        : (treeObj["children"] = [dragLabelObj]);
                } else if (dragGrade - dropGrade === 0) {
                    // 如果拖拽的元素的层级与放置的目标元素的层级相同，则将拖拽的元素设置为放置元素的后继元素
                    data.splice(i + 1, 0, dragLabelObj);
                    break;
                }
            } else {
                // 如果当前节点有子节点，则继续递归查找拖拽的元素应该被设置的位置
                treeObj.children &&
                    setDragLabelObjToTreeData(
                        dragLabelObj,
                        dropElementId,
                        treeObj.children
                    );
            }
        }
    };

    // 获取被拖拽的元素
    let dragLabelObj = getAndDeleteDragLabelObj(dragElementId, treeData);

    if (dragElementId) {
        // 如果存在 dragElementId，则将被拖拽的元素插入到相应位置
        dragLabelObj &&
            setDragLabelObjToTreeData(dragLabelObj, dropElementId, treeData);
    } else {
        // 否则将被拖拽的元素插入到树的顶层
        treeData.unshift(dragLabelObj);
    }
}

  • 扁平化数组：

    1
    2
    3
    4
    5
    6
    7
    8
    // platObj的作用是将这一级扁平
    function flatObj(data) {
      return data.reduce((prev, cur) => {
        prev = [...prev, cur]
        if (cur?.children) prev = [...prev, ...flatObj(cur.children)]
        return prev
      }, [])
    }

  • 异步：

    • await和then的效果是一样的

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      const ajax = async () => {
          return (await axios('./index.html')).data
      }

      // const outside = async () => {
      //     console.log(await ajax());
      // }
      // outside()

      // 上下相同，只是await需要搭配try catch捕获错误

      // ajax().then((result) => {
      //     console.log(result);
      // })

    • “async” 这个单词表达了一个简单的事情：即这个函数总是返回一个 promise。其他值将自动被包装在一个 resolved 的 promise 中。

      例如，下面这个函数返回一个结果为 1 的 resolved promise

      1
      2
      3
      4
      async function f() {
        return 1;
      }
      f().then(alert); // 1

    • c

    • 实例方法 find(item=> item.id===target) 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined
    • 实例方法 findIndex() 查找元素的索引值
    • indexOf(target)：元素下标，使用的是===
#前端 #蓝桥杯
14届蓝桥杯省赛真题
https://asxjdb.github.io/2024/03/30/14届蓝桥杯省赛真题/
作者
Asxjdb
发布于
2024年3月30日
许可协议