跳转至

23模拟赛1

1.数据类型检测

function getType(data) {
  // TODO：待补充代码
  // 别粗心
  if(typeof(data)==='object'){
    return Object.prototype.toString.call(data).slice(8,-1);
  }else{
    return typeof(data)
  }
}

或者：

if(typeof(data) == "string"){
      return "string"
    }else if(typeof(data) == "number"){
      return "number";
    }else if(typeof(data) == "boolean"){
      return "boolean";
    }else if(!data && typeof(data) != "undefined" && data != 0){
      return "null";
    }else if(typeof(data) == "undefined"){
      return "undefined";
    }else if(typeof(data) == "object" && Array.isArray(data) ){
      return "array";
    }else if(typeof(data) == "Function"){
      return "function";
    }else if(typeof(data) == "Object" && data instanceof Map){
      return typeof(data);
    }else if(typeof(data) == Symbol()){
      return "symbol";
    }else if(data.){
      return "date";
    }else if(data instanceof Set){
      return "set";
    }else if(data instanceof Map){
      return "map";
    }else if(data instanceof RegExp){
      return "regExp";
    }
    return typeof(data)
}

/**
 * @description: 数据类型检测
 * @param {*} data 传入的待检测数据
 * @return {*} 返回数据类型
 */
function getType(data) {
  // TODO：待补充代码
  if (typeof(data) !== 'object'){
    return typeof(data)
  }
  else if(!data){
    return 'null'
  }
  else if(data instanceof Array){
    return 'array'
  }
  else if(data instanceof Date){
    return 'date'
  }
  else if(data instanceof Map){
    return 'map'
  }
  else if(data instanceof Set){
    return 'set'
  }
  else if(data instanceof RegExp){
    return 'regexp'
  }
  else{
    return 'object'
  }

}

// console.log(getType('a'));
// const testArr = [
//   "s",
//   0,
//   false,
//   undefined,
//   Symbol(),
//   function () {},
//   123n,
//   null,
//   {},
//   [],
//   new Date(),
//   new Map(),
//   new Set(),
//   /a/,
// ];
// const result = testArr.map((item) => getType(item));
// console.log("得到的结果：", result);
module.exports = {
  getType
}

2.渐变色背景生成器

const inputs = document.querySelectorAll(".controls input");
const gradient=document.querySelector('.gradient')


const fn = () => {
  gradient.style.background = `linear-gradient(45deg, ${inputs[0].value}, ${inputs[1].value})`;
};
inputs[0].addEventListener("change", fn);
inputs[1].addEventListener("change", fn);

inputs[0].onchange=function(){
    gradient.style.setProperty("--color1", inputs[0].value);
}
inputs[1].onchange=function(){
    gradient.style.setProperty("--color2", inputs[1].value);
}

inputs.forEach((item)=>{
    item.addEventListener('change', ()=>{
        gradient.style.background=`linear-gradient(45deg, ${inputs[0].value}, ${inputs[1].value}`
    })
})

