La composición de JavaScript:
ECMAScript **** es un lenguaje de programación de secuencias de comandos estandarizado por ECMA-262 por Ecma International (anteriormente conocida como Asociación Europea de Fabricantes de Computadoras , el nombre en inglés es (Asociación Europea de Fabricantes de Computadoras). Este lenguaje se usa ampliamente en la World Wide Web. A menudo se le llama JavaScript o JScript, por lo que puede entenderse como un estándar de javascript, pero en realidad los dos últimos son implementaciones y extensiones del estándar ECMA-262.
BOM (modelo de objetos del navegador) se refiere al modelo de objetos del navegador , que permite que JavaScript "hable" con el navegador. El modelo de objetos del navegador es el objeto Ventana.
DOM (Modelo de objeto de documento) se refiere al modelo de objeto de documento , a través del cual se puede acceder a todos los elementos del documento HTML. Modelo de objeto de documento Objeto de documento HTML.
1. Introducción a la composición de javaScript:
Incluyendo: ECMAScript, DOM, BOM
1. ECMAScript: sintaxis principal de JavaScript, independiente de la plataforma
Por ejemplo: definir variables, if, switch, for, array Api, string API, regular Api ...
2. DOM: (Modelo de objeto de documento) para operaciones de etiquetas del navegador como: obtener id, obtener nombre de clase, obtener nombre de etiqueta
Nota: Opere el DOM real, genere redibujo y reflujo -> solo entonces conduce al DOM virtual重绘：主要指页面颜色的改变，不影响DOM的空间变化 color,background 回流：指页面元素的尺寸(width,padding,height,margin)，位置的变化:left,top,bottom,right等 tranform:translateX(300px) 重绘未必引起回流，但回流一定引起重绘3.BOM: (Modelo de objetos del navegador) principalmente para operaciones de API relacionadas con el navegador
history: history.go (), history.back () pusState, popState, replaceState
navigator: relacionado con la información del sistema del navegadornavigator.userAgent 参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator location:主要获取浏览器地址栏相关的信息 location.search location.href location.hash 参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Location
ECMA6 / 7/8… Nuevas características
ES6 ES2015… ES11 ES2020
Conozca el progreso más reciente de ES6 / 7/8/9 /: https://github.com/tc39/proposals/blob/master/finished-proposals.md
let y const: el punto
let define variables
const define constants
Entrevistador: 1. Cuéntame sobre la diferencia entre let y var
Similitud: todos definen variables
Diferencias:
1. Si hay promoción variable, var tiene promoción variable, let no
2. Si es posible definir repetidamente var permite la definición repetida de variables, let no permite la definición repetida
3. Si hay alcance a nivel de bloque {}
Alcance global: definido fuera de la función El alcance del alcance
local: el alcance definido dentro del
alcance a nivel de bloque de funciones : el alcance definido entre llaves {}
2. Háblame de la diferencia entre let y const
let define la variable const define la constante, que no se puede modificar. Si desea modificarla, defina la constante en forma de objeto. De esta manera, puede modificar las propiedades del objeto.
Símbolo: el nuevo tipo de dato básico
número, cadena, booleano en ES6 , nulo, indefinido, símbolo (nuevo en ES6)símbolo: el valor definido es único
Los valores de los dos tipos de símbolos nunca son iguales
例如：
var s1=Symbol()
var s2=Symbol()
s1=== s2
false
El operador de propagación (...) El
operador de propagación (también conocido como operador de propagación) tiene dos funciones:
1.将数组转换成数据列表 [a,b,c,d]--->a,b,c,d
例如：
var arr1=[666,777,888]
var arr2=['hello','vuejs']
var result=[...arr1,...arr2]
2. Convierta la lista de datos en una matriz a, b, c, d -> [a, b, c, d]
3. Expande el objeto
var result={
...obj1,...obj2}
或
result=Object.assign({
},obj1,obj2)
例如：
function sum1(str,...args) {
var result=0;
for(var i=0;i<args.length;i++) {
result+=args[i]
}
return result;
}
sum1('请输入',20,30,40)
class类
定义一个类：
class Person {
constructor(a,b) {
//构造器
this.属性=a
}
方法1() {
}
方法2() {
}
方法3() {
}
}
继承一个类：
class Child extends Person {
constructor(a,b) {
super() //代表父类
//构造器
this.属性=a
}
方法1() {
}
方法2() {
}
方法3() {
}
}
set y map:
set: entendido como una matriz única
Convierta los datos del tipo de conjunto en una matriz:
var s = new Set () Array. de (s) 或 [… s]
var s = new Set () s.add () s.has () s.delete () s.size
Por ejemplo: deduplicación de matrices:
var arr=[3,34,23,2,2,23,23,3,34,34,34,45]
[...new Set(arr)]
map: Se entiende como un objeto, lo que realza el tipo de datos de la clave del objeto. Anteriormente, solo podía ser una cadena. ¡Ahora las propiedades del objeto pueden ser cualquier tipo de datos!
{
"name":'jack',
'10':'abc',
'undefined':999
}
var m1=new Map()
m1.set(属性名,值) //设置
m1.get(属性名) //获取
m1.delete(属性名) //删除
//遍历Map类型获取所有值
for(var [key,value] of m1) {
console.log(key)
console.log(value)
}
Promesa: el punto
1.用于处理回调地狱的异步解决方案
具体实现：
function waiting() {
return new Promise((resolve,reject)=>{
setTimeout(function() {
//console.log(2)
reject('哈哈')
},2000)
})
}
waiting().then(res=>{
console.log(1)
console.log('res:',res)
console.log(3)
}).catch(error=>{
console.log('error:',error)
})
.then
.catch
.race
.finally
Promise.all([waiting(),waiting2(),waiting3()])
.then(res=>{
}).catch(res=>{
})
enfoque async / await (ES2017)
Ejecución en serie: el primer proceso asíncrono debe ejecutarse primero, el primer resultado asíncrono debe devolverse a la segunda función asíncrona y luego debe ejecutarse
el segundo proceso de operación asíncrona
//第一个函数
function waiting() {
return new Promise((resolve,reject)=>{
//我这里只是用setTimeout来模拟axios,
setTimeout(function() {
resolve('第二个接口返回')
},2000)
})
}
//第二个函数
function waiting2() {
return new Promise((resolve,reject)=>{
//我这里只是用setTimeout来模拟axios,
setTimeout(function() {
reject('第二接口返回')
},2000)
})
}
async function handleFn() {
console.log(1)
//串行执行，先等待第一个函数返回
let res=await waiting()
console.log('res:',res)
//再等待第二个函数返回
let res2=await waiting2(res)
console.log(res2)
}
并行：两个接口同时执行
function waiting() {
return new Promise((resolve,reject)=>{
//我这里只是用setTimeout来模拟axios,
setTimeout(function() {
resolve('第二个接口返回')
},2000)
})
}
function waiting2() {
return new Promise((resolve,reject)=>{
//我这里只是用setTimeout来模拟axios,
setTimeout(function() {
reject('第二接口返回')
},2000)
})
}
async function handleFn() {
console.log(1)
//并发执行，waiting(),waiting2()两个接口都成功返回才返回结果
let res=await Promise.all([waiting(),waiting2()])
console.log('res:',res)
console.log('end')
}
handleFn().catch(res=>{
console.log('error:',res)
})