ES6 จำเป็นต้องรู้

ES6 ออกมาแล้ว การสนับสนุนเบราว์เซอร์นั้นดีจริง ๆ และหากยังไม่เพียงพอสำหรับคุณ ก็ยังมี Babel อยู่เสมอ ดังนั้นมาเร่งความเร็วด้วยฟีเจอร์ใหม่ที่สำคัญและยอดเยี่ยมที่สุดกันดีกว่า

ให้มี Const

ขอบเขตใน JavaScript เป็นสิ่งที่คนส่วนใหญ่ไม่คุ้นเคย เนื่องจากเรามีสิ่งที่เรียกว่า "โฮสติ้งแบบแปรผัน" ซึ่งจะดึงตัวแปรทั้งหมดออกมาและกำหนดไว้ที่ด้านบนสุดของขอบเขต ขอบเขตของพวกเขาเป็นทั้งระดับโลกหรือฟังก์ชั่นโดยรอบแรก ตัวอย่างคลาสสิกที่นี่คือ for for loop

function foo() {
  for(var i = 0; i < 10; i++) {
    console.log(i) // 0 1 2 3 4 5 6 7 8 9
  }
  console.log(i) //10
}

นั่นเป็นเพราะว่าสิ่งที่เกิดขึ้นจริงคือ var i ถูกยกให้อยู่ในขอบเขตของมัน

function foo() {
  var i
  for(i = 0; i < 10; i++) {
    console.log(i) // 0 1 2 3 4 5 6 7 8 9
  }
  console.log(i) //10
}

การรู้สิ่งนี้ก็สมเหตุสมผลอย่างยิ่ง แต่ตอนนี้เราได้รับคำหลักใหม่ที่ยอดเยี่ยมซึ่งจริงๆ แล้วกำหนดขอบเขตไว้ที่ บล็อก ที่อยู่รอบๆ

let เป็น var ใหม่ที่มีประสิทธิภาพ มันมีอยู่ในบล็อกที่เกี่ยวข้องเท่านั้น

function foo() {
  for(let i = 0; i < 9; i++) {
    console.log(i) // 0 1 2 3 4 5 6 7 8 9
  }
  console.log(i) //undefined
}

const กำหนดค่าคงที่ นั่นคือไม่สามารถมอบหมายใหม่ได้ และดังนั้นจึงไม่สามารถใช้ใน for loop ซึ่งตัวแปรตัววนซ้ำได้รับการอัพเดตอย่างต่อเนื่อง หากคุณกำหนดค่าคงที่ที่เป็น Object คุณสามารถแก้ไขและกำหนดคุณสมบัติของมันได้ แต่ไม่สามารถกำหนดตัวแปรให้เป็นอย่างอื่นได้

const obj = {
  name: ‘HoverBaum’
}
obj.name = ‘Tester’ //works
obj.awesome = true //also okay
obj = [] //NOPE, this is an error

ฟังก์ชันลูกศร

คุณจำคีย์เวิร์ด `function` แบบเก่าที่ดีได้ไหม

function foo() {
  return ‘bar’
}

เด็กๆ เจ๋งๆ พบวิธีการทำเช่นนี้โดยใช้โค้ดน้อยลง ดีมากสำหรับผู้ที่เขียนบล็อกและนำเสนอผลงาน เราสามารถบีบตรรกะให้มากขึ้นโดยใช้พื้นที่น้อยลงโดยใช้ไวยากรณ์ที่ทำให้ผู้อ่านสับสน//เทียบเท่ากับ ES6

const foo = () => {
  return ‘bar’
}
//And even shorter because returns are implied
const foo = () => ‘bar’

แต่มันมีประโยชน์มากเมื่อคุณต้องการส่งฟังก์ชันไปยังบางสิ่ง เช่นเดียวกับการทำแผนที่บนอาร์เรย์ และด้วย Functional Programming (ไม่ว่าจะเป็นอะไรก็ตาม) ที่เป็นทุกวัยในตอนนี้ คุณจะเห็นผู้คนทำเช่นนี้มากขึ้นเรื่อยๆ

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const doubled = arr.map(number => {return number * 2})
// [2, 4, 6, 8, 10, 12, 14, 15, 19, 20]
//And again all the sugar to leave out things.
const awesomeDouble = arr.map(number => number * 2)
// [2, 4, 6, 8, 10, 12, 14, 15, 19, 20]
//That implicit return even works for Objects.
const wrapped = arra.map(number => ({num: number}))
//[{num: 1}, {num: 2}, {num: 3}, {num: 4}, …]

คุณสังเกตไหมว่าคุณต้องล้อม Objects ด้วย `()` เพื่อให้มันทำงานกับผลตอบแทนโดยนัยได้อย่างไร รหัสที่สอดคล้องกันมากที่เราเขียนที่นี่ ดังนั้นคุณอาจต้องการเก็บรูปแบบ { return ‘bar’ } ไว้เพื่อทำให้โค้ดของคุณสอดคล้องกันและไม่ทำให้ตัวเองสับสน เพราะเชื่อฉันสิว่าจะทำให้คุณสับสน และอย่าทะเลาะกันเรื่องโค้ดน้อยกับคน รวมถึงผู้เขียนก็อ่านได้สบายๆ เพราะฉันชอบอันหลังและนี่คือบล็อกของฉัน

ฉันพูดถึงแล้วว่า Arrow Functions ยังคงรักษาขอบเขตปัจจุบันไว้หรือไม่ ดังนั้น `สิ่งนี้` ภายในฟังก์ชันลูกศรจะเหมือนกับที่อยู่ภายนอก เป็นเพียงสิ่งที่ต้องจำไว้

