es6 note

index.md

ES6 note

var, let, const

• var → function scope
• let, const → block scope

function say() {
    for (var i = 0; i < 5; i++ ) {
        console.log(i)
    }
    console.log(i)
}

say()
// try change var to let

Object

const person = {
    name: 'Longdd',
    walk: function() {},
    talk() {}
}

// this two ways to access property of class
console.log(person.name)
console.log(person['name'])

// bracket notation is usually used to uncertain variable
const targetMember = 'name'
console.log(person[targetMember])

this (bind this)

const person = {
    name: 'Longdd',
    walk() {
        console.log(this)
    }
}

// output is person object
person.walk()

// outout is window object
let walk = person.walk.bind(person)
walk()

// use bind to fix
walk = person.walk.bind(person)
walk()

Arrow Functions

const list = [
    { id:1, isActive: true},
    { id:2, isActive: true},
    { id:3, isActive: false},
    ]
const result = list.filter(function(item) {
    return item.isActive
    })
const result = list.filter((item) => item.isActive)

• arrow functions and this

const person = {
    talkOne() {
        console.log('this in 1', this)
    },
    talkTwo() {
        setTimeout(function() {
            console.log('this in 2', this)
        }, 1000)
    },
    talkThree() {
        var that = this
        setTimeout(function() {
            console.log('this in 3', that)
        }, 1000)
    },
    // arrow functions do not rebind this
    talkFour() {
        setTimeout(() => {
            console.log('this in 3', this)
        }, 1000)
    }

}

person.talkOne()    // person
person.talkTwo()    // window
person.talkThree()  // person
person.talkFour()   // person

Array.map Method

const colors = ['red', 'green', 'blue']
const itemsOne = colors.map(function(color) {
    return '<li>' + color + '</li>'
})
const itemsTwo = colors.map(color => `<li>${color}</li>`)
console.log(itemsTwo)

Object Destructuring

const address = {
    street: '',
    city: '',
    country: ''
}

const street = address.street
const city = address.city
const country = address.country

// same with upon
const { street, city, country } = address

// different name
// const { street: st } = address

Spread Operator

• Array

const first = [1, 2, 3]
const second = [5, 2,8]

const combined = first.concat(second)
const combinedTwo = [...first, 'a', ...second]

// use spread operator to clone object
const clone = [...first]
first[0] = 99
console.log(first)
console.log(clone)

• Object

const first = { name: 'LOngdd' }
const second = { age: 17' }
const combined = {...first, ...second, location: 'Mars' }
const clonePerson = {...combined}

Classes

class Person {
    constructor(name) {
        this.name = name
    }
    walk() {
        console.log('walk')
    }
}

const person = new Person('Longdd')

Inheritance

class Person {
    constructor(name) {
        this.name = name
    }
    walk() {
        console.log('walk')
    }
}

class Teacher extends Person {
    constructor(name, degree) {
        super(name)
        this.degree = degree
    }
    teach() {
        console.log('teach')
    }
}


const teacher = new Teacher('Longdd', 'dota')
teacher.teach()

Modules

// person.js
export class Person {
    constructor(name) {
        this.name = name
    }

    walk() {
        console.log('walk')
    }
}

// teacher.js
import { Person } from './person'

export class Teacher extends Person {
    constructor(name, degree) {
        super(name)
        this.degree = degree
    }
    teach() {
        console.log('teach')
    }
}

// index.js
import { Teacher } from './teacher'

const teacher = new Teacher('Longdd', 'dota')

Export Import

// Named Exports

export class Teacher {}

import { Teacher } from './teacher'

// Default Exports

export default class Teacher {}

import Teacher from './teacher'

// Both exist

export function promote() {}

export default class Teacher{}

import { promote}, Teacher from './teacher'

computed property

function objectify (key, value) {
  return {
    [key]: value
  }
}

objectify('name', 'Tyler') // { name: 'Tyler' }

Where key can be any expression as long as it’s wrapped in brackets [].