Nuevas funciones de ECMAScript 2

Descripción del artículo: Este artículo son las notas y la experiencia del campo de entrenamiento frontal de Regao. Si hay algo mal, espero que puedas señalarlo y enseñar, ¡gracias!

Uno, método de extensión de cadena ES2015

• comienza con()
• .termina con()
• .incluye ()

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

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

2. Valores predeterminados del parámetro ES2015

function foo(enable = true){//在形参的后面通过等号设置一个默认值，此时所设置的默认值只会在调用时没有传递实参或者实参传递进来是一个undefined时才会被使用
    enable = enable === undefined ? true:enable
    console.log('foo invoked - enable:')
    console.log(enable)
}

foo(true)

Si hay varios parámetros formales, el parámetro formal que establece el valor predeterminado debe colocarse al final de la lista de parámetros.

function foo(bar,enable = true){
    enable = enable === undefined ? true:enable
    console.log('foo invoked - enable:')
    console.log(enable)
}

3. Parámetros restantes de ES2015

• Para el número desconocido de parámetros, el objeto de argumentos se utilizó para recibir el objeto de argumentos, que es una pseudoarreglo

function foo(){
    console.log(arguments)//对于未知个数的参数，以前使用arguments对象接收，arguments对象是伪数组
}
console.log(1,2,3,4)

• Parámetros restantes: ... args, en este momento el parámetro formal recibirá todos los parámetros reales de la posición actual del parámetro en forma de una matriz, que solo puede aparecer en el último dígito de la lista de parámetros formales, y solo puede aparecer una vez

function foo(first,...args){//剩余参数：...args ,此时形参就会以数组的方式接收当前这个参数位置开始往后所有的实参,只能出现在形参列表的最后一位，而且只能出现一次
    console.log(args)
}
console.log(1,2,3,4)

Cuarto, expanda la matriz

const arr = ['foo','bar','baz']
console.log.apply(console,arr)//apply()可以以数组的方式接收我们的实参列表，apply方法里第一个参数是this指向，为console对象 //foo bar baz
console.log(...arr)//...arr 自动把数组里每个成员按照次数传递到列表当中

Cinco, función de flecha

• El lado izquierdo de la flecha es la lista de parámetros, varios parámetros están entre paréntesis y el lado derecho es el cuerpo de la función, que devuelve el valor del cuerpo de la función después de la ejecución.

function inc(number){
    return number + 1
}
可转化为：
const inc = (n,m) => n+1//箭头左边是参数列表,多个参数则用括号括起来，右边是函数体，返回函数体执行完的值

• Si hay varias declaraciones de función en el cuerpo de la función, envuélvalas entre llaves y use return para devolver el valor de retorno

const inc = (n,m) => { //若函数体内有多个函数语句，则用花括号包起来,返回值则需要用return返回
    console.log('inc invoked')
    return n + 1
}
console.log(inc(100))

Seis, función de flecha y esto

• La función de flecha no cambia la dirección de este

// 箭头函数与this
const person = {
    name:'tom',
    sayHi:function(){
        console.log(`hi,my name is ${this.name}`)
    }
}

person.sayHi()// hi,my name is tom
//======================================================================
const person = {
    name:'tom',
    sayHi:() => {// 箭头函数当中没有this的机制，所以不会改变this的指向，在箭头函数的外面this是什么，那里面拿到的this就是什么
        console.log(`hi,my name is ${this.name}`)
    }
}

person.sayHi() //hi,my name is undefined

const person = {
    name:'tom',
    sayHi:() => {
        console.log(`hi,my name is ${this.name}`)
    },
    sayHiAsync:function(){
        setTimeout(function (){
            console.log(this.name)//函数内部无法拿到当前作用域的this，因为这个函数在setTimeout里面，最终会放在全局对象上被调用，所以无法拿到当前作用域的this对象，拿到的全局对象
        },1000)
    }
}

person.sayHiAsync()// hi,my name is undefined
//==============================================================
const person = {
    name:'tom',
    sayHi:() => {
        console.log(`hi,my name is ${this.name}`)
    },
    sayHiAsync:function(){
        const _this = this
        setTimeout(function (){
            console.log(_this.name)//使用闭包的机制拿到当前作用域的this
        },1000)
    }
}

person.sayHiAsync()// tom

const person = {
    name:'tom',
    sayHi:() => {
        console.log(`hi,my name is ${this.name}`)
    },
    sayHiAsync:function(){
        setTimeout(() =>{
            console.log(this.name)//有了箭头函数就不用使用闭包机制这么麻烦了，因为箭头函数当中的this始终指向当前作用域里面的this
        },1000)
    }
}

person.sayHiAsync()//tom

Seven, mejora literal del objeto ES2015

• Si el nombre de la variable es coherente con el nombre del atributo que se agregará al objeto, puede omitir los dos puntos y el siguiente nombre de variable

const bar = '345'
const obj = {
    foo:123,
    //bar:bar     //若变量名与要添加到对象当中的属性名一致的话，则可以省略调冒号和后面的变量名
    bar
}