dom.style.setProperty(name ,value)是修改CSS变量值的API，但也可以直接修改背景的属性

  • API：

  • 获取 CSS 变量的值 getPropertyValue

  • 设置 CSS 变量的值 setProperty

  • js function moneyColorChange(){ const root = document.querySelector(':root'); // 获取 :root 上 --money-color 变量的值 const color = getComputedStyle(root).getPropertyValue('--money-color').trim(); // 设置 :root 上 --money-color 变量的值 root.style.setProperty('--money-color', color === 'red' ? 'blue' : 'red'); }

3.水果叠叠乐

if($("#box li").length == 7) return
$("#box").append($(this).clone())
$(this).hide()
if($(`#box li[data-id=${$(this).attr('data-id')}]`).length == 3){
    $(`#box li[data-id=${$(this).attr('data-id')}]`).remove()
}

  $("#card li").on("click", function (e) {
    // TODO: 待补充代码
    const tar = e.target.parentElement.cloneNode(true);
    e.target.parentElement.style.display = "none";

    const box = document.querySelector("#box");
    let list = box.querySelectorAll("li");
    if (list.length >= 7) return;

    box.appendChild(tar);
    list = box.querySelectorAll("li");

    let num={}, flag=0
    list.forEach(item=>{
      id=item.dataset.id
      if(id in num) {
        num[id]++
        if(num[id]==3) flag=id
      }
      else num[id]=1
    })
    if(flag) list.forEach(item=>{
      if(item.dataset.id==flag) item.remove()
    })

  });

4 element-ui 组件二次封装

<template slot-scope="scope">
  <el-radio v-model="currentRow" :label='scope.$index'>&nbsp;</el-radio>
</template>

这里label是el-radio 的 value， v-model绑的就是value 就不用再@change改currentRow了吧

更多点：

<template slot-scope="scope">
  <el-radio v-model="currentRow" :label='scope.$index' @change='radioChange'>&nbsp;</el-radio>
</template>

radioChange(label){
  this.setCurrent(this.tableData[label])
}

5 http 应用

// TODO: 待补充代码
const http=require('http')

let app=http.createServer((req,res)=>{
res.end('hello world')
})

app.listen(8080,()=>{
    console.log('hello');
})

6 新课上线啦

布局题

7 成语学习

getSingleWord(val) {
    for (let index = 0; index < 4; index++) {
      if (this.idiom[index] == "") {
        this.idiom[index] = val;
        break;
      }
    }
    this.idiom=JSON.parse(JSON.stringify(this.idiom))
    // this.idiom.splice(this.idiom.indexOf(""), 1 ,val)
},

confirm() {
    for(let item of this.arr){
      if(this.tip==item.tip && this.idiom.join('')==item.word){
        this.result =true
        return 
      }
    }
    this.result =false
},

  • 因为 Vue.js 不能检测到以下类型的变动：

  • 利用索引直接设置一个项，如 vm.items[indexOfItem] = newValue

  • 修改数组的长度，如 vm.items.length = newLength

  • 触发vue2响应式

  • this.idiom=JSON.parse(JSON.stringify(this.idiom))

  • 或者：this.$set(this.idiom, index, val);

  • Vue.js 为数组实例注入了一些改变数组的方法，这些方法可以触发视图的更新。这些方法包括：

    push pop shift unshift splice sort reverse这些方法都会改变原数组，并且触发视图的更新。

8 学海无涯

// 设置图表
axios("./data.json").then((res) => {
  let feb = res.data.data["2月"];
  let mar = res.data.data["3月"];
  const sum = (arr) => arr.reduce((pre, curr) => pre + curr, 0);

  let months = [sum(feb), sum(mar)];
  let weeks = [];
  for (let i = 0; i < 63; i += 7) {
    weeks.push(sum([...feb, ...mar].slice(i, i + 7)));
  }

  option.xAxis.data = [
    "2月第1周","2月第2周","2月第3周","2月第4周","3月第1周","3月第2周","3月第3周","3月第4周","3月第5周",
  ];
  option.series[0].data = weeks;
  myChart.setOption(option);

  let inputs = document.querySelectorAll("label.tab");
  inputs[0].addEventListener('click',()=>{
    option.xAxis.data = [
      "2月第1周","2月第2周","2月第3周","2月第4周","3月第1周","3月第2周","3月第3周","3月第4周","3月第5周",
    ];
    option.series[0].data = weeks;
    myChart.setOption(option);
  })

  inputs[1].addEventListener('click', ()=>{
    console.log(111);
    option.xAxis.data = ["2月", "3月"];
    option.series[0].data = months;
    myChart.setOption(option);
  })
});

 (async ()=>{
        let {data:{data}} = await axios.get('./data.json')
        let weekX = []
        let weekY = []
        let monthX = []
        let monthY = []
        for(let i in data){
          monthX.push(i)
          monthY.push(eval(data[i].join('+')))
          let w = 1
          while(data[i].length){
           weekY.push(eval(data[i].splice(0,7).join('+')))
           weekX.push(`${i}第${w}周`)
           w++
          }
        }
        console.log(weekX,weekY,monthX,monthY)
        week()
        document.querySelectorAll('.tabs .tab')[0].onclick = week
        document.querySelectorAll('.tabs .tab')[1].onclick = month
        function month(){
          option.xAxis.data = monthX
          option.series[0].data = monthY
          myChart.setOption(option)
        }
        function week(){
          option.xAxis.data = weekX
          option.series[0].data = weekY
          myChart.setOption(option)
        }
      })()

9 逃离二向箔

run() {
// TODO：待补充代码
let obj = this.requestQueue.map((item) => item());
let num = this.max;
for (let i = 0; i < obj.length; i++) {
  debugger
  if (num > 0) {
    num--;
    obj[i].then(
      (res) => {
        num++;
        this.render(res);
      },
      (err) => {
        this.render(err);
      }
    );
    console.log(num);
  } else {
  }
}
}

async run() {
    let queue = new Set();
    for (let task of this.requestQueue) {
      let p = Promise.resolve().then(_ =>
        task()
          .then((res) => this.render(res))
          .catch((err) => this.render(err))
          .finally((_) => queue.delete(p))
      );
      queue.add(p);
      if (queue.size >= this.max) await Promise.race(queue);
    }
  }

  async run() {
    // TODO：待补充代码
    const pendingQueue = []
    for (let i = 0, l = this.requestQueue.length; i < l; i++) {
      pendingQueue.push(
        this.requestQueue[i]()
          .then(msg => {this.render(msg)})
          .then(()=>{pendingQueue.shift()})
          .catch(err => {
             this.render(err)
             pendingQueue.shift()
         }))
      if (pendingQueue.length === this.max) {
        await Promise.race(pendingQueue)
      }
    }
  }

10 梅楼封的一天

const toDesensitization = (str, rule, symbol = "*", dealPhone = true) => {
    if (!str) return null
    if (!rule) return str
    if(typeof rule === 'string') rule=[rule]
    let ids = [], newStr = ''
    const findAll=(str, target, start)=>{
        let curr=str.indexOf(target,start)
        if(curr===-1) return [] 
        return [curr, ...findAll(str,target,curr+1)]
    }
    for (let target of rule) {
        ids.push(...findAll(str, target, 0))
        str=str.replaceAll(target, symbol.repeat(target.length))
    }
    newStr=str
    if(dealPhone){
        newStr=newStr.replace(/(\d{3})\d{5}(\d{3})/g, `$1`+symbol.repeat(5)+`$2`)
    }
    console.log(ids, newStr);
    return{
        ids, newStr
    }
};

 const toDesensitization = (str, rule, symbol = "*", dealPhone = true) => {
    if(!str) return null;
    if(!rule) return str
    let result = {
        "ids":[],
        "newStr":''
    }
    if(dealPhone) str = str.replace(/(\d{3})\d{5}(\d{3})/g,'$1*****$2')
    rule = new RegExp (Array.isArray(rule) ? rule.join('|') : rule,'g')
    result.newStr = str.replace(rule,((match,offset)=>{
        result.ids.push(offset)
        return symbol.repeat(match.length)
    }))
    return result 
  };
  • str.repeat(num)重复一个字符串