js相关的一些知识点

//"?." 是JavaScript中的可选链操作符，用于在对象属性链式调用过程中判断前面的属性是否存在，
// 如果存在则继续调用，否则返回undefined。这个操作符可以避免因为某个属性不存在而出现程序崩溃或异常情况，提高代码的健壮性和可读性。例如：

const person = {
  name: '张三',
  age: 18,
  address: {
    city: '北京'
  }
}

console.log(person.address?.city) // '北京'
console.log(person.address?.street) // undefined
console.log(person.gender?.male) // undefined

// 在上述代码中，如果person对象中没有address属性，则第一个console.log会返回undefined而不是抛出错误。

// 空值合并操作符 ??：用于判断左侧表达式是否为 null 或 undefined，如果是则返回右侧表达式的值，否则返回左侧表达式的值。例如：
const name = null ?? '张三'
console.log(name) // '张三'

const age = 0 ?? 18
console.log(age) // 0

const address = undefined ?? '北京市'
console.log(address) // '北京市'

const height = 180 ?? 0
console.log(height) // 180

// 双重非操作符 !!：将任何值转换为布尔类型的值，常用于判断某个值是否为真或假。例如：
console.log(!!'hello') // true
console.log(!!0) // false
console.log(!!undefined) // false
console.log(!!NaN) // false
console.log(!!null) // false
console.log(!!{}) // true

// 条件运算符 ?:：是一个三元运算符，根据条件表达式的结果来选择执行不同的代码路径。例如：
const age = 18
const message = age >= 18 ? '成年人' : '未成年人'
console.log(message) // '成年人'

// 箭头函数 =>：是一种新的函数定义方式，可以使用更简单的语法来创建函数。例如：
const square = x => x * x
console.log(square(5)) // 25

const sum = (x, y) => x + y
console.log(sum(3, 5)) // 8

// 扩展运算符 ...：用于展开数组和对象，可以将一个可迭代对象（如数组、字符串等）展开成独立的值。例如：
const arr1 = [1, 2, 3]
const arr2 = [...arr1, 4, 5, 6]
console.log(arr2) // [1, 2, 3, 4, 5, 6]

const obj1 = { name: '张三', age: 18 }
const obj2 = { ...obj1, gender: '男' }
console.log(obj2) // { name: '张三', age: 18, gender: '男' }

// 解构赋值 {}：用于从数组或对象中提取值，可以快速将多个变量赋值为同一数组或对象的属性值。例如：
const arr = [1, 2, 3]
const [x, y, z] = arr
console.log(x, y, z) // 1 2 3

const obj = { name: '张三', age: 18 }
const { name, age } = obj
console.log(name, age) // '张三' 18

// 模板字面量 ${}：用于在字符串中嵌入表达式或变量，可以更方便地拼接字符串。例如：
const name = '张三'
const message = `你好，${name}，欢迎来到我的网站！`
console.log(message) // '你好，张三，欢迎来到我的网站！'

// async/await：用于异步编程，可以更加简单地处理异步操作和回调函数。例如：
async function fetchData() {
  const response = await fetch('https://api.example.com/data')
  const data = await response.json()
  console.log(data)
}
fetchData()

// typeof：用于获取变量的类型，返回一个字符串。例如：

console.log(typeof 42) // 'number'
console.log(typeof 'hello') // 'string'
console.log(typeof true) // 'boolean'
console.log(typeof null) // 'object'
console.log(typeof undefined) // 'undefined'

function foo() {}
console.log(typeof foo) // 'function'

const obj = { name: '张三', age: 18 }
console.log(typeof obj) // 'object'

// delete：用于删除对象的属性或数组的元素。例如：
const obj = { name: '张三', age: 18 }
delete obj.age
console.log(obj) // { name: '张三' }

const arr = [1, 2, 3]
delete arr[1]
console.log(arr) // [1, undefined, 3]

// Array 的 forEach、map、filter、reduce 等方法：用于对数组进行遍历和处理。例如：
const arr = [1, 2, 3, 4, 5]

arr.forEach((item, index) => {
  console.log(`第${index + 1}个元素是${item}`)
})

const newArr = arr.map(item => item * 2)
console.log(newArr) // [2, 4, 6, 8, 10]

const filterArr = arr.filter(item => item % 2 === 0)
console.log(filterArr) // [2, 4]

const sum = arr.reduce((acc, cur) => acc + cur)
console.log(sum) // 15

// Object 的 keys、values、entries 等方法：用于获取对象的键、值或者键值对集合。例如
const obj = { name: '张三', age: 18 }
const keys = Object.keys(obj)
console.log(keys) // ['name', 'age']

const values = Object.values(obj)
console.log(values) // ['张三', 18]

const entries = Object.entries(obj)
console.log(entries) // [['name', '张三'], ['age', 18]]