JavaScript 複習07 – wordpress

陣列 forEach 資料處理方法

為什麼要學陣列資料處理?

陣列 – 資料處理

陣列資料數量多、無法判斷資料量有多少
JavaScript 陣列處理方法 – 針對 forEach 方法介紹
充電站的陣列資料

forEach 寫法介紹

// all.js
// forEach
// 其中一種陣列資料處理的方法
// 只有陣列才能使用
// 函式參數預設會帶 item, index, ary 三個參數
// item 物件(值)
// index 索引(第幾筆資料)
// ary 全部陣列
// 第一個參數為當下陣列的值
// 第二個參數為迭代資料的索引值
// 第三個參數為執行的陣列本身

let data = [30, 40];

data.forEach(function(item, index, array) {
  console.log(item, index, array);
})

console.log("以上資料全部執行完成");

陣列數字累加與變數作用域講解

// all.js
// forEach 常見用法
let data = [30, 40, 100];
// 全域變數
// let total = 0;

data.forEach(function(item, index) {
  // 區域變數 - 變數只會在函式內執行
  // let total = 0;

  total += item;
  console.log(total);
})

console.log(total);

搭配 if，篩選出陣列裡面有幾個偶數

// all.js
// 判斷陣列裡面有幾個偶數
let data = [30, 40, 100, 33333, 555596];

// 宣告變數 total 來儲存偶數數量
let total = 0;
// 把偶數的值儲存在新陣列
let newData = [];

data.forEach(function(item, index) {
  // console.log(item);

  if (item % 2 == 0) {
    total += 1;
    newData.push(item);
  }
})

console.log(total);
console.log(newData);

forEach 讀取資料

// all.js
// 讀取陣列資料: 字串、物件、陣列
let data = [
  {
    name: "Tom",
    sex: "male"
  },
  {
    name: "Mary",
    sex: "female"
  }
]

data.forEach(function(item, index) {
  console.log(item);
  console.log(item.name, item.sex);
})

男女人數計算機 – 透過物件整合資料

// all.js
// 計算男女生的總數
let data = [
  {
    name: "Tom",
    sex: "male"
  },
  {
    name: "Mary",
    sex: "female"
  },
  {
    name: "Jane",
    sex: "female"
  },
  {
    name: "Jenny",
    sex: "female"
  },
  {
    name: "Joan",
    sex: "female"
  }
]

// 方式一
let maleTotal = 0;
let femaleTotal = 0;

// 方式二
let people = {
  male: 0,
  female: 0
};

data.forEach(function(item, index) {
  // console.log(item.sex);

  if(item.sex == "female") {
    // console.log("是女生");
    femaleTotal += 1;
    people.female += 1;
  } else {
    // console.log("是男生");
    maleTotal += 1;
    people.male += 1;
  }
})

console.log(femaleTotal, maleTotal);
console.log(people);

高雄 OPEN DATA – 觀看免費與投幣式充電站有幾處

Download – 電動車資訊.json

// all.js
// 高雄公共充電站
let data = [{},{},{},...{}];

// console.log(data);
// console.log(data.length);


let total = {
  free: 0,
  paid: 0
}

data.forEach(function(item, index) {
  // console.log(item);
  // console.log(item.Charge);
  // console.log(item.Charge == "免費");

  if(item.Charge == "免費") {
    total.free += 1;
  } else if(item.Charge == "投幣式") {
    total.paid += 1;
  }
})

// console.log(total);
console.log(`高雄充電站免費的站有${total.free}處`);
console.log(`高雄充電站投幣式站有${total.paid}處`);

高雄 OPEN DATA – 陣列物件處理

// all.js - 1
// 目的：懂得整合資料、處理資料

let data = [
  {
    Charge: "免費",
    name: "廖洧杰充電站"
  },
  {
    Charge: "投幣式",
    name: "小花充電站"
  },
  {
    Charge: "投幣式",
    name: "小明充電站"
  },
  {
    Charge: "投幣式",
    name: "小天充電站"
  }
];

