前端常见问题

半步非烟

已于 2023-08-14 14:27:54 修改

阅读量58

点赞数

文章标签：前端 javascript vue

于 2023-03-08 15:47:00 首次发布

本文链接：https://blog.csdn.net/qq_39534956/article/details/129397979

版权

文章详细介绍了JavaScript中的数组方法，如slice()的使用，以及字符串方法、浅拷贝与深拷贝的概念。此外，还讲解了防抖、节流技术，以及如何改变this指向。在Vue部分，对比了Vue与jQuery的区别，阐述了Vue的生命周期、组件通信方式和Vuex的状态管理。

摘要由CSDN通过智能技术生成

一、JS

1、常用数组方法

pop() 尾部删除
push() 尾部添加
unshift() 头部添加
shift() 头部删除
join() 将数组以指定字符拼接为字符串
concat() 将多个数组拼接为一个数组
splice(开始位置，删除个数，新增元素) 数组的删除、替换、添加
isArray() 判断是否为数组
toString() 将数组以字符串形式返回
forEach()
map()
filter()
slice(start, end) 用于提取数组中的一部分元素，并返回一个新数组，而不会修改原始数组。

slice()方法的语法如下：
array.slice(start, end)
其中，array是要提取元素的数组，start是起始位置的索引（包括该位置），end是结束位置的索引（不包括该位置）。
如果省略end参数，则提取从start位置到数组末尾的所有元素。
slice()方法返回一个新数组，包含从start位置到end位置之间的元素。
如果start和end参数都是正数，则从左往右提取元素；
如果start和end参数都是负数，则从右往左提取元素；
如果start是负数，end是正数，则从数组末尾的位置开始提取元素。
以下是一些示例代码：
const arr = [1, 2, 3, 4, 5];
const slice1 = arr.slice(1, 3); // [2, 3]
const slice2 = arr.slice(2); // [3, 4, 5]
const slice3 = arr.slice(-2); // [4, 5]
const slice4 = arr.slice(-3, -1); // [3, 4]
在上面的示例代码中，我们使用slice()方法从数组中提取了不同的元素，并将结果存储在不同的变量中。
请注意，原始数组并没有被修改，slice()方法只是返回了一个新数组。

2、常用字符串方法

trim() 去除首位空格
split() 将字符串以指定字符分割为数组
indexOf(str)
lastIndexOf(str)
substr(start, length)
substring(start, end) 截取start-end之间的字符(不含end)
replace(str1, str2) 替换
charAt(index) 返回指定索引处的字符
toLowerCase() 转小写
10.toUpperVase() 转大写

3、浅拷贝和深拷贝

浅拷贝
(1) 直接变量赋值
(2) Object.assign(); 当Object只有一层的时候是深拷贝
(3) 扩展运算符(…); 当Object只有一层的时候是深拷贝
深拷贝
(1) JSON.stringify() 和 JSON.parse()
(2) 递归遍历赋值：

function deepClone(data) {
  var newData = data instanceof Array ? [] : {}
  for (key in data) {
    if (data[key]) {
      newData[key] =  typeof data[key] === 'object' ? deepClone(data[key]) : data[key]
    }
  }
  return newData
}

4、防抖与节流

防抖
触发事件后在n秒内只执行一次，如果在此期间又触发事件，则会重新计算执行时间。
节流
每次触发事件的间隔时间至少要大于等于n秒，不会重置计时。

5、强制类型转换和隐式类型转换

强制类型转换
(1) Number()
(2) parseInt()
(3) parseFloat() …
隐式类型转换
(1) 转String：任何值+字符串 = 字符串；例：1+‘’
(2) 转Number：任何值(-*/%)数字 = 数字；例：‘1’-0

6、form中的input设置为readonly和disabled的区别

readonly ：不可编辑，但可以选择和复制，值可以传递到后台
disabled ：不可编辑，不能选择和复制，值不可以传递到后台

7、如果改变this指向？

apply()、call()、bind()
apply第二个参数都是数组，call和bind接收多个参数并用逗号隔开；
apply和call只对原函数做改动，bind会返回新的函数(要生效还得再调用一次)。

8、for循环中 continue 与 break 的区别

continue 跳过本次循环，直接执行下一次循环
break 终止循环

9、浏览器存储方式：localStorage、sessionStorage、cookie

localStorage：永久存储
sessionStorage：只存储于当前会话页面
cookie：数据默认会话结束时过期，但可以设置过期时间

10、数组去重

方式一：
var arr = [1, 2, 2, 3];
var arr1 = []
for (var i in arr) {
  if (arr1.indexOf(arr[i]) === -1) {
    arr1.push(arr[i])
  }
}
方式二：
var arr2 = Array.from(new Set(arr))

11、数组排序

方式一：
var arr = [3, 2, 4, 1];
arr.sort(function (a, b){
  return a-b
})
方式二：
for (var i = 0; i<arr.length; i++) {
  for (var j=i+1; j<arr.length; j++) {
    if (arr[i] > arr[j]) {
      var item = arr[i]
      arr[i] = arr[j]
      arr[j] = item
    }
  }
}

12、字符串翻转

实现思路：先用split()切割为数组，再使用reverse()翻转数组，最后join()拼接为字符串
即：str.split(‘’).reserve().join(‘’)

13、var、const、let三者的区别

var可以重复定义变量，var没有块级作用域{}，const和let反之
const定义的是常量，不可以修改

14、使用Promise获取图片大小

function getImageSize(url) {
	return new Promise((resolve, reject) => {
		let img = new Image();
		img.src = url
		img.onload = function () {
			let size = {
				width: img.width,
				height: img.height
			}
			resolve(size)
		}
	})
}

二、Vue

1、Jquery和Vue的区别

Vue：数据和视图完全分开，首先把值和对象进行绑定，然后修改js对象的值，视图层数据就会自动更新，实现相互绑定。
Jquery：使用选择器选取dom对象进行操作

2、修饰符

v-model修饰符：.number、.trim、.lazy
事件修饰符：.stop、.prevent、.once、.native(监听组件根元素的原生事件)

3、生命周期

页面初始化渲染阶段（只执行一次）
1.beforeCreate
2.created
3.beforeMount
4.mounted
数据更新渲染阶段（多次）数据更新时执行
5.beforeUpdate
6.updated
vue销毁阶段（一次），销毁时执行
7.beforeDestroy
8.destroyed

4、组件通讯方式

props / $emit
vuex
ref / $refs
$parent / $children
$attrs / $listeners
provide/ reject

5、Vuex

//第一步：在main.js引入 
import store from './store'

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

//第二步：在store/index.js中配置
import Vue from 'vue'
import Vuex from 'vuex'
import common from './common'

const store = new Store({
	//类似data
	state() {
		return {
			userInfo: null,
		}
	},
	//类似methods
	mutations: {
		setUserInfo(state, data) {
			state.userInfo = data
		}
	},
	//模块拆分(赋值和取值时需要加上模块名：common)
	modules: {
		common
	}
})
export default store

//第三步：赋值和取值
//赋值
this.$store.commit('userInfo', data)
//直接取值
let userInfo = this.$store.state.[模块名common].userInfo
//使用mapState取值
import { mapState } from 'vuex'
computed: {
	...mapState('common', {
		userInfo: state => state.userInfo
	})
}