返回
程序员装备库的秘密武器:JS 简写技巧大揭秘,速成代码高手!
前端
2023-11-21 20:59:51
在程序员的世界里,代码就是语言,而 JS 简写技巧就是行走的捷径,不仅能让你写代码的速度翻倍,还能让你的代码更加简洁、优雅,成为编程高手的必备武器。今天,我们就来揭秘 19 个 JS 简写技巧,助你轻松实现代码速度翻倍!
-
箭头函数 :
- 普通函数 :
function add(a, b) { return a + b; }
- 箭头函数 :
const add = (a, b) => a + b;
- 普通函数 :
-
数组解构 :
- 普通解构 :
const numbers = [1, 2, 3]; const [a, b, c] = numbers;
- 嵌套解构 :
const person = { name: 'John', age: 30, address: { city: 'New York', state: 'NY' } }; const { name, age, address: { city, state } } = person;
- 普通解构 :
-
对象扩展运算符 :
- 普通对象合并 :
const obj1 = { name: 'John' }; const obj2 = { age: 30 }; const combinedObj = Object.assign({}, obj1, obj2);
- 对象扩展运算符 :
const combinedObj = { ...obj1, ...obj2 };
- 普通对象合并 :
-
模板字符串 :
- 普通字符串拼接 :
const name = 'John'; const age = 30; const message = 'My name is ' + name + ' and my age is ' + age;
- 模板字符串 :
const message = `My name is ${name} and my age is ${age}`;
- 普通字符串拼接 :
-
三元运算符 :
- 普通 if-else 语句 :
if (age >= 18) { console.log('You are old enough to vote.'); } else { console.log('You are not old enough to vote.'); }
- 三元运算符 :
const canVote = age >= 18 ? 'You are old enough to vote.' : 'You are not old enough to vote.';
- 普通 if-else 语句 :
-
null 合并运算符 :
- 普通 if-else 语句 :
const name = user?.name || 'Guest';
- null 合并运算符 :
const name = user?.name ?? 'Guest';
- 普通 if-else 语句 :
-
可选链运算符 :
- 普通 if-else 语句 :
const address = user?.address?.city || 'Unknown';
- 可选链运算符 :
const address = user?.address?.city ?? 'Unknown';
- 普通 if-else 语句 :
-
数组 includes() 方法 :
- 普通 for 循环 :
const numbers = [1, 2, 3, 4, 5]; const isThreeIncluded = false; for (let i = 0; i < numbers.length; i++) { if (numbers[i] === 3) { isThreeIncluded = true; break; } }
- includes() 方法 :
const numbers = [1, 2, 3, 4, 5]; const isThreeIncluded = numbers.includes(3);
- 普通 for 循环 :
-
数组 find() 方法 :
- 普通 for 循环 :
const numbers = [1, 2, 3, 4, 5]; const firstOddNumber = undefined; for (let i = 0; i < numbers.length; i++) { if (numbers[i] % 2 === 1) { firstOddNumber = numbers[i]; break; } }
- find() 方法 :
const numbers = [1, 2, 3, 4, 5]; const firstOddNumber = numbers.find((number) => number % 2 === 1);
- 普通 for 循环 :
-
数组 filter() 方法 :
- 普通 for 循环 :
const numbers = [1, 2, 3, 4, 5]; const evenNumbers = []; for (let i = 0; i < numbers.length; i++) { if (numbers[i] % 2 === 0) { evenNumbers.push(numbers[i]); } }
- filter() 方法 :
const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter((number) => number % 2 === 0);
- 普通 for 循环 :
-
数组 map() 方法 :
- 普通 for 循环 :
const numbers = [1, 2, 3, 4, 5]; const squaredNumbers = []; for (let i = 0; i < numbers.length; i++) { squaredNumbers.push(numbers[i] * numbers[i]); }
- map() 方法 :
const numbers = [1, 2, 3, 4, 5]; const squaredNumbers = numbers.map((number) => number * number);
- 普通 for 循环 :
-
数组 reduce() 方法 :
- 普通 for 循环 :
const numbers = [1, 2, 3, 4, 5]; let sum = 0; for (let i = 0; i < numbers.length; i++) { sum += numbers[i]; }
- reduce() 方法 :
const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
- 普通 for 循环 :
-
字符串 includes() 方法 :
- 普通 indexOf() 方法 :
const string = 'Hello, world!'; const doesIncludeWorld = string.indexOf('world') !== -1;
- includes() 方法 :
const string = 'Hello, world!'; const doesIncludeWorld = string.includes('world');
- 普通 indexOf() 方法 :
-
字符串 startsWith() 和 endsWith() 方法 :
- 普通 if-else 语句 :
const string = 'Hello, world!'; const doesStartWithHello = string.substring(0, 5) === 'Hello'; const doesEndWithWorld = string.substring(string.length - 5) === 'world';
- startsWith() 和 endsWith() 方法 :
const string = 'Hello, world!'; const doesStartWithHello = string.startsWith('Hello'); const doesEndWithWorld = string.endsWith('world');
- 普通 if-else 语句 :
-
字符串 trim() 方法 :
- 普通 replace() 方法 :
const string = ' Hello, world! '; const trimmedString = string.replace(/^\s+|\s+$/g, '');
- trim() 方法 :
const string = ' Hello, world! '; const trimmedString = string.trim();
- 普通 replace() 方法 :
-
正则表达式 :
- 普通 if-else 语句 :
const email = 'john@example.com'; const isValidEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
- 正则表达式 :
const email = '
- 普通 if-else 语句 :