let total = {
  free: [],
  paid: []
}

data.forEach(function(item, index) {
  // console.log(item.Charge == "免費");
  if(item.Charge == "免費") {
    // console.log("是免費的");

    total.free.push(item);
  } else if(item.Charge == "投幣式") {
    total.paid.push(item);
  }
})

// console.log(total);
console.log(`目前免費充電站有${total.free.length}處`);
console.log(`目前投幣式充電站有${total.paid.length}處`);

// all.js - 2
// 自我練習
let data = [{}, {}, {},...{}];

// console.log(data);
// console.log(data.length);


let total = {
  free: [],
  paid: []
}

data.forEach(function(item, index) {
  // console.log(item.Charge == "免費");
  if(item.Charge == "免費") {
    // console.log("這是免費");
    total.free.push(item);
  } else if(item.Charge == "投幣式") {
    // console.log("這是投幣式");
    total.paid.push(item);
  }
})

// console.log(total);
// console.log(total.free);
// console.log(total.paid);
console.log(`目前免費充電站有${total.free.length}處`);
console.log(`目前投幣式充電站有${total.paid.length}處`);

forEach 題型練習

範例功能講解

本章節 Codepen 範例程式碼網址: 網址

// index.html - 充電站 Code 範例
 <h2>新增資料</h2>
  <input type="text" placeholder="充電站名稱" class="stationName">
  <select class="stationCharge">
    <option value="免費">免費</option>
    <option value="投幣式">投幣式</option>
  </select>
  <input type="button" class="btn" value="儲存">
  <h2>資料顯示</h2>
  <div class="filter">
    <input type="button" value="全部">
    <input type="button" value="免費">
    <input type="button" value="投幣式">
  </div>
 <ul class="list">
   
 </ul>

all.js - 充電站 Code 範例
let data = [
  {
    Charge:"免費",
    name:"廖洧杰充電站"
  }, {
    Charge: "投幣式",
    name: "小花充電站"
  }, {
    Charge: "投幣式",
    name: "小明充電站"
  }, {
    Charge: "投幣式",
    name: "小天充電站"
  }
];
const list = document.querySelector('.list');
// 預設載入函式
function init(){
  let str = "";
  data.forEach(function (item, index) {
    let content = `<li>${item.name}，${item.Charge}</li>`;
    str += content;
  })
  list.innerHTML = str;
}
init();
// 篩選器邏輯
const stationFilter = document.querySelector(".filter");
stationFilter.addEventListener("click",function(e){
  if (e.target.value == undefined){
    return ;
  }
  let str = "";
  data.forEach(function(item,index){
    if (e.target.value == "全部"){
      str += `<li>${item.name}，${item.Charge}</li>`
    }else if (e.target.value == item.Charge){
      str+=`<li>${item.name}，${item.Charge}</li>`
    }
  })
  list.innerHTML = str;
})
// 新增邏輯

const stationName = document.querySelector(".stationName");
const stationCharge = document.querySelector(".stationCharge");
const btn = document.querySelector(".btn");

btn.addEventListener("click",function(e){
  console.log(stationName.value);
  console.log(stationCharge.value);
  let obj = {};
  obj.Charge = stationCharge.value;
  obj.name = stationName.value;
  data.push(obj);
  init();
  stationCharge.value ="免費";
  stationName.value = "";

})

練習的內容有

DOM
Event
forEach – 陣列操作

如何整合 innerHTML 資料

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>

  <ul class="list">
    <li>xx充電站，免費</li>
  </ul>

  <script src="all.js"></script>
</body>
</html>

// all.js
// forEach 搭配 DOM 經過整合後，把資料顯示在網頁上

