※前端面试--阿里笔试js,react等相关）

阿里笔试–前端

/* 题目一：
请完成“空白处”代码，使得以下组件在选择时能够将合适的值打印出来 */
class Counter extends React.Component {
    select(val) {
        console.log('you have select' + val);
    }
    render() {
        return (<ul>
           { 
               ['a','b','c'].map((item, index) => {
                   return <li onClick={(e)=>this.select(item,e)}>{item}</li>
                   //return <li onClick={(e)=>this.select(item)}>{item}</li>
                   //return <li onClick={()=>this.select(item)} key={index}>{item}</li>
               })
           }
       </ul>)
    }
}
 
 
/* 题目二：
请实现find函数，使下列的代码调用正确。
约定：
title数据类型为String
userId为主键，数据类型为Number */
var data = [
    {userId: 8, title: 'title1'},
    {userId: 11, title: 'other'},
    {userId: 15, title: null},
    {userId: 19, title: 'title2'}
];
 
var find = function(origin) {
    //思想柯里化
    return {
      where:function(findObj){
        //findObj = { title: /\d$/ }
        const result = [];
        let key = Object.keys(findObj)[0];
        console.log(key)
        let regExp = findObj[key];//提取出where的条件
        origin.forEach((item)=>{
          if(regExp.test(item[key])){
            result.push(item)
          }
        })
        return {
          orderBy:function(order,rule){
            let sortf = null;
            if(rule == 'desc'){
              sortf = function(a,b){
                return b[order]-a[order];
              }
            }else{
              sortf = function(a,b){
                return a[order]-b[order];
              }
            }
            result.sort(sortf)
            return result;
          }
        }
      }
    }
}
 
//查找data中，符合条件的数据，并进行排序
var result = find(data).where({
    "title": /\d$/
}).orderBy('userId', 'desc');
 
console.log(result); // [{ userId: 19, title: 'title2'}, { userId: 8, title: 'title1' }];
 
 
 
 
/* 题目三：
下面是一个redux中间件，补充“空白处”代码，使得dispatch支持action为函数作为返回值 */
  export default function() {
    return ({ dispatch, getState }) => next => action => {
      if (typeof action == 'function') {
        return action(dispatch,getState);
      }
      return next(action);
    };
  };
 
 
 
/* 题目四：
为 Function 扩展一个通用的方法 bindX，可以实现如下功能 */
  function add(num1, num2) {
      return this.value + num1 + num2;
  }
 
  var data = {
      value: 1
  };
 
  Function.prototype.bindX = function(data, ...outArgs){
    let _this = this;//一开始bindX的直接调用者是add，所以this是add函数环境
    return function(...innerArgs){
      return _this.call(data,...(outArgs.concat(innerArgs)))  //call的第二个参数是多个参数，apply是数组
    }
  }

  var addEx = add.bindX(data, 2);  //使用call改变函数上下文执行环境,add中的参数一个在这里，一个在下面addEx中
 
  console.log(addEx(3));    // 6
 
 
 
 
 
 
/* 题目五：
有一个数组，里面只存在 * 和 字母，比如 [‘*’, ‘d’, ‘c’, ‘*’, ‘e’, ‘*’, ‘a’, ‘*‘]。现在需要把这个数组中的所有星号移动到左边，所有的字母移动到右边，所有字母的顺序不能改变。 */
var arr = ['*', 'd', 'c', '*', 'e', '*', 'a', '*'];
 
function parse(arr){
  //使用一个下标记来记住*的位置，使用splice(pos,0,item) 在pos处插入新的项
  let count = 0;
  for(let i=0; i<arr.length; i++){
    let temp = arr[i];
    if(temp == '*'){  
      arr.splice(i,1);//将当前*删除，准备放到count处插入
      arr.splice(count,0,temp);//上面一次删除一次插入，不会影响后面的数的顺序
      count++;
    }
  }
  return arr;
 }
 
 console.log(parse(arr));