Preguntas de la entrevista del nuevo método ES6

1.let const var comparación

• Las variables definidas por let y const no se promoverán, mientras que las variables definidas por var sí.
• let y const son alcances a nivel de bloque en JS
• let y const no permiten declaraciones repetidas (se producirán errores)
• Las variables definidas por let y const arrojarán un error si se usan antes de que se defina la declaración (forman una zona muerta temporal), pero var no lo hará.
• const declara una constante de solo lectura. Una vez declarado, el valor de la constante no se puede cambiar (si la declaración es un objeto, entonces la dirección de referencia del objeto no se puede cambiar)

2. Identificación de comillas inversas (`)

Identificado con un par de comillas inversas (`), se puede usar como una cadena ordinaria, también se puede usar para definir una cadena de varias líneas y también puede incrustar variables, expresiones o funciones js, variables, expresiones js o La función debe escribirse en $ {}.

var str = `abc
def
gh`;
console.log(str);
let name = "小明";
function a() {
    
    
    return "ming";
}
console.log(`我的名字叫做${
      
      name}，年龄${
      
      17+2}岁，性别${
      
      '男'}，游戏ID：${
      
      a()}`);

3. Parámetros predeterminados de la función

ES6 proporciona valores predeterminados para los parámetros. Este parámetro se inicializa cuando se define la función, de modo que se puede utilizar cuando no se pasa el parámetro.

function A(a,b=1){
    
       
 console.log(a+b);
}
A(1);    //2
A(2+3);  //5

4. Función de flecha

En es6, se proporciona una forma concisa de escribir funciones, que llamamos "funciones de flecha".

Escritura: nombre de la función = (parámetro formal) => {……} Cuando solo hay una expresión en el cuerpo de la función, {} y return se pueden omitir, y cuando solo hay un parámetro formal en el cuerpo de la función, () se puede omitir.

Características: Esto en la función de flecha siempre apunta a la función más cercana a esta cuando se definió la función de flecha, y si no hay una función más cercana, apunta a la ventana.

// Omite la redacción

var people = name => 'hello' + name;
 
var getFullName = (firstName, lastName) => {
    
    
    var fullName = firstName + lastName;
    return fullName;
} 

5. Taquigrafía de atributos

• Abreviatura de atributos. ES6 le permite escribir variables directamente en el objeto. En este momento, el nombre del atributo es el nombre de la variable y el valor del atributo es el valor de la variable.

var foo = 'bar';var baz = {
    
    foo};  //等同于  var baz = {foo: foo}

6. Método abreviado

Taquigrafía de método. Omita los dos puntos y la palabra clave de función.

var o = {
    
    
  method() {
    
    
    return "Hello!";
  }
};
 
// 等同于
var o = {
    
    
  method: function() {
    
    
    return "Hello!";
  }
};

7. Método Object.keys (), obtenga todos los nombres de atributos o nombres de métodos del objeto

• El método Object.keys () obtiene todos los nombres de propiedad o nombres de método del objeto (sin incluir el contenido del prototipo) y devuelve una matriz.

 var obj={
    
    name: "john", age: "21", getName: function () {
    
     alert(this.name)}};
console.log(Object.keys(obj));    // ["name", "age", "getName"]
console.log(Object.keys(obj).length);    //3
 
console.log(Object.keys(["aa", "bb", "cc"]));    //["0", "1", "2"]
console.log(Object.keys("abcdef"));    //["0", "1", "2", "3", "4", "5"]

8.Object.assign () Las propiedades y métodos del objeto original se fusionan en el objeto de destino

Object.assign (), el método de asignación fusiona las propiedades y métodos de varios objetos originales en el objeto de destino. Puede recibir varios parámetros, el primer parámetro es el objeto de destino y los siguientes son los objetos de origen.

var target  = {
    
    }; //目标对象
var source1 = {
    
    name : 'ming', age: '19'}; //源对象1
var source2 = {
    
    sex : '女'}; //源对象2
var source3 = {
    
    sex : '男'}; //源对象3，和source2中的对象有同名属性sex
Object.assign(target,source1,source2,source3);
 
console.log(target);    //{name : 'ming', age: '19', sex: '男'}

9.para ... de bucle

Es una forma unificada de atravesar todas las estructuras de datos. El rango que for ... of loop puede usar incluye matrices, estructuras Set y Map, algunos objetos similares a matrices (como el objeto de argumentos, el objeto DOM NodeList), el objeto Generator y la cadena.

var arr=["小林","小吴","小佳"];
for(var v of arr){
    
    
    console.log(v);	
}
//小林 
//小吴 
//小佳

10.importación y exportación

En el estándar ES6, JavaScript admite módulos de forma nativa. De esta manera, el código JS se divide en pequeños bloques con diferentes funciones para modularización, y los códigos para diferentes funciones se escriben en diferentes archivos. Cada módulo solo necesita exportar la parte de interfaz común, y luego se puede usar en otros lugares importando el módulo.

La exportación se utiliza para generar la interfaz de este módulo (un archivo puede entenderse como un módulo) variables.

La importación se utiliza para cargar otro módulo con interfaz de exportación en un módulo.

Los comandos de importación y exportación solo pueden estar en la parte superior del módulo, no en el bloque de código.

//导入部分
//全部导入
import Person from './example'
 
//将整个模块所有导出内容当做单一对象，用as起别名
import * as example from "./example.js"
console.log(example.name)
console.log(example.getName())
 
//导入部分
import {
    
     name } from './example'
 
//导出部分
// 导出默认
export default App
 
// 部分导出
export class User extend Component {
    
    };

11 objeto de promesa

