Salesforce LWC学习(十) 前端处理之 list 处理

import { LightningElement, track, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';import getSingleContact from '@salesforce/apex/ContactController.getSingleContact';export default class ReduceSample extends LightningElement {@track disabled = false;@track error;@wire(getSingleContact)contact;handleChange(event) {// Display field-level errors and disable button if a name field is empty.if (!event.target.value) {event.target.reportValidity();this.disabled = true;}else {this.disabled = false;}}updateContact() {let allInputList = Array.from(this.template.querySelectorAll('lightning-input'));/*方法声明如下：(method) Array<any>.reduce(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any, initialValue: any): any (+2 overloads)Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function. Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.@param callbackfn — A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.@param initialValue — If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.*/const allValid = allInputList.reduce((validSoFar, inputFields) => {inputFields.reportValidity();return validSoFar && inputFields.checkValidity();}, true);if (allValid) {//TODO success related operation} else {// The form is not validthis.dispatchEvent(new ShowToastEvent({title: 'Something is wrong',message: 'Check your input and try again.',variant: 'error'}));}}
}

五. map & filter

map用来返回一个新数组，不影响原有的操作的list。这个新数组可以为这个list的每条数据针对某个条件处理以后的值，比如我们想要将一个list的里面的每一个值都乘以5然后返回一个新的数组，这个时候我们就可以使用map，只需要条件为对item * 5的操作即可。

filter用来使用指定的函数测试所有元素，并返回一个包含所有通过测试的元素的新数组，此方法不影响原有的list。

这两个基础的意思了解以后，来个demo更好的了解一下。

mapSample.html

<template><lightning-input label="Category 1" type="checkbox" onchange={handleCheckboxChange}></lightning-input><lightning-input label="Category 2" type="checkbox" onchange={handleCheckboxChange}></lightning-input>
</template>

/* eslint-disable no-console */
import { LightningElement } from 'lwc';export default class MapSample extends LightningElement {handleCheckboxChange() {const lightningInputList = Array.from(this.template.querySelectorAll('lightning-input'));console.log(JSON.stringify(lightningInputList));const filters =  lightningInputList.filter(element => element.checked).map(element => element.label);console.log(JSON.stringify(filters));}
}