【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>
        )
    }
}

效果图：