前端第二节（Vue）

Vue3阶段必会的前置知识

一、变量和常量

let:变量

const:常量

const声明的数组可以添加或删除么？ 

const声明的对象可以添加或修改属性么？

 答：可以的，因为数组和对象在JS中属于引⽤类型,对其做添加、删除等操作,并不改变其内存地址。

二、模版字符串

模版字符串：用一对反引号` `声明

好处：1.任意换行 2.可嵌入表达式 ${}

let str = `My name is ${name}, I am ${age} years old, ${age >= 18 ? '已成年' : 
'未成年'}`

普通字符串：用一对单/双引号声明

三、对象

对象：一个个具体的个体     对象=方法+属性

1.取值：点/中括号

    // const obj = {//   name: 'vue3',//   age: 9// }// // 取值// // 点// console.log(obj.name)// console.log(obj.age)// // 中括号// console.log(obj['name'])// console.log(obj['age'])// // 注意：当属性名是字符串的时候，只能用中括号取值// let x = 'name'// let y = 'age'// console.log(obj[x])// console.log(obj[y])// console.log(obj.x)// undefined// console.log(obj.y)// undefined

当属性名是变量的时候,只能⽤中括号取值;否则既可以⽤点,也可以⽤中括号

const obj = {name: 'vue3',age: 9}let x = 'name'console.log(obj[x])//vue3console.log(obj['name'])//vue3console.log(obj.name)//vue3console.log(obj['vue3'])//undefined

四、解构赋值

根据一定的结构从数组或对象中快速取值

目标：数组或对象

作用：让数组或对象的取值更便捷

1.数组解构

    // 数组的解构// const arr = [11, 22, 33]// eg1:把arr中的三个元素分别赋值给变量 a, b, c// let a = arr[0]// let b = arr[1]// let c = arr[2]// let [a, b, c] = arr// console.log(a, b, c)// eg2: 把arr中的后两个元素分别赋值给变量 b, c// let [, b, c] = arr// console.log(b, c)// eg2: 把arr中的第一个元素赋值给变量 a, 第三个元素赋值给变量 c// let [a, , c] = arr// console.log(a, c)// eg3: 把arr的第一个元素赋值给变量 a, 剩余的全部给到变量 rest// let [a, ...rest] = arr// console.log(a, rest)const arr = [2, [3, 4], 5]let [, [a, b]] = arrconsole.log(a, b)//3 4

2.对象解构

    // const obj = {//   name: '比特教育科技',//   age: 9,//   address: '陕西省西安市高新区沣惠南路34号'// }// eg1: 把 obj 的3个属性值分别赋值给变量 name, age, address// 以前的写法// let name = obj.name// let age = obj.age// let address = obj.address// 现在的写法// let { age, name, address } = obj// console.log(name, age, address)// eg2: 把 obj 的 name, age 属性值赋值给变量 name, age// let { age, name } = obj// console.log(name, age)// eg3：把 obj 的 name 属性值赋值给变量 name, 剩余的赋值给变量 rest// let { name, ...rest } = obj// console.log(name, rest)// eg4: 把 obj 的 name 属性值 赋值给变量 uname// let { name: uname } = obj// console.log(uname)

const obj = {data: {code: 10000,message: '频道列表获取成功',result: ['HTML', 'CSS', 'JavaScript', 'Vue', 'SpringBoot']},status: 200,statusText: 'Ok'}// 解构拿到 dataconst { data } = obj// 再解构 dataconst { code, message, result: list } = dataconsole.log(code, message, list)

五、箭头函数

1.非箭头函数

//函数表达式
const add = function(a, b) {return a + b;
};console.log(add(3, 5)); // 输出：8//有名函数
function add(a, b) {return a + b;
}

2.箭头函数 

//箭头函数
const fn = () => {}// const add = (x, y) => {
//   return x + y
// }
// const result = add(1, 1)
// console.log(result)

3.特性

a.当参数只有一个时，可以省略小括号

// const log = arg => {
//   console.log(arg)
// }

b.当函数体只有一句话时，可以省略大括号，此时箭头函数自带 return 功能

// const add = (x, y) => x + y
// console.log(add(1, 2))

c.当直接返回一个对象时, 为了简写，需要给对象加一对小括号

    // const state = () => {//   return {//     token: 'xxx',//     userInfo: {//       name: 'admin',//       id: 1//     }//   }// }// const state = () => ({//   token: 'xxx',//   userInfo: {//     name: 'admin',//     id: 1//   }// })// console.log(state())

//传统匿名函数表达式
setTimeout(function() {console.log(666); // 2秒后输出
}, 2000);//箭头函数表达式
setTimeout(() => {console.log(666); // 2秒后输出
}, 2000);

六、数组的重要方法

存放相同类型的一组数，管理一组有序数据的集合

1.push()/unshift()   添加

2.pop()/shift()   删除

3.splice()   任意位置删除或添加

const arr = [11, 22, 33, 44]
// 语法 
// arr.splice(startIndex:number, delCount:number, ...addItem)
// 删除 22 
const temp = arr.splice(1, 1)
console.log(temp)// [22]
console.log(arr)// [11, 33, 44]
// 33后⾯添加55 
arr.splice(2, 0, 55)
console.log(arr)// [11, 22, 33, 55, 44]

4.includes()  包含

5.forEach()  遍历

    // for循环遍历数组// for (let i = 0; i < arr.length; i++) {//   console.log(arr[i])// }// const result = arr.forEach((item, index, array) => {//   // item: 每次遍历的元素//   // index: 当前元素在数组中的下标//   // array：遍历的数组本身//   console.log(item, index, array)// })// console.log(result)

