关于javascript:JS小技巧

Chrome console

首先，先介绍一个十分弱小且好用的开发工具，那就是 Chrome 的 console。你能够在这里写代码来验证你的想法，反对主动缩进，以及简直所有 ES6+ 的新语法。之后的小技巧都将用 Chrome console 来演示。

取得工夫戳

比拟惯例获取工夫戳的形式

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 呢？

const localTime = new Date(utc);

！留神这种转换形式中，utc 工夫串的开端是一个 z, 如果没有，则依照 local 的工夫来解决。

克隆

克隆是咱们比拟罕用的性能之一，不少人喜爱援用 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 字符串，这是咱们要留神的。解决办法很简略，用上文提到的办法吧日期转成工夫戳就能够了，在须要的中央再转换回来。

字符串转数字

用 Number.parseXxxx 办法把字符串转数字，看起来是不是比拟麻烦。又到了 + 大显神通的时候了。无论是负数还是小数，都能兼容。

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

你肯定猜到了，- 是不是也能做同样的事？没错，- 也能够转换！然而，- 只能够转正数，正数的状况下会失落符号。- 慎用！

数字转换字符串

间接在须要转换的数字后加上空字符串，最快捷的转换，比调用 toString 快很多吧。

123 + ""; //"123"

解构赋值

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

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

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

举个实用栗子，获取 cookie 中的值

双数组匹配查问

理论我的项目常会碰到须要在两个数组匹配取值的状况，如果嵌套循环，效率低，并且代码看着不美观。利用对象的个性，能够简化复杂度。例如依据 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]);

set 去重

数组去重很常见，用 set 实现，轻松加欢快！

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

更多技巧期待大家去发现！
分享扭转生存！