江苏龙网

  1. 主页 > 生活百科 > >

2021年要了解的34种JavaScript优化技术( 二 )

JavaScript优化


// Longhandlet test;function checkReturn() {if (!(test === undefined)) {return test;} else {return callMe('test');}}var data = https://www.isolves.com/it/cxkf/yy/js/2021-01-11/checkReturn();console.log(data); //output testfunction callMe(val) {console.log(val);}// Shorthandfunction checkReturn() {return test || callMe('test');}13.箭头函数//Longhand function add(a, b) {return a + b; } //Shorthand const add = (a, b) => a + b;更多示例 。
function callMe(name) {console.log('Hello', name);}callMe = name => console.log('Hello', name);14.短函数调用我们可以使用三元运算符来实现这些功能 。
// Longhandfunction test1() {console.log('test1');};function test2() {console.log('test2');};var test3 = 1;if (test3 == 1) {test1();} else {test2();}// Shorthand(test3 === 1? test1:test2)();15.Switch速记我们可以将条件保存在键值对象中，并可以根据条件使用 。
// Longhandswitch (data) {case 1:test1();break;case 2:test2();break;case 3:test();break;// And so on...}// Shorthandvar data = https://www.isolves.com/it/cxkf/yy/js/2021-01-11/{1: test1,2: test2,3: test};data[something] && data[something]();16.隐式返回速记使用箭头功能，我们可以直接返回值，而不必编写return语句 。
//longhandfunction calculate(diameter) {return Math.PI * diameter}//shorthandcalculate = diameter => (Math.PI * diameter;)17.小数基指数// Longhandfor (var i = 0; i < 10000; i++) { ... }// Shorthandfor (var i = 0; i < 1e4; i++) {18.默认参数值//Longhandfunction add(test1, test2) {if (test1 === undefined)test1 = 1;if (test2 === undefined)test2 = 2;return test1 + test2;}//shorthandadd = (test1 = 1, test2 = 2) => (test1 + test2);add() //output: 319.点差运算符速记//longhand// joining arrays using concatconst data = https://www.isolves.com/it/cxkf/yy/js/2021-01-11/[1, 2, 3];const test = [4 ,5 , 6].concat(data);//shorthand// joining arraysconst data = [1, 2, 3];const test = [4 ,5 , 6, ...data];console.log(test); // [ 4, 5, 6, 1, 2, 3]对于克隆，我们也可以使用传播运算符 。
//longhand// cloning arraysconst test1 = [1, 2, 3];const test2 = test1.slice()//shorthand// cloning arraysconst test1 = [1, 2, 3];const test2 = [...test1];20.模板文字如果您厌倦了在单个字符串中使用+来连接多个变量，那么这种速记方式将消除您的头痛 。
//longhandconst welcome = 'Hi ' + test1 + ' ' + test2 + '.'//shorthandconst welcome = `Hi ${test1} ${test2}`;21.多行字符串速记当我们在代码中处理多行字符串时，可以使用以下功能：
//longhandconst data = https://www.isolves.com/it/cxkf/yy/js/2021-01-11/'abc abc abc abc abc abcnt'+ 'test test,test test test testnt'//shorthandconst data = `abc abc abc abc abc abctest test,test test test test`22.对象属性分配let test1 = 'a'; let test2 = 'b';//Longhand let obj = {test1: test1, test2: test2}; //Shorthand let obj = {test1, test2};23.字符串成数字//Longhand let test1 = parseInt('123'); let test2 = parseFloat('12.3'); //Shorthand let test1 = +'123'; let test2 = +'12.3';24.分配速记//longhandconst test1 = this.data.test1;const test2 = this.data.test2;const test2 = this.data.test3;//shorthandconst { test1, test2, test3 } = this.data;25. Array.find的简写当我们确实有一个对象数组并且我们想要根据对象属性查找特定对象时，find方法确实很有用 。
const data = https://www.isolves.com/it/cxkf/yy/js/2021-01-11/[{type: 'test1',name: 'abc'},{type: 'test2',name: 'cde'},{type: 'test1',name: 'fgh'},]function findtest1(name) {for (let i = 0; i < data.length; ++i) {if (data[i].type === 'test1' && data[i].name === name) {return data[i];}}}//ShorthandfilteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');console.log(filteredData); // { type: 'test1', name: 'fgh' }26.查找条件速记如果我们有代码来检查类型，并且基于类型需要调用不同的方法，我们可以选择使用多个else if或进行切换，但是如果我们的速记比这更好呢？
// Longhandif (type === 'test1') {test1();}else if (type === 'test2') {test2();}else if (type === 'test3') {test3();}else if (type === 'test4') {test4();} else {throw new Error('Invalid value ' + type);}// Shorthandvar types = {test1: test1,test2: test2,test3: test3,test4: test4}; var func = types[type];(!func) && throw new Error('Invalid value ' + type); func();27.速记按位索引当我们迭代数组以查找特定值时，我们确实使用indexOf（）方法，如果我们找到更好的方法呢？让我们看看这个例子 。


推荐阅读


上一篇：445端口是什么服务类型?445端口是什么服务linux_1

下一篇：k8s部署高可用配置中心apollo-手动验证成功