let data = [
  {
    Charge: "免費",
    name: "廖洧杰充電站"
  },
  {
    Charge: "投幣式",
    name: "小花充電站"
  },
  {
    Charge: "投幣式",
    name: "小明充電站"
  },
  {
    Charge: "投幣式",
    name: "小天充電站"
  }
];

const list = document.querySelector(".list");

let str = "";

data.forEach(function(item, index) {
  // console.log(item);
  // console.log(`<li>${item.name}，${item.Charge}</li>`);
  // <li>xx充電站，免費</li>
  
  let content = `<li>${item.name}，${item.Charge}</li>`;
  str += content;
})

// console.log(str);

list.innerHTML = str;

搭配網頁初始化狀態

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>

  <ul class="list">
    <li>xx充電站，免費</li>
  </ul>

  <script src="all.js"></script>
</body>
</html>

// all.js
let data = [
  {
    Charge: "免費",
    name: "廖洧杰充電站"
  },
  {
    Charge: "投幣式",
    name: "小花充電站"
  },
  {
    Charge: "投幣式",
    name: "小明充電站"
  },
  {
    Charge: "投幣式",
    name: "小天充電站"
  }
];

// 預設載入函式 - 網頁初始化狀態
function init() {
  const list = document.querySelector(".list");

  let str = "";

  data.forEach(function(item, index) {
    // console.log(item);
    // console.log(`<li>${item.name}，${item.Charge}</li>`);
    // <li>xx充電站，免費</li>
    
    let content = `<li>${item.name}，${item.Charge}</li>`;
    str += content;
  })

  // console.log(str);

  list.innerHTML = str;
}

init();

免費與投幣式事件監聽設計

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>

  <!-- 免費與投幣式事件監聽設計 -->
  <div class="filter">
    <input type="button" value="免費">
    <input type="button" value="投幣式">
  </div>

  <ul class="list">
    
  </ul>

  <script src="all.js"></script>
</body>
</html>

// all.js
// 搭配網頁初始化狀態
let data = [
  {
    Charge: "免費",
    name: "廖洧杰充電站"
  },
  {
    Charge: "投幣式",
    name: "小花充電站"
  },
  {
    Charge: "投幣式",
    name: "小明充電站"
  },
  {
    Charge: "投幣式",
    name: "小天充電站"
  }
];

// 預設載入函式 - 網頁初始化狀態
function init() {
  const list = document.querySelector(".list");

  let str = "";

  data.forEach(function(item, index) {
    // console.log(item);
    // console.log(`<li>${item.name}，${item.Charge}</li>`);
    // <li>xx充電站，免費</li>
    
    let content = `<li>${item.name}，${item.Charge}</li>`;
    str += content;
  })

  // console.log(str);

  list.innerHTML = str;
}

init();

// 免費與投幣式事件監聽設計
const stationFilter = document.querySelector(".filter");
// console.log(stationFilter);

stationFilter.addEventListener("click", function(e) {
  // console.log(e);
  // 取值
  // console.log(e.target.value);
  // 判斷是否有點擊到按鈕
  // console.log(e.target.value == undefined);
  if(e.target.value == undefined) {
    console.log("你點擊到空的地方");
    // 回傳、強制中斷
    return;
  }
  console.log(e.target.value);
})

事件監聽搭配 if 流程判斷

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>

  <!-- 免費與投幣式事件監聽設計 -->
  <div class="filter">
    <input type="button" value="免費">
    <input type="button" value="投幣式">
  </div>

  <ul class="list">
    
  </ul>


  <script src="all.js"></script>
</body>
</html>

// all.js
let data = [
  {
    Charge: "免費",
    name: "廖洧杰充電站"
  },
  {
    Charge: "投幣式",
    name: "小花充電站"
  },
  {
    Charge: "投幣式",
    name: "小明充電站"
  },
  {
    Charge: "投幣式",
    name: "小天充電站"
  }
];

