jsで配列を処理する2つの関数（filter()関数とindexOf()関数）の紹介

この記事では、js で配列を処理するための 2 つの関数 (filter() 関数と IndexOf() 関数) を紹介します。必要な方は参考にしていただければ幸いです。

1. 重複排除とフィルタリング。

/*
   * @interface Grid  1.行更新
   * */
  handleGridRowsUpdated = ({fromRow, toRow, updated })=> {
    console.log('1.handleGridRowsUpdated',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: '类型',
  dataIndex: 'type',
  key: 'type',
  width: 80,
  sortable: false,
  render: (value, record, i)=>{
    //类型模块
    let _arr =[], text='';
    _arr = searchTextByValues('doctor_advice_type');//模块名称---匹配字典表。
    if(_arr.length > 0) {
      _arr.map((item)=> {
        if (value === item.value) {
          text = item.text;
          return
        }
      })
    }
    return (
      <span>{text}</span>
    )
  }
},

<====================== ViewLabProjectModal ====================== = ===================>

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

使用:

<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の配列(Array)処理関数の配置_基礎知識

js が配列を取得し、php 配列を処理する方法

以上がjsで配列を処理する2つの関数（filter()関数とindexOf()関数）の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。