ES6 語法學習筆記

 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

var num = 1;
if (true) {
  // 變數的作用範圍在 global scope
  var name = "tony";

  // let 是用大括號來介定它的範圍
  // 暫時性的變數用 let 宣告 (local 變數)
  let num = 2;

  // const 是不能被更改的變數，且作用範圍是local，常用在宣告 document.getElementById()
  const selector = "a";
  // selector = "b";
  console.log(selector);
}
console.log(name);
console.log(num); // 1

// const 只有在 object 和 array 的情況下可以塞東西，但不可以改變型別
// 所以在嚴謹的情況下會使用 const 來宣告物件或陣列
const a = {};
a.name = "Mike";
a.name = "Judy";
// a = [];   // 不被允許
console.log(a);

const b = [];
b.push(1);
// b = 2;   // 不被允許
console.log(b);

1
2

// first = 1, second = 2
const [first, second] = arr;

1
2

// first = 1, second = 2, third=3, fourth=4(取預設值)
const [first, second, third, fourth=4] = arr;

1
2
3
4

// second = 2
const [, second] = arr;
// third = 3
const [,, third] = arr;

1

[a, b] = [b, a];

1
2
3

const nums = [1, 2, 3, 4];
const [first, ...others] = nums;
// first === 1, nums => [2, 3, 4]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const user = {
  name: "Mike",
  age: 12,
  address: "Taiwan",
};
// 可以重新命名(age => userAge)，可以指定預設值(sex='male')
const { name, age:userAge, address, sex='male' } = user;
console.log(name, userAge, address, sex);

// 直接將物件放到物件中，物件會在物件中自動進行解構(以變數名稱為其key值)
const userData = {
  user, // 會自動解構成 => user: {name: "Mike", ... }
};
console.log(userData);

1
2
3
4

  function distance(point) {
    const {x, y} = point;
    return Math.sqrt(x*x + y*y);
  }

1
2
3

  function distance({x, y=0}) {
    return Math.sqrt(x*x + y*y);
  }

1
2
3
4
5

  let x = y = 0;
  const point = {
    x: x,
    y: y
  }

1

  const point = {x, y}

1
2
3
4
5

  let key = 'price';
  const blog = {

  };
  blog[key] = 100;

1
2
3
4
5

  let key = 'price';
  const blog = {
    [key]: 100,
    ['discount_' + key]: 80
  }

1
2
3
4
5

  const options = {
    mounted: function () {

    },
  }

1
2
3
4
5

  const options = {
    mounted() {

    },
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const Add = function (a, b) {
    return a + b;
}

// 省略 function 關鍵字，加上鍵頭，變成：
const Add = (a, b) => {
    return a + b;
}

// 當回傳只有一行時，可進一步簡化成：
const Add = (a, b) => a + b;

// 當函數參數只有一個的時候，可以省略參數的小括孤
const Double = a => a * 2;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

document.getElementById("aLink1").addEventListener("click", function () {
  console.log(this); // 指向 #aLink1
});
document.getElementById("aLink2").addEventListener("click", (e) => {
  // 箭頭函式中沒有this，this會往上一層找
  console.log(this); // 指向 window

  // 若要取得dom元素實體本身，則要透過 e.target 取得
  console.log(e.target); // 指向 #aLink2
});

1
2
3

const ArrayToStr = (arr = [1, 1, 1, 1]) => {
  return arr.map((item) => item + "");
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function jump() {
    console.log(this);
}

// 1. 直接執行             (this 為 gloabal 或 window)
jump(); // this 指向 window

// 2. 作為物件的成員函式執行 (this 為 該物件)
var a = {};
a.jump = jump;
a.jump(); // this 指向 a

// 3. 綁定 dom 事件        (this 為 發出事件的DOM)
btn.addEventListener('click', jump); // this 指向 #btn dom 物件

// 當用箭頭函式宣告，則不管怎麼執行，this都是上層的this (箭頭函數沒有自己的 this)
const jump = () => {
    console.log(this)
}

1
2
3
4
5
6
7
8
9

// 透過字串模版，可以更方面的進行字串與變數的串接、換行
const add = (name, age) => {
  return `
    Hi
    我叫${name}，
    我今年${age}歲
  `;
};
console.log(add("Mike", 12));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const Add = (a, b) => {
    return a + b;
};

// 可以 export 很多東西出去，但是default只能有一個
export default Add;

// 要用 export 丟出去的只能用 const 變數丟出去 (named export)
export const Name = "mike";
export const age = 12;
export const Minus = (a, b) => {
    return a - b;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- 用 type="module" 告訴瀏覽器這邊是屬於 es6 module 的用法，讓它認得 import 指令 -->
<script type="module">
  // 除了 default 的東西，其它要用解構的方式 import 進來
  import Add, { Name as userName, age, Minus } from "./js/Tools.js";

  console.log(Add(1, 2));
  console.log(userName);
  console.log(age);
  console.log(Minus(5, 3));
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

class Dog extends Animal {
    constructor() {
        this.age = 0;
    }
    bark() {
        console.log('woof');
    }
}

const dog = new Dog();
class Dog extends Animal {
    this.age = 0;
    bark() => console.log('woof');
}

const dog = new Dog();