工作常见的一些简单的js函数及相应代码

刚开始实习 如有写不正确的地方,还望见谅！

工作常见的一些简单的js函数及相应代码

1:filter() forEach() map() find()
filter()筛选数组
1>创建新数组不改变原数组
2>输出的是判断为true的数组元素形成的新数组
3>回调函数参数 item(数组元素) index(序列) arr(数组本身)
例如：
在国际物流系统中,每一条数据(item)都存在封箱标签的数据,现想要删除封箱标签为空的数据，然后打印
this.state.selectedRow.filter(x=>x.boxLabel)
表示 每条数据(x)中会筛掉boxLabel为空的情况 再返回为一个新数组

	get selectedRowsWithLabel(): BoxNoModel[] {
		return this.state.selectedRow.filter(x => x.boxLabel);
	}
//对应的组件的data
    {printBoxLabel && (
					<PrintBoxLabelContainer
						data={this.selectedRowsWithLabel}
						close={() => this.printLabel(false)}
					/>
				)}

map()更新数组
1>创建新数组,不改变原数组
2>结果是return的什么就是什么
3>回调函数参数 item(数组元素) index(序列) arr(数组本身)

forEach()
遍历数组全部元素,利用回调函数对数组进行操作,在break中无法跳出循环
不可控,不支持return操作输出,return只用于控制循环是否跳出当前循环
因此难操作成新数组,新值。
例:

var arr = [1,2,3,4,5,] ;
arr.forEach(function(item,index){
	console.log(item);
});

2:**match()和test()**匹配正则表达式
match()::
用法一：
字符串内检索指定的值
var str = “Hello world!”
str.match(“world”);=>world
str.match(“worllld”);=>null
str.match(“World”);=>null

用法二:
找到一个或多个正则表达式的匹配

const label = this.props.form.getFieldValue("label");
		if (!val && (label === "" || !label.match(/^[0-9a-zA-Z-]+$/))) {
			this.props.form.resetFields(["label"]);
		}

含义：判断输入框内的值是否符合正则表达式
只要存在不匹配正则的元素在 则为null

test()方法
例如：

const label = getFieldValue("label") || "";
		const regex: RegExp = /^[0-9a-zA-Z-]+$/;
		if (!val && (label.length > 15 || !regex.test(label))) {
			resetFields(["label"]);
		}

两者方法的区别
match() : str.match(RegExp);
test() : RegExp.test(str);
注：当str为空时(null) 只能用test()方法

3:多条if-elseif 或switch语句的简化
最笨的方法：死亡代码又称小学生编程入门

if(strLength<=12){
	fontSize:"68px";
}else if(strLength>12 && strLength<=14){
	fontSize:"65px";
}else if(strLength>14 && strLength<=16){
	fontSzie:"60px";
}else if(strLength>16 && strLength<=18){
	fontSzie:"58px";
}else if(strLength>18 && strLength<=20){
	fontSize:"52px";
}else if(strLength>20 && strLength<= 22){
	fontSize:"48px"
}

第一种思路:
改成switch case语句

checkLabelLength = (labelLength: number, checkedNum: number) =>
     labelLength > checkedNum && labelLength <= checkedNum + 2;

    formatFontSize() {
     const { data } = this.props;
     const boxLabelLength = data.boxLabel.length;
     let labelFontSize = 33;
     switch (true) {
         case boxLabelLength <= 12:
             labelFontSize = 64;
             break;
         case this.checkLabelLength(boxLabelLength, 12):
             labelFontSize = 61;
             break;
         case this.checkLabelLength(boxLabelLength, 14):
             labelFontSize = 58;
             break;
         case this.checkLabelLength(boxLabelLength, 16):
             labelFontSize = 49;
             break;
         case this.checkLabelLength(boxLabelLength, 18):
             labelFontSize = 44;
             break;
         case this.checkLabelLength(boxLabelLength, 20):
             labelFontSize = 40;
             break;
         case this.checkLabelLength(boxLabelLength, 22):
             labelFontSize = 33;
             break;
     }
     return labelFontSize;
    }

第二种思路 将fontSize存储为数组

const fontSizeList = [
	{ length: 0, size: 65 },
	{ length: 12, size: 62 },
	{ length: 14, size: 59 },
	{ length: 16, size: 55 },
	{ length: 18, size: 46 },
	{ length: 20, size: 43 },
	{ length: 22, size: 35 },
	{ length: 24, size: 30 }
];

getFontSizeByLength = (labelLength: number): number => {
	const row = fontSizeList.sort((a, b) => b.length - a.length).find(x => x.length < labelLength);
		return row ? row.size : 34;
};

     <p
		style={{
			fontSize: `${this.getFontSizeByLength(pack.boxLabel.length)}` + `${"px"}`,
			letterSpacing: 1,
			height: "80px",
			fontWeight: "bolder",
		    textAlign: "center",
			marginTop: "2px"
			}}
      >
		{pack.boxLabel}
      </p>