ES6 常用方法

1. 语法糖 、...展开

https://codepen.io/Rouoxo/pen/ZEXXdav

语法糖仅物件可使用

    var testModule = (function () {
      var counter = 0;
      return {
        incrementCounter: function () {
          return counter++;
        },
        // 语法糖 物件
        resetCounter() {
          console.log("counter value prior to reset: " + counter);
          counter = 0;
        },
      };
    })();

    //test
    testModule.incrementCounter();
    testModule.incrementCounter();
    testModule.incrementCounter();
    testModule.resetCounter(); //counter value prior to reset: 3

2. this

物件内function, this会指向本身 (物件内好用)
在物件内callback function , this 会指向 simple call
https://codepen.io/Rouoxo/pen/LYzOgXO

3. => (Arrow function)

在物件内callback function , this + => 指向 本身
https://codepen.io/Rouoxo/pen/vYeMBbg

4. ES 模组 汇入、汇出 import export

(1) 预设汇入 (没有名字，所以可以为它命名)



渲染

(2) 具名汇入

举例 1. 通常function

// 1. 另外监听
<div class="side-menu-switch">
// 2. onclick
<button class="slideshow" type="button" onclick="backgroundImg(this)">1</button>

<script type="module">
// 1. 另外监听
import { checkEvent } from "./js/letSideSlide.js";
document.querySelector("#side-menu-switch").addEventListener("click", checkEvent);
// 2. onclick
import { backgroundImg } from "./js/changeSlideShowPhoto.js";
window.backgroundImg = backgroundImg;  //给全域
</script>

举例 2. 非同步

import { backgroundImgSetTimeOut } from "./js/changeSlideShowPhoto.js";
setInterval(backgroundImgSetTimeOut, 3000);

export 注意

1. 仅export function 及 变数 并使用 const
   原因:const不会再被改变
   但ajax内的资料，目前我还是使用let接值给其他页面
2. 禁止 export DOM!!!
3. Js内亦可import

export const navBar = document.querySelector(".nav-bar"); //禁止!!!

5. Var Let Const

(1) var 在 if 内 全域变数
(2) let 重复宣告(x)、重复赋值(v)，
(3) const 重复宣告(x)、重复赋值(x)，物件除外
https://codepen.io/Rouoxo/pen/MWERaNe

Const 赋值於已定义的物件值时，能否再改变该物件值?
仍可以被改变

6. 模板字串

https://codepen.io/Rouoxo/pen/ZEXZQxJ

7. Class(类别)

继承物件
https://codepen.io/Rouoxo/pen/YzrMqKK

8. Map and Set

Set物件，每个值都是唯一值，使用於不重复上
https://codepen.io/Rouoxo/pen/MWERead

对应送值的方式
一对一：可直接使用object + map

  // 输入值
  const cityName = document.querySelector(".titleCity").innerText;
  const cityID = {
    屏东县: "35",
    基隆市: "51",
    澎湖县: "47",
    彰化县: "19",
    连江县: "83",
  };
  let map = new Map(Object.entries(cityID));
  // 物件转阵列 match 输出token
  // 物件是否有该属性
  map.forEach((value, key) => {
    if (key == cityName) {
      token = value;
    }
  });

一对多：则可使用switch

    let result = ""; // 送出去 自定义即可
    switch (
      key //传进来的值
    ) {
      case "多云时阴短暂阵雨":
      case "多云暂阵雨":
      case "多云短暂雨":
        result = `08.png`;
        break;
      case "阴时多云":
      case "多云时阴":
        result = `06.png`;
        break;
      default:
        result = `08.png`;
    }
    return result;
  }

9. Array

Array 方法 ex: let data = [30, 40, 100, 123];

(1) forEach(item,index) 需仓库 用途：自己组阵列、运算
(2) map(item,index) return 回传[] 用途：阵列改变
(3) filter(item,index) return 回传[] 用途：筛选
(4) find(item,index) 回传值 回传头单一值
(5) findIndex(item,index) 回传索引值
https://codepen.io/Rouoxo/pen/jOGRJXj

new Array() 和 var arr=[] 区别
因其他强型别语言，通常需先定义阵列数量，
new Array() 可事先预设开 "空阵列" ，供未来不定数变数装入
ex:可能有30人的教室

js[ ] 则可直接装任一数量变数

10. Object

可用 . 或 [] 抓值
https://codepen.io/Rouoxo/pen/jOGRddx

11. 解构赋值

抓想要的东西出来 { }
https://codepen.io/Rouoxo/pen/zYEXrdp

物件内浅层拷贝(...展开)比较


…展开，顺序颠倒


自定义属性被洗掉
因此，不要在obj内使用展开

12. Call by Value, Call by Reference 物件传参考

(1) 物件、阵列、function 传址
(2) Number 传值
https://codepen.io/Rouoxo/pen/mdBgdZQ

13. Promise + Async, Await

使非同步同步执行，方法：callback
但有callback hell

解决：Promise or Async, Await
https://codepen.io/Rouoxo/pen/jOGREBr

[撞墙] 遇到非同步资料还没被叫出来

1. ajax

export function ajax({ method, newUrl}) {
  const obj = newUrl;
  console.log(method,newUrl);
  
  return axios[method](obj)
    .then((res) => {
      // console.log(res.data);
      return res.data;
    })
    .catch((err) => {
      console.log(`Promise.err , ${err}`);
      return err;
    });
}

2. 整合

import { ajax } from "./ajax.js";

// 方法 API网址列
export function maxAjaxAndUrl({method,url}) {
  const newUrl = url.apiFront + url.path + url.cityID + url.apiRear;
  return ajax({method, newUrl});
}

3. 引用2.

const getApi = maxAjaxAndUrl({
  method: "get",
  url:{
    apiFront : "https://opendata.cwb.gov.tw/api/v1/rest/datastore/",
    apiRear : "?Authorization=CWB-500FAC04-6AB0-4653-A797-A4EB57CB0E8F&format=JSON",
    path : "F-D0047-0",
    cityID : cityID,
  }
});

export const city = getApi;
console.log(city); //抓不到，尝试以下

此时response还没呼唤到，但不会跳错误，只是还没抓到值而已
（因同步会先执行）

4. 使用async await

async function awaitFunction() {
  try {
    let receiveAjaxValue = await city;
    console.log("aaa",receiveAjaxValue); // 抓到了
  } catch (err) {
    console.log(err);
  }
}

14. reduce() 各式用法

https://codepen.io/Rouoxo/pen/JjOPYmg