开篇必看彩蛋:点这里
一、变量声明
JavaScript简写技巧:多变量声明
// 冗余
let x;
let y = 2021;
// 简写
let x, y = 2021;
二、多变量赋值使用解构
JavaScript简写技巧:多变量赋值使用解构
// 冗余
let a, b, c;
a = 2021;
b = 1;
c = 25;
// 简写
let [a, b, c] = [2021, 1, 25];
三、if转化为三目运算符
JavaScript简写技巧:if转化为三目运算符
// 冗余
let grade = 80;
let result;
if(grade >= 90){
result = '优秀';
}else{
result = '良好';
}
// 简写
let result = grade >= 90 ? '优秀' : '良好';
四、短路运算符(||)设置默认值
JavaScript简写技巧:短路运算符(||)设置默认值
// 冗余
function fun(event) {
if (event) {
var e = event;
} else {
var e = window.event;
}
}
// 简写
function fun(event) {
var e = event || window.event;
}
五、断路运算符(&&)断路某些操作
JavaScript简写技巧:断路运算符(&&)断路某些操作
// 冗余
if (state) {
show();
}
// 简写
state && show();
六、交换变量的值
JavaScript简写技巧:交换变量的值
let x = 'Hello', y = 55;
// 冗余
const temp = x;
x = y;
y = temp;
// 简写
[x, y] = [y, x];
七、箭头函数
JavaScript简写技巧:箭头函数简化代码(注意this指向,可以看这里)
// 冗余
function add(num1, num2) {
return num1 + num2;
}
// 简写
const add = (num1, num2) => num1 + num2;
八、字符串拼接使用模板字符串
JavaScript简写技巧:字符串拼接使用模板字符串
// 冗余
console.log('You got a missed call from ' + number + ' at ' + time);
// 简写
console.log(`You got a missed call from ${number} at ${time}`);
九、多值检查
JavaScript简写技巧:if条件为或(||)运算且有多个时,可以使用数组的indexOf()或者include()
// 冗余
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
// 操作
}
// 简写1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
// 操作
}
// 简写2
if ([1, 'one', 2, 'two'].includes(value)) {
// 操作
}
十、对象键值简写
JavaScript简写技巧:对象的键和值相同时,可以只写一个
let name = '张三',
age = 19;
// 冗余
let obj = { name: name, age:age };
// 简写
let obj = { name, age };
十一、字符串转成数字
Javascript简写技巧:利用正号的隐式转换代替方法
// 冗余
let total = parseInt('453');
let average = parseFloat('42.6');
// 简写
let total = +'453';
let average = +'42.6';
十二、字符串重复若干次
Javascript简写技巧:使用 字符串.repect(次数)
而不是for循环
// 冗余
let str = '';
for(let i = 0; i < 5; i ++) {
str += 'Hello ';
}
console.log(str); // Hello Hello Hello Hello Hello
// 简写
'Hello '.repeat(5);
十三、指数幂
Javascript简写技巧:使用 ** 代替Math.pow()
// 冗余
const power = Math.pow(4, 3); // 64
// 简写
const power = 4**3; // 64
十四、向下取整
Javascript简写技巧:使用 ~~ 代替Math.floor()
// 冗余
const floor = Math.floor(6.8); // 6
// 简写
const floor = ~~6.8; // 6
十五、找到若干数值中的最大数或者最小数
Javascript简写技巧:使用Math.max()和Math.min()代替for循环
// 简写
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2
十六、For循环
Javascript简写技巧:使用for…in和for…of快速循环代替for循环
let arr = [10, 20, 30, 40];
// 冗余
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 简写 for of
for (const val of arr) {
console.log(val);
}
// 简写 for in
for (const index in arr) {
console.log(arr[index]);
}
// for in 遍历对象
let obj = {x: 20, y: 50};
for (const key in obj) {
console.log(obj[key]);
}
十七、合并数组
Javascript简写技巧:使用解构合并数组
let arr1 = [20, 30];
// 冗余
let arr2 = arr1.concat([60, 80]);
// [20, 30, 60, 80]
// 简写
let arr2 = [...arr1, 60, 80];
// [20, 30, 60, 80]
十八、深拷贝
Javascript简写技巧:深拷贝时,习惯判断每一层是否时引用类型,如果是做递归。可以使用JSON.stringify()和JSON.parse()简化
let obj = {x: 20, y: {z: 30}};
// 冗余
const makeDeepClone = (obj) => {
let newObject = {};
Object.keys(obj).map(key => {
if(typeof obj[key] === 'object'){
newObject[key] = makeDeepClone(obj[key]);
} else {
newObject[key] = obj[key];
}
});
return newObject;
}
const cloneObj = makeDeepClone(obj);
// 简写
const cloneObj = JSON.parse(JSON.stringify(obj));
// 单极引用对象 可以 使用 ...
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj};
十九、获取字符串中的字符
Javascript简写技巧:可以通过数组下标的形式获得
let str = 'https://blog.csdn.net/Kindergarten_Sir';
// 冗余
str.charAt(2); // c
// 简写
str[2]; // c
二十、多行字符
Javascript简写技巧:使用模板字符串代替字符串拼接和转义字符‘\n’的使用
// 冗余
const str1 = "Time flies.\n" + "Time is money.\n" + "Time tries all.";
// 简写
const str2 =
`Time flies.
Time is money.
Time tries all.`
二十一、利用数组的find()简化数组对象的查找
Javascript简写技巧:使用find()代替for循环查找数组内的某对象
const pets = [
{ type: 'Dog', name: 'Max'},
{ type: 'Cat', name: 'Karl'},
{ type: 'Dog', name: 'Tommy'},
]
// 冗余
function findDog(name) {
for (let i = 0; i < pets.length; ++i) {
if (pets[i].type === 'Dog' && pets[i].name === name) {
return pets[i];
}
}
}
// 简写
const pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
如果对你有帮助,可以👍收藏+关注,我们一起学前端~~