js的简写技巧,你知道么?

开篇必看彩蛋:点这里

一、变量声明

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');

如果对你有帮助,可以👍收藏+关注,我们一起学前端~~