ES6 學習筆記

let & const

const 用來宣告常數
let 作用域只在 {} 裡

arrow function 箭頭函數

一般函數 (es5)

function foo() {
  var _this = this;

  setTimeout(function() {
    console.log("id:", _this.id);
  }, 100);
}

箭頭函數 (es6)

function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}

一般函式和箭頭函式差別在於 this 的對象不同
- 箭頭函數當中的 this 是定義時的對象，而不是呼叫時的對象(綁定 this 的對象)
如果只有一個參數可以不用有 ()
如果沒有參數或多個參數一定要有 ()
如果沒有什麼邏輯，只有 return() 的東西，可以不用寫 {} 且把 return 拿掉

不可以使用箭頭函數的情況

const calculate = {
  array: [1, 2, 3],
  sum: () => {
    return this.array.reduce((result, item) => result + item);
  },
};

//TypeError: Cannot read property 'array' of undefined
calculate.sum();

箭頭函式會以定義當下的 this 值為 this 值，也就是 window 物件(或是在嚴格模式的 undefined)，所以是存取不到物件中的 this.array 值的。

省略參數

一般函數

function add() {
  console.log(arguments);
}
add(1, 30, 42, 7);

如果沒有打參數，可以用 arguments

箭頭函數

const add = (...arg) => {
  console.log(arg);
};
add(1, 30, 42, 7);

exports & imports (modules)

exports

默認輸出(方便使用者在使用 imports 快速上手)
- export default 模塊名稱

export default App;

一個一個導出
- export const 方法/變數

export var firstName = "Michael";
export var lastName = "Jackson";

var firstName = "Michael";
var lastName = "Jackson";

export { firstName, lastName };

export function multiply(x, y) {
  return x * y;
}

imports

導入檔案中某些變量
- import { 檔案裡面的某個變數名稱 } from 檔案路徑

// 只導入 profile 這個檔案的三個方法/變數
import { firstName, lastName, year } from "./profile.js";

如果想為輸入的變量重新取名字的話，可以用 as

import { lastName as surname } from "./profile.js";

導入整個模塊 default
```
// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}
```
- import * as 名稱 from ‘檔案路徑’
```
// main.js
import * as circle from "./circle";

console.log("圓面積：" + circle.area(4));
console.log("圓周長：" + circle.circumference(14));
```
- import 名稱 from ‘檔案路徑’
  - defalut 的意思是指: 這個 module 的可以有一個 default 指定的項目，而這個 default 的 element 可以是 Object、Function、Class，所以這也是為什麼，我們不用加上 “{}” 這樣大括號的緣故，因為用 default 就說明這個 module 的這個 element 被定義為 default，而不再是它原先的名字
```
import myCircle from "./circle";
```
```
import { default as myCircle } from "./circle";
```
import 輸入的變量只能讀，不能修改

class

class Person {
  constructor() {
    this.name = "John";
  }

  printName() {
    console.log(this.name);
  }
}

class Man extends Person {
  constructor() {
    super();
    this.gender = "man";
  }

  printGender() {
    console.log(this.name);
  }
}

const man = new Man();
man.printGender();
man.printName();

展開與其餘

es5

let groupA = ["小明", "杰倫", "阿姨"];
let groupB = ["老媽", "老爸"];
let groupAll = groupA.concat(groupB);
console.log(groupAll); // ['小明', '杰倫', '阿姨', '老媽', '老爸']

es6

let groupA = ["小明", "杰倫", "阿姨"];
let groupB = ["老媽", "老爸"];
let groupAll = [...groupA, ...groupB];
console.log(groupAll); // ['小明', '杰倫', '阿姨', '老媽', '老爸']

… 代表將陣列的值一個一個取出來

複製陣列

記得物件和陣列和類別都是傳參考址，所以無法用以下的方法

let groupA = ["小明", "杰倫", "阿姨"];
let groupB = groupA; // 會影響原陣列
groupB.push("阿傑");
console.log(groupA); // ['小明', '杰倫', '阿姨', '阿傑']

要利用 … 來完成複製

let groupA = ["小明", "杰倫", "阿姨"];
let groupB = [...groupA];
groupB.push("阿傑");
console.log(groupA); // ['小明', '杰倫', '阿姨']
console.log(groupB); // ['小明', '杰倫', '阿姨', '阿傑']

複製其他物件或是類別的東西

const person = {
  name: "John",
};

const secondPerson = person; // 會影響原物件
person.name = "Max";
console.log(secondPerson.name); // 'Max'

可以利用 … 來避免

const person = {
  name: "John",
};

const secondPerson = { ...person };
person.name = "Max";
console.log(secondPerson.name); // 'John'

解構賦值

陣列解構

let family = ["小明", "杰倫", "阿姨", "老媽", "老爸"];
let [ming, jay, auntie] = family;
console.log(ming, jay, auntie); // "小明", "杰倫", "阿姨"

let family = ["小明", "杰倫", "阿姨", "老媽", "老爸"];
let [ming, jay, , mom, dad] = family;
console.log(ming, jay, mom, dad); // "小明", "杰倫", "老媽", "老爸"

let family = ["小明", "杰倫", "阿姨", "老媽", "老爸"];
let [ming, jay, ...others] = family;
console.log(ming, jay, others); // "小明", "杰倫", ["阿姨", "老媽", "老爸"]

交換

let a = "我是A";
let b = "我是B";
[a, b] = [b, a];
console.log(a); // 我是B
console.log(b); // 我是A

物件解構

變數的順序和屬性不一樣也沒關係

let family = {
  ming: "小明",
  jay: "杰倫",
  auntie: "阿姨",
  mom: "老媽",
  dad: "老爸",
};
let { jay, mom } = family;
console.log(jay, mom); // 杰倫, 老媽

設定變數別名

let family = {
  ming: "小明",
  jay: "杰倫",
  auntie: "阿姨",
  mom: "老媽",
  dad: "老爸",
};
let { jay: man, mom: woman } = family;
console.log(man, woman); // 杰倫, 老媽

array 用法

map()
find()
findIndex()
filter()
reduce()
concat()
slice()
splice()

ES6 學習筆記

let & const

arrow function 箭頭函數

一般函數 (es5)

箭頭函數 (es6)

不可以使用箭頭函數的情況

省略參數

一般函數

箭頭函數

exports & imports (modules)

exports

imports

class

展開與其餘

es5

es6

複製陣列

複製其他物件或是類別的東西

解構賦值

陣列解構

交換

物件解構

設定變數別名

array 用法

參考資料

Similar Posts