console.log(obj)//{foo:123,bar:'345'}

const obj = {
    foo:123,
    // method1:function(){  //可以去掉冒号和function
    //     console.log('methiod11')
    // }
    method1(){
        console.log('method111')
        console.log(this)
    },
    [1+1]:123//把属性名位置用一对方括号包起来，里面可以使用任意表达式，这个表达式的执行结果会作为这个对象的属性的属性名
}
console.log(obj)
obj.method1()//{foo:123,bar:'345',method1:[Function:method1]} 打印的是调用该方法的当前对象

8. Métodos de extensión de objetos de ES2015 (object.assign (), Object.is ())

//多个源对象中的属性复制到一个目标对象中，若对象之间有相同的属性，那么源对象的属性就会覆盖掉目标对象的属性，源对象和目标对象都是普通的对象，源对象里面取，往目标对象里面放
const source1 = {
    a:123,
    b:123
}

const source2 = {
    b:789,
    d:789
}
const target = {
    a:456,
    c:789
}

const result = Object.assign(target,source1,source2)// a属性被覆盖掉了，用后面对象的属性覆盖第一个对象

console.log(target)//{ a: 123, c: 789, b: 789, d: 789 }
console.log(result === target) //true 

function func(obj){
    obj.name = 'func obj'
    console.log(obj)
}

const obj = {name:'global obj'}

func(obj)//{ name: 'func obj' } 
console.log(obj)//{ name: 'func obj' }//方法外部的对象数据被修改
//==================================================

//若是希望函数内部修改对象，使用objectassign方法，把对象复制到全新的空对象上面

function func(obj){
    const funcObj = Object.assign({},obj)
    funcObj.name = 'func obj'//此时内部的对象是全新的对象，它的修改不会影响外部的对象
    console.log(funcObj)
}

const obj = {name:'global obj'}

func(obj)//{ name: 'func obj' }
console.log(obj)//{ name: 'global obj' }

• Object.is() Método para determinar si dos valores son el mismo valor.

Object.is() Método para determinar si dos valores son el mismo valor . Los dos valores son iguales si se cumplen las siguientes condiciones:

• Todos undefined
• Todos null
• Todo  true o false
• Ambas son cadenas de la misma longitud y los mismos caracteres están organizados en el mismo orden.
• Son todos el mismo objeto (lo que significa que cada objeto tiene la misma referencia)
• Son todos números y
  • Todos +0
  • Todos -0
  • Todos NaN
  • O son ambos distintos de cero y distintos  NaN del mismo valor

Es diferente de la == operación .   == El operador realiza una conversión coercitiva en las variables en ambos lados (si no son del mismo tipo) antes de juzgar que son iguales (el resultado de este comportamiento se  "" == false juzgará como  true), y  Object.isno coacciona los valores en ambos. lados.

Y el === funcionamiento también es diferente. === Los operadores (incluidos los  == operadores) tratan los números  -0 y  +0 como iguales Number.NaN y NaNcomo desiguales.

Para obtener más información, consulte: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is

Usado menos, generalmente usado === comparación 

Nueve, proxy

El  objeto Proxy se utiliza para definir el comportamiento personalizado de operaciones básicas (como búsqueda de atributos, asignación, enumeración, llamada de función, etc.). Imagínese ser un portero, ya sea que entre para tomar o poner cosas, debe pasar por un proxy de este tipo, y puede monitorear fácilmente el proceso de lectura y escritura a través del proxy.

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

const personProxy = new Proxy(person,{
    get (target,property){//接收两个参数，第一个是代理的目标对象，第二个是外部所访问的属性的属性名，这个方法的返回值会作为外部访问这个属性得到的结果
        return property in target ? target[property] : 'default'
        // console.log(target,property)// {name:'zce',age:20} name
        // return 100 
    },
    set (target,property,value){//接收三个参数，代理目标对象，要写入的属性名称，写入的属性值
        if(property === 'age'){
            if(!Number.isInteger(value)){
                throw new TypeError(`${value} is not an int`)
            }
        }
        target[property] = value
        // console.log(target,property,value)
    }
})
personProxy.age = 'string' //报错
console.log(personProxy.name) // 100

Comparación de Proxy y Object.defineProperty ()

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

const personProxy = new Proxy(person,{
    deleteProperty(target,property){
        console.log('delete',property) //delete age
        delete target[property]
    }
})

delete personProxy.age
console.log(person)//{name:'zce'}

// Proxy 更好的支持数组对象的监视
const list = []

const listProxy = new Proxy(list,{
    set(target,property,value){// 监视数据的写入
        console.log('set',property,value)
        target[property] = value
        return true //表示设置成功
    }
})

listProxy.push(100) // set 0 100  其中0是数组下标

//Proxy 以非侵入的方式监管了对象的读写，不需要对对象本身做任何的操作，可以监视到内部成员的读写

Diez, reflexionar

