집 >웹 프론트엔드 >JS 튜토리얼 >js에서 배열을 처리하는 두 가지 함수(filter() 함수 및 indexOf() 함수) 소개

js에서 배열을 처리하는 두 가지 함수(filter() 함수 및 indexOf() 함수) 소개

不言원래의: 2018-08-22 17:26:312394검색

이 글에서는 js에서 배열을 처리하는 두 가지 함수(filter() 함수 및 indexOf() 함수)에 대해 소개합니다. 이는 특정 참조 값이 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 중복 제거 및 필터링.

/*
   * @interface Grid  1.行更新
   * */
  handleGridRowsUpdated = ({fromRow, toRow, updated })=> {
    console.log(&#39;1.handleGridRowsUpdated&#39;,arguments)
    let rows = this.state.rows;

    for (let i = fromRow; i <= toRow; i++) {
      let rowToUpdate = rows[i];
      let updatedRow = React.addons.update(rowToUpdate, {$merge: updated});
      rows[i] = updatedRow;
    }

    this.setState({ rows });
  };

  /*
   * @interface 2.选中行接口
   * @param {Array} 选中的行
   * */
  onRowsSelected = (rows ) =>{ /*新增选择的行*/
    //进行复选。
    this.setState( {
      selectedIds: this.state.selectedIds.concat( rows.map(r => r.row[this.props.rowKey])),
    });
    this.setState({
      selectedRows: this.state.selectedRows.concat( rows.map(r => r.row)),
    });
    //进行单选
     /* this.setState({
      selectedIds: rows.map(r => r.row[this.props.rowKey]),
    });
    this.setState({
      selectedRows: rows.map(r => r.row),
    });*/

  };

  /*
   * @interface 3.取消选中行接口
   * @param {Array} 取消选中的行
   * */
  onRowsDeselected = (rows /*取消选择的行*/) =>{
    let rowIds = rows.map(r =>  r.row[this.props.rowKey]);
    this.setState({
      selectedIds: this.state.selectedIds.filter(i => rowIds.indexOf(i) === -1 ), //
    });
    this.setState({
      selectedRows: this.state.selectedRows.filter(r => rowIds.indexOf(r[this.props.rowKey]) === -1 )
    });
  };


  /**
   * @interface 4.行选中接口
   * */
  onRowClick = (rowIdx, clickedRow)=>{
    //console.log(&#39;选中行&#39;, rowIdx,&#39;_行数据 &#39;, clickedRow);
    // case1. 如果是全选操作，跳过会自动调用onRowsSelected方法，如果是单选操作请隐藏全选checkbox视图操作
    if(rowIdx === -1){
      return;
    }
    // case2. 不是全选操作
    const hasSelected =  this.state.selectedRows.some((item)=>{
      return item[this.props.rowKey] === clickedRow[this.props.rowKey]
    });

    if(hasSelected){
      let rowIds = clickedRow[this.props.rowKey];
      //console.log(&#39;选中rowIds&#39;, rowIds );

      this.setState({
        selectedIds: this.state.selectedIds.filter(i => rowIds.toString().indexOf(i) === -1 )
      });
      this.setState({
        selectedRows: this.state.selectedRows.filter(r => rowIds.toString().indexOf(r[this.props.rowKey]) === -1 )
      });
    }else{
      // case2-case1. 采用赋值，如果是只能选中一行采用赋值，如果是合并选中行，采用concat方法来合并操作
      this.setState({selectedIds: [clickedRow[this.props.rowKey]]});
      this.setState({selectedRows: [clickedRow]});
    }
  };

2. 배열을 탐색합니다.

{
  title: &#39;类型&#39;,
  dataIndex: &#39;type&#39;,
  key: &#39;type&#39;,
  width: 80,
  sortable: false,
  render: (value, record, i)=>{
    //类型模块
    let _arr =[], text=&#39;&#39;;
    _arr = searchTextByValues(&#39;doctor_advice_type&#39;);//模块名称---匹配字典表。
    if(_arr.length > 0) {
      _arr.map((item)=> {
        if (value === item.value) {
          text = item.text;
          return
        }
      })
    }
    return (
      <span>{text}</span>
    )
  }
},

67ddc789647ae7cd92f6d2e66c26ff71

/** 2.2 字典表的模块类型  **/
matchDictionaryList = (type, value)=>{
  let moduleType = searchTextByValues(type);  return (
    moduleType instanceof Array ?
      moduleType.map((item)=>{
        if(item.value === value) { //匹配
          return  item.text;
        }
      })
     : &#39;&#39;  )}

용도:

<td><p className={`${inlineTrCls}`}>{ this.matchDictionaryList(&#39;project_detail_type&#39;, k.type)}</p></td>
<td><p className={`${inlineTrCls}`}>{k.ageMin}- {k.ageMax}</p> </td>
<td><p className={`${inlineTrCls}`}>{ this.matchDictionaryList(&#39;sex&#39;, k.sex)}</p></td>
<td><p className={`${inlineTrCls}`}>{k.minValue}-{k.maxValue}</p></td>

js에서 배열을 처리하는 두 가지 함수(filter() 함수 및 indexOf() 함수) 소개

관련 기사