Vue3入门-必会前置知识

Yui_

发布于 2025-07-15 14:51:32

6300

代码可运行

文章被收录于专栏：Yui编程知识Yui编程知识

运行总次数：0

代码可运行

在学Vue3前，JS的基础知识是必须要知道，如果你有其他语言的基础的话，JS的语法非常简单，下面笔者会带大家回顾一下JS的基础语法，作为Vue3必会的前置基础知识。

1. 变量和常量

1.1 变量

JS为弱类型语言，定义变量时无需指定类型。

let name = 'yui' // "yui"也可 类似Python
let age = 17

name = 'anna'
age = 14

定义变量前的let也可用var替换。但是更推荐let 具体可以阅读：let 和 var的区别

1.2 常量

定义后无法改变的称为常量。

const PI = 3.14

const arr = []

const stu = {
	name:'yui',
	age:17
}

注意：如果 const 修饰的数组它是可以进行添加和删除的类似于C语言的指针。下面是画图讲解：

导致了不能修改arr的地址内容，但是可以修改arr指向的数组内容。

2. 模板字符串

2.1 普通字符串

在JS中的普通字符串和Python中的类似，可以使用单引号也可以使用双引号。

let name = 'Yui'
let s = 'abcdefg'

2.2 模板字符串

使用一对反引号声明。反引号（ESC健下面的）

let name = `Yui`
let s = `abcdefg`

优点：

可以任意换行

const Str = `a
b
c
d
e`

可以嵌入表达式

let name = `Yui`
let age = 17
let str = `大家好，我是${name}，我今年${age}岁了`

3. 对象

3.1 取值

const Stu = {
	name:'Yui',
	age:17
}

console.log(Stu.name)
console.log(Stu.age)
//等价于
console.log(Stu['name'])
console.log(Stu['age'])

注意：当属性名是变量时，只能利用中括号取值。

const Stu = {
	name:'Yui',
	age:17
}
let x = 'name'
console.log(Stu[x])//可以
console.log(Stu.x)//不可以

3.2 简写

3.2.1 属性简写

当属性名和属性值相同时，可以简写。

let min = 1
let max = 2
const test = {
	min:min,
	max:max
}
//简写
const test = {
	min,
	max
}

3. 2.2 方法简写

const test = {
	fn:function(){
	}
}
//简写
const test = {
	fn(){
	}
}

4. 结构赋值

主要针对数组和对象

4.1 数组解构

将arr 中的3个值赋值给变量a,b,c
将arr中的后面两变量赋值给变量b,c
将arr中的第一个变量赋值给a，剩余变量赋值给v

const arr = [11,22,33]

//1
let [a,b,c] = arr

//2
let [,b,c] = arr

//3
let [a,...v] = arr

4.2 对象解构

将Stu的3个属性分别赋值给name,age,sex
将Stu的age,sex赋值给age,sex
将Stu的name的属性赋值给name,剩余的全部给到v
将Stu的name赋值给xixi

const Stu = {
	name:'Yui',
	age:17,
	sex:'女'
}
//1
const {name,age,sex} = Stu

//2
const {age,sex} = Stu

//3
const {name,...v} = Stu

//4
const {name:xixi} = Stu

5. 箭头函数

//普通函数
function fn(){
	//...
}

const fn = function(){
	//...
}

5.1 语法

其实很简单

const fn = ()=>{
	//...
}

const max = (x,y)=>{
	return x>y?x:y
}

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

const fn = name =>{
	console.log(name)
}

当省略大括号时，函数自带return

const max = (x,y)=>{
	return x>y?x:y
}
//等价
const max = (x,y)=>{
	x>y?x:y
}

当函数体直接返回一个对象时，如果需要简写给对象加一对小括号

const test = () => (
	{
		name:'Yui',
		age:17
	}
)
//等价
const test = () => {
	return {
		name:'Yui',
		age:17
	}
}

箭头函数多用于回调函数传参

setTimeout(()=>{
},2000)

6. 数组的重要方法（重点）

6.1 添加

push和unshift 有返回值（操作后的数组长度）

const arr = [1,2,3]

//尾插
arr.push(4) 

//头插
arr.unshift(0)

6.2 删除

pop和shift 有返回值（操作后的数组长度）