6.filter()   过滤

// 语法 
const filteredArr = arr.filter((item, index, array) => {// 内部会遍历数组, 没遍历⼀次都会执⾏回调⼀次 // 如果返回true,则当前元素会保留; 否则去掉 return 布尔值
})

const arr = [11, 22, 33, 44]
// 保留所有的偶数 
const eventArr = arr.filter((item) => {if(item % 2 === 0) {return true} else {return false}
})
// 简写 
const eventArr = arr.filter((item) => item % 2 === 0)

7.map()   映射

由⼀个数组得到另⼀个数组,并且⼆者⻓度相同、每个元素存在⼀⼀对应关系

    // 语法// arr.map((item, index, array) => {//   console.log(item, index, array)// })

    // const arr = [11, 22, 33, 44]// 需求：每个元素翻倍// const doubleArr = arr.map((item) => item * 2)// console.log(doubleArr)// 需求: 得到一个对象数组// const newArr = arr.map((value, index) => ({ index, value }))// console.log(newArr)

8.every()   检测每一个

    // 检测每一个// arr.every((item, index, array) => {//   console.log(item, index, array)// })

    const arr = [11, 22, 33, 44]// 需求：检测 arr 中所有的元素是否都是奇数const flag = arr.every((item) => {if (item % 2 === 1) {return true} else {return false}})// 简写// const flag = arr.every((item) => item % 2 === 1)console.log(flag)// 需求：检测 arr 中的所有元素是否都大于10const bool = arr.every((item) => item > 10)console.log(bool)

9.reduce()  汇总

// 语法  
const result = arr.reduce((prev, item, index, array) => {return 结果
}, 初始值)一样的/
const result = arr.reduce((accumulator, currentValue, index, array) => {// 返回累积结果return accumulator + currentValue;
}, initialValue);

const arr = [11, 22, 33, 44]
// 对arr求和 
let sum = 0
arr.forEach((item) => {sum += item
})
console.log(sum)// 对arr求和 
const sum = arr.reduce((prev, item) => {return prev + item
}, 0)
// 简写 
const sum = arr.reduce((prev, item) => prev + item, 0)// 商品列表数组 
const goodsList = [{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 3 },{ id: 3, name: '书籍', num: 2 }
]
// 求总数量？ 
const totalNum = goodsList.reduce((prev, item) => prev + item.num, 0)

七、对象的重要方法

Object.keys()

    const obj = {id: 10001,name: 'Bit',age: 9,address: '陕西省西安市⾼新区沣惠南路34号'}// 之前遍历对象: for-in循环 for (let key in obj) {console.log(key, obj[key])}// 获取对象键的数组 const keys = Object.keys(obj)console.log(keys)// ['id', 'name', 'age']// 可⽤来遍历对象 Object.keys(obj).forEach(key => {console.log(obj[key])})// Object.keys()拿到的是键的数组，可以对数组做很多处理在进⾏遍历对象 

    const obj = {id: 100001,name: 'Bit',age: 9,address: '陕西省西安市高新区沣惠南路34号'}// 需求：只遍历 obj 中以字母 a 开头的属性// ['id', 'name', 'age', 'address']Object.keys(obj).filter((key) => key.startsWith('a')).forEach(key => {console.log(key, obj[key])})

八、扩展运算符

作用1.在解构赋值时，用于收集余下所有的

作用2：复制数组或对象

const arr1 = [11, 22, 33]
// 赋值 
const arr2 = arr1
arr2.push(44)
console.log(arr1)// 受影响了 
// 正确的做法, 把 arr1 复制⼀份给到 arr2 
const arr2 = [...arr1]
const obj1 = {id: 10001,name: 'Bit',age: 9
}
// 赋值 
const obj2 = obj1
obj2.age = 10
console.log(obj1)// 受影响了 
// 正确的做法, 把 obj1 复制⼀份给到 obj2 
const obj2 = {...obj1}

受影响的结果：

作用3：合并数组或对象

const arr1 = [1,2,3]
const arr2 = [4,5,6]
// 把 arr1 和 arr2 合并起来给到 arr 
const arr = [...arr1, ...arr2]
const obj1 = {name: 'Jack',height: 176
}
const obj2 = {height: 180,age: 18
}
// 把 obj1 和 obj2 合并起来给到 obj 
// 注意: 同名属性会覆盖 
const obj = {...obj1,...obj2
}

九、序列化和反序列化

将对象转换为json格式字符串

体现在json格式数据的属性名必须用双引号，字符串类型必须用双引号

序列化：JSON.stringify(对象)

序列化   JSON.stringify(对象)

把对象转换为json格式字符串

// 对象 
const json = {id: 10001,name: 'Bit',age: 9
}
// 序列化 
const jsonStr = JSON.stringify(json)

反序列化   JSON.parse(字符串)

把json字符串转换为json数据

// json字符串 
const jsonStr = '{"id": 10001, "name": "Bit", "age": 9}'
// 反序列化 
const json = JSON.parse(jsonStr)

十、Web存储

     // 存localStorage.setItem('uname', 'Bit')// 取// 如果存在key，则取出相应的数据；否则取值为null(表示key不存在)console.log(localStorage.getItem('uname'))// 删localStorage.removeItem('uname')// 注意：数组或对象的存储const obj = {id: 10001,name: 'bit',age: 9}// 存：序列化localStorage.setItem('bit', JSON.stringify(obj))// 取：反序列化console.log(JSON.parse(localStorage.getItem('bit')))

十一、Promise+Aysnc/Await

十二、模块化