vue前置知识-end

Vue3前置知识

1.常量与变量

• let 声明变量

• const 声明常量

const声明的对象和数组可以添加或删除元素，在JS中对象和数组属于引用类型，对其增加删除并不会改变其内存地址，而是改变内存地址当中具体的值

2.模板字符串

模板字符串使用反引号声明

``

特点：

• 可以任意换行

• 可嵌入变量或表达式；嵌入的语法为 ${}

3.对象

3.1 对象的取值方式

const obj = {
    name: 'vue3',
    age: 9
}
console.log(obj.name)
console.log(obj.age)
// 等同于
console.log(obj['name'])
console.log(obj['age'])

在使用变量来访问对象中的属性时，只能使用\[\]方式

3.2 对象属性的简写

let min = 1
let max = 99

const obj = {
    min,        // min: min
    max,        // max: max
    fn() {}     // fn: function() {}
}

3.3 解构赋值

数组的解构

const arr = [11, 22, 33]
// eg1: 把 arr 中的3个值分别赋值给变量 a, b, c
// 以前的写法
let a = arr[0]
let b = arr[1]
let c = arr[2]
// 现在的写法
let [a, b, c] = arr
// eg2: 把 arr 中的后两个值赋值给变量 b,c
let [,b,c] = arr
// eg3: 把 arr 中的第1个值赋值给变量 a, 剩余的全部给到变量 rest
let [a, ...rest] = arr

对象的解构

const obj = {
    name: '孙悟空',
    age: 9,
    address: '花果山'
} 
// eg1: 把 obj 中的3个属性值分别赋值给变量 name, age, address
// 以前的写法
const name = obj.name
const age = obj.age
const address = obj.address
// 现在的写法
const { name, age, address } = obj
// eg2: 把 obj 的 age, address 属性值赋值给 age, address
const { age, address } = obj
// eg3: 把 obj 的 name 属性值赋值给变量 name, 剩余的全部给到变量 rest
const { name, ...rest } = obj
// eg4: 把 obj 的 name 属性值赋值给变量 uname
const { name: uname } = obj

4.箭头函数

() => {}

特性：

• 参数只有一个时，小括号可以省略；函数体只有一句话时，可以省略大括号（并且自带return）

• 当函数体简写时返回一个对象，为了避免歧义需要加上一对小括号

5.数组的重要方法

method	function	parameter	return
push(element0 , element1 , ...)	尾插	0 - n个元素	新的长度
pop()	尾删	null	删除元素的值
unshift(element0 , element1 , ...)	头插	0 - n个元素	新的长度
shift()	头删	null	删除元素的值
splice(startPos , deleteCount , item1 , item2, ...)	任意位置插入删除	startPos：开始下标 deleteCount（可选）：删除元素的数量 item1...（可选）：加入到数组中的元素	删除的元素数组
includes(searchElement , fromIndex)	包含	searchElement：需要查找的值 fromIndex（可选）：开始搜索的索引，默认从0开始	布尔值
forEach(callback)	遍历	callback：为数组中每个元素执行的函数，这个函数包括三个参数（item，index， array）	undefined
filter(callback)	过滤	callback：为数组中每个元素执行的函数，这个函数包括三个参数（item，index， array）	回调函数中为true结果的元素会保留到新数组中
map(callback)	映射	callback：为数组中每个元素执行的函数，这个函数包括三个参数（item，index， array）	一个新数组，每个元素都是回调函数的返回值
every(callback)	检测每一个是否都满足条件	callback：这个函数包括三个参数（item，index， array），当前回调函数返回值为false则该函数不在继续执行	布尔值
reduce(callback , initialValue)	汇总	callback：为数组中每个元素执行的函数，这个函数包括四个参数（prev， item，index，array），prev为上一次函数返回值 initialValue：在第一次调用时，如果指定了 initialValue 则为指定的值，否则为 array0 的值。	遍历整个数组后的值

forEach和map的区别：forEach会修改原始数组，map则会返回一个新的数组。

6.对象的重要方法

Object.keys()： 将对象中的所有属性装到数组中返回，因为操作数组的方法有很多，这样更加灵活

const obj = {
    id: 10001,
    name: '孙悟空',
    age: 9,
    address: '花果山'
}
// 遍历对象
Object.keys(obj).forEach(key => { console.log(obj[key]) })

