Con el fin de expresar el más sentido pésame de las personas de todas las etnias del país por el sacrificio de los mártires y compatriotas que murieron en la lucha contra la nueva epidemia de neumonía de la corona, el Consejo de Estado emitió hoy un anuncio, decidiendo realizar un duelo nacional. evento el 4 de abril de 2020. Durante este período, las embajadas y consulados nacionales y extranjeros bajaron sus banderas para llorar y se suspendieron las actividades de entretenimiento público a nivel nacional. A partir de las 10 de la mañana del 4 de abril, la gente de todo el país guardó un silencio de tres minutos, coches, trenes y barcos sonaron sus bocinas y sonaron las sirenas de la defensa aérea.
Que los muertos descansen en paz, que los vivos trabajen duro y que la patria sea próspera y fuerte.
ES6
1.
ECMAScript histórico y JS
ECMA son estándares, JS es la realización de
EMCAScript denominado ES.
Los navegadores de gama baja admiten principalmente ES3.1.
Los navegadores de gama alta admiten principalmente ES6
. 2. Versión histórica
1996.11, ES1.0 Netscape enviado JS a la organización ECMA, ES apareció oficialmente en
junio de 1998, ES2.0 se lanzó oficialmente en
diciembre de 1999, ES3.0 recibió un amplio apoyo en
2011.06, ES5.1 se convirtió en un estándar internacional ISO
2015.06, ES6.0 se lanzó oficialmente
3. Problemas de compatibilidad
ES6 es compatible con IE10 +, Chrome, Firefox, NodeJS,
conversión en línea de solución móvil o precompilación
Nuevas características
1. Variables
2. Funciones
3. Arrays
4. Cadenas
5. Orientado a objetos
6.
Promesa
7. Generador 8. Modularización
1.let y const
1. La var original
se puede declarar repetidamente y
no se puede modificar.
No hay un alcance a nivel de bloque
. 2. La let (variable) recién agregada
no se puede declarar repetidamente. Se
puede modificar.
Alcance a nivel de bloque
. 3. La nueva La constante agregada
no se puede declarar repetidamente. El bloque
no se puede modificar.
Alcance del nivel
2. Función de flecha
En términos sencillos, elimine la función y agregue =>
//原函数
function user() {
alter(你真帅)
}
//箭头函数
user () => {
alter(你真帅)
}
Hay casos
en los que solo hay un parámetro () que se puede guardar
si solo se devuelve una, {} se puede guardar
3. Parámetros ... args
Representa la matriz restante, pero debe estar en el último dígito
function show(a, b, ...args) {
console.log(a)
console.log(b)
console.log(args)
}
console.log(show(1, 2, 3, 4, 5))
El resultado es a = 1 b = 2 argumentos = [3,4,5]
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3)
El resultado es [1, 2, 3, 4, 5, 6] que es utilizar parámetros para representar la matriz
4. Tarea de deconstrucción
Los lados izquierdo y derecho de la estructura deben ser iguales, la
declaración y la asignación no se pueden separar
let [a, b, c] = [1, 2, 3]
console.log(a, b, c)
let {x, y, z} = {x: 1, y: 2, z: 3}
console.log(x, y, z)
let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8, 'str']
console.log(json, arr, num, str)
En términos sencillos, es asignar un valor en una oración, la estructura de los lados izquierdo y derecho debe ser igual, la matriz corresponde a la matriz, la cadena corresponde a la cadena, etc.
5. Matriz
1. Mapeo del método del mapa (un poco como el concepto de funciones en el primer capítulo de números altos)
let arr = [1,2,3]
let result = arr.map(function (item) {
return item*2
})
let result2 = arr.map(item=>item*2) // 简写
console.log(result)
console.log(result2)
let score = [50,60,70,80]
let result3 = score.map(item => item >= 60 ? '及格' : '不及格')
console.log(result3)
Resultado
[2,4,6]
[2,4,6]
['fallido', 'aprobado', 'aprobado', 'aprobado']
2. Reducir resumen (se puede sumar, factorial, etc.)
var arr = [1, 3, 5, 7]
var result = arr.reduce(function (prev, cur, index) {
// prev 上次回调结果，cur当前元素，index索引
console.log(prev, cur, index)
return prev+cur
})
console.log(result)
Una introducción a reducir que se siente bien
3. filter
var arr = [1, 2, 3, 4]
var result = arr.filter(item => item % 2 === 0)
console.log(result)
//输出结果为true的值
4. Para cada
iteración de bucle, todo el mundo está familiarizado con él, por lo que no lo describiré mucho.
6. Cuerda
comienza con
termina con
var url = 'http://www.baidu.com'
console.log(url.startsWith('http'))
console.log(url.endsWith('com'))
// 结果 true true
En pocas palabras, se utiliza para juzgar el principio y el final.
7 promesa
Conceptos asíncronos y síncronos
Asíncrono, cada operación no tiene nada que ver con múltiples operaciones al mismo tiempo, el código es complicado y
sincrónico, solo se puede hacer una cosa, el código es simple
Promise
se escribe de forma asincrónica y sincrónica, lo que mejora la legibilidad. Es muy conveniente para funciones de devolución de llamada anidadas de varias capas. En resumen, es una palabra, ¡increíble!
// 原始写法
step1(function (value1) {
step2(value1, function(value2) {
step3(value2, function(value3) {
step4(value3, function(value4) {
});
});
});
});
// Promise 写法
(new Promise(step1))
.then(step2)
.then(step3)
.then(step4);
El método Promise.all (promiseArray) envuelve
múltiples instancias de objeto Promise, genera y devuelve una nueva instancia de Promise
, cuando todas las instancias de promesa en la matriz de promesa se resuelven, este método devolverá
y pasará todos los resultados a la matriz de resultados
si hay alguna promesa en la matriz de promesa se rechaza, toda la llamada a Promise.all finalizará inmediatamente y se devolverá un nuevo objeto de promesa que se rechace.
var p1 = Promise.resolve(1),
var p2 = Promise.resolve(2),
var p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
console.log(results);
});
8.generador
Las funciones ordinarias son como los trenes. Las
funciones del generador que no se pueden detener son los taxis. Se pueden detener a la mitad. Use yield y next para ejecutar
//普通函数
function show() {
console.log('a')
console.log('b')
}
show()
//generator
function *show2() {
//注意函数前添加*号
console.log('1')
yield
console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next()
producir
Puede pasar parámetros y regresar
. El primer paso de parámetro next () no es válido, solo se usa para comenzar
function * show() {
console.log('1')
var a = yield
console.log('2')
console.log(a)
}
// yield 传参
var gen = show()
gen.next() // 1
gen.next() // 2 和 undefined 因为没有传参，yield没有返回值
var gen = show()
gen.next(10) // 1 第一次执行到yield，但没有执行赋值
gen.next(20) // 2 和 20
function* show2() {
console.log('1')
yield 10
console.log('2')
}
// yield 返回
var gen = show2()
var res1 = gen.next()
console.log(res1) // {
value: 10, done: false }
var res2 = gen.next()
console.log(res2)
// {
value: undefined, done: true } 最后的value需要return返回
9. Orientado a objetos
// 老版本
function User(name, pass) {
this.name = name
this.pass = pass
}
User.prototype.showName = function () {
console.log(this.name)
}
User.prototype.showPass = function () {
console.log(this.pass)
}
var u1 = new User('able', '1233')
u1.showName()
u1.showPass()
// 老版本继承
function VipUser(name, pass, level) {
User.call(this, name, pass)
this.level = level
}
VipUser.prototype = new User()
VipUser.prototype.constructor = VipUser
VipUser.prototype.showLevel = function () {
console.log(this.level)
}
var v1 = new VipUser('blue', '1234', 3)
v1.showName()
v1.showLevel()
新版面向对象
有了 class 关键字、构造器
class 里面直接加方法
继承，super 超类==父类
class User {
constructor(name, pass) {
this.name = name
this.pass = pass
}
showName() {
console.log(this.name)
}
showPass() {
console.log(this.pass)
}
}
var u1 = new User('able2', '111')
u1.showName()
u1.showPass()
// 新版本继承
class VipUser extends User {
constructor(name, pass, level) {
super(name, pass)
this.level = level
}
showLevel(){
console.log(this.level)
}
}
v1 = new VipUser('blue', '123', 3)
v1.showLevel()