拼接url参数 (简单)

对函数参数相关词语进行规则匹配 (中等)

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

// 假设生成的绘画数据数组为 artDataArray
const artDataArray = [
  { "imageUrl": "images/img1.jpg", "tags": "知更鸟、湖蓝色、十分可爱、皮克斯渲染" },
  { "imageUrl": "images/img2.jpg", "tags": "知更鸟、个性的眉毛、模糊毛皮" },
  { "imageUrl": "images/img3.jpg", "tags": "知更鸟、剪纸风格、个性的眉毛" },
  { "imageUrl": "images/img4.jpg", "tags": "知更鸟、油画、十分可爱、特殊的羽毛" },
  { "imageUrl": "images/img5.jpg", "tags": "男性、卡通、书、桌子" },
  { "imageUrl": "images/img6.jpg", "tags": "男性、卡通、玩具、眼镜" },
  { "imageUrl": "images/img7.jpg", "tags": "男性、卡通、玩具" },
  { "imageUrl": "images/img8.jpg", "tags": "男性、卡通、书" },
  { "imageUrl": "images/img9.jpg", "tags": "沙滩、遮阳伞、散步" },
  { "imageUrl": "images/img10.jpg", "tags": "沙滩、椰子树、一群人" },
  { "imageUrl": "images/img11.jpg", "tags": "沙滩、遮阳伞、人、包" },
  { "imageUrl": "images/img12.jpg", "tags": "沙滩、回忆、相框" }
]

/**
 * @param {*} imageCount 生成的图片数量
 * @param {*} selectedText 用户输入的文本
 */
function generateAndDisplayImages(imageCount, selectedText) {
  let imgAry = [] // 定义最佳匹配的图片数组
  // TODO：待补充代码 
  let arr = []
  for (let i = 0; i < artDataArray.length; i++) {
    const keyword = artDataArray[i].tags.split("、")
    arr[i] = {
      count: 0,
      data: artDataArray[i]
    }
    for (let j = 0; j < keyword.length; j++) {
      if(selectedText.indexOf(keyword[j]) != -1)
        arr[i].count++
    }
  }
  const sortArr = arr.sort((a,b)=> b.count - a.count).slice(0,imageCount)
  sortArr.map(item => imgAry.push(item.data))
  //TODO：END
  return imgAry;
}

简易JSX解析器 (中等)

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
/**
 * @param type 要渲染的元素类型，即标签名
 * @param config 包含标签属性或事件函数的对象
 */
const jsx = (type, config) => {
  /* TODO: 待补充代码 */
  console.log(type,config);
  let dom = document.createElement(type)
  if(Object.prototype.toString.call(config.children) === '[object String]'){
    dom.innerHTML += config.children  
  } else {
  for (let i = 0; i < config.children.length; i++) {
   if(Object.prototype.toString.call(config.children[i]) === '[object String]'){
    dom.innerHTML += config.children[i]
   }else{
    dom.appendChild(config.children[i])
   }
  }
 }
 if(config['style'] !== undefined){
    const styleKeys = Object.keys(config['style'])
    for (const key of styleKeys) {
      dom.style[key] = config['style'][key]
    }
  }
 const configKeys = Object.keys(config)
 for (const key of configKeys) {
    if(Object.prototype.toString.call(config[key]) === '[object Function]'){
      dom[key] = config[key]
    }
 }
 for (const key of configKeys) {
  if(key !== 'children'){
    if(Object.prototype.toString.call(config[key]) === '[object String]'){
      dom.setAttribute(key,config[key])
    }
  }
}
 return dom
}

Github 明星项目统计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const changeHandle = () => {
    // TODO：待补充代码
    const arr = []
    if(language.value === 'All')
        arr.push(...chartData.value)
    else {
        arr.push(...chartData.value
        .filter(item=>item.language === language.value)
        .sort((a,b)=>b.stars - a.stars)
        .slice(pageStart.value-1,pageEnd.value))
    }
    xData.value = arr.map(item=>item.name)
    yData.value = arr.map(item=>item.stars)
    initChart();
};

小蓝驿站

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const addContact = () => {
    // TODO：待补充代码 目标 2 
    const data = contacts.value.filter(item=>item.letter === newContact.value[0].toUpperCase())
    if(data.length === 0){
        contacts.value.push({
            contacts:[{name:newContact.value}],
            letter:newContact.value[0].toUpperCase()
        })
    }else{
        for (let i = 0; i < contacts.value.length; i++) {
            if(contacts.value[i].letter === newContact.value[0].toUpperCase()){
                contacts.value[i].contacts.push({name:newContact.value})
                break
            }
        }
    }
    // TODO：END
    // 添加完成清空联系人输入框
    newContact.value = "";
};

搜索重试

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
/**
 * 定义一个重试函数
 * @param {func} operation 要作用的函数
 * @param {number} maxAttempts 最大重试次数
 * @param {number} delayBetweenRetries 重试之间的时间间隔
 * @returns
 */
async function retry(operation, maxAttempts, delayBetweenRetries) {
  // TODO:待补充代码
  let attempt = 0;
  while (attempt < maxAttempts) {
    try {
      // 尝试执行操作
      return await operation(); // 如果成功，返回结果
    } catch (error) {
      attempt++; // 增加尝试次数
      if (attempt >= maxAttempts) {
        // return new Promise((res,rej)=>rej(error))
        throw error
      }
      // 如果失败，等待指定的时间再重试
      await new Promise(resolve => setTimeout(resolve, delayBetweenRetries));
    }
  }
}

购物狂欢节

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
async function fetchProducts(category) {
  // TODO: 根据分类获取商品数据
  products.value = []
  const data = await fetch(`api/products/${category}.json`)
  .then(res=>res.json())
  for (let i = 0; i < data.length; i++) {
    products.value.push(data[i])
  }
}

const products = ref([]);

function addProduct(product) {
  // TODO: 添加商品到购物车，如果商品已存在，则数量+1
  if(products.value.some((e)=>e.id === product.id)){
    for (let i = 0; i < products.value.length; i++) {
      if(products.value[i].id === product.id){
        products.value[i].quantity += 1
      }
    }
  }else{
    product.quantity = 1
    products.value.push(product)
  }
}

const totalPrice = computed(() => {
  // TODO: 计算总价
  return products.value.reduce((acc,item)=>{
    return acc + item.price * item.quantity
  },0)
});