引言 ????
写这篇文章的原因是上周在公司前端团队的code review时，看了一个实习小哥哥的代码后，感觉一些刚入行不久的同学，对于实在我的项目中的一些js解决不是很纯熟，不足一些技巧。
因而整顿了本人开发中罕用的一些js技巧，灵便的使用，会加强你解决问题的能力，也会对你的代码简洁性有很大的改观。
数组去重 ????
失常咱们实现数组去重大多都是通过双层遍历或者indexOf的形式。
双层for循环去重
function unique(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1); j--; } } } return arr;}利用indexOf去重
function unique(arr) { if (!Array.isArray(arr)) { console.log("type error!"); return; } var array = []; for (var i = 0; i < arr.length; i++) { if (array.indexOf(arr[i]) === -1) { array.push(arr[i]); } } return array;}但其实有一种更简略的形式：利用Array.from与set去重
function unique(arr) { if (!Array.isArray(arr)) { console.log("type error!"); return; } return Array.from(new Set(arr));}这种代码的实现是不是很简洁 ????
数组转化为对象（Array to Object）????
数组转化为对象，大多数同学首先想到的就是这种办法：
var obj = {};var arr = ["1","2","3"];for (var key in arr) { obj[key] = arr[key];}console.log(obj)Output:{0: 1, 1: 2, 2: 3}然而有一种比较简单疾速的办法：
const arr = [1,2,3]const obj = {...arr}console.log(obj)Output:{0: 1, 1: 2, 2: 3}一行代码就能搞定的事件为什么还要用遍历呢？????
正当利用三元表达式 ????????????
有些场景咱们须要针对不同的条件，给变量赋予不同的值，咱们往往会采纳上面这种形式：
const isGood = true;let feeling;if (isGood) { feeling = 'good'} else { feeling = 'bad'}console.log(`I feel ${feeling}`)Output:I feel good然而为什么不采纳三元表达式呢？
const isGood = true;const feeling = isGood ? 'good' : 'bad'console.log(`I feel ${feeling}`)Output:I feel good这种也就是所谓的Single line（单行）思维，其实就是代码趋向于简洁性。
转换为数字类型（Convert to Number）????
这种是很常见的，大家用的比拟多的可能是parseInt()、Number()这种：
const age = "69";const ageConvert = parseInt(age);console.log(typeof ageConvert);Output: number;其实也能够通过+来实现转换：
const age = "69";const ageConvert = +age;console.log(typeof ageConvert);Output: number;转换为字符串类型（Convert to String）????
转换为字符串个别会用toString()、String()实现：
let a = 123;a.toString(); // '123'但也能够通过value + ""这种来实现：
let a = 123;a + ""; // '123'性能追踪 ????
如果你想测试一段js代码的执行耗时，那么你能够尝试下performance：
let start = performance.now();let sum = 0;for (let i = 0; i < 100000; i++) { sum += 1;}let end = performance.now();console.log(start);console.log(end);合并对象（Combining Objects）????
两个对象合并大家用的比拟多的可能就是Object.assign了：
const obj1 = { a: 1 }const obj2 = { b: 2 }console.log(Object.assign(obj1, obj2))Output:{ a: 1, b: 2 }其实有一种更简洁的形式：
const obj1 = { a: 1 }const obj2 = { b: 2 }const combinObj = { ...obj1, ...obj2 }console.log(combinObj)Output:{ a: 1, b: 2 }也就是通过开展操作符(spread operator)来实现。
短路运算(Short-circuit evaluation) ????
咱们能够通过&&或||来简化咱们的代码，比方：
if (isOnline) { postMessage();}// 应用&&isOnline && postMessage();// 应用||let name = null || "森林";数组扁平化（Flattening an array）????
数组的扁平化，咱们个别会用递归或reduce去实现
递归
var arr = [1, [2, [3, 4]]];function flatten(arr) { var result = []; for (var i = 0, len = arr.length; i < len; i++) { if (Array.isArray(arr[i])) { result = result.concat(flatten(arr[i])); } else { result.push(arr[i]); } } return result;}console.log(flatten(arr));reduce
var arr = [1, [2, [3, 4]]];function flatten(arr) { return arr.reduce(function (prev, next) { return prev.concat(Array.isArray(next) ? flatten(next) : next); }, []);}console.log(flatten(arr));然而es6提供了一个新办法 flat(depth)，参数depth，代表开展嵌套数组的深度，默认是1
let arr = [1, [2, 3, [4, [5]]]];arr.flat(3); // [1,2,3,4,5]求幂运算 ????
平时咱们实现指数运算，用的比拟多的应该是Math.pow()，比方求2^10：
console.log(Math.pow(2, 10));在ES7中引入了指数运算符**，**具备与Math.pow()一样的计算结果。
console.log(2 ** 10); // 输入1024浮点数转为整数（Float to Integer）????
咱们个别将浮点数转化为整数会用到Math.floor()、Math.ceil()、Math.round()。但其实有一个更快的形式：
console.log(~~6.95); // 6console.log(6.95 >> 0); // 6console.log(6.95 << 0); // 6console.log(6.95 | 0); // 6// >>>不可对正数取整console.log(6.95 >>> 0); // 6也就是应用~, >>, <<, >>>, |这些位运算符来实现取整
截断数组
如果你有批改数组长度为某固定值的需要，那么你能够试试这个
let array = [0, 1, 2, 3, 4, 5];array.length = 3;console.log(array);Output: [0, 1, 2];获取数组中的最初一项 ????
通常，获取数组最初一项，咱们用的比拟多的是：
let arr = [0, 1, 2, 3, 4, 5];const last = arr[arr.length - 1];console.log(last);Output: 5;但咱们也能够通过slice操作来实现：
let arr = [0, 1, 2, 3, 4, 5];const last = arr.slice(-1)[0];console.log(last);Output: 5;丑化你的JSON ????
日常开发中，咱们会常常用到JSON.stringify，但大家可能并不大清楚他具体有哪些参数。
他有三个参数：
json: 必须，能够是数组或Objectreplacer: 可选值，能够是数组，也能够是办法space: 用什么来进行分隔
而咱们恰好能够指定第三个参数space的值去丑化咱们的JSON：
Object.create(null) ????
在Vue和Vuex的源码中，作者都应用了Object.create(null)来初始化一个新对象。为什么不必更简洁的{}呢？
咱们来看下Object.create()的定义：
Object.create(proto, [propertiesObject]);proto:新创建对象的原型对象propertiesObject:可选。要增加到新对象的可枚举（新增加的属性是其本身的属性，而不是其原型链上的属性）的属性。
咱们比照别离通过Object.create(null)和{}创建对象的不同：
从上图能够看到，通过{}创立的对象继承了Object本身的办法，如hasOwnProperty、toString等，在新对象上能够间接应用。
而应用Object.create(null)创立的对象，除了本身属性a之外，原型链上没有任何属性。
也就是咱们能够通过Object.create(null)这种形式创立一个污浊的对象，咱们能够本人定义hasOwnProperty、toString等办法，齐全不用放心会将原型链上的同名办法笼罩掉。
拷贝数组 ????
日常开发中，数组的拷贝是一个会常常遇到的场景。其实实现数组的拷贝有很多骚技巧。
Array.slice
const arr = [1, 2, 3, 4, 5];const copyArr = arr.slice();开展操作符
const arr = [1, 2, 3, 4, 5];const copyArr = [...arr];应用 Array 构造函数和开展操作符
const arr = [1, 2, 3, 4, 5];const copyArr = new Array(...arr);Array.concat
const arr = [1, 2, 3, 4, 5];const copyArr = arr.concat();防止多条件并列 ????
开发中有时会遇到多个条件，执行雷同的语句，也就是多个||这种：
if (status === "process" || status === "wait" || status === "fail") { doSomething();}这种写法语义性、可读性都不太好。能够通过switch case或includes这种进行革新。
switch case
switch (status) { case "process": case "wait": case "fail": doSomething();}includes
const enum = ["process", "wait", "fail"];if (enum.includes(status)) { doSomething();}Object.freeze() ????
在Vue的文档中介绍数据绑定和响应时，特意标注了对于通过Object.freeze()办法的对象无奈进行更新响应。Object.freeze()办法用于解冻对象，禁止对于该对象的属性进行批改。
正是因为这种个性，所以在理论我的项目中，他有很多的实用场景。
像一些纯展现类的页面，可能存在微小的数组或对象，如果这些数据不会产生更改，那么你就能够应用Object.freeze()将他们解冻，这样Vue就不会对这些对象做setter或getter的转换，能够大大的晋升性能。
❤️ 爱心三连击
1.如果感觉这篇文章还不错，来个分享、点赞、在看三连吧，让更多的人也看到～
2.关注公众号前端森林，定期为你推送陈腐干货好文。
3.非凡阶段，带好口罩，做好集体防护。