【web前端】前段时间的面题整理(1)
这是我的试题答案整理,可能有多种答案。我也就写了一两种。在慢慢整合中
第一题
用js实现随机选取10-100之间的10个数字,存入一个数组,去重后求和(保证这10个数字不能出现重复)
要求:去重不能使用Set
请完善下面的题目
function sumOfRandomDistinctTenNumbers(){ // todo }
我的答案
分析:Math.random()*90是0到90随机数,+10是10到100随机数,Math.floor是取整。
filter 进行数组去重。
function sumOfRandomDistinctTenNumbers(){ let arr=[]//空数组 for(let i=0;i<10;i++){ arr[i]=Math.floor(Math.random()*90+10);//10-100的随机数 } // console.log(arr)//10个 //数组去重 arr=arr.filter((n,i)=>{ return arr.indexOf(n)===i }) num=arr.reduce((x,y)=>{ return x+y }) console.log(arr,num)//打印 } sumOfRandomDistinctTenNumbers()
起初,我不并不清楚Set这种方式,所以稍微看了下Set去重的方式,确实更简单。我们来看看
const quchong=arr=>[...new Set(arr)]; console.log(quchong([1,2,3,2,3,2,true,false,true,'','',[1,2,3,2]]))//[1,2,3,true,false,'',[1,2,3,2]]
不过,可以看到,一级数组已经去重了,二级数组还是没有去重的。不过一般二级数组还是应该遍历去重。
第二题
给定一个编码字符,按编码规则进行解码,输出字符串。编码规则是count[letter]
,将letter的内容count次输出,count是0或正整数,letter是区分大小写的纯字母,支持嵌套形式。
示例:
请完善下面的题目
const s1 = '10[a]2[bc]'; decodeString(s); // 返回'aaaaaaaaaabcbc' const s2 = '2[3[a]2[bc]]'; decodeString(s); // 返回 'aaabcbcaaabcbc' //请完善下面的方法 function decodeString() { // todo }
我的答案
分析:match正则表达式取出所有匹配“整数[字符串]”的集合,map遍历,将前面匹配的内容进行运算替换,递归调用该函数进行下一次匹配替换。直到替换完为止。
//解读字符串 function decodeString(str){ //若不存在[ 返回当前字符串 if(str.indexOf('[')==-1){ return str } //正则表示 整数[字符串] 并提取出所有匹配字符串 let list=str.match(/(\d+)(\[([a-z]|[A-Z])+\])/ig) list.map((l)=>{ //l为所有匹配字符串 let s=l.indexOf('[') let e=l.indexOf(']') let num=l.substring(0,s)//次数 let char=l.substring(s+1,e)//字符 let charStr='' for(let i=0;i<Number(num);i++){ charStr+=char } str=str.replace(l,charStr)//替换原字符串的匹配内容成新字符串 }) return decodeString(str);//再次重新解读新字符串 } console.log(decodeString('2[10[a]2[bc3[d]]]qq'))
第三题
基于 React 框架写一个列表,列表每项有一个删除该项的功能。
请完善下面的题目
'use strict'; import React, { Component } from 'react'; // 单项 class Item extends Component { state = { } constructor(props) { super(props); } // 补全删除功能 render() { return ( <div> {/* 在此完成功能 */} </div> ) } } // 列表 class List extends Component { state = { list: new Array(10).fill('') } constructor(props) { super(props); } render() { return ( <div> <h1>List</h1> {/* 完成渲染功能 */} </div> ) } }
我的答案
分析:List组件中有多个Item组件,点击删除自身。子组件回调父组件方法
'use strict'; import React, { Component } from 'react'; // 单项 class Item extends Component{ state={} constructor(props){ super(props) console.log(props.data) } //删除 回调父组件函数 delete(){ this.props.delete() } render(){ return ( <div> <span>内容{this.props.data.li}{this.props.data.i}</span> <a href='javascript:;' onClick={this.delete.bind(this)}>删除</a> </div> ) } } //列表 class List extends Component{ state={ //10个元素的空字符串数组 list:new Array(10).fill('') } constructor(props){ super(props) } //删除数组指定位置元素 delete(i){ let {list}=this.state delete list[i] this.setState({list:list}) } render(){ return ( <div> <h1>List</h1> { this.state.list.map((li,i)=>{ return ( <Item key={i} data={{li:li,i:i}} delete={this.delete.bind(this,i)} /> ) }) } </div> ) } }
效果图:
博客园作者:herry菌朋友,看到这里,关注作者的公众号吧,不漏掉更新哦
![]()