prefacio
Si no acumulas pasos, puedes llegar a miles de kilómetros. No se dice que se dominen los conceptos básicos de js. De hecho, algunas cosas no se han leído. No funciona si tienes la vista alta y las manos bajas. Así que haz una nota, para que puedas recordarla en cualquier momento en el futuro.
Recorrido de matriz en js
- map(), siempre devuelve una nueva matriz, incluso si es una matriz vacía
const arr = [1, 2, 3, 4, 5]
const arr1 = arr.map((item)=>{
return item + 1
})
// arr是不变的，arr1变成了[2,3,4,5,6]
- forEach(), siempre que no haya valor de retorno
arr3 = arr.forEach((item) => {
return item
})
// 不管怎么返回，arr3返回的都是一个undefined
- filter(), que puede cambiar el tamaño de la nueva matriz
const arr4 = arr.filter((item)=>{
return item<16
})
// arr4这时返回[12]
- find(), atraviesa la matriz para encontrar instancias/elementos que cumplan con los criterios especificados. Una vez que lo encuentra, devuelve ese elemento de matriz en particular e inmediatamente finaliza el ciclo. Si no se encuentra ninguna coincidencia, la función devuelve indefinido.
const arr5 = arr.find((item)=>{
return item == 12})
// 此时返回的是12
deconstruir
- La deconstrucción de la matriz se deconstruye con comas, que pueden entenderse como los elementos antes y después de las comas.
let fruits= ["Mango", "Pineapple" , "Orange", "Lemon", "Apple"];
const [fruit1 ,,,, fruit5] = fruits; //第一个和最后一个
const [,fruit2 ,, fruit4,] = fruits; // 第二个和第四个
- estructura del objeto
const Susan = {
firstName: "Susan",
lastName: "Steward",
age: 14,
hobbies: {
hobby1: "singing",
hobby2: "dancing"
}
};
//解构
const {
firstName, age, hobbies:{
hobby1,hobby2}} = Susan;
//firstName=Susan，hobby1=singing
Operador de descanso y propagación
Descansar
- formación
let fruits= ["Mango", "Pineapple" , "Orange", "Lemon", "Apple"];
// 我们可以解构得到第一个和第二个水果，然后通过使用 rest 运算符将水果的“其余”放在一个数组中
const [firstFruit, secondFruit, ...rest] = fruits
console.log(firstFruit, secondFruit, rest); //"Mango" "Pineapple" ["Orange","Lemon","Apple"]
- objeto
const Susan = {
firstName: "Susan",
lastName: "Steward",
age: 14,
hobbies: {
hobby1: "singing",
hobby2: "dancing"
}
};
const {
age, ...rest} = Susan;
console.log(age, rest);
// 14
// {
// firstName: "Susan" ,
// lastName: "Steward" ,
// hobbies: {...}
// }
operador de propagación
- formación
let pets= ["cat", "dog" , "rabbits"];
let carnivorous = ["lion", "wolf", "leopard", "tiger"];
//利用扩展运算符合并两个数组
let animals = [...pets, ...carnivorous];
console.log(animals); //["cat", "dog" , "rabbits", "lion", "wolf", "leopard", "tiger"]
- Objeto (Nota: el operador de propagación no puede distribuir el valor de un objeto literal, porque los objetos de propiedad no son iterables. Pero podemos usarlo para clonar propiedades de un objeto a otro).
let name = {
firstName:"John", lastName:"Doe"};
let hobbies = {
hobby1: "singing", hobby2: "dancing" }
let myInfo = {
...name, ...hobbies};
console.log(myInfo); //{firstName:"John", lastName:"Doe", hobby1: "singing", hobby2: "dancing"}
establecer procesamiento de valor único
- Atraviesa la matriz y maneja datos duplicados
let animals = [
{
name:'Lion',
category: 'carnivore'
},
{
name:'dog',
category:'pet'
},
{
name:'cat',
category:'pet'
},
{
name:'wolf',
category:'carnivore'
}
]
// 重复数据pet
let category = animals.map((animal)=>animal.category);
console.log(category); //["carnivore" , "pet" , "pet" , "carnivore"]
Use set para no manejar la duplicación de elementos.
let category = [...new Set(animals.map((animal)=>animal.category))];
console.log(category); //["carnivore" , "pet"]
clave de objeto dinámico
- Utilice la notación de corchetes para agregar claves de objeto o {}.
let lion = {
category: "carnivore"
};
lion.baby = 'cub';
lion['lion-baby'] = 'cub'
- ¿Qué hace la clave de objeto dinámico? Tratar con algunos métodos de nomenclatura no estándar para obtener el valor.
let lion = {
'lion-baby' : "cub"
};
console.log(lion.lion-baby); //报错,error: ReferenceError: baby is not defined
console.log(lion['lion-baby']); // "cub"
- [] Hay muchas más funciones, por ejemplo, si desea utilizar una determinada variable en el objeto, puede hacer lo siguiente
let category = 'carnivore';
let lion = {
'lion-baby' : "cub",
[category] : true, //不加[]时，在对象中category作为键来说就是一个字符串
};
console.log(lion); // { lion-baby: "cub" , carnivore: true }
- Condiciones entre corchetes para realizar operaciones más complejas, juicio condicional
const number = 5;
const gavebirth = true;
let animal = {
name: 'lion',
age: 6,
[gavebirth && 'babies']: number
};
console.log(animal); // { name: "lion" , age: 6 , babies: 5
reducir()
let staffs = [
{
name: "Susan", age: 14, salary: 100 },
{
name: "Daniel", age: 16, salary: 120 },
{
name: "Bruno", age: 56, salary: 400 },
{
name: "Jacob", age: 15, salary: 110 },
{
name: "Sam", age: 64, salary: 500 },
{
name: "Dave", age: 56, salary: 380 },
{
name: "Neils", age: 65, salary: 540 }
];
// 计算数组里面薪水的总值
const salaryInfo = staffs.reduce(
(total, staff) => {
let staffTithe = staff.salary * 0.1;
total.totalTithe += staffTithe; //缩小十倍的数据
total['totalSalary'] += staff.salary; //原来的数据
return total;
},
{
totalSalary: 0, totalTithe: 0 }
);
// reduce里面传入两个对象作为参数，第一个参数是所有计算的总和/总和，第二个参数是当前迭代值
console.log(salaryInfo); // { totalSalary: 2150 , totalTithe: 215 }
encadenamiento opcional ？
El encadenamiento opcional es una forma segura de acceder a las propiedades de los objetos anidados en JavaScript, en lugar de realizar varias comprobaciones nulas al acceder a una larga lista de propiedades de objetos. Es una nueva característica introducida en ES2020
let users = [
{
name: "Sam",
age: 64,
hobby: "cooking",
hobbies: {
hobb1: "cooking",
hobby2: "sleeping"
}
},
{
name: "Bruno", age: 56 },
{
name: "Dave", age: 56, hobby: "Football" },
{
name: "Jacob",
age: 65,
hobbies: {
hobb1: "driving",
hobby2: "sleeping"
}
}
];
//假设试图从上面的数组中获取爱好
users.forEach((user) => {
console.log(user.hobbies.hobby2); // 报错，有的数据里面没有hobbies，所以也没有hobby2
});
// 条件渲染方法解决：
users.forEach((user) => {
console.log(user.hobbies && user.hobbies.hobby2); // ✅可行
});
// 可选链的方法解决
users.forEach((user) => {
console.log(user ?.hobbies ?.hobby2); // ✅可行
});