update

05-es6-plus/01-template-and-destructuring/starter.js

@@ -9,3 +9,10 @@ const scores = [88, 92, 95];
 // 1. 解构出 name、stage
 // 2. 解构出前两个分数
 // 3. 用模板字符串把信息写入 #output
+const { name, stage } = student
+const [a, b] = scores
+const output = document.getElementById("output")
+output.innerHTML = `
+a = ${a}
+b = ${b}
+`

05-es6-plus/02-spread-and-rest/starter.js

@@ -7,6 +7,14 @@ const user = {
 
 function sumScores(...scores) {
   // 返回总分
+  /*let total = 0
+  scores.forEach(item => {
+    total = total+item
+  })
+  return total*/
+  return scores.reduce((acc, item) => {
+    return acc + item
+  }, 0)
 }
 
 // 任务：
@@ -14,3 +22,11 @@ function sumScores(...scores) {
 // 2. 基于 user 生成一个 stage 为 "现代 JS" 的新对象
 // 3. 调用 sumScores
 // 4. 输出结果到 #output
+const tracks1 = [...tracks, "ES6+"]
+const user1 = {
+  ...user,
+  stage: "现代 JS"
+}
+const sum = sumScores(1, 2, 3, 4)
+const output = document.getElementById("output")
+output.textContent = sum

05-es6-plus/03-arrow-functions/starter.js

@@ -12,3 +12,7 @@ const tracks = ["DOM", "异步", "模块化"];
 // 1. 把 getLevel 改成箭头函数
 // 2. 把 add 改成箭头函数
 // 3. 用 map + 箭头函数生成 ["[DOM]", ...]
+const getLevel1 = score => score >= 80
+const add1 = (a, b) => a + b
+const tracks1 = tracks.map(item => `[${item}]`)
+console.log(tracks1);

05-es6-plus/04-modules-basic/README.md

@@ -1,4 +1,5 @@
-# 练习 4：模块基础
+# 
+练习 4：模块基础
 
 ## 目标
 
@@ -9,7 +10,6 @@
 - `export`
 - `import`
 - `type="module"`
-
 ## 任务
 
 - 从模块文件里导入课程数据和格式化函数

05-es6-plus/04-modules-basic/starter.js

@@ -1,3 +1,7 @@
 // 任务：
 // 1. 从 ./course-data.js 导入 courses 和 formatCourse
 // 2. 把格式化后的结果写入 #output
+import { courses, formatCourse } from "./course-data.js"
+const a = courses.map(item => formatCourse(item))
+const output = document.getElementById("output")
+output.textContent = a

05-es6-plus/05-promise-basics/starter.js

@@ -10,3 +10,17 @@ function loadTracks() {
 // 1. 调用 loadTracks()
 // 2. 成功时更新状态和输出内容
 // 3. 失败时更新状态
+async function load() {
+  const status = document.getElementById("status")
+  status.textContent = "加载中"
+  try {
+    const a = await loadTracks()
+    status.textContent = "加载成功"
+    const output = document.getElementById("output")
+    output.textContent = a
+  } catch (error) {
+    status.textContent = "加载失败"
+  }
+
+}
+load()

05-es6-plus/06-async-await/starter.js

@@ -13,3 +13,16 @@ function loadConfig() {
 // 1. 写一个 async 函数
 // 2. 用 await 等待 loadConfig()
 // 3. 用 try...catch 处理流程
+async function load() {
+  const status = document.getElementById("status")
+  status.textContent = "加载中"
+  try {
+    const a = await loadConfig()
+    status.textContent = "加载成功"
+    const output = document.getElementById("output")
+    output.textContent = JSON.stringify(a)
+  } catch (error) {
+    status.textContent = "加载失败"
+  }
+}
+load()

05-es6-plus/07-arrow-this/starter.js

@@ -1,6 +1,11 @@
 const trainer = {
   name: "现代 JS 训练营",
   report() {
+    setTimeout(() => {
+      const a = this.name
+      const output = document.getElementById("output")
+      output.textContent = a
+    }, 1000)
     // 任务：
     // 1. 用 setTimeout
     // 2. 在回调里用箭头函数读取 this.name

05-es6-plus/08-fetch-and-json/starter.js

@@ -1,5 +1,5 @@
 const loadButton = document.getElementById("load-btn");
-const status = document.getElementById("status");
+const status1 = document.getElementById("status");
 const output = document.getElementById("output");
 
 // 任务：
@@ -9,3 +9,17 @@ const output = document.getElementById("output");
 // 4. 调用 res.json() 解析数据
 // 5. 把 title 和 body 渲染到页面
 // 6. 失败时显示“加载失败”
+loadButton.addEventListener("click", async () => {
+  status1.textContent = "加载中..."
+  try {
+    let a = await fetch("https://jsonplaceholder.typicode.com/posts/1")
+    let data = await a.json()
+    status1.textContent = "加载成功"
+    const { title, body } = data
+    output.textContent = `title:${title}
+    body:${body}`
+  } catch (error) {
+    status1.textContent = "加载失败"
+  }
+})
+

05-es6-plus/09-final-modern-js/starter.js

@@ -5,3 +5,28 @@
 // 4. 用展开运算符合并技能
 // 5. 用模板字符串渲染标题和说明
 // 6. 用 forEach 或 map + 箭头函数渲染列表
+import { baseSummary, loadExtraSkills } from './summary-service.js'
+async function get() {
+  const title = document.getElementById("title")
+  const intro = document.getElementById("intro")
+  title.textContent = '加载中...'
+  intro.innerHTML = ''
+  try {
+    let load = await loadExtraSkills()
+    title.textContent = '加载成功'
+    const { name, stage, skills } = baseSummary
+    intro.textContent = `
+      name:${name}
+      stage:${stage}`
+    load = [...load, ...skills]
+    load.forEach(item => {
+      const li = document.createElement("li")
+      const skillList = document.getElementById("skill-list")
+      li.textContent = item
+      skillList.appendChild(li)
+    });
+  } catch (error) {
+    title.textContent = '加载失败'
+  }
+}
+get()