js中對陣列進行處理兩種函數介紹（ filter()函數和indexOf()函數）-js教程-PHP中文網

js中對陣列進行處理兩種函數介紹（ filter()函數和indexOf()函數）

不言

發布： 2018-08-22 17:26:31

原創

2365 人瀏覽過

這篇文章帶給大家的內容是關於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>
    )
  }
},

登入後複製

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

/** 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>

登入後複製