// 預設載入函式 - 網頁初始化狀態
function init() {
  const list = document.querySelector(".list");

  let str = "";

  data.forEach(function(item, index) {
    // console.log(item);
    // console.log(`<li>${item.name}，${item.Charge}</li>`);
    // <li>xx充電站，免費</li>
    
    let content = `<li>${item.name}，${item.Charge}</li>`;
    str += content;
  })

  // console.log(str);

  list.innerHTML = str;
}

init();

// 免費與投幣式事件監聽設計
const stationFilter = document.querySelector(".filter");
// console.log(stationFilter);

stationFilter.addEventListener("click", function(e) {
  // console.log(e);
  // 取值
  // console.log(e.target.value);
  // 判斷是否有點擊到按鈕
  // console.log(e.target.value == undefined);
  if(e.target.value == undefined) {
    console.log("你點擊到空的地方");
    // 回傳、強制中斷
    return;
  }
  // console.log(e.target.value);

  let str = "";
  data.forEach(function(item, index) {
    // console.log(item.Charge);
    // console.log(e.target.value == item.Charge);
    if(e.target.value == item.Charge) {
      str += `<li>${item.name}，${item.Charge}</li>`
    }
  })
  // console.log(str);
  const list = document.querySelector(".list");
  list.innerHTML = str;
})

DOM 拉出全域變數進行管理

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>

  <!-- 免費與投幣式事件監聽設計 -->
  <div class="filter">
    <input type="button" value="免費">
    <input type="button" value="投幣式">
  </div>

  <ul class="list">
    
  </ul>

  <script src="all.js"></script>
</body>
</html>

// all.js
let data = [
  {
    Charge: "免費",
    name: "廖洧杰充電站"
  },
  {
    Charge: "投幣式",
    name: "小花充電站"
  },
  {
    Charge: "投幣式",
    name: "小明充電站"
  },
  {
    Charge: "投幣式",
    name: "小天充電站"
  }
];

// DOM 拉出全域變數進行管理
const list = document.querySelector(".list");

// 預設載入函式 - 網頁初始化狀態
function init() {
  let str = "";

  data.forEach(function(item, index) {
    // console.log(item);
    // console.log(`<li>${item.name}，${item.Charge}</li>`);
    // <li>xx充電站，免費</li>
    
    let content = `<li>${item.name}，${item.Charge}</li>`;
    str += content;
  })

  // console.log(str);

  list.innerHTML = str;
}

init();

// 免費與投幣式事件監聽設計
const stationFilter = document.querySelector(".filter");
// console.log(stationFilter);

stationFilter.addEventListener("click", function(e) {
  // console.log(e);
  // 取值
  // console.log(e.target.value);
  // 判斷是否有點擊到按鈕
  // console.log(e.target.value == undefined);
  if(e.target.value == undefined) {
    console.log("你點擊到空的地方");
    // 回傳、強制中斷
    return;
  }
  // console.log(e.target.value);

  let str = "";
  data.forEach(function(item, index) {
    // console.log(item.Charge);
    // console.log(e.target.value == item.Charge);
    if(e.target.value == item.Charge) {
      str += `<li>${item.name}，${item.Charge}</li>`
    }
  })
  // console.log(str);
  list.innerHTML = str;
})

篩選條件增加流程

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>

  <!-- 免費與投幣式事件監聽設計 -->
  <div class="filter">
    <input type="button" value="全部">
    <input type="button" value="免費">
    <input type="button" value="投幣式">
  </div>

  <ul class="list">
    
  </ul>

  <script src="all.js"></script>
</body>
</html>

// all.js
let data = [
  {
    Charge: "免費",
    name: "廖洧杰充電站"
  },
  {
    Charge: "投幣式",
    name: "小花充電站"
  },
  {
    Charge: "投幣式",
    name: "小明充電站"
  },
  {
    Charge: "投幣式",
    name: "小天充電站"
  }
];

// DOM 拉出全域變數進行管理
const list = document.querySelector(".list");