const arr = [1,2,3]

//尾删
arr.pop()

//头删
arr.shift()

6.3 任意位置的添加与删除

splice

const arr = [1,2,3,4]

//删除 2
arr.splice(1,1)

//在3后面添加5
arr.splice(2,0,5)

6.4 包含

includes

const arr = [1,2,3,4]
console.log(arr.includes(33))//false
console.log(arr.includes(3))//true

6.5 遍历

forEach

const arr = [1,2,3,4]

//语法
arr.forEach((item,index,array)=>{
	//item:每次遍历的元素
	//index:元素的下标
	//array:数组本身
})

6.6 过滤

filter() 保留满足条件的，去掉不满足条件的

const arr = [1,2,3,4]
//语法
const test = arr.filter((item,index,array)=>{
	//遍历数组，如果返回true元素保留否则删除
	return bool值
})

//删除所有奇数


//简写
const test = arr.filter(item=>item%2 === 0)

6.7 映射

map 通过一个数组得到另一数组，两者长度相同，有一一对应的关系。

const arr = [1,2,3,4]

//语法
const newArr = arr.map((item,index,array)=>{
	return 新值
})
//得到 2 4 6 8
const newArr = arr.map(item=>item*2)

6.8 检测每一个

every

const arr = [1,2,3,4]

//语法
arr.every((item,index,array)=>{
	return bool值
})
//如果返回true，继续检测，一旦返回false终止检测返回false
//检测数组是否都是奇数
const test = arr.every( item => item%2===1)

6.9 汇总

reduce

const arr = [1,2,3,4]

//语法
const res = arr.reduce((prev,item,index,array)=>{
	return 结果
},初始值)

//对arr求和
const ans = arr,reduce((prev,item)=>{
	return prev+item
},0)

7. 对象的重要方法

Object.keys()

const Stu = {
	name:'Yui',
	age:17,
	sex:'女'
}

//获取对象键的数组
const keys = Object.keys(Stu)

//可以配合数组的方法，遍历对象
Object.keys(Stu).forEach(key=>{
	console.log(Stu[key])
})

8. 扩展运算符

8.1 复制数组或者对象

const arr1 = [1,2,3]

//赋值
const arr2 = arr1
arr2.push(4)
//arr1 也受到影响
//这是因为引用的关系

//正确的做法
const arr2 = [...arr1]

//同理
const Stu1 = {
	name:'yui',
	age:17
}

const Stu2 = {...Stu1}

8.2 合并数组或对象

const arr1 = [1,2,3]
const arr2 = [4,5,6]

//合并
const arr = [...arr1,...arr2]
//对象同理
const Stu1 = {
	name:'yui',
	age:17
}

const Stu1 = {
	sex:'女'
}

Stu = {
	...Stu1,
	...Stu2
}

9. 序列化和反序列化

9.1 序列化

把对象转化为Json格式字符串

const Stu1 = {
	name:'yui',
	age:17
}

//序列化
const JsonStr = JSON.stringify(Stu1)

9.2 反序列化

把Json字符串转化为Json数据

const JsonStr = '{"name":"yui","age":17}'

//反序列化
const json = JSON.parse(JSonStr)

10. Web存储

10.1 介绍

Web Storage包含如下两种机制：

sessionStorage该存储区域在页面会话期间可用（只要浏览器处于打开状态，包括页面重新加载和恢复）
- 仅为会话存储数据，这意味着数据将一直存储到浏览器关闭。
- 数据永远不会被传输到服务器。
- 存储限额大于Cookie
localStorage即使浏览器关闭并重新打开也仍然存在。
- 存储的数据没有过期日期，只能通过JS、清除浏览器缓存或者本地的数据来清除。

10.2 用法

以localStorage为例存

//存 语法
localStorage.setItem(key:String,value:string)

localStorage.setItem('uname','yui')
//存对象和数组，需要序列化

取

//语法
localStorage.getItem(key:string)

const uname = localStorage.getItem('uname')

删

//语法
localStorage.removeItem(key:string)

localStorage.removeItem('uname')

11. 总结

Vue3前置必会知识，大概就这些了。除此外还有一些模块化的知识，大家可以主动的去了解。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-07-14，如有侵权请联系 cloudcommunity@tencent.com 删除

语法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度