• reflect es una clase estática. Reflect encapsula una serie de operaciones de bajo nivel en objetos. Los métodos de miembros de Reflect son la implementación predeterminada de los objetos de procesamiento Proxy.

• Reflect object proporciona un conjunto unificado de API para manipular objetos

const obj = {
    foo:'123',
    bar:'456'
}

const proxy = new Proxy(obj,{
    get(target,property){
        console.log('watch logic-')//watch logic~

        return Reflect.get(target,property)
    }
})

console.log(proxy.foo)//123

Reflect proporciona una forma unificada

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

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

//reflect提供了一个统一的方式:

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

Para obtener más detalles, consulte mdn: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

11. Clase

function Person (name){
    this.name = name//通过this访问当前的实例对象
}

Person.prototype.say = function(){//若想在这个类型所有实例之间共享一些成员，借助propertype原型去实现
    console.log(`hi,my name is ${this.name}`)
}
//========================================================
class Person {//定义了person类型
    constructor(name){//当前这个类型的构造函数
        this.name = name
    }

    say(){
        console.log(`hi,my name is ${this.name}`)
    }
}

const p = new Person('tom')
p.say()

Para obtener más detalles, consulte mdn: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/class

Método estático 

• Los métodos en el tipo generalmente se dividen en métodos de instancia y métodos estáticos. Los métodos de instancia deben ser llamados por el objeto de instancia construido por este tipo. Los métodos estáticos se llaman directamente a través del propio tipo. Anteriormente, los métodos estáticos se implementaban directamente en el constructor objeto. Cargar método para lograr, la función también es un objeto en js, también puede agregar algunos miembros del método

• Las palabras clave estáticas para miembros estáticos se agregaron recientemente en ES2015

// static 方法

class Person{
    constructor(name){
        this.name = name
    }

    say(){
        console.log(`hi,my name is ${this.name}`)
    }

    static create (name){
        return new Person(name)
    }
}

const tom = Person.create('tom')//静态方法的调用
tom.say()//因为静态方法是挂载到类型上面，所以静态方法内部的this就不会指向某一个实例对象而是当前的类型

Se extiende

• Al heredar esta característica, es posible abstraer las repeticiones entre tipos similares

class Person{
    constructor(name){
        this.name = name
    }

    say(){
        console.log(`hi,my name is ${this.name}`)
    }
}

class Student extends Person {//student 类型就有person类型中所有的成员了
    constructor(name,number){
        super(name)//super 始终指向父类，调用它则调用了父类的构造函数
        this.number = number
    }
    hello(){
        super.say()// hi,my name is jack
        console.log(`my school number is ${this.number}`)// my school number is 100
    }
}

const s = new Student('jack','100')
s.hello()

12. Establecer y mapear

• La estructura de datos del conjunto se entiende como una colección, que es muy similar a los arreglos tradicionales, los miembros internos del conjunto no pueden repetirse y cada valor es único en el conjunto.

const s = new Set()

s.add(1).add(2).add(3).add(4).add(2)//add 方法返回集合对象本身,所以可以链式调用，若是添加了相同的则会被忽略掉

console.log(s)// Set {1,2,3,4}

s.forEach(element => {
    console.log(element)//1 2 3 4
});

for(let i of s){
    console.log(i)//1 2 3 4
}

console.log(s.size) //4   size相当于数组当中的length

console.log(s.has(100))//false  has 判断集合当中是否存在某个特定的值

console.log(s.delete(3)) //true  删除成功后返回true

s.clear() //清除集合当中的全部内容
console.log()// Set{ }

const arr = [1,2,1,3,4,1]

const result = new Set(arr) // 重复的值会忽略掉
const result = Array.from(new Set(arr))//Array.from 把set转化为数组
const result = [...new Set(arr)]//使用...在空的数组中展开set，set中的成员变成了空数组中的成员，从而转化为了数组

Mapa

• La estructura de datos del mapa es muy similar a los objetos en EMCAScript. En esencia, son una colección de pares clave-valor, pero las claves en la estructura del objeto solo pueden ser tipos de cadena. Habrá algunos problemas al almacenar tipos de estructura de datos complejos .

• El mapa usa cualquier tipo de datos como clave, mientras que los objetos solo pueden usar cadenas como claves

onst obj = {}
obj[true] = 'value'
obj[123] = 'value'
obj[{a:1}] = 'value'

console.log(Object.keys(obj)) //['123','true','[object Object]'] 这些键都被转化为了字符串，如果给我们的对象添加的键不是字符串，内部将会把这个数据toSring的结果作为一个键
console.log(obj[`[object Object]`])// value
console.log(obj[{}]) //value 跟上面的重复，无法区分，Map变产生


const m = new Map()

const tom = {name : 'tom'}

m.set(tom,90)// 这里的键可以是任意类型数据,tom是键，值为90

console.log(m) // Map {
   
   { name:'tom'} => 90}

console.log(m.get(tom)) //90

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

m.forEach((value,key) =>{
    console.log(value,key)// 90 {name:'tom'}
})