1、vue中可以使用箭头函数吗？
methods中不可以使用箭头函数
methods：{
test: () => {
console.log(this) //undefined(不是vue实例)
}
}2、遍历数组有哪些方法？
1）forEach()
遍历数组，没有返回值，默认返回undefined
var arr = [1,2,3,4,5]
arr.forEach(function(value, index, array) {
console.log('数组元素' + value)；
console.log('数组索引' + index)；
console.log('原数组' + array)
})2）map()
遍历数组，返回一个新数组，新数组中的元素是判断旧数组中每个元素是否满足条件的结果
var arr = [1,2,3,4,5]
var newArr = arr.map(function(value) {
console.log('数组元素' + value);
return value > 3
})
console.log(newArr) //[false,false,false,true,true]
map.has(key)
判断map中是否有指定的键，返回bool值
map.set('key','value')
为Map对象添加一个指定键（key）和值（value）的新元素
let mymap = new Map(); mymap.set('key', 'value') console.log(mymap) //{'key' => 'value'} console.log(mymap.has('key')) //true console.log(mymap.has('value')) //false
3）filter()
遍历数组，筛选出满足条件的项，将满足条件的项放到新数组中并返回
var arr = [1,2,3,4,5]
var newArr = arr.filter(function(value, index, array){
return value > 3
})
console.log(newArr) //[4,5]
4）some()
遍历数组，判断数组中是否有满足条件的元素，有则返回true，没有则返回false
var arr = [1,2,3,4,5]
var result = arr.some(function(value, index, array){
return value > 3
})
console.log(result) //true5）every()
遍历数组，判断数组中的每个元素是否都满足条件，是则返回true，不是则返回false
var arr = [1,2,3,4,5]
var result = arr.every(function(value){
return value > 0
})
console.log(result) //true3、一些数组的API
1）arr1.concat(arr2,arr3)
合并多个数组，将数组arr2、arr3与arr1合并到一个新数组中，并返回
var arr1 = [1,2,3]
var arr2 = [4,5,6]
var arr3 = [7,8,9]
var newArr = arr1.concat(arr2,arr3)
console.log(newArr) //[1,2,3,4,5,6,7,8,9]2）arr.join()
用不同的分隔符将数组中的元素组成一个字符串，返回值是字符串
var arr = ["2022", "09", "28"]
var str1 = arr.join()
console.log(str1) //“2022,09,28”
var str2 = arr.join("")
console.log(str2) //"20220928"
var str3 = arr.join("-")
console.log(str3) //“2022-09-28”3）arr.unshift()
在数组开头添加元素，返回值是添加元素之后数组的长度
var arr = [1,2,3,4,5]
var result = arr.unshift(-1,0)
console.log(arr) //[-1,0,1,2,3,4,5]
console.log(result) //74）arr.shift()
删除数组的第一个元素，返回值是删除的元素
var arr = [6,2,3,4,5]
var result = arr.shift()
console.log(arr) //[2,3,4,5]
console.log(result) //65）arr.push()
在数组的末尾添加元素，返回值是添加元素之后数组的长度
var arr = [1,2,3,4,5]
var result = arr.push(7,8)
console.log(arr) //[1,2,3,4,5,7,8]
console.log(result) //7 6）arr.pop()
删除数组的最后一个元素，返回值是删除元素
var arr = [1,2,3,4,5]
var result = arr.pop()
console.log(arr) //[1,2,3,4]
console.log(result) //57）arr.reverse()
反转数组，将数组中元素的顺序反转
var arr = [1,2,3,4,5]
console.log(arr.reverse()) //[5,4,3,2,1]8）arr.sort()
数组排序（按字母升序）、数字排序（按数字升序 / 降序）
//按字母顺序升序
var arr1 = ["Banana", "Orange", "Apple", "Mango"]
console.log(arr1.sort()) //["Apple", "Banana", "Mango", "Orange"]
var arr2 = [66, 46, 52, 28, 79]
//按数字顺序升序
console.log(arr2.sort(function(a,b){ return a-b })) //[28, 46, 52, 66, 79]
//按数字顺序降序
console.log(arr2.sort(function(a,b){ return b-a })) // [79, 66, 52, 46, 28]9）arr.slice(start,end)
截取数组中的元素，放到一个新数组中，并返回
var arr = [1,2,3,4,5]
var newArr1 = arr.slice(1,3)
console.log(newArr1) //[2,3]
var newArr2 = arr.slice(1)
console.log(newArr2) //[2,3,4,5]
var newArr3 = arr.slice(-3,-1)
console.log(newArr3) //[3,4]
console.log(arr) //[1,2,3,4,5]10）arr.splice()
添加或删除数组中的元素
var arr = [1,2,3,4,5]
//删除数组中的元素，返回值是删除元素的数组
var newArr1 = arr.splice(4,0) //从数组索引为4的位置开始，删除0个元素
console.log(newArr1) //[]
var newArr2 = arr.splice(4,1) //从数组索引为4的位置开始，删除1个元素
console.log(newArr2) //[5]
console.log(arr) //[1,2,3,4]
11）arr.includes()
判断数组中是否存在指定值，是则返回true，否则返回false
arr = [1,2,3,4,5]
console.log(arr.includes(arr[1])) //true12）arr.reduce(callback(accumulator,currentValue[,index[,array]])[,initailValue])
对数组中每个元素执行回调函数，将其结果汇总为一个返回值并赋值给accumulator
① reduce函数的参数一般有两个，回调函数callback()和accumulator初始值initialValue
② callback()：作为一个累加器存在，accumulator是callback() 累计处理返回的值
③ accumulator：上一次callback()运行完成后返回的累计值
④ currentValue：当前数组下标对应的元素
⑤ index：当前数组下表
⑥array：对arr数组的引用
⑦initialValue：accumulator初始值
var arr = [1, 2, 3, 4, 5]
arr.reduce((accumulator, currentValue) => {
console.log('accumulator', accumulator)
return accumulator
}), 10)
//accumulator 10
//accumulator 11
//accumulator 12
//accumulator 13
//accumulator 14
//accumulator 1513）arr.indexOf()
14）arr.lastindexOf()
4、Map和WeakMap区别
map.has(key)
判断map中是否有指定的键，返回boolean值
map.set('key','value')
为Map对象添加一个指定键（key）和值（value）的新元素
let mymap = new Map(); mymap.set('key', 'value') console.log(mymap) //{'key' => 'value'} console.log(mymap.has('key')) //true console.log(mymap.has('value')) //false
5、数组去重
6、伪数组转换成数组
7、普通函数和箭头函数的区别
1）箭头函数语法更加简洁、清晰
2）箭头函数没有自己的this，而是继承外部的执行上下文中的this，所以箭头函数不能作构造函数
普通函数的this是“谁调用它，就指向谁”，普通函数可以作为构造函数
var a = 0
var obj = {
a: 1,
b: () => {
console.log(this.a) // 0
console.log(this) // Window
},
c: function() {
console.log(this.a) // 1
console.log(this) // {a: 10, b: ƒ, c: ƒ}
}
}
obj.b()
obj.c()具体详解：
//[new 构造函数]时做了什么
var obj = new Object() //创建空对象
obj.__proto__ = 构造函数.prototype //将空对象的__proto__属性链接至构造函数的原型
obj = this //将对象实例作为函数执行上下文中的this
return obj //返回对象实例3）箭头函数没有prototype
var a = () => {}
console.log(a.prototype) //undefined
var b = function{}
console.log(b.prototype) //{constructor:f} 4）箭头函数没有arguments，可以用扩展符来获取箭头函数的参数列表
//普通函数
function A(a) {
console.log(arguments);
}
A(1,2,3,4,5); // [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 箭头函数
var B = (b) => {
console.log(arguments);
}
B(1,2,3,4); // Uncaught ReferenceError: arguments is not defined
// 扩展符获取箭头函数的参数列表
let C = (...c) => {
console.log(c);
}
C(1,2,3,4); // [1,2,3,4]5）箭头函数不能使用yield关键字，不能用作Generator函数
8、普通函数和构造函数的区别
1）命名方式不同
为了区分，一般构造函数名首字母都要大写
2）调用方式不同
普通函数不需要new关键字调用，而构造函数需要
3）this指向不同
普通函数的this指向调用函数的对象，而构造函数的this指向创建的对象实例
4） 返回值不同
普通函数返回值由return语句决定，而构造函数默认返回值是创建的对象实例
9、 四个未知宽高元素水平垂直居中的方法
1）设置元素相对父级元素绝对定位
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%,-50%)
2）设置元素的父级元素为弹性盒子
display: flex;
justify-content: center;
align-items: center3）设置元素的父级元素为网格元素
display: grid;
justify-content: center;
align-items: center4）设置元素为行内块元素，父级元素为表格元素
//子元素
display: inline-block
//父元素
display: table-cell;
text-align: center;
vertical-align: middle
10、JS数据类型隐式转换三条转换规则
1）转换为string类型
| 基本数据类型 | 转换之后的值 |
| undefined | ’undefined‘ |
| null | ’null‘ |
| boolean | ’true‘和’false‘ |
| number | '具体数字类型值’ |
2）转换为number类型
| 数据类型 | 转换之后的值 |
| undefined | NaN |
| null | 0 |
| true | 1 |
| false | 0 |
| 空字符串 | 0 |
| 非空字符串 | 如果字符串是数字字符串，则转换为相应的数字； 如果字符串中含有非数字字符，则转换为NaN |
| [ ] | 0 |
| { } | NAN |
3）转换为boolean类型
| 数据类型 | true | false |
| string | 任何非空字符串 | 空字符串 |
| number | 任何非零数字 | 0或者NaN |
| undefined | undefined | |
| Object | 任何非null对象 | null |
+ 操作符：
1）+ 操作符两边有至少一个 string 变量时，两边变量都转换为字符串类型
1 + '23' //'123' '1' + false //'1false'2）其它情况下，两边变量转换为数字类型
1 + false //1 false + true //1 1 + '23' //23 1 * false //0- 、* 、/ 、 == 操作符：
两边变量转换为数字类型
1 / 'aa' //NaN 3 == true //false '0' == false //true '0' == 0 //true<、>比较符:
1）如果两边都是字符串，则比较字母表顺序
'ca' < 'bd' //false 'a' < 'b' //true2）其它情况下，转换为数字类型比较
'12' < 13 ///true false > -1 //false
11、js中如何进行数据类型隐式转换
ToPrimitive方法
这是js中每个值隐含的自带的方法，用来将值（无论是基本类型或是引用数据类型）转换为基本类型。
ToPrimitive(obj,type) //obj：需要转换的对象 type：要转换的数据类型（String或者Number）如果值为基本类型，则返回值本身；
如果值为引用数据类型，则：
1） 当 type 为 Number 时：
① 调用 obj 的 valueof() 方法，如果为原始值，则返回，否则下一步；
② 调用 obj 的 toString() 方法，后续同上；
③ 抛出 TypeError 异常
2）当 type 为 String 时：
① 调用 obj 的 toString() 方法，如果为原始值，则返回，否则下一步；
② 调用 obj 的 valueof() 方法，后续同上；
③ 抛出 TypeError 异常
注意：当 obj 为 Date 对象，type 默认为 String，其它情况 type 默认为 Number
valueOf() ：
Object原型方法，Object.prototype.valueOf()
该方法返回指定对象的原始值，若对象没有原始值，则返回对象本身
//obj 为字符串 var string = new String('12345') console.log(string.valueOf()) //'12345' //obj 为数组对象 var arr1 = [1,2,3,4,5] console.log(arr1.valueOf()) //[1,2,3,4,5] var arr2 = [] console.log(arr2.valueOf()) //[] //obj 为普通对象 var obj = { a:1, b:2, c:3 } console.log(obj.valueOf()) //{a: 1, b: 2, c: 3}toString()：
Object原型方法，Object.prototype.toString()
12、flex布局
13、document.getElementById()、getElementByClassName()、querySelector()的区别
<body>
<div class = "1"></div>
<div id = "2"></div>
<p class = "3"></p>
</body>
<script type="text/javascript">
var a1 = document.getElementsByClassName("1")
var a2 = document.getElementById("2")
var a3 = document.querySelector("p")
console.log(a1) //数组 [div.1]
console.log(a2) //DOM节点 <div id = '2'></div>>
console.log(a3) //DOM节点 <p class = "3"></p>
</script>14、var、let、const的区别
1）块级作用域
let、const存在块级作用域，而var不存在
2）变量提升
var存在变量提升，即在变量声明前能够使用变量，而let、const不行，会形成暂时性死区
3）给全局添加属性
浏览器的全局对象是window，var声明的变量是全局变量，即会将var声明的变量添加为全局对象的属性，而let、const不会
let m = 10 //var m = 10
function fn() {
return this.m + 1
}
var obj = {
m: 5,
test1: function() {
return fn()
}
};
obj.test2 = fn;
console.log(obj.test1(), fn(), obj.test2()) //NaN NaN 6 //11 11 6
//理解上面obj.test1()为什么等于11
var obj = {
m: 5,
test3: function() {
console.log(this.m); // 5
return function() {
console.log(this); //window
console.log(this.m); //undefined
}
}
}
obj.test3()();4）重复声明
var可以重复声明变量，后声明的同名变量会覆盖之前声明的变量，而let、const不行
5）初始值设置
var和let可以先声明而不赋值，const不行，const在声明变量时必须设置初始值且不能改变
//关于const声明的变量设置初始值后不能改变
const保证的是变量指向的内存地址不能动
如果const声明的变量是基本数据类型， 其值就保存在变量所指向的内存地址，等同于常量
如果const声明的变量是引用数据类型，变量指向的地址保存的是一个指针，const只能保证该指针不改变，至于其指向的数据结构是无法保证的
15、钩子函数
16、vue2 和 vue3 的区别
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