7.扩展运算符

7.1 可以复制数组或者对象

const arr1 = [1, 2, 3]
// 赋值
const arr2 = arr1
arr2.push(44)
console.log(arr1)// 受影响了
// 正确的做法, 把 arr1 复制⼀份给到 arr2
const arr2 = [...arr1]

7.2 合并数组或对象

const arr1 = [1,2,3]
const arr2 = [4,5,6]
// 把 arr1 和 arr2 合并起来给到 arr
const arr = [...arr1, ...arr2]

8.序列化和反序列化

序列化JSON.stringify(对象)

反序列化JSON.parse(json格式的字符串)

9.Web存储

• sessionStorage该存储区域在⻚⾯会话期间可⽤（即只要浏览器处于打开状态，包括⻚⾯重新加载和恢复）

• localStorage即使浏览器关闭并重新打开也仍然存在；存储的数据没有过期⽇期，只能通过 JavaScript、清除浏览器缓存或本地存储的数据来清除。

// 存
localStorage.setItem(key:string, value:string)
// eg:
localStorage.setItem('uname', 'Jack')


// 取
localStorage.getItem(key:string)
// eg:
const uname = localStorage.getItem('uname')


// 删
localStorage.removeItem(key:string)
localStorage.removeItem('uname')

存对象和数组，需要序列化；取对象和数组，需要反序列化。

10.Promise + Aysnc/Await

1. 在执行异步任务时，有时候有些需求是执行完一个异步任务后执行下一个异步任务，这样会产生大量的回调函数，使代码很不优雅，而Promise是为了消除回调地狱而诞生的。

2. Promise是一个类，用来包装异步操作，根据异步操作的结果，是成功还是失败，进而决定Promise是成功还是失败；Promise支持链式调用。

3. Promise的3种状态：Pending、Fulfilled、Rejected，分别是进行中、成功、失败。

4. Promise的状态只能由 Pending -> Fulfilled 或 Pending -> Rejected，状态一旦确定就不可改变。

10.1 基本使用

/*
    1.Promise需要传递一个函数，函数有两个参数，都是函数
    2.当异步代码成功时调用resolve，异步代码失败时调用reject
    3.Promise的实例拥有then方法，也有两个回调函数为参数，第一个回调是成功的回调函数，第二个回调是失败的回调函数
*/
const p = new Promose((resolve, reject) => {
    // 这⾥编写异步代码：⽐如定时器、ajax请求等
    setTimeout(() => {
        // 2秒后, Promise标记为成功
        resolve('ok')
    }, 2000)
})

p.then((msg) => {
    // 成功回调
    console.log(msg)// ok
}, (err) => {
    // 失败回调
    console.log(err)// error
})

10.2 使用Async和Await优化Promise

// 封装延迟函数
function delay(duration, n) {
    return new Promise((resolve , reject) => {
        setTimeout(() => {
            resolve(n)
        } , duration)
    })
}
// 语法
async function log() {
    // 1.在Promise实例前添加 await 关键字, 那么await的返回值就是当前Promise的resolve参数
    // 2.await所在的函数必须被async修饰
    // 3.async函数内, 当前await执⾏结束了,代码才会继续往后执⾏(同步的⽅式执⾏）
    const n1 = await delay(2000, 1)
    console.log(n1)
}

log()

11.模块化

模块化是指将一个复杂程序划分为一些列独立，和互操作的模块的过程。每个模块负责特定的功能或任务，通过定义好的接口与其他模块进行通信。一个模块本质就是一个js文件。

11.1 默认导入导出

// 文件路径：utils/min.js
// 定义并默认导出求最⼩值函数
export default function min(m, n) {
    return m > n ? n : m
}

// 文件路径：src/index.js
// 默认导入
import min from './utils/min.js'
console.log(min(12,11)

默认导出 export default 在一个模块种最多出现1次。

11.2 按需导入导出

// 文件路径：utils/math.js
// 定义求和函数并按需导出
export function add(x, y) {
    return x + y
} 
// 定义作差函数并按需导出
export function sub(x, y) {
    return x - y
}

//  文件路径：src/index.js
import { add , sub } from './utils/math.js'
console.log(add(33 , 18))
console.log(sub(33 , 18))

按需导入 export 可以出现多次。