// 預設載入函式 - 網頁初始化狀態
function init() {
  let str = "";

  data.forEach(function(item, index) {
    // console.log(item);
    // console.log(`<li>${item.name}，${item.Charge}</li>`);
    // <li>xx充電站，免費</li>
    
    let content = `<li>${item.name}，${item.Charge}</li>`;
    str += content;
  })

  // console.log(str);

  list.innerHTML = str;
}

init();

// 免費與投幣式事件監聽設計
const stationFilter = document.querySelector(".filter");
// console.log(stationFilter);

stationFilter.addEventListener("click", function(e) {
  // console.log(e);
  // 取值
  // console.log(e.target.value);
  // 判斷是否有點擊到按鈕
  // console.log(e.target.value == undefined);
  if(e.target.value == undefined) {
    console.log("你點擊到空的地方");
    // 回傳、強制中斷
    return;
  }
  // console.log(e.target.value);

  let str = "";
  data.forEach(function(item, index) {
    // console.log(item.Charge);
    // console.log(e.target.value == item.Charge);
    if(e.target.value == "全部") {
      str += `<li>${item.name}，${item.Charge}</li>`
    } else if(e.target.value == item.Charge) {
      str += `<li>${item.name}，${item.Charge}</li>`
    }
  })
  // console.log(str);
  list.innerHTML = str;
})

新增充電站 UI 介面邏輯新增

// index.html - 1
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>

  <h2>新增資料</h2>
  <input type="text" class="stationName" placeholder="充電站名稱">
  <input type="text" class="stationCharge" placeholder="免費、付費">
  <input type="button" class="btn" value="儲存">

  <h2>資料顯示</h2>
  <!-- 免費與投幣式事件監聽設計 -->
  <div class="filter">
    <input type="button" value="全部">
    <input type="button" value="免費">
    <input type="button" value="投幣式">
  </div>

  <ul class="list">
    
  </ul>


  <script src="all.js"></script>
</body>
</html>

// all.js - 1. 使用 input
let data = [
  {
    Charge: "免費",
    name: "廖洧杰充電站"
  },
  {
    Charge: "投幣式",
    name: "小花充電站"
  },
  {
    Charge: "投幣式",
    name: "小明充電站"
  },
  {
    Charge: "投幣式",
    name: "小天充電站"
  }
];

// DOM 拉出全域變數進行管理
const list = document.querySelector(".list");

// 網頁初始化狀態
// 預設載入函式
function init() {
  let str = "";

  data.forEach(function(item, index) {
    // console.log(item);
    // console.log(`<li>${item.name}，${item.Charge}</li>`);
    // <li>xx充電站，免費</li>
    
    let content = `<li>${item.name}，${item.Charge}</li>`;
    str += content;
  })

  // console.log(str);

  list.innerHTML = str;
}

init();

// 免費與投幣式事件監聽設計
// 篩選器邏輯
const stationFilter = document.querySelector(".filter");
// console.log(stationFilter);

stationFilter.addEventListener("click", function(e) {
  // console.log(e);
  // 取值
  // console.log(e.target.value);
  // 判斷是否有點擊到按鈕
  // console.log(e.target.value == undefined);
  if(e.target.value == undefined) {
    console.log("你點擊到空的地方");
    // 回傳、強制中斷
    return;
  }
  // console.log(e.target.value);

  let str = "";
  data.forEach(function(item, index) {
    // console.log(item.Charge);
    // console.log(e.target.value == item.Charge);
    if(e.target.value == "全部") {
      str += `<li>${item.name}，${item.Charge}</li>`
    } else if(e.target.value == item.Charge) {
      str += `<li>${item.name}，${item.Charge}</li>`
    }
  })
  // console.log(str);
  list.innerHTML = str;
})

// 新增充電站 UI 介面邏輯新增
// 新增邏輯
const stationName = document.querySelector(".stationName");
const stationCharge = document.querySelector(".stationCharge");
const btn = document.querySelector(".btn");
// console.log(stationName, stationCharge, btn);

