# Javascript ES6 ### ■ var、let、const 介紹 **var 與 let / const ，主要有幾項差異：** * 作用域 (scope) 不同 -> `var 是函式作用域，let / const 是區塊作用域` * for 迴圈的綁定 (bind) 差異 -> `var 與 let ，for 迴圈的綁定（bind）差異` * 變量提升 (hoisting) 不同 -> `var 的提升與 let / const 不同` * 重複宣告的差異 -> `var 允許重複宣告，let / const 會出錯` **let 變數宣告以及特點：** 1. 變數不能重複聲明 2. 區塊作用域 3. 不存在變數提升 4. 不影響作用域鏈 **const 常數宣告以及特點：** 1. 一定要賦初始值 1. 一般常數使用大寫(潛規則) 1. 常數的值不能修改 1. 區塊作用域 1. 對於陣列和物件的元素修改，不算對常數的修改，故不會出錯 ### ■ 什麼是箭頭函式？ ```javascript= // ES5 一般函式 let addOne = function (n) { return n + 1; }; // ES6 箭頭函式，參數只有一個時，參數的括號可以省略 let addOne = (n) => { return n + 1; }; // ES6 箭頭函式，只有一行時，省略大括號和 return let addOne = (n) => n + 1; ``` * 箭頭函式語法不同、寫法也較簡潔 * 箭頭函式沒有自己的 this、也無法直接修改 this 的指向 * 箭頭函式沒有自己的 arguments * 箭頭函式不能作為構造函式使用, 換言之不能用 ==new== 關鍵字調用，會報錯 ### ■ DOM 是什麼 ? 先了解 Node & HTMLElement DOM(Document Object Model) 是由多個 DOM Node 物件節點所組成的文件(樹)物件模型。Nodes 節點有很多種型態，DOM Element 是 Node 其中一種型態，而 DOM 表示整個節點和元素組成的樹狀結構。 ![](https://hackmd.io/_uploads/ryNkSuv9n.png) **DOM Node：** Node 有很多種型態，html、body、註解、文字...等，各個型態都是一個節點。 **DOM Element：** 而 DOM Element 是 node(Node.ELEMENT_NODE) 其中一個型態，也就是常用到的 HTML tags，像是`<html>` `<body>` `<h2>` `<p>`...等。 * `<p>` 同時是 DOM Node，也是 HTML Element * `<!-- Page Body -->` 是 DOM Node，但不是 HTML Element ### ■ 選取器 1. `document.getElementsByClassName()` 返回文檔中所有指定類名的元素集合，作為 NodeList 對象 2. `document.getElementById()` 返回對擁有指定 id 的第一個對象的引用 3. `document.getElementsByName()` 返回帶有指定名稱的對象集合 4. `document.getElementsByTagName()` 返回帶有指定標籤名的對象集合 5. `document.querySelector()` 返回文檔中匹配指定的CSS選擇器的第一元素 6. `document.querySelectorAll()` 返回文檔中匹配的CSS選擇器的所有元素節點列表 ### ■ classList DOM 每個節點都有一個 classList 物件，透過這個物件可以動態的在節點的 class 屬性上操作，classList 內可以使用的方法包含： 1. `classList.add` 增加 2. `classList.remove` 移除 3. `classList.contains` 用來檢查是否存在某 class，回傳 boolean 值。 4. `classList.toggle` 切換 5. `classList.length` 檢查標籤上的 class 數量。 6. `classList.item` 依照輸入在 item(index) 的 index 值回傳對應的 class 名稱(如下範例)。 ```javascript= // 若 p 標籤現在有兩個 class // [0]: color , [1]: background document.querySelector('p').classList.item(0) // 回傳 color ``` ### ■ closest() 用於獲取的方法：匹配特定選擇器且離當前元素最近的祖先元素（也可以是當前元素本身）。 ### ■ createElement 需要搭配 `appendChild()` 語法使用，在 HTML 父元素下新增子元素。 跟 innerHTML 的不同在於，**innerHTML 會覆蓋掉原本的內容**，而 **createElement 會保留原本內容，依序加在後面**。 ```javascript= // 用 createElement 增加一個 DOM 節點 var str = document.createElement('em'); // 先用 JS 寫好要增加的內容 str.textContent = '1234'; // 動態掛一個 class 屬性 str.setAttribute('class','blue'); // 用 appendChild() 把上面寫好的子節點掛在既有的 h1 下面，新增的內容會依序排列在後面，不會被洗掉 document.querySelector('.title').appendChild(str); ``` ### ■ 刪除DOM元素的兩種方法 刪除子節點： ```javascript= var box = document.getElementById('box'); box.parentNode.removeChild(box); ``` 刪除自身： ```javascript= var box = document.getElementById('box'); box.remove(); ``` ### ■ 取得寬高 **window.innerHeight** 視窗高度 **getBoundingClientRect()** 元素大小(含 `x/y/width/height/top/right/bottom/left` ) ```javascript= const elem = document.querySelector("div"); console.log(elem.getBoundingClientRect().height); // 取得元素的高度 ``` ### ■ 獲取CSS樣式 **Window.getComputedStyle()** 元素於套用啟用之任何基本運算後的所有 CSS 屬性值 **getPropertyValue()** 返回指定的 CSS 属性值 ```javascript= const elem = document.getElementById("div"); const theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("margin-top"); console.log(theCSSprop); ``` ### ■ 滾動事件 **addEventListener("scroll", (event) => {});** **onscroll = (event) => {};** ```javascript= function doSomething(scrollPos) { // Do something with the scroll position } document.addEventListener("scroll", (event) => {}); ``` ### ■ 模板字符串(ES6) ```javascript= `string text ${expression} string text` ``` ### ■ 三元運算子 三元運算子，又稱「條件運算子」。 ```javascript= （條件）? [數值/運算式（1）]:[數值/運算式（2）]; //如果條件為true，此時回傳[數值/運算式（1）];條件為false，則回傳[數值/運算式（2）]。 ``` ### ■ JS 中的物件迴圈手法 陣列本身具有非常多好用的迴圈方法，如：forEach、map、reduce、find…，這些方法有助於處理各種陣列的資料。 但實戰中，不一定所有的資料格式都會是使用陣列，尤其是從後端 API 串接的資料或是各種第三方資源，就有可能是使用物件的方式提供，此時就無法使用上述的各種陣列手法。 **直接將物件轉為陣列格式：** 要對物件使用陣列方法，更快的方式是將物件轉為陣列，在 ES6 的語法中就提供了三種物件轉陣列的形式： * Object.values * Object.keys * Object.entries **`Object.values()`** 可以直接傳入一個物件，並將傳入的物件直接轉為陣列的形式。 而此語法的缺點在於：無法取得物件 key 值，在範例中的 001、002 等 key 值就無法被取得。 **`Object.keys()`** 可以直接傳入一個物件，並將其 key 值以陣列的方式呈現。 不過雖說僅有取出 key 值，但在 JavaScript 中有 key 後再取得 value 也不是困難事，可以直接使用 object[key] 的方式直接取回物件內的 value。 ### ■ 瀏覽器console.log()外的一些其他用法 `console.dir()` 可以查看物件的屬性。 ### ■ 判斷事件發生在某個指定元素內還是外 ```javascript= // 纯js document.onmouseup = function(e){ var e = e || window.event; var target = e.target || e.srcElement; var _tar = document.getElementById('') //獲取你的目標元素 //1. 點擊事件的對象不是目標區域本身 //2. 事件對象同時也不是目標區域的子元素 if( !(target == _tar) && ! _tar.contains(target) ) { // 目標元素外 //some code... } else { // 目標元素内 //some code... } } ```