ES6 núcleo detallada

ES6 núcleo detallada


En este capítulo usted aprenderá los siguientes puntos de conocimiento

  • módulo ES6
  • ES6 palabra clave

módulo ES6

Creemos que el aprendizaje a través de la parte delantera de los estudiantes escuchado acerca de la carga diferida módulo de front-end y de carga frontal, desde sus primeros conceptos de AMD y CMD de RequireJS y SeaJS en el módulo cargador frontal.

Y en donde el predeterminado AMD CMD por debajo de un módulo predeterminado

Especificación del módulo¿Por qué tirar de él hasta ahora? Porque vamos a aprender módulo ES6 está pre-cargado, por lo que entonces no tiene que declarar por adelantado, pero después se declara, en última instancia, se convierten compilado en la parte superior del código.

Bueno, entonces debemos buscar la forma de utilizarlo


  • defecto

    • importación: import num from './文件';
    • Exportar: export default num变量或常量;
  • declaración de importación y exportación

    • importación:import { name,age } from './文件';
    • exportación:export var age = 18; export {name};
  • Importar todo

    • import * as 变量名 from './文件'

    Aquí nos fijamos en el código y la aplicación de los resultados de las previsiones
    Aquí Insertar imagen Descripción

La recta final del programa (en el futuro podemos ver los resultados de la prueba en esta sección del proyecto)

[Imagen volcado en la cadena ... (IMG-9sKSatG7-1576756807803)]

El último módulo: Observamos, palabras clave de importación y exportación sólo puede ser escrito en el papel del dominio de nivel superior, pero no puede escribir en este bloque de código si {} de la clase, como razones Bueno ... bueno, está hablando en frente de la pre-cargado! ! ! !

palabra clave

const y dejar que todo el alcance a nivel de bloque, aparecen el problema más importante que tenemos que resolver la promoción tipo de variable, vamos a ver si puede resolver el problema?

[Imagen volcado en la cadena ... (IMG-M5kZWhkC-1576756807805)]

Haga clic en 1, cuando hacemos clic en:[Imagen volcado en la cadena ... (IMG-ladSrrvi-1576756807809)]

¡Cielos! Así, por esta razón, existen dos puntos:

  1. Después de sólo una variable i en el mundial, independientemente de dónde se puede visitar, por bucle se ejecuta, el valor de verdad es 5
  2. onclick asignación de código es una función, y la función se ejecuta sólo cuando se hace clic cuando se ejecuta dentro del bucle, que finalmente consigo mundial

Por lo que queremos resolver este problema, el punto central es que un li clic corresponde a diferentes variables como, por lo que nos dejaron en las mismas palabras clave para la circulación, con la presencia de cinco variables

[Imagen volcado en la cadena ... (IMG-rRwAffle-1576756807811)]

En resumen: la palabra clave let por declaración de variables, var relativamente hablando, no mejorará como una variable global

    if(true) {
        let a = 1;  // 这个a在外部无法使用
    }
  • const es alcance a nivel de bloque, la cantidad de (constante) no cambia el valor de la declaración
// 变量
let num = 1;
// 常量
const PI = 3.1415926;

función de la flecha

  • función relativa / función ES6 taquigrafía, esta función de la liga de flecha a la función superior

  • Al mismo tiempo también argumentos vendar

    var obj = {
        init:function() {
            var xx = () => {
    			// this是init的this,也就是obj对象
            }
        }
    }
  • Escrito muy fresco: (izquierda) un parámetro se puede guardar paréntesis, (a la derecha) de la línea de llaves de código se puede guardar

  • la función no tiene esta flecha, este se unirá a la función superior, no se puede utilizar como una función constructora

Flecha Letra función:

  • Sin argumentos:()=>{}
  • Línea de código para hacer el valor de retorno: () => 'abc'
  • Un número de parámetros: (n,m) => n + m
  • Un parámetro: n => n
  • Relativamente complicado un poco de la escritura: [Imagen volcado en la cadena ... (IMG-lctsEAwy-1576756807813)]

ES6 función de la taquigrafía

  • Con la propiedad del objeto
fn3() { //干掉了:function,用在对象的属性中
				console.log(this);
},

Hablando de esta función ES6 diferencia y la flecha abreviada función es que esto está ligado a la

asignación de deconstrucción

asignación de deconstrucción para facilitar la vida ah. . Look

  • let obj = { a:1,b:2,c:3};
    // 我们需要只获取其中a和b属性
    let a = obj.a; let b = obj.b; 
    // 也可以这样
    let { a,b } = obj; // 只获取其中部分key值
    let [a,,,d] = [1,2,3,4];  // a:1    d:4
    // 还可以用别名
    let { name:myName } = { name:'jack'};
    console.log(myName); // 'jack'
    

tres operadores

Hablando de ... muy silencioso? No! En la parte delantera también tiene este tipo de operadores, el nombre también es mucho, cortamos a través de la clasificación directa niebla!

¿Alguna vez has oído a ampliar el operador, una palabra para describirlo: abierta

var obj = { a:1,b:2 };
var newObj = { ...obj,c:3}; // { a:1,b:2,a:3 };
var arr = [1,2,3];
[4,5,...arr];  /// [4,5,1,2,3];

Tenga en cuenta que pertenece a ampliar la copia superficial del operador, es decir: cuando se expande una propiedad es un objeto, las referencias a objetos se le asignará al nuevo objeto, en lugar de volver a crear un objeto con la diferencia que modifican los atributos del objeto están afectando a muchos

Bueno! Por otra parte un "ingreso"! Este operador se llama parámetros variables, principalmente para resolver la llamada de función, el número de parámetros desconocidos del problema

function add (n1,n2,n3,n4) { // 如果还有n5、n6呢?
}
function calc (operator,...nums) {
    // operator 可以是+-*/
    let result = '';
    for(let i = 0; i < nums.length; i ++) {
        if (i === nums.length - 1)
          	result += nums[i];
        else
        	result += nums[i] + operator;
    }
    return eval(result);
}
calc('+',1,2,3,4,5,66,7,8);  // 96

Estos requisitos son calculadora simple de lograr, con énfasis vemos ... nums en una matriz, al mismo tiempo ... nums hay otros parámetros amigo, sólo en el último lugar.

Por último, escribir de nuevo

Para ayudar a que el aprendizaje sea fácil, eficiente y libre para que todos puedan compartir una gran cantidad de recursos para ayudarle a convertirse en una pila completa ingenieros, arquitectos e incluso el camino a través del desorden. Estamos aquí para recomendar una pila completa Intercambio de Aprendizaje círculo front-end: ?? 1018453829 bienvenida al intercambio en el grupo de discusión, el intercambio y el progreso común de aprendizaje.

Algunas personas sienten pasión por el aprendizaje, pero la falta de dirección, y en el vasto océano de conocimiento en la aparentemente interminable, en este momento lo más importante es saber qué tecnologías deben centrarse manos, evitar hacer un trabajo útil, la energía limitada y maximizar Estado de.

Por último deseo lo encuentro un problema y no saben cómo hacer que los programadores de aplicaciones para usuario, deseo a todos en el trabajo futuro y entrevistar a todo lo mejor.

Publicado 35 artículos originales · ganado elogios 64 · Vistas a 10000 +

Supongo que te gusta

Origin blog.csdn.net/tjx11111/article/details/103621228
Recomendado
Clasificación