btn.addEventListener("click", function(e) {
  // console.log(e);
  console.log(stationName.value);
  console.log(stationCharge.value);

  // 查看資料的物件格式
  // {
  //   Charge: "免費",
  //   name: "廖洧杰充電站"
  // }
  let obj = {};

  obj.name = stationName.value;
  obj.Charge = stationCharge.value;
  console.log(obj);

  data.push(obj);

  init();

  // 資料儲存後清空表單的值
  stationName.value = "";
  stationCharge.value = "";
})

// index.html - 2
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>

  <h2>新增資料</h2>
  <input type="text" class="stationName" placeholder="充電站名稱">
  <select class="stationCharge">
    <option value="免費">免費</option>
    <option value="投幣式">投幣式</option>
  </select>
  <input type="button" class="btn" value="儲存">

  <h2>資料顯示</h2>
  <!-- 免費與投幣式事件監聽設計 -->
  <div class="filter">
    <input type="button" value="全部">
    <input type="button" value="免費">
    <input type="button" value="投幣式">
  </div>

  <ul class="list">
    
  </ul>


  <script src="all.js"></script>
</body>
</html>

// all.js - 2. 使用 select > option
let data = [
  {
    Charge: "免費",
    name: "廖洧杰充電站"
  },
  {
    Charge: "投幣式",
    name: "小花充電站"
  },
  {
    Charge: "投幣式",
    name: "小明充電站"
  },
  {
    Charge: "投幣式",
    name: "小天充電站"
  }
];

// DOM 拉出全域變數進行管理
const list = document.querySelector(".list");

// 網頁初始化狀態
// 預設載入函式
function init() {
  let str = "";

  data.forEach(function(item, index) {
    // console.log(item);
    // console.log(`<li>${item.name}，${item.Charge}</li>`);
    // <li>xx充電站，免費</li>
    
    let content = `<li>${item.name}，${item.Charge}</li>`;
    str += content;
  })

  // console.log(str);

  list.innerHTML = str;
}

init();

// 免費與投幣式事件監聽設計
// 篩選器邏輯
const stationFilter = document.querySelector(".filter");
// console.log(stationFilter);

stationFilter.addEventListener("click", function(e) {
  // console.log(e);
  // 取值
  // console.log(e.target.value);
  // 判斷是否有點擊到按鈕
  // console.log(e.target.value == undefined);
  if(e.target.value == undefined) {
    console.log("你點擊到空的地方");
    // 回傳、強制中斷
    return;
  }
  // console.log(e.target.value);

  let str = "";
  data.forEach(function(item, index) {
    // console.log(item.Charge);
    // console.log(e.target.value == item.Charge);
    if(e.target.value == "全部") {
      str += `<li>${item.name}，${item.Charge}</li>`
    } else if(e.target.value == item.Charge) {
      str += `<li>${item.name}，${item.Charge}</li>`
    }
  })
  // console.log(str);
  list.innerHTML = str;
})

// 新增充電站 UI 介面邏輯新增
// 新增邏輯
const stationName = document.querySelector(".stationName");
const stationCharge = document.querySelector(".stationCharge");
const btn = document.querySelector(".btn");
// console.log(stationName, stationCharge, btn);

btn.addEventListener("click", function(e) {
  // console.log(e);
  console.log(stationName.value);
  console.log(stationCharge.value);

  // 查看資料的物件格式
  // {
  //   Charge: "免費",
  //   name: "廖洧杰充電站"
  // }
  let obj = {};

  obj.name = stationName.value;
  obj.Charge = stationCharge.value;
  console.log(obj);

  data.push(obj);

  init();

  // 資料儲存後清空表單的值
  // 資料儲存後賦予表單值
  stationName.value = "";
  stationCharge.value = "免費";
})