Aprenda seis, una breve introducción a las nuevas funciones de ES2015

Hay cuatro categorías de funciones nuevas:

1. Resolver algunos problemas o deficiencias en la gramática original.

2. Mejora la gramática original

3. Objetos completamente nuevos, métodos completamente nuevos, funciones completamente nuevas

4. Nuevos tipos de datos y estructuras de datos

 

1. Let, Const y alcance a nivel de bloque

Antes de ES2015, solo había alcance global y alcance de función. Ahora es posible declarar Let y Const como variables definidas en el alcance de nivel de bloque y no se declararán por adelantado.

for (let i = 0; i < 3; i++) {
  let i = 'foo'
  console.log(i)
}

2. Deconstrucción de matrices y objetos

Podemos deconstruir matrices y objetos como este:

const [foo, bar, baz] = arr

const { name } = obj

Tres, cadena de plantilla

La cadena de plantilla (`) admite saltos de línea e inserta algunos parámetros a través de la expresión $ {}.

function myTagFunc (strings, name, gender) {
  // console.log(strings, name, gender)
  const sex = gender ? 'man' : 'woman'
  return strings[0] + name + strings[1] + sex + strings[2]
}

const result = myTagFunc`hey, ${name} is a ${gender}.`

También podemos definir una etiqueta para él como esta, y ejecutará este método para reemplazar el contenido.

 

Cuarto, algunos métodos de extensión de cadena

const message = 'Error: foo is not defined.'

console.log(
  message.startsWith('Error')
  message.endsWith('.')
  message.includes('foo')
)

Cinco, valor predeterminado del parámetro de función

Podemos pasar un valor predeterminado a través de la función (valor = verdadero) {}, y los parámetros con valores predeterminados deben colocarse lo más atrás posible.

 

Seis, parámetros restantes

Podemos pasar function (value, ... args) {} para pasar un parámetro restante, este parámetro solo se puede usar una vez, y solo en el último.

 

Siete, expande la matriz

const arr = [1,2,3]; consoel.log (... arr); // 1 2 3

 

Ocho, función de flecha

Función de función ordinaria función () () Función de flecha () => (); v => v + 1;

Cuando solo hay una oración, {} se puede omitir, y cuando {} no se agrega, esta oración se devolverá como resultado.

Además, la función de flecha no tiene esta declaración y continuará usando el exterior este punto.

 

Nueve, la mejora de literales de objeto en ES2015

const bar = '345'
const obj = {
  foo: 123,
  // bar: bar
  // 属性名与变量名相同，可以省略 : bar
  bar,
  // method1: function () {
  //   console.log('method111')
  // }
  // 方法可以省略 : function
  method1 () {
    console.log('method111')
    // 这种方法就是普通的函数，同样影响 this 指向。
    console.log(this)
  },
  // Math.random(): 123 // 不允许
  // 通过 [] 让表达式的结果作为属性名
  [Math.random()]: 123
}

Diez, métodos de extensión de objetos asignados y es

const obj = { name: 'global obj' };
const funObj = Object.assign({},obj);

console.log(
  0 == false              // => true
  0 === false             // => false
  +0 === -0               // => true
  NaN === NaN             // => false
  Object.is(+0, -0)       // => false
  Object.is(NaN, NaN)     // => true
)

11. Objeto proxy

const person = {
  name: 'zce',
  age: 20
}

const personProxy = new Proxy(person, {
  get (target, property) {
    console.log('get', property)
    return target[property]
  },
  set (target, property, value) {
    console.log('set', property, value)
    target[property] = value
  }
})

personProxy.name = 'jack'

console.log(personProxy.name)   

Se usa para monitorear la modificación de la propiedad del objeto y el comportamiento de lectura

 

Doce, clase estática Reflexionar

Reflect tiene un total de trece métodos, clasificando algunas operaciones de objetos relativamente dispersos, que se utilizan para reemplazar algunos de los métodos anteriores. Aquí hay tres ejemplos más utilizados.

const obj = {
  name: 'zce',
  age: 18
}

// console.log('name' in obj)
// console.log(delete obj['age'])
// console.log(Object.keys(obj))

console.log(Reflect.has(obj, 'name'))
console.log(Reflect.deleteProperty(obj, 'age'))
console.log(Reflect.ownKeys(obj))

13. Promesa

Se utiliza para métodos asincrónicos más concisos y convenientes que se pueden llamar en cadena.

 

14. La clase define una clase

class Person {
    //构造函数
    constructor (name) {
      this.name = name
    }
    static of (name){
        return new Person(name)
    }
    say () {
      console.log(`hi, my name is ${this.name}`)
    }
 }

15. Herencia de clases

class MyPromise extends Promise{
    //super代表父类
    super.resolve()
}

16. Establecer estructura de datos

Se usa comúnmente para eliminar duplicados en la matriz de preguntas de la entrevista const result = [... new Set ([1,1,1,1,2,3,4])] // [1,2,3,4]

const s = new Set()
s.add(1).add(2).add(3).add(4).add(2)
s.forEach(i => console.log(i))
console.log(s.size)
console.log(s.has(100))
console.log(s.delete(3))
s.clear()

17. Estructura de datos cartográficos

El mapa es una colección de pares clave-valor en el verdadero sentido. Puede usar cualquier tipo de valor como clave, mientras que los objetos solo pueden usar cadenas como claves.

const m = new Map()
const tom = { name: 'tom' }
m.set(tom, 90)
console.log(m)
console.log(m.get(tom))

// m.has()
// m.delete()
// m.clear()

m.forEach((value, key) => {
  console.log(value, key)
})

Diecisiete, generador de funciones del generador

Use la función * foo () {}, rendimiento como punto de interrupción en lugar de retorno, y luego use foo.next () para continuar la ejecución.

La siguiente es una solución asincrónica con Promise:

function ajax (url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.responseType = 'json'
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response)
      } else {
        reject(new Error(xhr.statusText))
      }
    }
    xhr.send()
  })
}

function * main () {
  try {
    const users = yield ajax('/api/users.json')
    console.log(users)

    const posts = yield ajax('/api/posts.json')
    console.log(posts)

    const urls = yield ajax('/api/urls.json')
    console.log(urls)
  } catch (e) {
    console.log(e)
  }
}

function co (generator) {
  const g = generator()

  function handleResult (result) {
    if (result.done) return // 生成器函数结束
    result.value.then(data => {
      handleResult(g.next(data))
    }, error => {
      g.throw(error)
    })
  }

  handleResult(g.next())
}

co(main)

18. Tipo de datos de símbolo

El séptimo tipo de datos después de String, Number, Null, Undefined, Boolean y Object

Puede evitar conflictos de nombres de propiedad y objetos extendidos. Dos símbolos nunca serán iguales. Puede usar símbolos para agregar claves únicas a los objetos para realizar miembros privados de objetos.

const name = Symbol()
const person = {
  [name]: 'zce',
  say () {
    console.log(this[name])
  }
}

Diecinueve, iterador iterador

Declarar un iterador en un objeto puede lanzar una interfaz transversal al exterior. Este es el principio de for ... of, podemos declarar este iterador en cualquier objeto, y luego dar un método que queremos exponer un método de bucle. Un generador de funciones de generador se monta internamente y externamente, se implementa mediante un método loop + next ().

const todos = {
  life: ['吃饭', '睡觉', '打豆豆'],
  learn: ['语文', '数学', '外语'],
  work: ['喝茶'],
  [Symbol.iterator]: function * () {
    const all = [...this.life, ...this.learn, ...this.work]
    for (const item of all) {
      yield item
    }
  }
}

for (const item of todos) {
  console.log(item)
}