前言
提示：以下是本篇文章正文内容，下面案例可供参考
一、统计字符个数（hasOwnProperty ）
1、每个字符出现的情况
给一个字符串，让你统计一些这些字符对于出现的次数
----------------示例------------- 1、 输入： s1 = 'aabbbbbccddd' 输出：{ a: 2, b: 5, c: 2, d: 3 } 2、 输入：s2 = 'ssstttyyyybbs' 输出：{ s: 4, t: 3, y: 4, b: 2 }
提示： 使用对象的hasOwnProperty 属性，键唯一性。
let Count = (str) => {
let obj = {}
for (let i = 0; i < str.length; i++) {
let elem = str[i];
if(obj.hasOwnProperty(elem)) {
obj[elem] ++
} else {
obj[elem] = 1
}
}
console.log(obj)
}
let s1 = 'aabbbbbccddd'
let s2 = 'ssstttyyyybbs'
Count(s1)
Count(s2)
输出----------
使用数组的reduce 函数来实现
let str = 'aaabbbcddde'
function countString(str) {
let arr = str.split('') // 使用split()方法分割字符串为数组
let countedNames = arr.reduce((allNames, name) => { // 使用数组的api,reduce 函数
if (name in allNames) {
allNames[name]++
} else {
allNames[name] = 1
}
return allNames
}, {});
return countedNames;
}
// 精练写法
function countString(str) {
return str.split('').reduce((allNames, name) => {
if (name in allNames) {
allNames[name]++
} else {
allNames[name] = 1
}
return allNames
}, {})
}
console.log(countString(str));
输出--
{ a: 3, b: 3, c: 1, d: 3, e: 1 }
reduce介绍
伪代码如下， 接收一个回调函数func和一个初始值init，返回一个数组遍历后的结果值result， 回调函数有四个参数
(previousValue, currentValue, currentIndex, array)，
currentIndex：数组中正在处理的元素的索引。若指定了初始值init，则起始索引号为 0，否则从索引 1 起始。array：用于遍历的数组。
回调函数第一次执行时
- 1、 有初始值init时 previousValue = init ,currentValue= arr[1],初始值可以时字符串、数字 、[]、{}，
- 2、 没有初始值时，previousValue = arr[0], currentValue = [1]
继续第二次执行回调函数时
- 1、previousValue = 上一次回调函数的的返回值 result
- 2 、 currentValue = 数组的下一个子项 即arr[2]
let 处理结果 = arr.reduce(func(p, c ,i a){ return result },init)
// 如结算和sum
const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(previousValue, currentValue) => previousValue + currentValue,
initialValue
);
console.log(sumWithInitial);
// expected output: 10
2、最高频的那个字符是那个？出现了几次？
相信到这一步应该就比较简单了吧，只要拿到上面对象里的最大值的属性，和属性的值就可以了， 我们可以使用( for key in obj ) 来拿到属性，属性拿到了，值自然就可以拿到了噢。当然还要定义两个变量来保存他们。
代码：
let couter = function (str) {
let obj = {}
for (let i = 0; i < str.length; i++) {
obj.hasOwnProperty(str[i]) ? obj[str[i]] ++ : obj[str[i]] = 1
}
let maxCount = 0
let maxString = ''
for (let key in obj) {
if(maxCount < obj[key]) {
maxCount = obj[key]
maxString = key
}
}
console.log(obj, `出现最多的字符为 ${maxString} 出现了${maxCount}次`);
}
couter('zzzyyxxr')
couter('ddhhshidbb')
输出
3、使用数组的特性排序计数
function couter(str) {
let maxCount = 0
let couter = 1
let maxString = ''
let strList= str.split('').sort();
for(let i = 0; i < strList.length; i++) {
if(strList[i] === strList[i + 1]) {
couter ++
if(couter > maxCount) {
maxCount = couter
maxString = strList[i]
}
} else {
couter = 1
}
}
console.log(`出现最多的字符为 ${maxString} 出现了${maxCount}次`);
}
couter('zzzyaaaaaaaaayxxr')
couter('ddhhsfffffffffffffhidbb')
输出
4、统计个数附加条件的写法
题目描述如图：
题目解法和解析
function maxCount(str) {
// 使用toLowerCase() 清除大小写的区别
let arr = str.toLowerCase().split('');
let obj = {}; // 用于统计字符个数
arr.forEach(item => {
if (obj[item]) {
obj[item]++
} else {
obj[item] = 1
}
})
// 将字符字数排序，并去重，
let arr1 = [... new Set(Object.values(obj).sort((a, b) => a - b))]
// 如果个数都相同，按照题目返回0
if (arr1.length === 1) { return 0 }
// 返回最高次数
return arr1[arr1.length-1]
}
测试
let str1 = 'a12tAAeettA';
let str2 = 'aaaAAA'
console.log(maxCount(str1)); // 4
console.log(maxCount(str2)); // 0
5、三的倍数
// 写一个程序，输出从1到 n 数字的字符串表示。 // 1.如果 n 是3的倍数，输出“Fizz”； // 2.如果 n 是5的倍数，输出“Buzz”； // 3.如果 n 同时是3和5的倍数，输出“FizzBuzz”。
function test(n) {
for (let i = 1; i <= n; i++) {
if (i % 3 === 0 && i % 5 === 0) console.log("FizzBuzz");
else if (i % 3 === 0 ) console.log("Fizz");
else if (i % 5 === 0) console.log("Buzz");
else console.log(i);
}
}
console.log(test(15));
输出
二、vue 2、3 生命周期、对象添加值
1.vue2 中输出什么
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue 2</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
<div id="app">
<div>{{animal.dog}}</div>
</div>
<script>
const app = new Vue({
el: '#app',
data(){
return {
animal: {}
}
},
created(){
this.animal.dog = 1
},
mounted(){
this.animal.dog = 2
},
})
</script>
</body>
</html>
输出：网页显示 1
为什么？
2.vue3 中输出什么
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue3</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
<div>{{animal.dog}}</div>
</div>
<script>
const app = Vue.createApp({
data(){
return {
animal: {}
}
},
created(){
this.animal.dog = 1
},
mounted(){
this.animal.dog = 2
},
})
app.mount('#root')
</script>
</body>
</html>
输出：网页显示 2
为什么？
答案下期一定！
三、js 对象类型
1、 对象的defineProperty
下面输出什么 ，为什么？
let obj = {name: "foo", sex:'men'}
Object.defineProperty(obj,"age",{value:18})
console.log(obj);
输出
{ name: 'foo', sex: 'men' }
下面会输出什么
let obj = {name: "foo", sex:'men'}
Object.defineProperty(obj,"age",{value:18,writable:true, enumerable:true,configurable:true});
console.log(obj);
输出
{ name: 'foo', sex: 'men', age: 18 }
因为对象的defineProperty定义的属性默认的writable、enumerabe、configurable 都是false。
2、 对象的存储（引用类型）
对象的赋值是 新对象指向所赋值对象的地址 如：下面会输出什么
var setPerson = function (person) {
person.name = "111111";
person = { name: "222222" };
};
var person = { name: "333333" };
setPerson(person);
console.log(person.name);
输出 》》》》》》》
为什么，先看看下面的例子
let obj = { name: "foo" }
let newObj = obj
newObj = { name: "bar" }
console.log(obj);
console.log(newObj);
输出
因为对象是引用类型，所以当newObj = {name:'bar'} 相当于newObj的指针指向了这个新的地址，因此旧的obj 的属性和值不会受到影响
let obj = { name: "foo" }
let newObj = obj
newObj.name = "bar"
console.log(obj);
console.log(newObj);
输出
因为newObj 改变的是对象的属性值，这里name是值类型的，因此obj的name的值也直接被改动了
四、 闭包考察
let outer = function (num) {
let inter = function () { return alert(num) }
num++
console.log(num);
return inter()
}
outer(1)
输入2，因为存在闭包，返回的函数中有包含了该变量，它的执行期上下文不会被清除 所以执行num++ 操作，结果为2！
总结
提示：这一些前端笔试题，主要是函数和对象的考察。
