前端超实用编码技巧

1. 获取时间戳的 时:分:秒

let timeStamp = new Date().getTime(); // 获得时间戳

new Date(timeStamp).toTimeString().slice(0,8); // '13:44:41'

2. 时分秒 前补0 （倒计时）

let hour = 9;

// bad
hour = String(hour).length > 1 ? hour : '0'+hour;

// good
hour = String(hour).padStart(2, '0');
// or
hour = ('00'+hour).slice(-2);

3. 数组或对象取值 （对象解构）

let arr = [1,2,3,4];
let obj = {
    
    name: '李白', age: 24};

// bad
let arr1 = arr[0];
let arr2 = arr.slice(1);

let name = obj.name;
let age = obj.age;


// best
let [arr1, ...arr2] = arr;
let {
    
    name, age} = obj;// name: 李白 / age: 24

在对象解构中，如果解构得到的变量名不是自己想要的，可重新赋值：

let {
    
    name:newName, age} = obj;
// newName: 李白 / age: 24

4. 数据合并 （构造数据时）

	let arr1 = [1,2];
	let arr2 = [3,4,5];

	let obj1 = {
    
    
		name: '杜甫',
		age: 23
	}
	let obj2 = {
    
    
		title: '诗圣',
		poem: '好雨知时节，当春乃发生'
	}

	// bad
	let arr = arr1.concat(arr2);
	let obj = Object.assign(obj1, obj2);

	// best
	let arr = [...arr1, ...arr2];
	let obj = {
    
    ...obj1, ...obj2};

5.接口状态码判断 (使用incldes)

	// bad
	if (xhr.state === 200 || xhr.state === 304) {
    
    
		...
	}

	// best
	if ([200,304].includes(xhr.state)) {
    
    
		...
	}

6.巧用 some、every、find. 详情点击这里

1、some()
不创建新数组
不改变原数组
判断为true则马上跳出循环并return成true, 否则 return false

2、every()
不创建新数组
不改变原数组
判断为false则马上跳出循环并return成false，否则 return true

3、find()
不创建新数组
不改变原数组
输出的是一旦 判断为true 则跳出循环输出符合条件的数组元素

7. 处理并发请求 （各请求之间没有依赖关系）

Promise.all([request1(), request2(), request3()]).then((response1, response2, response3) => {
    
    
	...
})