现代JavaScript使用技巧之ES6中的简写语法

var book = {
  title: 'Modular ES6',
  author: 'Nicolas',
  publisher: 'O´Reilly'
}

var listeners = []
function listen() {}
var events = {
  listeners: listeners,
  listen: listen
}

var listeners = []
function listen() {}
var events = { listeners, listen }

var expertise = 'journalism'
var person = {
  name: 'Sharon',
  age: 27
}
person[expertise] = {
  years: 5,
  interests: ['international', 'politics', 'internet']
}

var expertise = 'journalism'
var person = {
  name: 'Sharon',
  age: 27,
  [expertise]: {
    years: 5,
    interests: ['international', 'politics', 'internet']
  }
}

var expertise = 'journalism'
var journalism = {
  years: 5,
  interests: ['international', 'politics', 'internet']
}
var person = {
  name: 'Sharon',
  age: 27,
  [expertise] // 这里会报语法错误
}

var grocery = {
  id: 'bananas',
  name: 'Bananas',
  units: 6,
  price: 10,
  currency: 'USD'
}
var groceries = {
  [grocery.id]: grocery
}

// ES5 写法
function getEnvelope(type, description) {
  var envelope = {
    data: {}
  }
  envelope[type] = description
  return envelope
}

// ES6 写法
function getEnvelope(type, description) {
  return {
    data: {},
    [type]: description
  }
}

var emitter = {
  events: {},
  on: function (type, fn) {
    if (this.events[type] === undefined) {
      this.events[type] = []
    }
    this.events[type].push(fn)
  },
  emit: function (type, event) {
    if (this.events[type] === undefined) {
      return
    }
    this.events[type].forEach(function (fn) {
      fn(event)
    })
  }
}

var emitter = {
  events: {},
  on(type, fn) {
    if (this.events[type] === undefined) {
      this.events[type] = []
    }
    this.events[type].push(fn)
  },
  emit(type, event) {
    if (this.events[type] === undefined) {
      return
    }
    this.events[type].forEach(function (fn) {
      fn(event)
    })
  }
}

function name(parameters) {
  // function body
}

var example = function (parameters) {
  // function body
}

// ES5
var timer = {
  seconds: 0,
  start() {
    setInterval(function(){
      this.seconds++
    }, 1000)
  }
}

timer.start()
setTimeout(function () {
  console.log(timer.seconds)
}, 3500)

> 0

// ES6
var timer = {
  seconds: 0,
  start() {
    setInterval(() => {
      this.seconds++
    }, 1000)
  }
}

timer.start()
setTimeout(function () {
  console.log(timer.seconds)
}, 3500)
// <- 3

function puzzle() {
  return function () {
    console.log(arguments)
  }
}
puzzle('a', 'b', 'c')(1, 2, 3)

function puzzle() {
  return ()=>{
    console.log(arguments)
  }
}
puzzle('a', 'b', 'c')(1, 2, 3)

var double = value => {
  return value * 2
}

var double = (value) => value * 2

var double = value => value * 2

// 正确的使用形式
var objectFactory = () => ({ modular: 'es6' })

[1, 2, 3].map(value => { number: value })
// <- [undefined, undefined, undefined]

[1, 2, 3].map(value => { number: value, verified: true })
// <- SyntaxError

[1, 2, 3].map(value => ({ number: value, verified: true }))
/* <- [
  { number: 1, verified: true },
  { number: 2, verified: true },
  { number: 3, verified: true }]
*/

var throwError = message => {
  throw new Error(message)
}
throwError('this is a warning')
<- Uncaught Error: this is a warning
  at throwError

[1, 2, 3, 4]
  .map(value => value * 2)
  .filter(value => value > 2)
  .forEach(value => console.log(value))
// <- 4
// <- 6
// <- 8

// 描述Bruce Wayne的对象
var character = {
  name: 'Bruce',
  pseudonym: 'Batman',
  metadata: {
    age: 34,
    gender: 'male'
  },
  batarang: ['gas pellet', 'bat-mobile control', 'bat-cuffs']
}

