【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<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>
        )
    }
}複製代碼

效果圖：