2023es6有哪些语法糖

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)
// <- 'Batman'

var { metadata: { gender } } = character

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

console.log(character.boots)
// <- undefined
console.log(character['boots'])
// <- 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)
// <- 'Satan'

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)
// <- 'Howlett'

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

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()
// <- 'Volkswagen'
// <- 1999

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

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

function carFactory({
  brand = 'Volkswagen',
  make = 1999
} = {}) {
  console.log(brand)
  console.log(make)
}
carFactory()
// <- 'Volkswagen'
// <- 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')// <- 'first, second, third'

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

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

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')// <- ['a', 'b', 'c']

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

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

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)// <- 'a'

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

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)// <- 'Hello, Shannon!'

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

`The result of 2+3 equals ${ 2 + 3 }`// <- 'The result of 2+3 equals 5'

`This template literal ${ `is ${ 'nested' }` }!`// <- 'This template literal is nested!'

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('\n      ')
      }
    </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)// <- 'Hello Maurice, I am thrilled to meet you!'

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!`
// <- 'Hello MAURICE, I am THRILLED to meet you!'

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

function isItTwo(value) {
  if (value === 2) {
      var two = true
  }  return two
}
isItTwo(2)// <- true
isItTwo('two')// <- undefined

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

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

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 = 'Stephen Hawking'
}

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

// 会报错
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 definedlet name

function readName() {
  return name
}
let nameconsole.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)// <- ['Tesla', 'Musk']

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

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

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)
// <- ['b', 'c']
items = ['d', 'e']
todo.check()
console.log(items)
// <- ['d', 'e'], would be ['c'] if items had been constant
function checklist(items) {
  return {
    check: () => items.shift()
  }
}