【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()复制代码

第二题

给定一个编码字符，按编码规则进行解码，输出字符串。编码规则是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

第三题

基于 React 框架写一个列表，列表每项有一个删除该项的功能。

请完善下面的题目

'use strict';import React, { Component } from 'react';// 单项class Item extends Component {  state = {  }  constructor(props) {    super(props);  }    // 补全删除功能  render() {    return (      
    
             {/* 在此完成功能 */}      
    
    )  }}// 列表class List extends Component {  state = {    list: new Array(10).fill('')  }  constructor(props) {    super(props);  }  render() {    return (      
            
     List
        {/* 完成渲染功能 */}      
    
    )  }}复制代码

我的答案

分析：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 (            
                    
     内容{this.props.data.li}{this.props.data.i}                
     删除            
    
        )    }}//列表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 (            
                    
     List
                {                    this.state.list.map((li,i)=>{                        return (                            
                             )                    })                }            
    
        )    }}复制代码

效果图：