การทำลายล้าง

ตอนนี้เราสามารถนำ Objects ออกจากที่อื่นได้แล้ว ส่วนใหญ่เราใช้สิ่งนี้สำหรับการนำเข้าและส่งออก (ถัดไปในบล็อกโพสต์นี้เท่านั้น) แต่คุณสามารถใช้มันบนออบเจ็กต์หรือรับพารามิเตอร์ที่มีชื่อสำหรับฟังก์ชันต่างๆ

let {a, b} = {
  a: 1,
  b: 2
}
console.log(a) // 1
function foo ({greeting, name}) {
  console.log(greeting + ‘ ‘ + name)
}
foo({name: ‘HoverBaum’, greeting: ‘Hello’})

โมดูล

Victory Dance ที่นี่ พร้อมเฉลิมฉลองครั้งใหญ่! ในที่สุดเราก็ได้รับโมดูลดั้งเดิม ตอนนี้ถ้าเพียงเราทุกคนสามารถใช้มันได้และพวกมันก็เข้ากันได้กับโหนด แต่พวกเขาก็สุดยอดมาก ตอนนี้เราสามารถ `นำเข้า` สิ่งต่าง ๆ จากโมดูลที่ `ส่งออก` ได้

//app.js
//import the default export from logger
import log from ‘./logger’
//only import a from letters
import { a } from ‘./letters’
log(a) // 1
//logger.js
export default const log = (msg) => {
  console.log(msg)
}
//letters.js
export const a = 1
export const b = 2

สตริงเทมเพลต

นี่เป็นอีกหนึ่ง ”โอ้พระเจ้า ทำไมเราไม่เคยมีสิ่งนี้มาก่อน ????!?” เพราะเราทุกคนจำการสร้าง String โดยมีตัวแปรอยู่ในนั้นได้ ตอนนี้เราสามารถทำได้โดยใช้ `และ ${}

function greet(greeting, name) {
  console.log(`${greeting} ${name}, nice to see you.`)
}

หากสิ่งนี้ไม่ทำให้คุณตื่นเต้นอย่างจริงจัง… ให้กลับไปสร้างเว็บไซต์สักสองสามสิบแห่งโดยที่ไม่มีมัน!

พารามิเตอร์เริ่มต้น

อ่านประโยคแรกจากย่อหน้าสุดท้ายอีกครั้ง ^^

ด้วย พารามิเตอร์เริ่มต้น เราสามารถกำหนดได้อย่างง่ายดายว่าพารามิเตอร์ควรเป็นอย่างไรหากไม่ได้ระบุ

//Old way
function greet(greeting, name) {
  if(!greeting) {
     greeting = ‘Hello’
  }
  if(!name) {
    name = “Friend”
  }
  console.log(`${greeting} ${name}.`)
}
//ES6 Default Paramteres
function greeti(greeting = ‘Hello’, name = ‘Friend’) {
  console.log(`${greeting} ${name}.`)
}

เราบันทึกโค้ดไว้ทั้งหมดหกบรรทัด! นั่นไม่น่าทึ่งเหรอ?

วัตถุมอบหมาย

หากคุณอ่าน "โพสต์ตอบกลับ" ของฉัน คุณคงได้เห็นสิ่งนี้มามากแล้ว การใช้ Object.assign ช่วยให้เราสามารถสร้างออบเจ็กต์ใหม่และส่งผ่านไปยังออบเจ็กต์อื่นได้ อะไร ตัวอย่าง:

const obj = {
  a: 1,
  b: 2
}
const newObj = Object.assign({}, obj, {
  b: 13
})
/*
newObj == {
  a: 1,
  b: 13
}
*/

สิ่งสำคัญที่นี่คือเราสร้าง Object ใหม่ทั้งหมด คุณเรียกใช้ฟังก์ชันเช่น Object.assign(target, …sources) โดยมอบ Object ให้กับมัน จากนั้น Objects ที่ควรรวมค่าเข้ากับสิ่งนั้น

สิ่งนี้มีประโยชน์ในการสร้างที่เก็บข้อมูลที่ไม่เปลี่ยนรูปโดยที่คุณไม่ต้องการแก้ไขข้อมูลหรือสถานะที่เก็บไว้ แต่สร้างที่เก็บข้อมูลใหม่ จึงทำให้คุณสามารถจำอันเก่าแล้วกระโดดกลับไปหามันได้

ชวเลขทรัพย์สิน

อีกคุณสมบัติในการบันทึกบรรทัดของโค้ดและอาจทำให้ผู้คนสับสนก็คือ Property Shorthands หากคุณต้องการส่งผ่าน ชื่อ เข้าไปและวัตถุเป็นคุณสมบัติวัตถุ object.name คุณสามารถวางไว้ตรงนั้นได้

const name = ‘HoverBaum’
//old
const nameObj = {
  name: name
}
//ES6
const es6Obj = {
  name
}

อ่านเพิ่มเติม

ต่อไปนี้คือลิงก์บางส่วนไปยังข้อมูลอ้างอิงที่ดีและการอ่านเพิ่มเติม

- เขียนคุณสมบัติทั้งหมด

- ข้อมูลอ้างอิงสำหรับคุณสมบัติ

- ซีรีส์ ES6 โดย FunFunFunction

เผยแพร่ครั้งแรกที่ hoverbaum.net เมื่อวันที่ 25 กรกฎาคม 2016