var pseudonym = character.pseudonym

var { pseudonym } = character

var { pseudonym, name } = character

var { pseudonym } = character, two = 2

var { pseudonym: alias } = character
console.log(alias)
// <- &#39;Batman&#39;

var { metadata: { gender } } = character

var { metadata: { gender: characterGender } } = character

console.log(character.boots)
// <- undefined
console.log(character[&#39;boots&#39;])
// <- undefined

var { boots } = character
console.log(boots)
// <- undefined

var { boots: { size } } = character
// <- Exception
var { missing } = null
// <- Exception

var nothing = null
var missing = nothing.missing
// <- Exception

var { boots = { size: 10 } } = character
console.log(boots)
// <- { size: 10 }

var { metadata: { enemy = 'Satan' } } = character
console.log(enemy)
// <- &#39;Satan&#39;

var { boots: footwear = { size: 10 } } = character

var { ['boo' + 'ts']: characterBoots } = character
console.log(characterBoots)
// <- true

var coordinates = [12, -7]
var [x, y] = coordinates
console.log(x)
// <- 12

var names = ['James', 'L.', 'Howlett']
var [ firstName, , lastName ] = names
console.log(lastName)
// <- &#39;Howlett&#39;

var names = ['James', 'L.']
var [ firstName = 'John', , lastName = 'Doe' ] = names
console.log(lastName)
// <- &#39;Doe&#39;

var left = 5, right = 7;
var aux = left
left = right
right = aux

var left = 5, right = 7;
[left, right] = [right, left]

function powerOf(base, exponent = 2) {
  return Math.pow(base, exponent)
}

var double = (input = 0) => input * 2

function sumOf(a = 1, b = 2, c = 3) {
  return a + b + c
}
console.log(sumOf(undefined, undefined, 4))
// <- 1 + 2 + 4 = 7

var defaultOptions = { brand: 'Volkswagen', make: 1999 }
function carFactory(options = defaultOptions) {
  console.log(options.brand)
  console.log(options.make)
}
carFactory()
// <- &#39;Volkswagen&#39;
// <- 1999

carFactory({ make: 2000 })
// <- undefined
// <- 2000

function carFactory({ brand = 'Volkswagen', make = 1999 }) {
  console.log(brand)
  console.log(make)
}
carFactory({ make: 2000 })
// <- &#39;Volkswagen&#39;
// <- 2000

function carFactory({
  brand = 'Volkswagen',
  make = 1999
} = {}) {
  console.log(brand)
  console.log(make)
}
carFactory()
// <- &#39;Volkswagen&#39;
// <- 1999

var car = {
  owner: {
    id: 'e2c3503a4181968c',
    name: 'Donald Draper'
  },
  brand: 'Peugeot',
  make: 2015,
  model: '208',
  preferences: {
    airbags: true,
    airconditioning: false,
    color: 'red'
  }
}

var getCarProductModel = ({ brand, make, model }) => ({
  sku: brand + ':' + make + ':' + model,
  brand,
  make,
  model
})
getCarProductModel(car)

function getCoordinates() {
  return { x: 10, y: 22, z: -1, type: '3d' }
}
var { x, y } = getCoordinates()

function random({ min = 1, max = 10 } = {}) {
  return Math.floor(Math.random() * (max - min)) + min
}
console.log(random())
// <- 7
console.log(random({ max: 24 }))
// <- 18

function splitDate(date) {
  var rdate = /(\d+).(\d+).(\d+)/
  return rdate.exec(date)
}
var [ , year, month, day] = splitDate('2015-11-06')

var matches = splitDate('2015-11-06')
if (matches === null) {
  return
}
var [, year, month, day] = matches

function join() {
  var list = Array.prototype.slice.call(arguments)
  return list.join(', ')
}
join('first', 'second', 'third')
// <- &#39;first, second, third&#39;

function join(...list) {
  return list.join(', ')
}
join('first', 'second', 'third')
// <- &#39;first, second, third&#39;

function join(separator, ...list) {
  return list.join(separator)
}
join('; ', 'first', 'second', 'third')
// <- &#39;first; second; third&#39;

var sumAll = (...numbers) => numbers.reduce(
  (total, next) => total + next
)
console.log(sumAll(1, 2, 5))
// <- 8

// ES5的写法
function sumAll() {
  var numbers = Array.prototype.slice.call(arguments)
  return numbers.reduce(function (total, next) {
    return total + next
  })
}
console.log(sumAll(1, 2, 5))
// <- 8

function cast() {
  return [...arguments]
}
cast('a', 'b', 'c')
// <- [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]

[...'show me']
// <- [&#39;s&#39;, &#39;h&#39;, &#39;o&#39;, &#39;w&#39;, &#39; &#39;, &#39;m&#39;, &#39;e&#39;]

function cast() {
  return ['left', ...arguments, 'right']
}
cast('a', 'b', 'c')
// <- [&#39;left&#39;, &#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;right&#39;]

var all = [1, ...[2, 3], 4, ...[5], 6, 7]
console.log(all)
// <- [1, 2, 3, 4, 5, 6, 7]

var list = ['a', 'b', 'c', 'd', 'e']
var first = list.shift()
var second = list.shift()
console.log(first)
// <- &#39;a&#39;

var [first, second, ...other] = ['a', 'b', 'c', 'd', 'e']
console.log(other)
// <- [&#39;c&#39;, &#39;d&#39;, &#39;e&#39;]

function multiply(left, right) {
  return left * right
}
var result = multiply(...[2, 3])
console.log(result)
// <- 6

function print(...list) {
  console.log(list)
}
print(1, ...[2, 3], 4, ...[5])
// <- [1, 2, 3, 4, 5]

var text = `This is my first template literal`

var text = `I'm "amazed" at these opportunities!`

var name = 'Shannon'
var text = `Hello, ${ name }!`
console.log(text)
// <- &#39;Hello, Shannon!&#39;

`The time and date is ${ new Date().toLocaleString() }.`
// <- &#39;the time and date is 8/26/2015, 3:15:20 PM&#39;

`The result of 2+3 equals ${ 2 + 3 }`
// <- &#39;The result of 2+3 equals 5&#39;

`This template literal ${ `is ${ 'nested' }` }!`
// <- &#39;This template literal is nested!&#39;

var escaped =
'The first line\n\
A second line\n\
Then a third line'

var concatenated =
'The first line\n' `
'A second line\n' `
'Then a third line'

var joined = [
'The first line',
'A second line',
'Then a third line'
].join('\n')

var multiline =
`The first line
A second line
Then a third line`

var book = {
  title: 'Modular ES6',
  excerpt: 'Here goes some properly sanitized HTML',
  tags: ['es6', 'template-literals', 'es6-in-depth']
}
var html = `<article>
  <header>
    <h1>${ book.title }</h1>
  </header>
  <section>${ book.excerpt }</section>
  <footer>
    <ul>
      ${
        book.tags
          .map(tag => `<li>${ tag }</li>`)
          .join(&#39;\n      &#39;)
      }
    </ul>
  </footer>
</article>`

<article>
  <header>
    <h1>Modular ES6</h1>
  </header>
  <section>Here goes some properly sanitized HTML</section>
  <footer>
    <ul>
      <li>es6</li>
      <li>template-literals</li>
      <li>es6-in-depth</li>
    </ul>
  </footer>
</article>

function getParagraph() {
  return `
    Dear Rod,

    This is a template literal string that's indented
    four spaces. However, you may have expected for it
    to be not indented at all.

    Nico
  `
}

function unindent(text) {
  return text
    .split('\n')
    .map(line => line.slice(4))
    .join('\n')
    .trim()
}

var text = String.raw`"\n" is taken literally.
It'll be escaped instead of interpreted.`
console.log(text)
// "\n" is taken literally.
// It'll be escaped instead of interpreted.

tag`Hello, ${ name }. I am ${ emotion } to meet you!`

tag(
  ['Hello, ', '. I am ', ' to meet you!'],
  'Maurice',
  'thrilled'
)

function tag(parts, ...values) {
  return parts.reduce(
    (all, part, index) => all + values[index - 1] + part
  )
}

var name = 'Maurice'
var emotion = 'thrilled'
var text = tag`Hello, ${ name }. I am ${ emotion } to meet you!`
console.log(text)
// <- &#39;Hello Maurice, I am thrilled to meet you!&#39;

function upper(parts, ...values) {
  return parts.reduce((all, part, index) =>
    all + values[index - 1].toUpperCase() + part
  )
}
var name = 'Maurice'
var emotion = 'thrilled'
upper`Hello, ${ name }. I am ${ emotion } to meet you!`
// <- &#39;Hello MAURICE, I am THRILLED to meet you!&#39;

function sanitized(parts, ...values) {
  return parts.reduce((all, part, index) =>
    all + sanitize(values[index - 1]) + part
  )
}
var comment = &#39;Evil comment<iframe src="http://evil.corp">
    </iframe>&#39;
var html = sanitized`<p>${ comment }</p>`
console.log(html)
// <- &#39;<p>Evil comment</p>&#39;

function isItTwo(value) {
  if (value === 2) {
    var two = true
  }
  return two
}
isItTwo(2)
// <- true
isItTwo(&#39;two&#39;)
// <- undefined

function isItTwo(value) {
  var two
  if (value === 2) {
    two = true
  }
  return two
}

{{{{{ var deep = 'This is available from outer scope.'; }}}}}
console.log(deep)
// <- &#39;This is available from outer scope.&#39;

let topmost = {}
{
  let inner = {}
  {
    let innermost = {}
  }
  // attempts to access innermost here would throw
}
// attempts to access inner here would throw
// attempts to access innermost here would throw

for (let i = 0; i < 2; i++) {
  console.log(i)
  // <- 0
  // <- 1
}
console.log(i)
// <- i is not defined

function printNumbers() {
  for (var i = 0; i < 10; i++) {
    setTimeout(function () {
      console.log(i)
    }, i * 100)
  }
}
printNumbers()

function printNumbers() {
  for (let i = 0; i < 10; i++) {
    setTimeout(function () {
      console.log(i)
    }, i * 100)
  }
}
printNumbers()

{
  console.log(name)
  // <- ReferenceError: name is not defined
  let name = &#39;Stephen Hawking&#39;
}

// 不会报错
function readName() {
  return name
}
let name = 'Stephen Hawking'
console.log(readName())
// <- &#39;Stephen Hawking&#39;

// 会报错
function readName() {
  return name
}
console.log(readName())
// ReferenceError: name is not defined
let name = 'Stephen Hawking'

function readName() {
  return name
}
console.log(readName())
// ReferenceError: name is not defined
let name

function readName() {
  return name
}
let name
console.log(readName())
// <- undefined

const pi = 3.1415
{
  const pi = 6
  console.log(pi)
  // <- 6
}
console.log(pi)
// <- 3.1415

const pi = 3.1415
const e // SyntaxError, missing initializer

const people = ['Tesla', 'Musk']
people = []
console.log(people)
// <- [&#39;Tesla&#39;, &#39;Musk&#39;]

const people = ['Tesla', 'Musk']
people.push('Berners-Lee')
console.log(people)
// <- [&#39;Tesla&#39;, &#39;Musk&#39;, &#39;Berners-Lee&#39;]

const people = ['Tesla', 'Musk']
var humans = people
humans = 'evil'
console.log(humans)
// <- &#39;evil&#39;

const frozen = Object.freeze(
  ['Ice', 'Icicle', 'Ice cube']
)
frozen.push('Water')
// Uncaught TypeError: Can't add property 3
// object is not extensible

var items = ['a', 'b', 'c']
var todo = checklist(items)
todo.check()
console.log(items)
// <- [&#39;b&#39;, &#39;c&#39;]
items = [&#39;d&#39;, &#39;e&#39;]
todo.check()
console.log(items)
// <- [&#39;d&#39;, &#39;e&#39;], would be [&#39;c&#39;] if items had been constant
function checklist(items) {
  return {
    check: () => items.shift()
  }
}