前言

不积跬步，无以至千里。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(),遍历数组以查找满足指定条件的实例/项。一旦找到它，它就会返回该特定数组项并立即终止循环。如果未找到匹配项，则函数返回 undefined。

  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

Rest 和 扩展运算符

Rest

• 数组

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"}

set 唯一值处理

• 遍历数组，处理重复数据

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 

reduce()

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 }

可选链 ？

可选链是在 JavaScript 中访问嵌套对象属性的一种安全方式，而不是在访问一长串对象属性时进行多次 null 检查。它是 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); // ✅可行
});