JS小技巧

Chrome console

首先,先介绍一个很是强大且好用的开发工具,那就是Chrome的console。你能够在这里写代码来验证你的想法,支持自动缩进,以及几乎全部ES6+的新语法。以后的小技巧都将用Chrome console来演示。数组

image.png

得到时间戳

比较常规获取时间戳的方式cookie

const d = new Date;
d.getTime();

介绍个更为简洁的方式工具

const timestamp = +new Date;
UTC时间转换

还在用getUTCXxxx方法获取对应的UTC时间,再拼成完整的时间?那你就out了。试试JSON.string方法吧!开发工具

const d = new Date;
const utc = JSON.stringify(d); //完整的UTC时间串

转回local呢?spa

const localTime = new Date(utc);

!注意这种转换方式中,utc时间串的末尾是一个z,若是没有,则按照local的时间来处理。code

image.png

克隆

克隆是咱们比较经常使用的功能之一,很多人喜欢引用jq或者lodash库,其实彻底没有必要,一样用JSON提供的方法就能够实现。对象

const objectA = {a: 1, b: 2};
const clonedA = JSON.parse(JSON.stringify(objectA));
clonedA.b = 3;
console.log(objectA); // {a: 1, b: 2}
console.log(clonedA); // {a: 1, b: 2}

咱们能够看到,clone以后的对象b属性被改变,可是原对象的a属性并无发生变化。
!这种克隆方式虽然简便,可是想必已经发现了问题,若是被克隆对象的属性中存在时间对象,那克隆过程当中时间对象会被转成UTC字符串,这是咱们要注意的。解决方法很简单,用上文提到的方法吧日期转成时间戳就能够了,在须要的地方再转换回来。blog

image.png

字符串转数字

用Number.parseXxxx方法把字符串转数字,看起来是否是比较麻烦。又到了+大显身手的时候了。不管是正数仍是小数,都能兼容。开发

let numberStr = "123";
+numberStr; // 123
numberStr = '123.12';
+numberStr; // 123.12

image.png

你必定猜到了,-是否是也能作一样的事?没错,-也能够转换!可是,-只能够转正数,负数的状况下会丢失符号。-慎用!
image.png字符串

数字转换字符串

直接在须要转换的数字后加上空字符串,最快捷的转换,比调用toString快不少吧。

123 + ""; // "123"

image.png

解构赋值

解构赋值分两种,解构对象和数组。

//对象
const {a, b} = {a: 1, b: 2, c: 3};
console.log(a, b); // 可直接获取到对象属性的值,不需点调用

image.png

//数组
const [m, n] = [1, 2, 3];//数组能够更长,变量会按照位置匹配
console.log(m, n);

image.png

举个实用栗子,获取cookie中的值
image.png

双数组匹配查询

实际项目常会碰到须要在两个数组匹配取值的状况,若是嵌套循环,效率低,而且代码看着不美观。利用对象的特性,能够简化复杂度。例如根据id匹配员工工资:

const employees = [
    {id: 1, name: 'Tom'},
    {id: 2, name: 'Jerry'},
    {id: 3, name: 'Jim'},
    {id: 4, name: 'Kate'}
];
const salary = [
    {id: 1, salary: 10000},
    {id: 2, salary: 20000},
    {id: 3, salary: 30000},
    {id: 4, salary: 40000}
];
const salaryObj = {};
salary.map(({id, salary}) => salaryObj[id] = salary);
employees.map(e => e.salary = salaryObj[e.id]);

image.png

set去重

数组去重很常见,用set实现,轻松加愉快!

const numbers = [1,2,3,4,1,2,3,4];
const result = [... new Set(numbers)];

image.png

更多技巧等待你们去发现!分享改变生活!

相关文章
相关标签/搜索