Promise es una solución para programación asíncrona que expresa operaciones asíncronas en un proceso de operación síncrona, evitando funciones de callback anidadas.

Tiene tres estados: pendiente-en curso, resuelto-completado, rechazado-fallido.

El constructor Promise contiene un parámetro y una devolución de llamada con dos parámetros: resolver y rechazar. Realice algunas operaciones en la devolución de llamada (como asincrónica), si todo es normal, llame a resolver, de lo contrario llame a rechazar. Puede llamar al método promise.then () para el objeto de promesa que se ha instanciado, pasando los métodos de resolución y rechazo como devoluciones de llamada. El método then () recibe dos parámetros: onResolve y onReject, que representan el éxito o el fracaso del objeto de promesa actual.

var promise = new Promise((resolve, reject) => {
    
    
    var success = true;
    if (success) {
    
    
        resolve('成功');
    } else {
    
    
        reject('失败');
    }
}).then(
    (data) => {
    
     console.log(data)},
    (data) => {
    
     console.log(data)}
)

Proceso de ejecución de promesas

setTimeout(function() {
    
    
    console.log(0);
}, 0);
var promise = new Promise((resolve, reject) => {
    
    
    console.log(1);
    setTimeout(function () {
    
    
        var success = true;
        if (success) {
    
    
            resolve('成功');
        } else {
    
    
            reject('失败');
        }
    },2000);
}).then(
    (data) => {
    
     console.log(data)},
    (data) => {
    
     console.log(data)}
);
console.log(promise);	//<pending> 进行中
setTimeout(function () {
    
    
    console.log(promise);	//<resolved> 已完成
},2500);
console.log(2);
 
//1
//Promise {<pending>}
//2
//0
//成功
//Promise {<resolved>: undefined}

12. Desestructuración de tareas

ES6 permite extraer valores de matrices y objetos y asignar valores a variables de acuerdo con un patrón determinado, que se denomina Desestructuración.

• Desestructuración y asignación de arreglos

El valor de la matriz se analizará automáticamente en la variable correspondiente que recibe el valor. La asignación de desestructuración de la matriz debe ser una correspondencia uno a uno. Si no hay correspondencia, no está definida

var [name, pwd, sex]=["小周", "123456", "男"];
console.log(name) //小周
console.log(pwd)//123456
console.log(sex)//男

• Asignación de desestructuración de objetos

Existe una diferencia importante entre la desestructuración de objetos y las matrices. Los elementos de la matriz están ordenados y el valor de la variable está determinado por su posición; y las propiedades del objeto no tienen orden, y la variable debe tener el mismo nombre que la propiedad para obtener el valor correcto.

var obj={
    
    name:"小周", pwd:"123456", sex:"男"}
var {
    
    name, pwd, sex}=obj;
console.log(name) //小周
console.log(pwd)//123456
console.log(sex)//男
 

13.configurar la estructura de datos (se puede utilizar para una rápida deduplicación)

Establecer estructura de datos, similar a una matriz. Todos los datos son únicos y no hay valores duplicados. En sí mismo es un constructor.

Propiedades y métodos:

tamaño La longitud de los datos
add () agrega un valor y devuelve la estructura Set en sí.
delete () elimina un valor y devuelve un valor booleano que indica si la eliminación fue exitosa.
has () encuentra un dato y devuelve un valor booleano.
clear () Borra todos los miembros, sin valor de retorno.

var arr = [1,1,2,2,3];
var s = new Set(arr);
console.log(s);	//{1, 2, 3}
 
console.log(s.size);	//3
console.log(s.add(4));	//{1, 2, 3, 4}
console.log(s.delete(4));	//true
console.log(s.has(4));	//false
s.clear();

Operador de propagación operador de propagación (...)

Convertir cadena en matriz

var str="abcd";
console.log([...str]) // ["a", "b", "c", "d"]

Convierta la colección en una matriz

var sets=new Set([1,2,3,4,5])
console.log([...sets]) // [1, 2, 3, 4, 5]

Fusión de dos matrices

var a1=[1,2,3];
var a2=[4,5,6];
console.log([...a1,...a2]); //[1, 2, 3, 4, 5, 6]

En la función, se usa para reemplazar el parámetro de argumentos
resto parámetro ... nombre de variable

El resto del parámetro es una matriz y no puede haber más parámetros detrás de él, de lo contrario, se informará un error

function func(...args){
    
    
    console.log(args);//[1, 2, 3, 4]
}
func(1, 2, 3, 4);
 
function f(x, ...y) {
    
    
    console.log(x);
    console.log(y);
}
f('a', 'b', 'c');     //a 和 ["b","c"]
f('a')                //a 和 []
f()                   //undefined 和 []
 

• Eliminar ciertos elementos

    //数组
    const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest) //2,3,4,5
    //对象
    const user = {
    
    
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const {
    
     username, ...rest } = user
    console.log(rest) //{"address": "peking", "age": 19, "gender": "female"

15. Nuevo método de cadena

// 1. includes () devuelve un valor booleano: indica si se encuentra el carácter del parámetro

      let str = 'hahay'
      console.log(str.includes('y')) // true

// 2. repeat (): Consigue que la cadena se repita n veces

      let s = 'he'
      console.log(s.repeat(3)) // 'hehehe'

// 3. startsWith () devuelve un valor booleano: si la cadena del parámetro está al principio de la cadena fuente

      console.log("lxy".startsWith('l'));//true
      console.log("lxy".startsWith('x'));//false

// 4. endsWith () devuelve un valor booleano, que indica si la cadena del parámetro está al final de la cadena fuente

      console.log("lxy".endsWith('y'));//true                    
      console.log("lxy".endsWith('x'));//false