序文
歩数を積み重ねなければ、何千マイルにも到達できます。jsの基本はマスターできているとは言えず、実際に読んでいない部分もあります。視力が高くて手が低い場合は機能しません。なので、将来いつでも思い出せるようにメモしておいてください
jsでの配列トラバーサル
- map() は、たとえそれが空の配列であっても、常に新しい配列を返します。
const arr = [1, 2, 3, 4, 5]
const arr1 = arr.map((item)=>{
return item + 1
})
// arr是不变的，arr1变成了[2,3,4,5,6]
- forEach()、戻り値がないときは常に
arr3 = arr.forEach((item) => {
return item
})
// 不管怎么返回，arr3返回的都是一个undefined
- 新しい配列のサイズを変更できる filter()
const arr4 = arr.filter((item)=>{
return item<16
})
// arr4这时返回[12]
- find() は、配列を走査して、指定された基準を満たすインスタンス/項目を見つけます。それを見つけると、その特定の配列項目を返し、ループを直ちに終了します。一致するものが見つからない場合、関数は未定義を返します。
const arr5 = arr.find((item)=>{
return item == 12})
// 此时返回的是12
解体する
- 配列の分解はカンマで分解され、カンマの前後の要素として理解できます。
let fruits= ["Mango", "Pineapple" , "Orange", "Lemon", "Apple"];
const [fruit1 ,,,, fruit5] = fruits; //第一个和最后一个
const [,fruit2 ,, fruit4,] = fruits; // 第二个和第四个
- オブジェクト構造
const Susan = {
firstName: "Susan",
lastName: "Steward",
age: 14,
hobbies: {
hobby1: "singing",
hobby2: "dancing"
}
};
//解构
const {
firstName, age, hobbies:{
hobby1,hobby2}} = Susan;
//firstName=Susan，hobby1=singing
レストおよびスプレッド演算子
休み
- 配列
let fruits= ["Mango", "Pineapple" , "Orange", "Lemon", "Apple"];
// 我们可以解构得到第一个和第二个水果，然后通过使用 rest 运算符将水果的“其余”放在一个数组中
const [firstFruit, secondFruit, ...rest] = fruits
console.log(firstFruit, secondFruit, rest); //"Mango" "Pineapple" ["Orange","Lemon","Apple"]
- 物体
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: {...}
// }
スプレッド演算子
- 配列
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"]
- オブジェクト (注: プロパティ オブジェクトは反復可能ではないため、スプレッド演算子はオブジェクト リテラルの値をスプレッドできません。ただし、スプレッド演算子を使用して、あるオブジェクトから別のオブジェクトにプロパティをクローンすることができます。)
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"}
固有値処理の設定
- 配列を走査して重複データを処理する
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"]
要素の重複を処理するには set を使用します。
let category = [...new Set(animals.map((animal)=>animal.category))];
console.log(category); //["carnivore" , "pet"]
動的オブジェクトキー
- オブジェクト キーを追加するには、角括弧表記を使用するか、{} を使用して追加します。
let lion = {
category: "carnivore"
};
lion.baby = 'cub';
lion['lion-baby'] = 'cub'
- 動的オブジェクトキーは何をしますか。値を取得するためにいくつかの非標準の命名方法を処理します。
let lion = {
'lion-baby' : "cub"
};
console.log(lion.lion-baby); //报错,error: ReferenceError: baby is not defined
console.log(lion['lion-baby']); // "cub"
- [] 他にもたくさんの関数があります。たとえば、オブジェクト内で特定の変数を使用したい場合は、次のようになります。
let category = 'carnivore';
let lion = {
'lion-baby' : "cub",
[category] : true, //不加[]时，在对象中category作为键来说就是一个字符串
};
console.log(lion); // { lion-baby: "cub" , carnivore: true }
- より複雑な演算を実行するための角括弧内の条件、条件判断
const number = 5;
const gavebirth = true;
let animal = {
name: 'lion',
age: 6,
[gavebirth && 'babies']: number
};
console.log(animal); // { name: "lion" , age: 6 , babies: 5
減らす（）
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 }
オプションのチェーン ？
オプションのチェーンは、オブジェクト プロパティの長いリストにアクセスするときに複数の null チェックを行うのではなく、JavaScript でネストされたオブジェクト プロパティにアクセスする安全な方法です。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); // ✅可行
});